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

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

<!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 .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}

</style>

</head>

<body>

    <ul class="mainmenu">

        <li><a href="/" ><b><img src="data:images/tb01.png" /></b><span>关于我们</span></a></li>

        <li><a href="/" ><b><img src="data:images/tb02.png" /></b><span>新闻中心</span></a></li>

        <li><a href="/" ><b><img src="data:images/tb03.png" /></b><span>产品展示</span></a></li>

        <li><a href="/" ><b><img src="data:images/tb04.png" /></b><span>成功案例</span></a></li>

        <li><a href="/" ><b><img src="data:images/tb05.png" /></b><span>下载中心</span></a></li>

        <li><a href="/" ><b><img src="data:images/tb06.png" /></b><span>团队介绍</span></a></li>

        <li><a href="/" ><b><img src="data:images/tb06.png" /></b><span>人才招聘</span></a></li>

        <li><a href="/" ><b><img src="data:images/tb07.png" /></b><span>联系我们</span></a></li>

        <li><a href="/" ><b><img src="data:images/tb08.png" /></b><span>在线留言</span></a></li>

    </ul>

    <!-- 欢迎大家关注我的博客！

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

-->

</body>

</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. linux下登陆mysql失败

    一.提示由于没有密码,拒绝登陆 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) 1 ...

  2. notepad扩展搜索,正则搜索

    Dos和windows采用回车+换行CR/LF表示下一行, 0d 0a 两个字节表示而UNIX/Linux采用’\n’换行符LF表示下一行(ASCII代码是10),0a一个字节表示MAC OS系统则采 ...

  3. Thinkphp中field和getField

    在数据库查询操作中field和getField方法是使用最频繁的.可是两者是有一定差别的.在这里记录下. field方法是用于定义要查询的字段(支持字段排除). getField方法获取数据表中的某个 ...

  4. Tier和Layer

    在实际开发工作中.我们经常听到"架构设计"和"架构师"这种名词,它并不新奇和神奇,可是却非常少有人对"架构"有全面的了解和认识.更谈不上掌握 ...

  5. 最简单的Java框架

    框架framework的目的是定义骨架式方案,处理各种相同的底层细节:而开发人员使用框架时,能够依照自己的需求实现自己的功能--仅仅须要填入自己的东西/flesh. 最简单的框架,类似于JUnit,它 ...

  6. 【PhotoShop】采用PS让美丽的咖啡泡沫

    稀土一杯咖啡,如何你不能击败张(常苦黑咖啡饮料实在受不了! ) 得到例如以下图 看着还不错,但是总感觉空空荡荡的,所以就拿来PS练手了.终于效果图例如以下: 以下讲下制作过程: 首先是给照片加下咖啡泡 ...

  7. Linux从零到高手的进阶心得(转)

    从2006年毕业至今,从事IT行业已经接近8个年头. 一路走来有很多心路历程和技术心得都写在了51CTO的博客中,不少文字现在看来已显稚嫩,但是这正是我真实的成长之路.这八年,从最基础的网络管理员开 ...

  8. 使用AngularJS开发下一代Web应用

    原版的:https://github.com/edagarli/AngularJSWeb 来源书:https://github.com/shyamseshadri/angularjs-book 版权声 ...

  9. WCF配置文件

    因为要上传较大的图片,WCF传递数组的默认的最大数组16KB就不够了.以下讲解配置内容. 服务端配置 这里一个WCF项目中有1个服务,配置文件如下(位于system.serviceModel标签中): ...

  10. TCP/IP详细说明--滑模、拥塞窗口、慢启动、Negle算法

    TCP的数据流大致能够分为两类,交互数据流与成块的数据流. 交互数据流就是发送控制命令的数据流.比方relogin,telnet.ftp命令等等.成块数据流是用来发送数据的包,网络上大部分的TCP包都 ...