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. OpenCV-Python 中文教程（搬运）目录

    OpenCV-Python 中文教程 OpenCV官方教程中文版(For Python) OpenCV2-Python-Tutorials 段力辉 译 说明:搬运自linux公社pdf文件,粗略搬运, ...

  2. vue文字跑马灯效果

    https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...

  3. gevent实现基于epoll和协程的服务器

    1. 导gevent中的猴子补丁,来把原来python自带的socket变成基于epoll的socket(解除阻塞问题) 代码: # from gevent import monkey;monkey. ...

  4. Scala-Unit6-final/type关键字、样例类&样例对象

    一.关键字 1.final关键字 用final修饰的类:不能被继承 用final修饰的方法:不能被重写 注意:(1)在Scala中变量不需要用final修饰,因为val与var已经限制了变量是否可变 ...

  5. Git 日常工作中使用的命令记录

    前言   这篇文章主要是介绍我在使用Git中的有一些忘记了,但是很重要的命令. 20190424 Git 历史信息 username 和 email 更改 git config alias.chang ...

  6. [洛谷P1063][NOIP2006]能量项链

    区间DP模板题 题目描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一颗 ...

  7. 说说nginx，iis，apache，tomcat

    一.nginx ngnix是反向代理服务器,它是代理,本身并不执行,是个传话筒,把用户提交的请求转发给web服务器,再把web服务器的结果转发给用户.为了提高性能,启用反向代理,实际的web服务器可以 ...

  8. 网络篇：linux下select、poll、epoll之间的区别总结

    select.poll.epoll之间的区别总结 select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪 ...

  9. SourceTree 文件被锁异常

    公司用的代码管理工具是 Git 客户端用的是 SourceTree ,前些天 SourceTree 发生文件被锁异常,导致文件无法上传,下载,今天特意做个记录 异常: 解决方法:

  10. [JOISC2014]スタンプラリー

    [JOISC2014]スタンプラリー 题目大意: 有\(n(n\le3000)\)个车站,另有一个起点站和终点站,所有车站排成一条链,相邻两个车站之间的距离为\(t\).每个车站都有一个上行站台.一个 ...