CSS实例:图片导航块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="../static/css/ma.css">

</head>
<body>
<div class="recommond">
    <div class="img">
        <a href="http://www.gzcc.cn"><img src="http://image.xinmin.cn/2011/12/31/20111231060817376987.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn">校园风光</a></div>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn"><img
                src="http://edu.kunming.cn/index/content/attachement/jpg/site323/20100201/00016c41a8060cd0ddea1f.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn">画说校园</a></div>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn"><img
                src="http://pic1.bbzhi.com/dongmanbizhi/mengxiangyufeixiangdeshijiegongqijunhejibolijingdiandonghuazuopinkuanpingbizhi/cg_ghibli_hayao_miyazaki_31775_9.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn">校友风采</a></div>
    </div>
    <div class="img">
        <a href="http://www.gzcc.cn"><img src="http://p4.so.qhimgs1.com/t0130ade2d81f8c3244.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn">领导关怀</a></div>
    </div>

</div>
</body>

</html>
img {
    width: 180px;
}
div.img{
border:1px solid #cccccc;
     float: left;
      margin: 5px;
      width:180px;
    height: 200px;
  }
 div.img img{
     width:100%;
     height:100%;
 }
 div.desc{
     text-align: center;
     padding: 5px;
 }
 div.img:hover{
      border:1px solid #000000;
 }

 

posted @ 2017-10-20 12:49  008马佳槟  阅读(104)  评论(0)    收藏  举报