创建简单的响应式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 ...

随机推荐

API帮助页面
ASP.NET Web API 2:创建API帮助页面当你新建了一个web API服务之后,再建一个API帮助页面是很有好处的,这样其他开发人员就会很清楚地知道如何调用你的API接口. ...
我的MYSQL学习心得（十）
原文:我的MYSQL学习心得(十) 我的MYSQL学习心得(十) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL ...
第4章2节《MonkeyRunner源码剖析》ADB协议及服务: ADB服务SERVICES.TXT翻译参考(原创)
天地会珠海分舵注:本来这一系列是准备出一本书的,详情请见早前博文“寻求合作伙伴编写<深入理解 MonkeyRunner>书籍“.但因为诸多原因,没有如愿.所以这里把草稿分享出来,所以错误在 ...
EditPlus仿Sublime配色方案（三种任你选择）
[Options] Placement=2C00000002000000030000000083FFFF0083FFFFFFFFFFFFFFFFFFFFEA000000EE000000D6050000 ...
apache启动报错：the requested operation has failed解决办法
原因一:80端口占用例如IIS,另外就是迅雷.我的apache服务器就是被迅雷害得无法启用! 原因二:软件冲突装了某些软件会使apache无法启动如Dr.com 你打开网络连接->TcpIp ...
Java 类的成员初始化顺序
做个简单笔录,就当是重温下基础知识. 1.先看代码: package com.test; public class Test { public static void main(String[] ar ...
vs2010下载链接中国简体(中国含msdn)
昨天一个朋友说vs2010中国版可下载,我开始不相信.只是周末.所以,我下载一试果然,安装了中国版,原本msdn订户才能够下载,感谢朋友们上传. 文件名 cn_visual_studio_2010_ ...
最佳新秀Java（22）——再次了解泛型
仿制药Java SE 1.5新功能.通用自然是参数化类型.即操作数据类型被指定为一个参数.这样的参数类型可以在课堂上使用.创建的接口和方法,他们被称为通用类..泛型方法. Java语言引入泛型的优点是 ...
php中session和cookie
cookie 每次请求页面的时候进行验证,如果用户信息存储在数据库中,每次都要执行一次数据库查询,给数据库造成多余的负担.cookie可以被修改的,所以安全系数太低. session是存储在服务器端面 ...
css 初始化
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,for ...

创建简单的响应式HTML5模版

创建简单的响应式HTML5模版

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

随机推荐

热门专题