talk is cheap, show you the code :

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

</body>

</html>

　

html : 九宫格(响应式)的更多相关文章

  1. 如何使用CSS绘制一个响应式的矩形

    背景: 最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案. 有如下几种方案: 使用js来设置元素的高度 使用vw单位  div {width: 50vw; height: 50 ...

  2. Html5响应式设计与实现广场

    由于提出的想法响应式设计,越来越多的网站使用这样的思想.各类大型网站如雨后春笋般涌了出来.例如:小米商城.天猫等. 至于响应式设计的概念等大家能够去百度百度,我这里就不相信解说了.直接为大家带来源代码 ...

  3. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  4. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  5. 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  6. 网站就必须用响应式布局吗？MVC视图展现模式之移动布局

    本文先引入给读者一个自己研究的机会,下次深入说明一下: 废话不多说,直接上图 新建一个mvc的项目 在视图里面添加一个移动端视图 正常访问一下 Bootstrap自带的响应式的方式(页面代码并没有改变 ...

  7. 响应式图片菜单式轮播，兼容手机，平板，PC

    昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...

  8. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  9. iOS开发--Swift RAC响应式编程初探

    时间不是很充足, 先少说点, RAC的好处是响应式编程, 不需要自己去设置代理委托, target, 而是主要以信息流(signal), block为主, 看到这里激动吧, 它可以帮你监听你的事件, ...

随机推荐

  1. vim 命令图解

    vim 命令,vim是一个很好的编辑工具,下面为大家介绍一下vim入门基本命令. 方法/步骤   1 [vim 命令-启动vimtutor]:执行命令:vimtutor.vimtutor是vim使用入 ...

  2. Java中的不同遍历方式

    已知一个Person类: public class Person implements Comparable<Person>{ String name; String id; public ...

  3. 《Android高级进阶》读书笔记

    <Android高级进阶>是据我所知的市面上唯一一本技术工具书,比较的高大全,作者的目的是为了对全领域有个初步的概念 No1: 在Android系统中,拥有事件传递处理能力的类有以下三种 ...

  4. 【RAY TRACING THE REST OF YOUR LIFE 超详解】 光线追踪 3-6 直接光源采样

    Chapter7 Sample Lights Directly  Preface 今天我们来讲这个还算牛逼的技术——直接光源采样 之前我们提到过,在2-7 前两篇我们也提到要减少噪点,就是图片上的黑点 ...

  5. CMake结合Visual Studio中开发Qt应用程序注意事项

    Qt工程管理 个人比较偏爱于使用CMake来管理C++工程,因为只要编写一个CMakeLists.txt文件,就可以在Windows和Mac上生成各自的IDE工程.在Windows上, CMake自然 ...

  6. Oracle date-time

    Name Description ADDDATE() Add time values (intervals) to a date value ADDTIME() Add time CONVERT_TZ ...

  7. npm的packagejson文件

    一.name,npm包名name和version字段是package.json文件中最重要的字段,都是必须的字段,如果你的npm包没有指定这两个字段,将无法被安装.name和version字段被假定组 ...

  8. 【DWM1000】 code 解密8一 TAG接收blink response 信号

    在分析这个部分前,目前我看到DWM1000 的资料,data可以分为blink和一般无线数据,后面有内容我们再扩充, 上面我们已经看到接收到blink触发的事件为 case SIG_RX_BLINK ...

  9. 主机ssh升级到6.7以上版本后，使用jsch jar包ssh连接不上报Algorithm negotiation fail问题的解决办法

    ssh连接问题是由于主机ssh中缺少与jsch jar包匹配的加密算法导致,jsch jar包的默认加密算法貌似是diffie-hellman-group-exchange-sha1. 在目标主机ss ...

  10. C++ Primer 与“类”有关的注意事项总结

    C++ 与"类"有关的注意事项总结(一) 1. 除了静态 static 数据成员外,数据成员不能在类体中被显式地初始化. 例如 : class First { int memi = ...