- 认识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
html代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片导航</title> <link rel="stylesheet" type="text/css" href="../static/css/test1.css"> </head> <body> <h2>用户导航</h2> <hr> <div class="daohang"> <div class="img"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"> <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/">学校荣誉</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/banxuechengguo/"> <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/banxuechengguo/">师生获奖</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xygk/ldgh/"> <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/xygk/ldgh/">领导关怀</a> </div> </div> <div class="img"> <a href="http://i.gzcc.cn" target="_blank"> <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a> <div class="desc"> <a href="http://i.gzcc.cn" target="_blank">数字广商</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/"> <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">画说校园</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/shipinxiaoyuan/"> <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频广商</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html"> <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a> </div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xiaoyoufengcai/"> <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a> <div class="desc"> <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a> </div> </div> </div> <div class="clearfolat"> <div class="img"> <a href="http://www.gzcc.cn/html/xueyuanrongyu/"> <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a> </div> <div class="img"> <a href="http://www.gzcc.cn/html/banxuechengguo/"> <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xygk/ldgh/"> <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a> </div> <div class="img"> <a href="http://i.gzcc.cn" target="_blank"> <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/"> <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a> </div> <div class="img"> <a href="http://www.gzcc.cn/html/shipinxiaoyuan/"> <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a> </div> <div class="img"> <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html"> <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xiaoyoufengcai/"> <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a> </div> </div> </body> </html>
css代码如下:
.daohang{ align-content: center; padding: 20px; } img { width: 400px; } div.img { border: 1px solid #cccccc; float: left; margin: 30px; width: 260px; } div.img img { width: 100%; height: auto; } div.desc { background-color:cadetblue; text-align: center; padding: 5px; } div.img:hover { border: 1px solid #000000; } div.desc:hover { border: 1px solid #000000; } div.clearfolat { clear: both; }