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

随机推荐

Responsive Design in 3 Steps
Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, ...
事半功倍之StyleCop(一)
事半功倍之StyleCop(一) 前言曾几何时,你是否在看别人代码的时候总是在抱怨代码没有注释,命名不规范,代码风格不统一,代码可读性差?是否有一个适合团队开发规范的检查工具? 答案就是大名鼎鼎的S ...
Pku1218
<span style="background-color: rgb(204, 204, 204);">/* A - THE DRUNK JAILER Time Lim ...
linux监控命令全覆盖（图文说明）
1.1 top 1.1.1 命令说明 Top 命令能够实时监控系统的运行状态,并且可以按照cpu.内存和执行时间进行排序 1.1.2 参数说明命令行启动参数: 用法: top -hv | -bcis ...
oracle存储过程+游标处理select数据
create or replace PROCEDURE UPDATE_RECORDCODE is cursor location_data is select * from location wher ...
《C语言及程序设计初步》网络课程主页
题记 CSDN要开在线教育频道,向我发出邀请,看能否开些课程. 我近日一直在关注着翻转课堂,试图在传统课堂中引入新的元素,这须要资源建设的积累.没有时间表的工作,非常难把握. 为CSDN做在线课程,为 ...
C++中出现的计算机术语4
adaptor(适配器) 一种标准库类型.函数或迭代器,使某种标准库类型.函数或迭代器的行为类似于第二种标准库类型.函数或迭代器.系统提供了三种顺序容器适配器:stack(栈).queue(队列)以及 ...
前台框架的选择 EasyUI、DWZ、ligerui
EasyUI1.3.1+MVC4.0+EF5.0 番外篇关于前台框架的选择 EasyUI.DWZ.ligerui 昨天发了EasyUI1.3.1+MVC4.0+EF5.0实战之一开篇及布局控件介绍 ...
javascript 10进制和64进制的转换
原文:javascript 10进制和64进制的转换 function string10to64(number) { var chars = '0123456789abcdefghigklmnopqr ...
javascript 学习总结（六）RegExp对象
1.正则表达式test方法 var text = "cat, bat, sat, fat"; var pattern = /.at/; if (pattern.test(text) ...

创建简单的响应式HTML5模版

创建简单的响应式HTML5模版

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

随机推荐

热门专题