首页 > 代码库 > html : 九宫格(响应式)
html : 九宫格(响应式)
talk is cheap, show you the code :
<!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="http://www.mamicode.com/" ><b><img src="http://www.mamicode.com/images/tb01.png" /></b><span>关于我们</span></a></li> <li><a href="http://www.mamicode.com/" ><b><img src="http://www.mamicode.com/images/tb02.png" /></b><span>新闻中心</span></a></li> <li><a href="http://www.mamicode.com/" ><b><img src="http://www.mamicode.com/images/tb03.png" /></b><span>产品展示</span></a></li> <li><a href="http://www.mamicode.com/" ><b><img src="http://www.mamicode.com/images/tb04.png" /></b><span>成功案例</span></a></li> <li><a href="http://www.mamicode.com/" ><b><img src="http://www.mamicode.com/images/tb05.png" /></b><span>下载中心</span></a></li> <li><a href="http://www.mamicode.com/" ><b><img src="http://www.mamicode.com/images/tb06.png" /></b><span>团队介绍</span></a></li> <li><a href="http://www.mamicode.com/" ><b><img src="http://www.mamicode.com/images/tb06.png" /></b><span>人才招聘</span></a></li> <li><a href="http://www.mamicode.com/" ><b><img src="http://www.mamicode.com/images/tb07.png" /></b><span>联系我们</span></a></li> <li><a href="http://www.mamicode.com/" ><b><img src="http://www.mamicode.com/images/tb08.png" /></b><span>在线留言</span></a></li> </ul></body></html>
html : 九宫格(响应式)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。