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

  • 相关阅读:
    Request
    HTTP
    mysql递归查询函数
    redis 6.0.9配置文件详解
    java对数据进行加密、解密
    java Base64编码、解码
    nginx基础使用
    linux指令笔记
    Spring 常用注解粗陋看法
    docker 已有容器修改容器配置
  • 原文地址:https://www.cnblogs.com/hegui/p/7698981.html
Copyright © 2011-2022 走看看