Html
    Css
    Js
html,body {
	color:#222;
	font-family:Microsoft YaHei,Helvitica,Verdana,Tohoma,Arial,san-serif;
	margin:0;
	padding:0;
	text-decoration:none;
}
img {
	border:0;
}
ul {
	list-style:none outside none;
	margin:0;
	padding:0;
}
body {
	background-color:#eee;
}
body .mainmenu:after {
	clear:both;
	content:" ";
	display:block;
}
body .mainmenu li {
	float:left;
	margin-left:2.5%;
	margin-top:2.5%;
	width:30%;
	border-radius:3px;
	overflow:hidden;
}
body .mainmenu li a {
	display:block;
	color:#FFF;
	text-align:center
}
body .mainmenu li a b {
	display:block;
	height:80px;
}
body .mainmenu li a img {
	margin:15px auto 15px;
	width:50px;
	height:50px;
}
body .mainmenu li a span {
	display:block;
	height:30px;
	line-height:30px;
	background-color:#FFF;
	color:#999;
	font-size:14px;
}
body .mainmenu li:nth-child(8n+1) {
	background-color:#36A1DB
}
body .mainmenu li:nth-child(8n+2) {
	background-color:#678ce1
}
body .mainmenu li:nth-child(8n+3) {
	background-color:#8c67df
}
body .mainmenu li:nth-child(8n+4) {
	background-color:#84d018
}
body .mainmenu li:nth-child(8n+5) {
	background-color:#14c760
}
body .mainmenu li:nth-child(8n+6) {
	background-color:#f3b613
}
body .mainmenu li:nth-child(8n+7) {
	background-color:#ff8a4a
}
body .mainmenu li:nth-child(8n+8) {
	background-color:#fc5366
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

响应式九宫格

0