响应式九宫格

zoukankan html css js c++ java

响应式九宫格

<!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="/"> <imgsrc="images/tb01.png"/> 关于我们</a></li> <li><ahref="/"> <imgsrc="images/tb02.png"/> 新闻中心</a></li> <li><ahref="/"> 

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

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

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

</body>

</html>

查看全文

相关阅读:
printf()参数的处理
 const关键字作用
 static的作用
 程序调试的方法
 引用与指针的区别
 内存对齐
 Android UI开发详解之ActionBar
Android ActionBar使用方法
 android的系统学习
 Activity 切换动画

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