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

</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. c语言实现面向对象OOC

    这种问题比较锻炼思维,同时考察c和c++的掌握程度.如果你遇到过类似问题,此题意义自不必说.如果用c实现c++,主要解决如何实现封装,继承和多态三大问题,本文分两块说. 1.封装 // Example ...

  2. 51nod 1099 任务执行顺序 (贪心算法)

    题目:传送门. 题意:中文题. 题解:r[i]-o[i]值大的先进行.反证法:如果大的后进行,会导致空间增大,所以一定大的是先进行. #include <iostream> #includ ...

  3. DB2中错误信息说明

    DB2错误信息SQLCODE SQLSTATE (按sqlcode排序) .分类: db2数据库 2012-10-19 11:35 2942人阅读 评论(0) 收藏 举报 db2sql存储table数 ...

  4. MVC3.0 EF增删改查的封装类

    本人亲身使用EF CodeFirst,因为增删改查都是使用EF内置的一些方法,我想把它封装到一个类调用就行了.结合网上的资料和自己的整理,若有不对的地方望斧正,感激不尽.直接上代码吧.我就用新闻的增删 ...

  5. [Android Pro] Gradle Tips#2-语法

    referece to : http://blog.csdn.net/lzyzsd/article/details/46935063 在第一篇博客中,我讲解了关于tasks和构建过程中task的不同阶 ...

  6. August 18th 2016 Week 34th Thursday

    Comedy is acting out optimism. 喜剧就是将乐观演绎出来. Being optimistic or pessimistic, that is all about your ...

  7. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（五） 之 加好友，加群流程，消息管理和即时消息提示的实现

    前言 前前一篇留了个小问题,在上一篇中忘了写了,就是关于LayIM已经封装好的上传文件或者图片的问题.对接好接口之后,如果上传速度慢,界面就会出现假死情况,虽然文件正在上传.于是我就简单做了个图标替代 ...

  8. NYOJ题目10505C？5S？

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJ/CAIAAAAbDelhAAAgAElEQVR4nO3dPXLbOhfG8XcT7r0Q11

  9. NYOJ题目840吃花生

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAKdCAIAAABeSGNbAAAgAElEQVR4nO3dPXKkuvv28f8mnHshjn

  10. php的错误级别

    error_reporting() 用于设置 PHP 的报错级别并返回当前级别.(PHP 4, PHP 5) 函数能够在运行时设置 error_reporting 指令. PHP 有诸多错误级别,使用 ...