创建简单的响应式HTML5模版

HTML5目前发展势头良好，已经逐渐得到大部分浏览器不同程度的支持。许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页。与此同时，目前基于响应式的网页设计理念也得到了广泛的认同，开发者在开发基于HTML 5的网页时，如果能创建响应式的页面，则会增色不少，特别是能适配各类移动终端。在本文中，读者将学习到如何创建一个简单的响应式HTML 5模版。本文的读者需要有一点HTML 5的基础知识。

创建良好的HTML 5模版的特征有：

新的特性应该只是基于HTML、CSS、DOM和Javscript
减少使用外部插件（如Flash）
良好的容错设计
使用更多的标签而不是太多的脚本
HTML 5应该是和设备无关的
开发过程应该是可视化的

在本文中，使用Adobe Macromedia Dreamweaver进行开发

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

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

<!DOCTYPE HTML>

<html>

<head>

<title></title>

</head> 

<body>

</body> 

</html>

步骤2 增加HTML 5新标签

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

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

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

<!DOCTYPE HTML>

<html>

<head>

<title></title>

</head> 

<body>

<div id="wrapper"> 

<!—开始区域 -->

<header></header>

<nav></nav>

<section class="content"></section>

<aside class="sidebar"></aside>

<footer></footer>

<!—结束区域--> 

</div>

</body> 

</html>

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

<header>

<hgroup>

　<h1 class="site-title"><a href="#">Simple HTML5 Template</a></h1></hgroup>

</header>

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

<nav> 

<ul> 

<li><a href="#">Home</a></li> 

<li><a href="#">About</a></li> 

<li><a href="#">Parent Page</a> 

<ul> 

<li><a href="#">Child One</a></li> 

<li><a href="#">Child Two with child</a> 

<ul> 

<li><a href="#">Child One</a></li> 

<li><a href="#">Child Two</a></li> 

<li><a href="#">Child Three</a></li> 

</ul> 

</li> 

<li><a href="#">Child Three</a></li> 

</ul> 

</li> 

<li><a href="#">Contact</a></li> 

</ul> 

</nav>

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

<section class="content">

<!—文章１-->

<article class="post">

<h1 class="post-title"><a href=#">This is a title for post</a></h1>

<!-- 文章元数据-->

<div class="entry post-meta">

<span class="post-author">Richard KS</span>

<span class="post-date">20th March 2013</span>

<span class="post-category">Tutorials</span>

<span class="post-tag">HTML5, CSS3 and Responsive</span>

<span class="post-comment">10 Comments</span>

</div>

<!-- 文章的内容 content -->

<div class="entry post-content">

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

</div>

</article>

<!—文章1结束-->

</section>

d) 添加<aside class=’sidebar’>标签

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

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

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

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

代码如下：

<aside class="sidebar">

<ul class="widget-sidebar"> 

<!-- some sample list -->

<li class="widget widget_categories">

<h3 class="widget-title">Categories</h3>

<ul>

<li><a href="#">Category 1</a></li>

<li><a href="#">Category 2</a></li>

<li><a href="#">Parent Category</a>

<ul class="children">

<li><a href="#">Child One</a></li>

<li><a href="#">Child Two</a>

<ul class="children">

<li><a href="#">Grandchild One</a></li>

<li><a href="#">Grandchild Two</a></li>

<li><a href="#">Grandchild Three</a></li>

</ul>

</li>

<li><a href="#">Child Three</a></li>

</ul>

</li>

<li><a href="#">Category 3</a></li>

</ul>

</li> 

<!-- some sample text block -->

<li class="widget widget_text">

<h3 class="widget-title">Text</h3>

<div class="textwidget">

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</div>

</li> 

</ul>

</aside>

e) 加上最后的<footer>标签，代码为：

<footer>

<div class="footer-left">Copyright@ 2013 HTML5.com</div>

<div class="footer-right">Privacy Policy - About Us</div>

</footer>

最后运行的效果如下：

步骤4 　增加CSS样式
首先创建一个空白的样式，如下：

<link href="style.css" rel="stylesheet" type="text/css">

然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下：

body {

font-family: arial, sans-serif;

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

padding:0;

margin:0;

} 

*, html { line-height: 1.6em; } 

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: 0.8em; /* 13px from 100% global font-size */

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

margin: 0 auto;

} 

/* css for <header> */

header {

    padding: 1em 0;

    margin: 0px;

    float: left;

    width: 100%;

}

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

/* css for <nav> */

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: 1.125em;

    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: 0.5em 1em;

font-size: 1em;

width:10em;

color: #fff;

}    

nav ul ul ul {

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

} 

/* css for <section class='content'> */

section.content { 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; }

h1.post-title { font-size: 1.8em; margin:0; padding:0;}

