码迷,mamicode.com
首页 > Web开发 > 详细

CSS实例:图片导航块

时间:2017-10-20 13:37:56      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:charset   blog   auto   www   ext   jpg   height   lang   css   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img</title>
<link rel="stylesheet" type="text/css" href="c2.css">

</head>
<body>

<div class="recommend">
<div class="img">
<a href="http://www.gzcc.cn"><img src="http://www.gzcc.cn/2016/images/yhdh/05.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://www.gzcc.cn/2016/images/yhdh/04.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://www.gzcc.cn/2016/images/yhdh/06.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://www.gzcc.cn/2016/images/yhdh/07.jpg"></a>
<div class="desc"><a href="http://www.gzcc.cn">全景校园</a></div>
</div>
</div>

</body>
</html>
img {
    width: 300px;
}

div .img {
    border: 1px solid #ccc;
    width: 180px;
    float: left;
    margin: auto;

}
div.img img {
    width: 100%;
    height: auto;
}


div.desc {
    text-align: center;
    padding: 5px;

}

div.img:hover {
    border: 1px solid #000000;
}

div.clearfloat {
    clear: both;
}

 

CSS实例:图片导航块

标签:charset   blog   auto   www   ext   jpg   height   lang   css   

原文地址:http://www.cnblogs.com/lzp963/p/7698669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!