CSS实例：图片导航块

1.认识CSS的盒子模型。

2.CSS选择器的灵活使用。

3.实例:

1.图片文字用div等元素布局形成HTML文件。

2.新建相应CSS文件，并link到html文件中。

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

<<!DOCTYPE html>
<html lang="GZC">
<head>
    <meta charset="UTF-8">
    <title>广州商学院</title>
    <link rel="stylesheet" type="text/css" href="20.css">


</head>
<body>
   <div>
         <div class="img">
             <a href="http://www.gzcc.cn/">
                 <img src="http://img4.duitang.com/uploads/item/201302/19/20130219133703_Zuvhd.gif"></a>
         <div class="desc"><a href="http://www.gzcc.cn/">校园女神</a></div>
         </div>
     </div>

     <div>
         <div class="img">
             <a href="http://www.gzcc.cn/">
                 <img src="http://img3.duitang.com/uploads/item/201502/06/20150206215109_WakYn.gif"></a>
             <div class="desc"><a href="http://www.gzcc.cn/">校园男神</a></div>
         </div>
     </div>
     <div>
         <div class="img">
             <a href="http://www.gzcc.cn/">
                 <img src="http://img5.duitang.com/uploads/item/201408/28/20140828161301_eYjHy.gif"></a>
             <div class="desc"><a href="http://www.gzcc.cn/">男生与女生</a></div>
         </div>
     </div>
     <div>
         <div class="img">
             <a href="http://www.gzcc.cn/">
                 <img src="http://img4q.duitang.com/uploads/item/201502/06/20150206214131_5efzv.gif"></a>
             <div class="desc"><a href="http://www.gzcc.cn/">校园宿舍</a></div>
         </div>
     </div>


     <div class="clearfloat">

<img src="http://img4.duitang.com/uploads/item/201302/19/20130219133703_Zuvhd.gif">
<img src="http://img3.duitang.com/uploads/item/201502/06/20150206215109_WakYn.gif">
<img src="http://img5.duitang.com/uploads/item/201408/28/20140828161301_eYjHy.gif">
<img src="http://img4q.duitang.com/uploads/item/201502/06/20150206214131_5efzv.gif">
 </div>


</body>
</html>

img{
    width:400px;
    height: 300px;
}
div.img{
    border: 1px solid cyan;
    width: 300px;
    height: 200px;
    float: left;
    margin: 5px;
}
div.img img{
    width: 100%;
    height: 80%;
}
div.desc{
    text-align: center;
    padding: 5px;
}
div.img:hover{
    border: 2px solid yellow;
}
.clearfloat{
    clear:both;
}

posted on 2017-10-20 20:47 黑木-007 阅读(93) 评论(0) 编辑收藏举报