由于提出的想法响应式设计，越来越多的网站使用这样的思想。各类大型网站如雨后春笋般涌了出来。例如：小米商城。天猫等。

至于响应式设计的概念等大家能够去百度百度，我这里就不相信解说了。直接为大家带来源代码。用Html5实现响应式的九宫格。代码例如以下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>html5响应式九宫格</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
  7. <meta name="apple-mobile-web-app-capable" content="yes" />
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  9. <meta name="format-detection" content="telephone=no" />
  10. <meta charset="utf-8" />
  11. <style type="text/css">
  12.     html, body { color:#222; font-family:Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif; margin:0; padding: 0; text-decoration: none; }
  13.     img { border:0; }
  14.     ul { list-style: none outside none; margin:0; padding: 0; }
  15.     body {
  16.         background-color:#eee;
  17.     }
  18.     body .mainmenu:after { clear: both; content: " "; display: block; }
  20.     body .mainmenu li{
  21.         float:left;
  22.         margin-left: 2.5%;
  23.         margin-top: 2.5%;
  24.         width: 30%;
  25.         border-radius:3px;
  26.         overflow:hidden;
  27.     }
  29.     body .mainmenu li a{ display:block;  color:#FFF;   text-align:center }
  30.     body .mainmenu li a b{
  31.         display:block; height:80px;
  32.     }
  33.     body .mainmenu li a img{
  34.         margin: 15px auto 15px;
  35.         width: 50px;
  36.         height: 50px;
  37.     }
  39.     body .mainmenu li a span{ display:block; height:30px; line-height:30px;background-color:#FFF; color: #999; font-size:14px; }
  41.     body .mainmenu li:nth-child(8n+1) {background-color:#36A1DB}
  42.     body .mainmenu li:nth-child(8n+2) {background-color:#678ce1}
  43.     body .mainmenu li:nth-child(8n+3) {background-color:#8c67df}
  44.     body .mainmenu li:nth-child(8n+4) {background-color:#84d018}
  45.     body .mainmenu li:nth-child(8n+5) {background-color:#14c760}
  46.     body .mainmenu li:nth-child(8n+6) {background-color:#f3b613}
  47.     body .mainmenu li:nth-child(8n+7) {background-color:#ff8a4a}
  48.     body .mainmenu li:nth-child(8n+8) {background-color:#fc5366}
  49. </style>
  50. </head>
  52. <body>
  53.     <ul class="mainmenu">
  54.         <li><a href="/" ><b><img src="data:images/tb01.png" /></b><span>关于我们</span></a></li>
  55.         <li><a href="/" ><b><img src="data:images/tb02.png" /></b><span>新闻中心</span></a></li>
  56.         <li><a href="/" ><b><img src="data:images/tb03.png" /></b><span>产品展示</span></a></li>
  57.         <li><a href="/" ><b><img src="data:images/tb04.png" /></b><span>成功案例</span></a></li>
  58.         <li><a href="/" ><b><img src="data:images/tb05.png" /></b><span>下载中心</span></a></li>
  59.         <li><a href="/" ><b><img src="data:images/tb06.png" /></b><span>团队介绍</span></a></li>
  60.         <li><a href="/" ><b><img src="data:images/tb06.png" /></b><span>人才招聘</span></a></li>
  61.         <li><a href="/" ><b><img src="data:images/tb07.png" /></b><span>联系我们</span></a></li>
  62.         <li><a href="/" ><b><img src="data:images/tb08.png" /></b><span>在线留言</span></a></li>
  63.     </ul>
  64.     <!-- 欢迎大家关注我的博客！
  66. 如有疑问,请加QQ群：135430763共同学习！
  68. -->
  69. </body>
  70. </html>

窄屏执行效果例如以下：

宽屏执行效果例如以下：

欢迎大家关注我的博客！

如有疑问,请加QQ群：135430763共同学习！

版权声明：本文博主原创文章。博客，未经同意不得转载。

Html5响应式设计与实现广场的更多相关文章

  1. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  2. HTML5、CSS3响应式设计——笔记

    1.1.响应式网页设计 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(EthanMarcotte)提出.他在A List Apart 发表了一篇开创性的 ...

  3. html5、css3及响应式设计入门

    一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...

  4. Grid – 入门必备！简单易懂的响应式设计指南

    如今,人们使用各种各样的移动设备访问网页,设计师们需要去适配不同的屏幕,让用户在都能有最佳的浏览体验.Grid 是一个简单的响应式设计指南,按照这些简单的步骤,你的就能够掌握基础的响应网页设计技巧. ...

  5. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  6. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  7. CSS3知识点整理（五）----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

  8. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  9. 为何企业钟爱H5响应式网站? html5响应式网站的优势与特点

    随着移动互联网时代的到来,H5响应式网站应运而生,并成功获得了商家.访客.搜索引擎等的青睐!越来越多的企业也选择了H5响应式建站,可为何企业钟爱H5响应式网站呢?难道传统网站不好吗?这个不能妄下结论, ...

随机推荐

  1. Android 一些错误

    android fragment里面放viewpager 嵌套fragment 报错: 解决:在adapter的构造方法里加上 super(fragment.getChildFragmentManag ...

  2. Android:主题（Theme）

    1.主题和样式的区别主要区别在 主题不能作用于单个View组建,主题应该对整个应用中的所有Activity起作用或者对指定的Activity起作用. 主题定义的格式应该是改变窗口的外观格式,例如窗口变 ...

  3. What the difference between rebuild index and re-organize index?

    avg_fragmentation_in_percent value Corrective statement > 5% and < = 30% ALTER INDEX REORGANIZ ...

  4. 【前段开发】行内元素和块级元素总结（HTML CSS）

    块级元素 <address> information on author <blockquote> long quotation <button> push but ...

  5. OpenCms创建网站的过程示意图——专用OpenCms人们刚开始学习

    很多人听说过OpenCms,我知道它的强大,只需下载并安装,最后,我们看到了久违OpenCms,我们看到了它的简单的界面,喜悦之后,但难免困惑.如何用这个东西,我如何用它来网站,从哪里开始,无从下手. ...

  6. Cocos2d-x 地图步行实现1：图论Dijkstra算法

    下一节<Cocos2d-x 地图行走的实现2:SPFA算法>: http://blog.csdn.net/stevenkylelee/article/details/38440663 本文 ...

  7. Python3.4 邮件(包含附件与中国)

    import smtplib import os from email.mime.text import MIMEText from email.mime.multipart import MIMEM ...

  8. document.getElementById()使用方法

    document.getElementById使用 语法:oElement = document .getElementById ( sID ) 參数:sID――必选项. 字符串 (String) . ...

  9. HDU4960Another OCD Patient（间隙dp,后座DP）

    Another OCD Patient Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Ot ...

  10. Easy 2048 Again - ZOJ 3802 像缩进dp

    Easy 2048 Again Time Limit: 2 Seconds      Memory Limit: 65536 KB Dark_sun knows that on a single-tr ...