html : 九宫格(响应式)

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="images/tb01.png" /></b><span>关于我们</span></a></li>
        <li><a href="/" ><b><img src="images/tb02.png" /></b><span>新闻中心</span></a></li>
        <li><a href="/" ><b><img src="images/tb03.png" /></b><span>产品展示</span></a></li>
        <li><a href="/" ><b><img src="images/tb04.png" /></b><span>成功案例</span></a></li>
        <li><a href="/" ><b><img src="images/tb05.png" /></b><span>下载中心</span></a></li>
        <li><a href="/" ><b><img src="images/tb06.png" /></b><span>团队介绍</span></a></li>
        <li><a href="/" ><b><img src="images/tb06.png" /></b><span>人才招聘</span></a></li>
        <li><a href="/" ><b><img src="images/tb07.png" /></b><span>联系我们</span></a></li>
        <li><a href="/" ><b><img src="images/tb08.png" /></b><span>在线留言</span></a></li>
    </ul>
</body>
</html>

 

时间: 2024-10-11 10:50:45

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

Html5响应式设计实现九宫格

自从响应式设计的理念提出以来,越来越大的网站采用这种思想.各类大型网站也如雨后春笋般的涌了出来.如:小米商城,天猫等. 至于响应式设计的概念等大家可以去百度百度,我这里就不相信讲解了.直接为大家带来源码,用Html5实现响应式的九宫格.代码如下: <!DOCTYPE html> <html> <head> <title>html5响应式九宫格</title> <meta http-equiv="Content-Type"

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

背景: 最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案. 有如下几种方案: 使用js来设置元素的高度 使用vw单位  div {width: 50vw; height: 50vw;} 使用伪元素设置padding的方式来实现正方形(也就是本次使用的方式) 实现一个正方形 1 .square 2 position: relative 3 width: 100% 4 5 &::before 6 content: '' 7 display: block 8 padding-t

自适应屏幕的jQuery响应式布局网站特效代码

jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery响应式布局_宽屏响应式焦点图片动画轮播代码 css3绘图制作css3响应式组织架构图形代码 jQuery css3图片翻转响应式布局翻转图片筛选器代码 jquery html5响应式幻灯片插件网站响应式全屏幻灯片轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jQuery html5全屏响应式幻灯片制作触屏手机幻灯片代码 jQuery图片响应式布局点击弹出图片响应式幻灯片代码 jquery 3d响应式幻灯片

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

第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于设备宽度,布局viewport等于度量viewport <meta name="viewport" content="width=device-width,initial-scale=1"> [[布局]] [水平居中] 一.text-align和inline

Html5响应式设计与实现广场

由于提出的想法响应式设计,越来越多的网站使用这样的思想.各类大型网站如雨后春笋般涌了出来.例如:小米商城.天猫等. 至于响应式设计的概念等大家能够去百度百度,我这里就不相信解说了.直接为大家带来源代码.用Html5实现响应式的九宫格.代码例如以下: <!DOCTYPE html> <html> <head> <title>html5响应式九宫格</title> <meta http-equiv="Content-Type"

CSS之响应式布局

响应式布局 外部link的max.css #left { width: 50%; height: 100px; background-color: #FF6600; float: left; } #right { width: 50%; height: 100px; background-color: #3565ff; float: left; } 外部link的min.css #left { width: 100%; height: 100px; background-color: #FF66

java企业站源码 响应式 兼容手机平板PC 主流SSM 框架 freemaker 静态引擎

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 点击:获取地址   QQ 313596790 官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 在可视区域的宽度小于 600px 的时候被应用. @media screen and

响应式:为什么百度、淘宝之类的大公司网页不使用响应式,而是独立开发一套手机页面?

响应式设计不是万能的,它有一定的好处,但也有一定的弊端.先给出结论:如果开发资源充裕,不应该考虑使用响应式设计来同时支持移动端和桌面端. 因为响应式最大的优点就是开发快.打个比方,移动端和桌面端的开发时间分别是 t,采用响应式设计写一个同时支持两者的网站可能只有 1.2t. 那为什么开发资源充足的情况下,不应该采取响应式设计来同时支持移动端和桌面端呢? 1. 响应式设计带来大量冗余代码.在移动端充斥着 webkit 内核的浏览器的时代,响应式设计的网站中却不得不带有大量兼容旧 IE 的代码.移动