html 响应式布局 九宫格,响应式九宫格

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

}