CSS实例：图片导航块

认识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" type="text/css" href="..static/css/20.css">
 7 </head>
 8 <body>
 9 <div>
10     <div class="recommend">
11         <div class="img">
12         <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a>
13         <div class="dese"><a href=http://www.gzcc.cn/">学校荣誉</a></div>
14          </div>
15     <div class="img">
16         <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"></a>
17         <div class="dese"><a href=http://www.gzcc.cn/">师生获奖</a></div>
18     </div>
19     <div class="img">
20         <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"></a>
21         <div class="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">领导关怀</a></div>
22     </div>
23     <div class="img">
24         <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"></a>
25         <div class="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">数字广商</a></div>
26     </div>
27     <div class="img">
28         <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a>
29         <div class="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">画说校园</a></div>
30     </div>
31     <div class="img">
32         <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a>
33         <div class="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">视频校园</a></div>
34     </div>
35     <div class="img">
36         <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
37         <div class="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">全景校园</a></div>
38     </div>
39     <div class="img">
40         <a href="http://www.gzcc.cn/html/xueyuanrongyu/"><img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a>
41         <div class="dese"><a href=http://www.gzcc.cn/html/xueyuanrongyu/">校友风采</a></div>
42     </div>
43 </div>
44 </body>
45 </html>

 1 img{
 2             width: 300px;
 3         }
 4   div.img{
 5           border: 1px solid #cccccc;
 6           width:280px;
 7           height: auto;
 8           float: left;
 9           margin: 5px;
10       }
11       div.img img{
12           width: 100%;
13           height: auto;
14       }
15       div.desc{
16           text-align: center;
17           padding: 5px;
18       }
19       div.img:hover{
20           border: 1px solid#000000;}
21 
22         div.clearfolat{
23                clear: both;
24           solid-color: black;
25       }

posted on 2017-10-20 21:45 051刘佳铃阅读(517) 评论(0) 收藏举报