如何快速开发html5响应式网页

步骤1 创建空白的HTML 5模版

首先，我们创建一个空白的模版，代码很简单，如下所示：

复制代码

步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：

复制代码

读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码

1）首先往标题中增加如下代码：

　Simple HTML5 Template

复制代码

2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：

Home About Parent Page Child

One Child Two with child Child One Child

Two Child Three Child Three

Contact

复制代码

3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：

This is a title for post

Richard KS 20th March 2013 Tutorials HTML5, CSS3

and Responsive 10 Comments Lorem

Ipsum is simply dummy text of the printing and typesetting industry

Lorem Ipsum has been the industry's standard dummy text ever since the

1500s

复制代码

4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，元素有两种使用方法：

被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

代码如下：

Categories Category 1 Category 2

Parent Category Child One Child Two

Grandchild One Grandchild Two Grandchild Three

Child Three Category 3

Text Lorem Ipsum is simply dummy

text of the printing and typesetting industry

复制代码

5）加上最后的标签，代码为：

Copyright@ 2013 HTML5com Privacy Policy - About Us

复制代码

步骤4 增加CSS样式

首先创建一个空白的样式，如下：

[/code] 然后在http://necolasgithubcom/normalizecss/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {

font-family: arial, sans-serif;

font-size: 100%; / best for all browser using em /

padding:0;

margin:0;

}

, html { line-height: 16em; }

article img { width:auto; max-width:100%; height:auto; }

sidebar a, article a, header a, footer a { color: #C30; }

header a { text-decoration: none; }

#wrapper {

font-size: 08em; / 13px from 100% global font-size /

max-width: 960px; / standard 1024px wide /

margin: 0 auto;

}

/ css for /

header { padding: 1em 0; margin: 0px; float: left; width: 100%;

}

header hgroup { width: 100%; font-weight:normal; }

/ css for /

nav

{ display: block; margin: 0 0 2em; padding: 0px;

float: left; width: 100%; background-color: #181919;

}

nav ul ul {display: none;}

nav ul li:hover > ul {display: block;}

nav

ul { padding: 0; list-style: none; position:

relative; display: inline-table; z-index: 9999;

margin: 0px; float: left; width: 100%;

}

nav ul:after {content: ""; clear: both; display: block;}

nav ul li {float: left;}

nav ul li:hover a {color: #fff;}

nav

ul li a { display: block; padding: 1em; font-size:

1125em; color: #ccc; text-decoration: none;

margin: 0px; background-color: #000; border-right: 1px

solid #333;

}

nav ul li:last-of-type a {border-right: 1px solid transparent !important;}

nav

ul ul { background: #5f6975; border-radius: 0px;

padding: 0; position: absolute; top: 100%; width:

auto; float: none;

}

nav ul li:hover { background: #5f6975; color: #FFF;

}

nav ul ul li a:hover { background-color: #4b545f;

}

nav ul ul li {

float: none;

border-bottom: 1px solid #444240;

position: relative;

}

nav ul ul li a {

padding: 05em 1em;

font-size: 1em;

width:10em;

color: #fff;

}

nav ul ul ul {

position: absolute; left: 100%; top:0;

}

/ css for /

sectioncontent { width: 70%; float:left; }

content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }

article entry { clear:both; padding: 0 0 1em; }

h1post-title { font-size: 18em; margin:0; padding:0;}

entrypost-meta { color: #888; }

entrypost-meta span { padding: 0 1em 0 0; }

entrypost-content { font-size: 1125em; margin:0; padding:0;}

/ css for /

asidesidebar { width: 25%; float:right; }

asidesidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;

}

asidesidebar

ul li { width:100%; margin: 0px 0px 2em; padding:

0px; float: left; list-style: none;

}

asidesidebar ul li ul li { margin: 0px 0px 02em; padding: 0px;

}

asidesidebar

ul li ul li ul li { margin: 0px; padding: 0px 0px 0px

1em; width: 90%; font-size: 09em;

}

asidesidebar

ul li h3widget-title { width:100%; margin: 0px;

padding: 0px; float: left; font-size: 145em;

}

/ css for /

footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;

}

footer footer-left { width: 45%; float:left; text-align:left; }

footer footer-right { width: 45%; float:right; text-align:right; }

复制代码

步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：

/ ipad 768px /

@media only screen and (min-width:470px) and (max-width:770px){

body { background-color: red; } #wrapper { width:96%; font-size: 06875em; }

sectioncontent, asidesidebar { width:100%; }

}

/ iphone 468px /

@media only screen and (min-width:270px) and (max-width:470px){

body { background-color: yellow; } #wrapper { width:96%; font-size: 06875em; }

sectioncontent, asidesidebar { width:100%; }

}

复制代码

步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：

0

复制代码

201298到2015325一共 897天，百度浪漫程序员 html5心形表白出来的网页上 计算得出。

201298  晚上 8点  到 2015325 早上 9点 32 回答时间

      被一个程序员表白真的是一件特别搞笑的事情。因为我的对象就是一个程序员，记得当时被一个程序员表白的是时候，我都有点愣了，他给我发了一个程序说让我点开，我就特别纳闷，是一个什么样的程序，不会是帮忙砍一刀吧，事实也不是，系统会出现一系列简单操作，指导你一步一步地操作，按照提示操作。最后屏幕就出现了一个“我爱你”520这一些列操作很简单就完成了，事后才发现他的这些举动都是经过自己一些列的设计和代码的敲定才会这个小程序的程序，这也是他表达爱的一种方式。在我看来是一件用自己的智慧创造出来的一种浪漫式的爱。

      程序员的表白方式有很多种，但是只要是自己的喜欢的人，任何一种都是你喜欢的方式。因为任何一种方式都会使你快乐。

程序员的表白

近日，一个00后程序员写代码让女朋友甚是感到暖心，这个女朋友天天喜欢网购各种各样的产品，有时也会为了买的便宜用一些优惠券之类的，但是因为网购优惠的方式太多，难免会有些疏漏，做一些无用功夫，很懊恼。于是程序员男友就给女友做了一个小软件，专门检测这个产品什么时间点最便宜，小程序就会弹出一个小爱心，表示最便宜事宜买，女朋友就觉得男朋友好浪漫。

不得不说，这样的做法确实能让女朋友开心，这个女朋友说男朋友平时就喜欢敲代码和玩一些游戏，没有其他的爱好了，他看到女孩子有时的烦恼，就想办法给他解决了这个问题，真的很暖心，很懂她。谁说程序员男生都比较古板，木讷，看看这个男孩子还真的是懂得怎样讨女孩子欢心，他的重点在于解决了女孩子的烦恼，并表达的直观，浪漫。

我们印象里面程序员的生活就是两点一线，很中规中矩的，没有什么多余的想法，他们只是对代码感兴趣，而这个女孩子的男朋友却让人对程序员另眼相待了。其实之前就有一个事例，一个程序员男朋友惹了自己的女朋友不开心，于是想发设发的道歉，女朋友就是不理，最后程序员在电脑上做了一个道歉的小程序，最后把女友逗的不得不原谅，电脑才正常，真的是很搞笑。

其实两个相爱的人，有能力爱的人都是会浪漫的，只看那个人是否有心去逗你开心，如果不是特别爱，他可能就没有那么多心思去维护感情，而深爱的人才愿意花心思去解你的忧愁。程序员的生活和工作给人刻板的印象，当然懂得取悦自己的爱人也大有人在。