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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ͼƬ</title>
        <link rel="stylesheet" type="text/css" href="../static/mox.css">
    </head>
    
    <body>
    <div  >
        <div class="img">
        <a href=""><img src="http://att.bbs.duowan.com/forum/201602/26/160915qtq52bq2qqz0za9s.jpg" ></a>
        <div class="desc" ><a href="www.gzcc.cn"  >秒速五厘米</a></div>
        </div>
        <div class="img">
            <a href=""><img src="http://att.bbs.duowan.com/forum/201602/26/160915qtq52bq2qqz0za9s.jpg" ></a>
            <div class="desc"><a href="www.4399.com" >秒速五厘米</a></div>
        </div>
    </div>
    <div class="cleaerfloat">
        <img src="http://att.bbs.duowan.com/forum/201602/26/160915qtq52bq2qqz0za9s.jpg" ><br>
        <img src="http://att.bbs.duowan.com/forum/201602/26/160915qtq52bq2qqz0za9s.jpg" ><br>
        <img src="http://att.bbs.duowan.com/forum/201602/26/160915qtq52bq2qqz0za9s.jpg" ><br>
        <img src="http://att.bbs.duowan.com/forum/201602/26/160915qtq52bq2qqz0za9s.jpg" ><br>
        <img src="http://att.bbs.duowan.com/forum/201602/26/160915qtq52bq2qqz0za9s.jpg" >
    </div>
    
    
    </body>
    </html>>
    

      

    img{
        500px;
    }
    .img{
        border: 1px solid #ccc;
         200px;
        float: left;
        margin:5px;
    
    }
    div.desc{
        text-align: center;
        padding: 5px;
    }
    div.img img{
         100%;
        height: auto;
    
    }
    div.img:hover{
        border: 1px solid #000000;
    }
    .cleaerfloat{
        clear:both;
    }
    

      

  • 相关阅读:
    反转链表
    linux shell 读取配置文件的一个例子
    python 笔记碎片
    工作笔记整理
    linux服务器之间文件互传
    工作软件收集
    linux同步时间
    利用linux的df和du命令查看文件和目录的内存占用
    windows常用快捷键
    SUSE 12 安装 python3.6
  • 原文地址:https://www.cnblogs.com/zheng01/p/7698419.html
Copyright © 2011-2022 走看看