Html5响应式设计实现九宫格

简介: <div class="markdown_views"><p>自从响应式设计的理念提出以来,越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如:<a href="http://www.mi.com/%20%E5%B0%8F%E7%B1%B3%E5%AE%98%E7%BD%91">小米商城</a>,<a href="http://www.tmall.com/%

自从响应式设计的理念提出以来,越来越大的网站采用这种思想。各类大型网站也如雨后春笋般的涌了出来。如:小米商城天猫等。
至于响应式设计的概念等大家可以去百度百度,我这里就不相信讲解了。直接为大家带来源码,用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="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>
    <!-- 欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习! -->
</body>
</html>

窄屏运行效果如下:这里写图片描述
宽屏运行效果如下:这里写图片描述
欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!

目录
相关文章
|
22天前
|
移动开发 HTML5 容器
HTML5响应式网页设计——核心技能考核示例(用于2022年11月H5考核)
HTML5响应式网页设计——核心技能考核示例(用于2022年11月H5考核)
23 0
|
2月前
|
前端开发 JavaScript
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
44 0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
|
移动开发 前端开发 JavaScript
宽屏html5网络科技有限公司官网单页面响应式模板
宽屏html5网络科技有限公司官网单页面响应式模板
80 0
宽屏html5网络科技有限公司官网单页面响应式模板
|
JavaScript
用HTML+CSS跟简单的js操作完成响应式星巴克首页
用HTML+CSS跟简单的js操作完成响应式星巴克首页
348 0
用HTML+CSS跟简单的js操作完成响应式星巴克首页
|
前端开发 iOS开发
实训-利用HTML+CSS做响应式项目网页
实训-利用HTML+CSS做响应式项目网页
103 0
实训-利用HTML+CSS做响应式项目网页
|
前端开发 JavaScript
HTML+CSS+JAVASCRIPT实现——响应式登录注册表单
本篇文章,主要讲解一下如何创建一个响应式登录注册表单
146 0
HTML+CSS+JAVASCRIPT实现——响应式登录注册表单
|
前端开发
HTML+CSS实现——响应式卡片页面
本篇文章,主要讲解一下如何创建一个响应式卡片页面
431 0
HTML+CSS实现——响应式卡片页面
|
Web App开发 移动开发 前端开发
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
|
前端开发 JavaScript
使用 HTML 和 CSS 创建响应式猫猫图片库
使用 HTML 和 CSS 创建响应式猫猫图片库
143 0
使用 HTML 和 CSS 创建响应式猫猫图片库
|
Web App开发 移动开发 前端开发
20+免费精美响应式Html5 网站模板03(含源码)
20+免费精美响应式Html5 网站模板(含源码)
445 0
20+免费精美响应式Html5 网站模板03(含源码)

相关产品

  • 云迁移中心