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

至于响应式设计的概念等大家能够去百度百度，我这里就不相信解说了。直接为大家带来源代码。用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. 基于 Groovy 的自动化构建工具 Gradle 入门（转）

    本人工作之初没有使用自动化构建,后来敏捷了,开始使用 Ant - 完全面向过程的定义步骤,不进行依赖管理.再发展到 Maven,面向对象的方式管理工程,有了依赖的管理,JAR 包统一从中央仓库获得,保 ...

  2. js创建下载文件

    function downloadFile(fileName, content){ var aLink = document.createElement('a'); var blob = new Bl ...

  3. 基于.net开发chrome核心浏览器【二】

    原文:基于.net开发chrome核心浏览器[二] 一: 上一篇的链接: 基于.net开发chrome核心浏览器[一] 二: 相关资源介绍: chrome Frame: 让IE有一颗chrome的心, ...

  4. VBA怎样统计同一类型的数据的总和

    今天是2014-11-01 是周末,忙了一周了,最终能够闲下来了.想起近期工作用到的VBA的一个场景,结合VBA的数组,所以就想试试看.结果还好.出来了.这年头,又玩起了VB了,经过多时才接受了VB的 ...

  5. java反射中Method类invoke方法的使用方法

    package com.zsw.test; import java.lang.reflect.Method;import java.lang.reflect.InvocationTargetExcep ...

  6. 运行一个android程序，直接访问某个网站

    package android.com.youtube; import android.app.Activity; import android.content.Intent; import andr ...

  7. Setup Git Server in CentOS 6.3

    0. Environment: Server machine: CentOS 6.3 x86 Client machine: Windows 10 Pro x86_64 1. Install ssh ...

  8. KMP算法---字符串匹配

    算法细节详见点击打开链接和点击打开链接 #include <stdio.h> #include <stdlib.h> #define N 7 #define M 15 void ...

  9. （摘录）SQL Server 存储过程

    文章摘录:http://www.cnblogs.com/hoojo/archive/2011/07/19/2110862.html SQL Server 存储过程 Transact-SQL中的存储过程 ...

  10. 如何解决Android SDK无法下载Package的问题(.net)

    有些用户在安装好Android SDK后,打开Android SDK Manager下载API时一直显示“Done loading packages”却迟迟不能前进,界面显示的Package空空如也. ...