宫格布局实例(注意jquery的版本号要统一)2
2016-07-05 16:09
495 查看
<!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的版本号要统一)
- jQuery筛选器找父亲parent,closest,parents,parentUntil
- jQuery 判断页面元素是否存在
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法
- jQuery拉幕效果
- jQuery的观察者模式详解
- jQuery中的设计模式
- jQuery性能优化大全
- ASP.NET MVC+Spring.net+Nhibernate+EasyUI+Jquery开发案例(2)
- ASP.NET MVC+Spring.net+Nhibernate+EasyUI+Jquery开发案例(1)
- 拓展jquery.slotmachine.js,设置停止位置
- jQuery 中 attr() 和 prop() 方法的区别
- JQuery 获取checkbox被选中的值
- jQuery的Each比JS原生for循环性能慢很多的原因
- jQuery插件开发的两种方法及$.fn.extend的详解
- Jquery dom搜索之siblings()方法
- JQuery JavaScript 校验
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- 前端性能优化:jquery的each为什么比原生的for循环慢很多?
- 前端性能优化:jquery性能优化