Html5响应式设计实现九宫格

kmr30879abz

Html5响应式设计实现九宫格
自从响应式设计的理念提出以来，越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如：小米商城，天猫等。
　　至于响应式设计的概念等大家可以去百度百度，我这里就不相信讲解了。直接为大家带来源码，用Html5实现响应式的九宫格。代码如下：

　　!DOCTYPE html
　　html
　　head
　　titlehtml5响应式九宫格/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
　　img
　　ul
　　body {
　　background-color:#eee;
　　}
　　body .mainmenu:after
body .mainmenu li{
　　float:left;
　　margin-left: 2.5%;
　　margin-top: 2.5%;
　　width: 30%;
　　border-radius:3px;
　　overflow:hidden;
　　}
body .mainmenu li a
　　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
body .mainmenu li:nth-child(8n+1)
　　body .mainmenu li:nth-child(8n+2)
　　body .mainmenu li:nth-child(8n+3)
　　body .mainmenu li:nth-child(8n+4)
　　body .mainmenu li:nth-child(8n+5)
　　body .mainmenu li:nth-child(8n+6)
　　body .mainmenu li:nth-child(8n+7)
　　body .mainmenu li:nth-child(8n+8)
　　/style
　　/head
body
　　ul class=”mainmenu”
　　lia href=”/” bimg src=”images/tb01.png” //bspan关于我们/span/a/li
　　lia href=”/” bimg src=”images/tb02.png” //bspan新闻中心/span/a/li
　　lia href=”/” bimg src=”images/tb03.png” //bspan产品展示/span/a/li
　　lia href=”/” bimg src=”images/tb04.png” //bspan成功案例/span/a/li
　　lia href=”/” bimg src=”images/tb05.png” //bspan下载中心/span/a/li
　　lia href=”/” bimg src=”images/tb06.png” //bspan团队介绍/span/a/li
　　lia href=”/” bimg src=”images/tb06.png” //bspan人才招聘/span/a/li
　　lia href=”/” bimg src=”images/tb07.png” //bspan联系我们/span/a/li
　　lia href=”/” bimg src=”images/tb08.png” //bspan在线留言/span/a/li
　　/ul
　　!– 欢迎大家关注我的博客!如有疑问，请加QQ群：135430763共同学习! –
　　/body
　　/html


窄屏运行效果如下：


20150715191547.jpg (79.78 KB, 下载次数: 73)
下载附件
Html5响应式设计实现九宫格
2015-10-20 10:55 上传




　　
　　宽屏运行效果如下：


20150715191533.jpg (86.23 KB, 下载次数: 35)
下载附件
Html5响应式设计实现九宫格
2015-10-20 10:55 上传