响应式九宫格

时间：2019-11-12 10:34:21 阅读：79 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html>

<html>

<head>

<title>html5响应式九宫格</title>

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>

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

</body>

</html>

响应式九宫格

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)