博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

CSS实例：图片导航块

Posted on 2017-10-20 11:37  占鹏  阅读(156)  评论(0)    收藏  举报 
<!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;
}