zoukankan      html  css  js  c++  java
  • 宫格布局实例(注意jquery的版本号要统一)2

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <style>
    * {margin:0; padding:0; list-style: none; }
    .main { position: relative;}
    .clear { clear: both; height: 0px; font-size: 0px; visibility: hidden; line-height: 0;}
    .clearfix:after{ clear: both; content: "200B"; display: block; height: 0;}
    .clearfix{ *zoom: 1;}
    .center { text-align: center;}
    .none { display: none;}
    .fl { float: left;}
    .fr { float: right;}
    .main li { box-sizing: border-box; 23.828125%; max- 23.828125%; height: 100px; background: #fdc; margin-right: 1.5625%; margin-bottom: 1.5625%; font-size: 30px; text-align: center;
    line-height: 100px; }

    </style>
    <title>六宫格布局的CSS写法</title>
    <script src="../../js/jquery-3.0.0.min.js"></script>
    </head>
    <body>
    <div class="main">
    <ul class="clearfix borderBox">
    <li class="fl">A</li>
    <li class="fl">B</li>
    <li class="fl">C</li>
    <li class="fl">D</li>
    <li class="fl">F</li>
    <li class="fl">G</li>
    <li class="fl">H</li>
    <li class="fl">I</li>
    <li class="fl">G</li>
    </ul>
    </div>
    </body>
    <script>
    $(function () {
    $('.borderBox li').each(function() {
    var num = $(this).index() + 1;
    if ( num > 3 && num % 4 == 0) {
    $(this).css({'margin-right': '0','background':'#000','color':'#fff'});
    }
    });
    })
    </script>
    </html>
  • 相关阅读:
    mssql like的效率
    【编辑器开发】基本js指令
    QQ菜单OUTLOOK风格
    oracle exp/imp命令详解
    javascript读取xml
    在c#中调用windows脚本的方法
    oracle常用命令(转)
    有效创建Oracle dblink的两种方式
    oracle 绑定变量(bind variable)
    Oracle备份与恢复
  • 原文地址:https://www.cnblogs.com/darkterror/p/5644035.html
Copyright © 2011-2022 走看看