Html5响应式设计实现九宫格,html5响应九宫格
自从响应式设计的理念提出以来,越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如:小米商城,天猫等。
至于响应式设计的概念等大家可以去百度百度,我这里就不相信讲解了。直接为大家带来源码,用Html5实现响应式的九宫格。代码如下:
html5响应式九宫格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}
窄屏运行效果如下:
宽屏运行效果如下:
欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!