- 认识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>简书</title>
<link rel="stylesheet" href="static/css/jianshu.css">
</head>
<body>
<div class="recommend">
<div class="img" >
<a href="https://book.douban.com/subject/27113877/"><img src="http://upload.jianshu.io/publication/image/4742f417-b2ba-4f12-b9bd-0114a7b767b8" alt=""></a>
<div class="desc"><a href="https://book.douban.com/subject/27113877/">不要跟踪我</a></div>
</div>
<div class="img"><a href="https://book.douban.com/subject/27077802/"><img src="http://upload.jianshu.io/publication/image/33abb8ca-5961-44df-9092-37dfbb5d733f" alt=""></a>
<div class="desc"><a href="https://book.douban.com/subject/27077802/">梦想不会辜负努力的你</a></div>
</div>
<div class="img">
<a href="https://book.douban.com/subject/27065409/"><img src="http://upload.jianshu.io/publication/image/826c06ca-f35d-40bc-83b1-920696b317ed" alt=""></a>
<div class="desc"><a href="https://book.douban.com/subject/27065409/">总要为梦想疯狂一次</a></div>
</div>
<div class="img">
<a href="https://book.douban.com/subject/27008382/"><img src="http://upload.jianshu.io/publication/image/f6760b8b-619e-428f-940e-357526fca93c" alt=""></a>
<div class="desc"><a href="https://book.douban.com/subject/27008382/">世界和它的悲欢</a></div>
</div>
</div>
<div class="clearfloat">
<a href="https://book.douban.com/subject/26980212/"><img src="http://upload.jianshu.io/publication/image/7588641c-66c9-46c9-be68-3bebc60e1c17" alt=""></a>
<a href="https://book.douban.com/subject/26943302/"><img src="http://upload.jianshu.io/publication/image/f4dd85fa-6ded-49f2-92c9-1a2049910625" alt=""></a>
</div>
</body>
</html>
img {
width: 300px;
}
div.img{
border: 1px solid #ccc;
width: 180px;
float: left;
margin: 5px;
}
div.img img{
width: 100%;
height: auto;
}
div.desc{
text-align: center;
}
div.img:hover{
border: 1px solid black;
}
div.clearfloat{
clear: both;
}
