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

  • 相关阅读:
    VSCode创建自定义代码段
    生命不息,折腾不止 ~ 旧PC改造之家庭影音
    万物互联之~网络编程基础篇
    PyCharm创建自定义代码段(JetBrains系列通用)
    VSCode设置Tab键为4个空格
    Jupyter-Notebook服务器自定义密码
    Jupyter ~ 像写文章般的 Coding (附:同一个ipynb文件,执行多语言代码)
    centos下使用nohup
    在centos中创建nginx启动脚本
    查看centos中的用户和用户组
  • 原文地址:https://www.cnblogs.com/iamzhuangyuan/p/7698012.html
Copyright © 2011-2022 走看看