- 认识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
- CSS文件中定义样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片管理</title> <link rel="stylesheet" href="../static/css/bb.css"> </head> <body> <div class="recommend"> <div class="img"> <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn/">学校荣誉</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn/">师生获奖</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn/">领导关怀</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn/">数字广商</a></div> </div> </div> <div class="clearfloat"> <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a><br> <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"><br> <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"><br> <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"><br> </div> </body> </html>
img {
300px;
}
div.img {
border: 1px solid #ccc;
180px;
float: left;
margin: 5px;
}
div.img img {
100%;
height: auto;
}
div.desc{
text-align: center;
padding: 5px;
}
div.clearfloat{
clear: both;
}
结果：
