CSS实例：图片导航块 - 016李云基

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

posted on 2017-10-20 09:57 016李云基阅读(105) 评论(0) 编辑收藏举报

刷新页面返回顶部