zoukankan      html  css  js  c++  java
  • 作业16-CSS实例:图片导航块

    <!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;
    }

  • 相关阅读:
    Python元组、列表、字典
    测试通过Word直接发布博文
    Python环境搭建(windows)
    hdu 4003 Find Metal Mineral 树形DP
    poj 1986 Distance Queries LCA
    poj 1470 Closest Common Ancestors LCA
    poj 1330 Nearest Common Ancestors LCA
    hdu 3046 Pleasant sheep and big big wolf 最小割
    poj 3281 Dining 最大流
    zoj 2760 How Many Shortest Path 最大流
  • 原文地址:https://www.cnblogs.com/hegui/p/7698981.html
Copyright © 2011-2022 走看看