响应式九宫格

<!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.mainmenuliaimg{ margin:15px auto 15px; width:50px; height:50px; }body.mainmenuliaspan{ display:block; height:30px; line-height:30px;background-color:#FFF; color:#999; font-size:14px; }

body.mainmenuli:nth-child(8n+1){background-color:#36A1DB} body.mainmenuli:nth-child(8n+2){background-color:#678ce1} body.mainmenuli:nth-child(8n+3){background-color:#8c67df} body.mainmenuli:nth-child(8n+4){background-color:#84d018}

body.mainmenuli:nth-child(8n+5){background-color:#14c760} body.mainmenuli:nth-child(8n+6){background-color:#f3b613} body.mainmenuli:nth-child(8n+7){background-color:#ff8a4a} body.mainmenuli:nth-child(8n+8){background-color:#fc5366}

</style>

</head>

<body> <ulclass="mainmenu"> <li><ahref="/"> <b><imgsrc="images/tb01.png"/> </b><span>关于我们</span></a></li> <li><ahref="/"> <b><imgsrc="images/tb02.png"/> </b><span>新闻中心</span></a></li> <li><ahref="/"> <b>

<imgsrc="images/tb03.png"/> </b><span>产品展示</span></a></li> <li><ahref="/"> <b><imgsrc="images/tb04.png"/> </b><span>成功案例</span></a></li> <li><ahref="/"> <b><imgsrc="images/tb05.png"/> </b><span>下载中心</span></a></li>

<li><ahref="/"> <b><imgsrc="images/tb06.png"/> </b><span>团队介绍</span></a></li> <li><ahref="/"> <b><imgsrc="images/tb06.png"/> </b><span>人才招聘</span></a></li>

<li><ahref="/"> <b><imgsrc="images/tb07.png"/> </b><span>联系我们</span></a></li> <li><ahref="/"> <b><imgsrc="images/tb08.png"/> </b><span>在线留言</span></a></li> </ul> 

</body>

</html>

响应式九宫格

原文：https://www.cnblogs.com/zxadndm/p/11839784.html