作业16-CSS实例：图片导航块

最新推荐文章于 2024-12-16 20:55:14 发布

weixin_34413103

最新推荐文章于 2024-12-16 20:55:14 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hegui/p/7698981.html

该页面展示了广州商学院的学校荣誉、师生获奖情况、领导关怀时刻及数字化建设成果。通过图片链接介绍了学校的重要成就和发展概况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pic</title>
    <link rel="stylesheet" href="../static/css/tk.css">
</head>
<body>
<div class="recommend">
    <div class="img">
        <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/01.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/02.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/03.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/08.jpg"></a>
        <div class="desc"><a href="http://www.gzcc.cn/">数字广商</a></div>
    </div>
</div>

<div class="clearfloat">
        <a href="http://www.gzcc.cn/"><img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg"></a><br>
        <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg"><br>
        <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg"><br>
        <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"><br>
</div>
</body>
</html>

img {
    width: 300px;
}
div.img {
    border: 1px solid #ccc;
    width: 150px;
    float: left;
    margin: 5px;
}
div.img img {
    width: 100%;
    height: auto;
}
div.desc{
    text-align: center;
    padding: 5px;
}
div.clearfloat{
    clear: both;
}