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的版本号要统一）的更多相关文章

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

    <!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 4873 ZCC Loves Intersection（JAVA、大数、推公式）

    在一个D维空间,只有整点,点的每个维度的值是0~n-1 .现每秒生成D条线段,第i条线段与第i维度的轴平行.问D条线段的相交期望. 生成线段[a1,a2]的方法(假设该线段为第i条,即与第i维度的轴平 ...

  2. VS VA助手补丁覆盖目录

    以VS2010为例. VA_X.dll 复制到以下文件夹内,覆盖原文件. WinXP系统: %USERPROFILE%\Local Settings\Application Data\Microsof ...

  3. Cannot change version of project facet Dynamic Web Module to 3.0

    背景描述: 最近在开发项目时,老是报错说:Project is not Dynamic Web Module 3.0.右击项目选择属性进行修改时出现以下错误: 这让我很是恼火,后来终于找到了万能的解决 ...

  4. HTML标记语法之列表元素

    1.无序列表 <ul> <li type=”项目符号类型”></li> <li type=”项目符号类型”></li> <li typ ...

  5. 电脑不能浏览网页but能登录qq，解决方案总结

    电脑能登录qq,但是不能浏览网页,解决方法总结 [注]:仅供参考,属个人经验 今天早晨起来,电脑突然只能登录qq,不能上网了,从来没有遇到这种问题的我开始各种百度方法,各种尝试,最终成功解决了问题 首 ...

  6. Redis事件管理（一）

    Redis统一的时间管理器,同时管理文件事件和定时器, 这个管理器的定义: #if defined(__APPLE__) #define HAVE_TASKINFO 1 #endif /* Test ...

  7. Redis内存管理（二）

    上一遍详细的写明了Redis为内存管理所做的初始化工作,这篇文章写具体的函数实现. 1.zmalloc_size,返回内存池大小函数,因为库不同,所以这个函数在内部有很多的宏定义,通过具体使用的库来确 ...

  8. JAVA addShutdownHook测试

    public static void main(String[] args) { System.out.println("1111111111"); try { Thread.sl ...

  9. iOS真机调试

    备注:本阶段之前的修改配置文件.准备脚本等,只需要做一次.但本阶段的操作,对每个需要真机调试的工程都要做一遍. ① 禁用Xcode自动的签名操作 将工程配置“Build Settings”中所有的Co ...

  10. JDBC之SqlHelper

    SqlHelper工具类如下: import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.Resul ...