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


    1. 认识CSS的 盒子模型。
    2. CSS选择器的灵活使用。
    3. 实例:
      1. 图片文字用div等元素布局形成HTML文件。
      2. 新建相应CSS文件,并link到html文件中。
      3. CSS文件中定义样式
        1. div.img:border,margin,width,float
        2. div.img img:width,height
        3. div.desc:text-align,padding
        4. div.img:hover:border
        5. div.clearfloat:clear
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>img</title>
        <link rel="stylesheet" type="text/css" href="../static/css/i.css">
    
    </head>
    <body>
    
    <div class="recommend">
        <div class="img">
            <a href="http://www.gzcc.cn"><img src="http://img.zcool.cn/community/013bea58db839da801219c777e2827.gif"></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://img.zcool.cn/community/013e3a58db839da801219c7714f34c.gif"></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://img.zcool.cn/community/0102fd58db839ea801219c774b8624.gif"></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://img.zcool.cn/community/01701158db839ea801219c77232e16.gif"></a>
            <div class="desc"><a href="http://www.gzcc.cn">学生风采</a></div>
        </div>
    </div>
    
    <div class="clearfloat">
        <img src="http://img.zcool.cn/community/01ec0058db83a8a801219c77daff8a.gif" >
    </div>
    </body>
    </html>
    img {
         300px;
    }
    
    div .img {
        border: 1px solid #ccc;
         150px;
        float: left;
        margin: 5px;
    
    }
    div.img img {
         100%;
        height: auto;
    }
    
    
    div.desc {
        text-align: center;
        padding: 5px;
    
    }
    
    div.img:hover {
        border: 1px solid #000000;
    }
    
    div.clearfloat {
        clear: both;
    }

  • 相关阅读:
    Vue-dialog(弹框组件)
    Vue封装select下拉组件
    RAID总结
    消息队列
    存储
    算法开始
    硬件杂记
    要看的
    关于kernel的疑问,不解
    杂技
  • 原文地址:https://www.cnblogs.com/iamzhuangyuan/p/7698012.html
Copyright © 2011-2022 走看看