创建简单的响应式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 ...
随机推荐
- youcompleteme install and configure
三四年前我配置vim插件的时候还都是手动配置,还没有听说vundle这个vim插件管理工具,现在配置vim插件的时候基本上都用vundle,这个插件也确实是方便快捷,只不过这东西时能话了就不清楚里面的 ...
- exec 重定向
文件中常用的重定向: command > filename把把标准输出重定向到一个新文件中command >> filename 把把标准输出重定向到一个文件中 (追加)comman ...
- 认识ASP.NET MVC6
认识ASP.NET MVC6 这篇文章说明下如何在普通编辑器下面开发mvc6应用程序. 上篇文章: 十分钟轻松让你认识ASP.NET 5(MVC6) 首先安装mvc6的nuget包: 可以看到在pro ...
- Yii中CDbCriteria常用总结
Yii的Active Recorder包装了很多. 特别是把SQL中 把where,order,limit,IN/not IN,like等常用短句都包含进CDbCriteria这个类中去,这样整个代码 ...
- IOS被遗忘的知识
IOS ARC项目使用非ARC文件 1.自己的旧项目没有使用ARC,可是引入的第三方库却是使用了ARC的. 对于第一个情况,给採用了ARC的源文件,加入-fobjc-arc选项 2.自己的新项目使用了 ...
- OpenStreetMap架构
OpenStreetMap框架简介 1.OSM平台开发 OpenStreetMap(缩写OSM)地图是一个合作项目,我们的目标是创建一个免费的内容,让所有的人都可以编辑的世界地图. OSM在地图上由一 ...
- SQL点滴3—一个简单的字符串分割函数
原文:SQL点滴3-一个简单的字符串分割函数 偶然在电脑里看到以前保存的这个函数,是将一个单独字符串切分成一组字符串,这里分隔符是英文逗号“,” 遇到其他情况只要稍加修改就好了 CREATE FUN ...
- javascript 学习总结（六）RegExp对象
1.正则表达式test方法 var text = "cat, bat, sat, fat"; var pattern = /.at/; if (pattern.test(text) ...
- cocos2d-x的TestCpp分析
最近,我刚开始学coco2d-x 我会写我的学习经验来 首先TestCppproject有许多例子文件夹,而在这些文件夹以外的其他文件 .我首先研究这些文件: controller.h/cpp:管理方 ...
- shell 水平测试
http://bbs.chinaunix.net/thread-476260-1-1.html 版权声明:本文博客原创文章,博客,未经同意,不得转载.