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