- 认识CSS的 盒子模型。
- CSS选择器的灵活使用。
- 实例:
- 图片文字用div等元素布局形成HTML文件。
- 新建相应CSS文件，并link到html文件中。
- CSS文件中定义样式
- div.img：border,margin,width,float
- div.img img：width，height
- div.desc：text-align,padding
- div.img:hover：border
- 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;
}
