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

  • 相关阅读:
    上传图片至fastdfs显示连接超时
    Linux上安装maven
    multipartFile.getOriginalFilename();不能获取原文件名称,也就是含有路径名
    /usr/bin/ld: cannot find -lfdfsclient
    linux开放22端口
    Ajax上传file出现的bad request问题
    easyui combobox实现下拉自动提示补全功能
    js格式化时间
    codeforces 780B
    codeforces 61 D 115 A
  • 原文地址:https://www.cnblogs.com/hegui/p/7698981.html
Copyright © 2011-2022 走看看