创建简单的响应式HTML5模版
创建简单的响应式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模版的更多相关文章
- 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 ...
随机推荐
- UVa 11121 - Base -2
题目:计算以-2为基数的数的表示. 分析:数论.写出不同位数能表示的数字区间就能够找到规律. 长度为1:[1,1]: 长度为2:[-2,-1]: 长度为3:[2,5]: 观察发现,区间长度增长为1,2 ...
- lcc之内存分配
现在感觉这本书有些地方没有说透,如果自己的理解能力与基础知识够强的话,理解起来还好,如果不行的话,某些地方理解起来会相当的头疼. 现在来说说内存管理.当初看这一章的时候很快就过去了,感觉很多地方很好理 ...
- IntelliJ IDEA 发布13版本——创造java奇迹
IntelliJ IDEA被公认为业界最好的Java开发平台.此次发布的了13版本,更是集合了与Java EE.Android.Spring.Scala和Gradle最新合作与支持. Java EE ...
- ReSharper 8.1支持Visual Studio 2013的特色——超强滚动条
自ReSharper 8.1发布以来,便支持Visual Studio 2013.其中peek功能是它的亮点,滚动条则是它的特色. 接下来小编将展示ReSharper在Visual Studio 20 ...
- proguard android迷茫
我们收拾它意味着蛊惑项目即将结束.上线.但是,当这个问题就更烦躁人,我也记录因混乱中遇到的问题 首先,我在装android4.0封装版本,有没有在这个文件查看器项目 假设有,请继续点击进入projec ...
- ASP.NET-FineUI开发
ASP.NET-FineUI开发 随笔分类 - FineUI ASP.NET-FineUI开发实践-10 摘要: 嵌套Grid,光棍月大放送,不藏着掖着.实在写的不好,没脸藏啊~只考虑显示排序修改 ...
- 【转】Android 网络通信框架Volley简介(Google IO 2013)
Volley主页 https://android.googlesource.com/platform/frameworks/volley http://www.youtube.com/watch?v= ...
- Tomcat 学习笔记二
学习一 java.bean.PropertyChangeListener用来监听bean类的属性值改变.当改变时同时执行对应事件.而且是线程安全的.tomcat用此reload的Boolean值改变是 ...
- web 富文本编辑器总结
前言 富文本编辑器,就是除了能输入不同的文本之外,还可以之间粘贴图画等其他的多媒体信息.也可说是所见即所得的编辑器. 目前可以使用的编辑器有很多, 在网络上有找到这样一份比较表格: 编辑器 产地 稳定 ...
- 一个ASP.NET Web API 2.0应用
在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用 由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.N ...