Html5响应式设计与实现广场

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

版权声明:本文博主原创文章。博客,未经同意不得转载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399625.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工作问题日志

1. 获取用户请求的路径&#xff1a;HttpServletRequest request (HttpServletRequest) req;String servletPath request.getServletPath(); 2. 相对通用的读文件流的方法&#xff08;Windows 和 Linux上都可以用&#xff09;&#xff1a;拿到流&#xff0c;然后再去读流中的内…

wordpress 每段首行空两格

p {text-indent:2.1em;} 注&#xff1a; 在文章页&#xff0c;添加样式即可。

Java简单计算器

Java简单计算器转载于:https://www.cnblogs.com/wangprince2017/p/7654542.html

【j360-boot】Spring-boot系列三(崩溃模式,不是你崩就是电脑崩)

2019独角兽企业重金招聘Python工程师标准>>> j360-boot spring-boot入门工程之j360-boot&#xff1a;&#xff08;欢迎star、fork&#xff09; https://github.com/xuminwlt/j360-boot spring-boot官方地址 http://projects.spring.io/spring-boot/ 【j360-boot】Sp…

layui-弹出层中如何关闭窗口

https://blog.csdn.net/laiyuan999/article/details/80341756 var index layer.open(); layer.close(index); //此时你只需要把获得的index&#xff0c;轻轻地赋予layer.close即可

C++Objective-c

1.两种语言的指针和引用 C中引用和指针是两个不同的概念 Objective底层是用C实现的,其对象访问机制是C中的指针访问对象,所以如果直接访问Objective-C中的变量是需要用对象名->变量名 如果在OC中定义了property a这里生成的知识get和set方法,外界并不能直接访问a,因为a默认是…

裸眼3D全攻略3:拍摄3D—瞳距、镜距、视角偏转与空间感

http://sd89.blog.163.com/blog/static/356041322014112532958728/ 3D图片的拍摄&#xff0c;与平面有着全新的不同要求&#xff0c;那就是空间感的表现。 简单来说&#xff0c;空间感是由两条视线分别从左右不同的视角&#xff0c;各自获取物体左右两面的不同信息交汇而产生的…

【教学类-42-02】20231224 X-Y 之间加法题判断题2.0(按2:8比例抽取正确题和错误题)

作品展示&#xff1a; 0-5&#xff1a; 21题&#xff0c;正确21题&#xff0c;错误21题42题 。小于44格子&#xff0c;都写上&#xff0c;哪怕输入2:8&#xff0c;实际也是5:5 0-10 66题&#xff0c;正确66题&#xff0c;错误66题132题 大于44格子&#xff0c;正确66题抽取44*…

(原)用pixi.js 实现 方块阵点击后原地自转效果

源码 各位&#xff0c;请教一个问题&#xff0c;我这个还有BUG&#xff0c;我是想实现&#xff0c;点击一下可以 停止转动&#xff0c;然后再点一下重新转动。而不是一直加速&#xff0c;有没有什么好办法&#xff1f; PS:问题已经解决&#xff0c;谢谢评论的大神Antineutrino …

datatables 增、删、查、改

前提: datatable 定义 var table $(#example).DataTable({"ajax": "donor/book_donation_data.php",responsive: true,//data: data,columns: [{data: id},{data: donor},{data: book_name},{data: author},{data: publishing_time},{data: price},{data…

一位中国婆婆的自述[转]

小孙子Toby已经3岁了。在美国待了三个月&#xff0c;洋媳妇Susan教育孩子的方法&#xff0c;令我这个中国婆婆大开眼界。每天早上&#xff0c;Toby醒来后&#xff0c;Susan把早餐往餐桌上一放&#xff0c;就自顾自地忙去了。Toby会自己爬上凳子&#xff0c;喝牛奶&#xff0c;吃…

Webpack使用指南

Webpack 是当下最热门的前端资源模块化管理和打包工具。 什么是webpack Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔&#xff0c;等到实际需要的时候再异…

学习笔记找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID....

解决 找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID. private void DisplayHotBooks() { //获取所有的书分类信息 IList<Category> list CategoryManager.GetAllCategories(); int i 0; foreach (Category …

JS--数组和字典

JS--数组和字典 定义数组 var my_array new Array(); 一、JS数组 JavaScript中的数组类似于Python的列表   https://www.cnblogs.com/bigberg/p/9237856.html 1 a [11,22,33,44] 常见功能&#xff1a;  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 obj.length 数…

程序猿值得看的几个技术网站(记录)

最近发现一批很优秀的网站&#xff0c;他们有的属于个人有的属于组织&#xff0c; 但是他们网站中所记录的内容&#xff0c;可以供很多软件开发的人员学习&#xff0c;不同于国内一线的一些网站&#xff0c;这些网站所记录中的内容&#xff0c;精致&#xff0c;简洁&#xff01…

基本数据类型了解

BCD码&#xff1a; 用4位二进制数来表示1位十进制数中的0~9这10个数码&#xff0c;简称BCD码&#xff0c;即BCD代码。Binary-Coded Decima&#xff0c;简称BCD&#xff0c;称BCD码或二- 十进制代码&#xff0c;亦称二进码十进数。是一种二制的数字编码形式&#xff0c;用二进制…

wordpress去掉自带的logo或者左侧栏的菜单方法

https://www.jb51.net/cms/144566.html 去掉logo或者左侧栏的菜单&#xff0c;防止被改掉。 在使用模板下的functions.php下修改 复制代码 代码如下: function my_edit_toolbar($wp_toolbar) { $wp_toolbar->remove_node(wp-logo); //去掉Wordpress LOGO $wp_toolba…

vue-cli创建项目

vue学习资料 Vue.js官网&#xff08;https://vuejs.org.cn/&#xff09; Vue-cli (https://github.com/vuejs/vue-cli) Vue-rescource (https//github.com/vuejs/vue-rescource) Vue-router (https://github.com/vuejs/vue-router) better-scroll (https://github.com/ustbhuan…

通过webbrowser实现js与winform的相互调用

为什么80%的码农都做不了架构师&#xff1f;>>> 1客户端页面 <!DOCTYPE html><html xmlns"http://www.w3.org/1999/xhtml"> <head><meta charset"utf-8" /><title></title> </head> <body>&l…

Visual Studio 2012中使用GitHub

前言 一直以来都想使用Git来管理自己平时积累的小代码&#xff0c;就是除了工作之外的代码了。有时候自己搞个小代码&#xff0c;在公司写了&#xff0c;就要通过U盘或者网盘等等 一系列工具进行Copy&#xff0c;然后回家才能继续在原来的基础上作业。Copy来Copy去的麻烦不说&a…