- 认识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
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>img</title> 6 <link rel="stylesheet" href="../static/css/1.css" type="text/css"> 7 </head> 8 <body> 9 <div class="recommend"> 10 <div class="img"> 11 <img src="http://p18.qhimg.com/bdr/__85/d/_open360/fengjing117/ABC0cbd.jpg"> 12 <div class="desc"><a href="https://baike.so.com/doc/5409765-5647802.html">瀑布</a></div> 13 </div> 14 <div class="img"> 15 <img src="http://pic.58pic.com/58pic/13/87/72/73t58PICjpT_1024.jpg"> 16 <div class="desc"><a href="https://jingyan.baidu.com/article/76a7e409a7da37fc3b6e15f5.html">小船</a></div> 17 </div> 18 <div class="img"> 19 <img src="http://pic1.win4000.com/wallpaper/f/5462f445e47ff.jpg"> 20 <div class="desc"><a href="http://www.ivsky.com/tupian/humian_t3137/">湖面</a></div> 21 </div> 22 <div class="img"> 23 <img src="http://pic.58pic.com/58pic/11/06/93/49R58PICdvg.jpg"> 24 <div class="desc"><a href="http://www.ivsky.com/tupian/humian_t3137/">夕阳</a></div> 25 </div> 26 </div> 27 </body> 28 </html>
1 img { 2 width: 300px; 3 } 4 5 div.img { 6 width: 180px; 7 height: 200px; 8 border: 1px; 9 solid-color: red; 10 float: left; 11 margin: 5px; 12 } 13 14 div.img img { 15 width: 100%; 16 height: auto; 17 } 18 19 div.desc { 20 text-align: center; 21 padding: 5px; 22 } 23 24 div.img:hover { 25 border: 1px; 26 solid-color: black; 27 }
