1. <!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; width: 23.828125%; max-width: 23.828125%; height: 100px; background: #fdc; margin-right: 1.5625%; margin-bottom: 1.5625%; font-size: 30px; text-align: center;
            line-height: 100px;  }
  2.  
  3. </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>

宫格布局实例（注意jquery的版本号要统一）2的更多相关文章

  1. 宫格布局实例（注意jquery的版本号要统一）

    <!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...

  2. iOS--九宫格布局

    [self rankWithTotalColumns: andWithAppW: andWithAppH:]; //九宫格布局 - (void)rankWithTotalColumns:(int)to ...

  3. 前端js实现九宫格模式抽奖（多宫格抽奖）

    介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. <! ...

  4. Html代码seo优化最佳布局实例讲解

    搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. 1.<!–木庄网络博客–> 这个东西是些页面注释的,可以在这里加我的& ...

  5. Android自定义多宫格解锁控件

    在此之前,一直在想九宫格的实现方法,经过一个上午的初步研究终于完成了一个简单的N*N的宫格解锁组件,代码略显粗糙,仅仅做到简单的实现,界面等后期在做优化,纯粹是学习的目的,在算法上有点缺陷,如果有错误 ...

  6. JavaCV 视频滤镜（LOGO、滚动字幕、画中画、NxN宫格）

    其实,在JavaCV中除了FFmpegFrameGrabber和FFmpegFrameRecorder之外,还有一个重要的类,那就是FFmpegFrameFilter. FFmpegFrameFilt ...

  7. php创建新用户注册界面布局实例

    php创建新用户注册界面布局实例 <!DOCTYPE> <html> <head> <title>Load page</title> < ...

  8. css-九宫格自适应的实现

    高度自适应使用padding 或 padding-bottom + 百分比来实现: 宽度自适应使用width + 百分比来实现. 下面是实现九宫格自适应的代码: <!DOCTYPE html&g ...

  9. HTML5 Canvas中9宫格的坑

    近期小鸟情人游戏上了手机qq空间,一个3岁的游戏来了她的第二春.为了能有更好的表现,我们对其进行了一次改版. 改版当中一项就是对原来的弹出框样式进行改进.将大块木板材质改成纯色(边框为圆角金属材质)样 ...

随机推荐

  1. HDU 2602 Bone Collector WA谁来帮忙找找错

    Problem Description Many years ago , in Teddy’s hometown there was a man who was called “Bone Collec ...

  2. 【leetcode】Insert Interval(hard)★

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  3. 安装Odoo9出现的could not execute command "lessc"问题

    解决方案: apt-get install node-less

  4. CodeSign error: code signing is required for product type Application in SDK iOS

    在真机测试的时候往往会突然出现这样一个错误,code signing is required for product type 'Application' in SDK 'iOS 7.0'  ,就是说 ...

  5. mac os 下打开FTP服务器

    mac下一般用smb服务来进行远程文件访问,但要用FTP的话,高版本的mac os默认关掉了,可以用如下命令打开: sudo -s launchctl load -w /System/Library/ ...

  6. Qt 获取cmd运行结果

    http://www.cnblogs.com/gisbeginner/archive/2012/12/08/2809063.html BOOL ExecDosCmd(){ #define EXECDO ...

  7. 史上最全web.xml配置文件元素详解

    一.web.xml配置文件常用元素及其意义预览 <web-app> <!--定义了WEB应用的名字--> <display-name></display-na ...

  8. Sqlserver 创建到sqlserver 的链接服务器

    exec sp_addlinkedserver 'SN_MASTER_SRV', '', 'SQLOLEDB ', '129.223.252.173' exec sp_addlinkedsrvlogi ...

  9. NYOJ之茵茵的第一课

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtQAAAJ/CAIAAADXlNOKAAAgAElEQVR4nO3dsVLjOsMG4P8m6LkQ2u

  10. Delphi按下F1不能出现帮助文档的解决方法

    不光是Delphi,Windows里面所有的之所以无法打开.hlp帮助文档的问题都可以使用以下的方法来解决 问题:情况是这样的,不是打不开hlp帮助文档,按F1出现的是Windows的帮助.而Delp ...