CSS实例：图片导航块

时间：2017-10-20 20:46:35 阅读：289 评论：0 收藏：0 [点我收藏+]

认识CSS的盒子模型。
CSS选择器的灵活使用。
实例:
1. 图片文字用div等元素布局形成HTML文件。
2. 新建相应CSS文件，并link到html文件中。
3. CSS文件中定义样式
  1. div.img：border,margin,width,float
  2. div.img img：width，height
  3. div.desc：text-align,padding
  4. div.img:hover：border
  5. div.clearfloat：clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>planting</title>
    <link rel="stylesheet" type="text/css" href="../css/20.css">
</head >
<body >
<div>
    <div class="img">
        <a href="https://image.baidu.com/">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478402762&di=2b0f5c6a6abc0e4fefc4e5e89b11c078&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_2_2941484322D2560692402_23.jpg">
        </a>
        <div class="desc"><a href="https://image.baidu.com/">商量</a> </div>
    </div>
    <div class="img">
        <a href="https://image.baidu.com/">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4071790924,2914289697&fm=27&gp=0.jpg">
        </a>
        <div class="desc"><a href="https://image.baidu.com/">启程</a> </div>
    </div>
     <div class="img">
        <a href="https://image.baidu.com/">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993164&di=21005bc9d7cbc500390e5b62c3b859a7&imgtype=0&src=http%3A%2F%2Fwapfile.desktx.com%2Fpc%2F161122%2Fbigpic%2F5832b76c05a7e.jpg">
        </a>
        <div class="desc"><a href="https://image.baidu.com/">邂逅</a> </div>
    </div>
    <div class="img">
        <a href="https://image.baidu.com/">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993165&di=b9eae51cddded4391be080ea9f53f95c&imgtype=0&src=http%3A%2F%2Fscdn.file1.gk99.com%2Fphoto%2F2013-06%2F2013-06-17%2F137144975944849.jpg">
        </a>
        <div class="desc"><a href="https://image.baidu.com/">相约</a> </div>
    </div>
</div>


<div class="clearfloat">

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478402762&di=2b0f5c6a6abc0e4fefc4e5e89b11c078&imgtype=0&src=http%3A%2F%2Fm.qqzhi.com%2Fupload%2Fimg_2_2941484322D2560692402_23.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4071790924,2914289697&fm=27&gp=0.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993164&di=21005bc9d7cbc500390e5b62c3b859a7&imgtype=0&src=http%3A%2F%2Fwapfile.desktx.com%2Fpc%2F161122%2Fbigpic%2F5832b76c05a7e.jpg">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508478993165&di=b9eae51cddded4391be080ea9f53f95c&imgtype=0&src=http%3A%2F%2Fscdn.file1.gk99.com%2Fphoto%2F2013-06%2F2013-06-17%2F137144975944849.jpg">
</div>
</body>
</html>

img{
    width: 300px;
}
div.img{
    border: 1px solid seagreen;
    width: 180px;
    float: left;
    margin: 5px;
}
div.img img{
    width: 100%;
    height: auto;
}
div.desc{
    text-align: center;
    padding: 5px;
}
div.img:hover{
    border:1px solid blue;
}
.clearfloat{
    clear: both;

}

技术分享

CSS实例：图片导航块

原文：http://www.cnblogs.com/dujiacheng789/p/7698704.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)