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

至于响应式设计的概念等大家能够去百度百度，我这里就不相信解说了。直接为大家带来源代码。用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. atitit查询表改动表字段没反应--解锁锁定的表

    atitit查询表改动表字段没反应--解锁锁定的表 查询表改动表字段没反应 要是使用gui 没反应,最好使用cmd 方式,不卉不个gui 锁上.. ALTER TABLE t_mb_awardweix ...

  2. 【第四篇章-android平台MediaCodec】推断是否支持硬件解码码

    public boolean isSupportMediaCodecHardDecoder(){ boolean isHardcode = false; //读取系统配置文件/system/etc/m ...

  3. python学习笔记之11：图像用户界面

    这里会介绍如何创建python程序的图像用户界面(GUI),也就是那些带有按钮和文本框的窗口等.目前支持python的所谓“GUI工具包”的有很多,本文简要介绍最成熟的跨平台pythonGUI工具包- ...

  4. hdu1005 Number Sequence（寻找循环节）

    主题链接: pid=1005">huangjing 题意: 就是给了一个公式,然后求出第n项是多少... 思路: 题目中n的范围实在是太大,所以肯定直接递推肯定会超时,所以想到的是暴力 ...

  5. 朴素UNIX它-Linux CFS注视

    该系列产品,被称为纯UNIX,但它也包含各种类别UNIX该系统的细节,自从完成我多年的学习笔记本系列文章,分析了各种UNIX,类UNIX思想和情感的实现. 这篇文章是比较短.只是分析Linux CFS ...

  6. android笔记6——intent的使用

    今天挑出一节专门来说一下使用intent和intentfilter进行通信. 场景:一个Activity启动还有一个Activity. 前面已经讲了Fragment的切换,Fragment顾名思义是基 ...

  7. 基于Cocos2dx开发卡牌游戏_松开，这三个国家

    1.它实现了动态读取地图资源.地图信息被记录excel桌格.假设你想添加地图,编者excel导入后CocoStudio数据编辑器,然后出口到Json档,到项目的Resource文件夹下. 2.SGFi ...

  8. Ubuntu 如何重新安裝 Unity ?

    阿舍在刪除 Qt 的時候下錯指令,結果,就把 Unity 給移除掉了,雖然,阿舍從此就知道 Unity 和 Qt 有不分離的關係,不過,就沒有Unity可以用了,這樣阿舍要試東西就不是很方便了哩 ! ...

  9. struts2在&lt;s:select&gt;用动态标签

    后台传过来的必要性userlist成为一个下拉菜单.因此,认为使用<s:select>.但设置了很久设置的属性,在这个下跌. JSP代码: <s:select label=" ...

  10. 移动web：图片切换(焦点图)

    在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...