.entry.post-meta { color: #888; }

.entry.post-meta span { padding: 0 1em 0 0; }

.entry.post-content { font-size: 1.125em; margin:0; padding:0;} 

/* css for <aside class='sidebar'> */

aside.sidebar { width: 25%; float:right; }

aside.sidebar ul {

    width:100%;

    margin: 0px;

    padding: 0px;

    float: left;

    list-style: none;

}

aside.sidebar ul li {

    width:100%;

    margin: 0px 0px 2em;

    padding: 0px;

    float: left;

    list-style: none;

}

aside.sidebar ul li ul li {

    margin: 0px 0px 0.2em;

    padding: 0px;

}

aside.sidebar ul li ul li ul li {

    margin: 0px;

    padding: 0px 0px 0px 1em;

    width: 90%;

    font-size: 0.9em;

}

aside.sidebar ul li h3.widget-title {

    width:100%;

    margin: 0px;

    padding: 0px;

    float: left;

    font-size: 1.45em;

} 

/* css for <footer> */

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: 0.6875em; }

section.content, aside.sidebar { width:100%; }

} 

/* iphone 468px */

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

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

section.content, aside.sidebar { width:100%; }

}

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

代码如下：

　<!--[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script src="modernizr-latest.js" type="text/javascript"></script>

最后运行效果如图：

读者可以将自己的屏幕分辨率调整到768px或者468px,会发现页面依然能随着分辨率的改变而改变自适应，没出现任何问题。读者可以在这个基础上进行扩充调整这个HTML 5模版，以适应自己的需求。

原文链接：http://www.dezzain.com/tutorials/creating-a-simple-responsive-html5-template/

标签: HTML5

创建简单的响应式HTML5模版的更多相关文章

16个最佳响应式HTML5框架分享
HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分 ...
Crumpet – 使用很简单的响应式前端开发框架
Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...
12款高质量的响应式 HTML5/CSS3 网站模板
HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. ...
2015年15+最佳的响应式HTML5网站模板
015年最好的免费响应式HTML5模板通常用于创建新潮的网站. HTML5是HTML用于创建现代化网站的最新版本.随着这一现代标记语言的出现,网上冲浪的趋势变得越来越智能化越来越酷.几乎每个web开发 ...
Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示免费下载 ...
快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
30套免费的响应式 HTML5 & CSS3 模板下载
HTML5 和 CSS3 网站模板存在巨大的需求,网页设计师们都喜欢现成的网站模板,能够轻松地设计和开发美观,吸引眼球的网站.如果你正在寻找响应式的 HTML5 & CSS3 模板,那么你找对 ...
Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...
35 个免费创新的响应式 HTML5 模板
HTML5 和响应式都是 Web 开发领域中的热门技术,本文向你推荐 35 个免费的响应式 HTML5 模板,将两种技术完美结合. Mori responsive HTML5 Template Res ...

随机推荐

asp.net 一般处理程序session 为 null
必须继承 IRequiresSessionState 接口才行!
再谈IE的浏览器模式和文档模式
原文:再谈IE的浏览器模式和文档模式以前在 “IE8兼容视图(IE7 mode)与独立IE7的区别”一文中曾经涉及过浏览器模式和文档模式,但二者的区别却不甚了了,现在有了新的认识,再补充一下. 1. ...
HDU 1385 Minimum Transport Cost 最短路径题解
本题就是使用Floyd算法求全部路径的最短路径,并且须要保存路径,并且更进一步须要依照字典顺序输出结果. 还是有一定难度的. Floyd有一种非常巧妙的记录数据的方法,大多都是使用这种方法记录数据的. ...
UIAutomator源码分析之启动和运行
通过上一篇<Android4.3引入的UiAutomation新框架官方简介>我们可以看到UiAutomator其实就是使用了UiAutomation这个新框架,通过调用Accessibi ...
安卓MonkeyRunner源码分析之与Android设备通讯方式
如前文<谁动了我的截图?--Monkeyrunner takeSnapshot方法源码跟踪分析>所述,本文主要会尝试描述android的自动化测试框架MonkeyRunner究竟是如何和目 ...
纯CSS3打造七巧板
原文:纯CSS3打造七巧板最近项目上要制作一个七巧板,脑子里瞬间闪现,什么...七巧板不是小时候玩的吗... 七巧板的由来先来个科普吧,是我在查资料过程中看到的,感觉很有意思. 宋朝有个叫黄伯思的 ...
快速构建Windows 8风格应用36-商店应用发布流程
原文:快速构建Windows 8风格应用36-商店应用发布流程引言在发布应用之前,我们需要注册开发者账号才能够发布应用.我们可以登录https://appdev.microsoft.com/Sto ...
Web前端框架与类库
Web前端框架与类库的思考说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...
.net的页面在大并发下出现503错误
.net的页面在大并发下偶尔出现503错误我们开发了一个回调页面,由一个工具负责调用,由于压力非常大,回调页面通过6台服务器负载均衡的: 最近业务系统又再次扩容,回调页面压力成倍增加,在高峰时间段偶 ...
《互联网初创企业password》书评
今天试用了一下<互联网初创企业password>这本书.我觉得这本书开始的很真实,从学校刚毕业那会儿.它是生命,他们的牛b时间,一直想做点什么来证明自己.具体地,并且现在是在最好的时候.互 ...

创建简单的响应式HTML5模版

创建简单的响应式HTML5模版

创建简单的响应式HTML5模版的更多相关文章

随机推荐

热门专题