<!DOCTYPE html><
html
><
head
><
title
>html5响应式九宫格</
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"
/>
<
meta
name
=
"apple-mobile-web-app-capable"
content
=
"yes"
/>
<
meta
name
=
"apple-mobile-web-app-status-bar-style"
content
=
"black"
/>
<
meta
name
=
"format-detection"
content
=
"telephone=no"
/>
<
meta
charset
=
"utf-8"
/><
style
type
=
"text/css"
>
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}
</
style
>
</
head
>
<
body
>
<
ul
class
=
"mainmenu"
>
<
li
><
a
href
=
"/"
><
b
><
img
src
=
"images/tb01.png"
/></
b
><
span
>关于我们</
span
></
a
></
li
>
<
li
><
a
href
=
"/"
><
b
><
img
src
=
"images/tb02.png"
/></
b
><
span
>新闻中心</
span
></
a
></
li
>
<
li
><
a
href
=
"/"
><
b
><
img
src
=
"images/tb03.png"
/></
b
><
span
>产品展示</
span
></
a
></
li
>
<
li
><
a
href
=
"/"
><
b
><
img
src
=
"images/tb04.png"
/></
b
><
span
>成功案例</
span
></
a
></
li
>
<
li
><
a
href
=
"/"
><
b
><
img
src
=
"images/tb05.png"
/></
b
><
span
>下载中心</
span
></
a
></
li
>
<
li
><
a
href
=
"/"
><
b
><
img
src
=
"images/tb06.png"
/></
b
><
span
>团队介绍</
span
></
a
></
li
>
<
li
><
a
href
=
"/"
><
b
><
img
src
=
"images/tb06.png"
/></
b
><
span
>人才招聘</
span
></
a
></
li
>
<
li
><
a
href
=
"/"
><
b
><
img
src
=
"images/tb07.png"
/></
b
><
span
>联系我们</
span
></
a
></
li
>
<
li
><
a
href
=
"/"
><
b
><
img
src
=
"images/tb08.png"
/></
b
><
span
>在线留言</
span
></
a
></
li
>
</
ul
>
</
body
>
</
html
>