Html5 通用布局方式

概述

在Html5之前，统一采用的是Div+css的方式进行布局，但是却和开发人员的命名方式，喜好有关。在新的Html5中，布局却显得更加人性化，更易理解了。如增加了Header，Footer，Section，Aside标签，很容易一眼就知道对应的功能是什么。本文以一个简单的小例子，简述Html5的布局相关知识，仅供学习分享使用，如有不足之处，还请指正。

HTML5 语义元素

涉及的元素，说明如下：HTML5 提供的新语义元素定义了网页的不同部分：

示例效果图

布局效果如下：

布局源码

布局对应的Html代码如下：

<!DOCTYPE html>
<html>
<head><title>关于Web页的Html5布局</title><style type="text/css">header{background-color:orange;color:White;text-align:center;height:120px;padding:5px;}nav{line-height:30px;background-color:Lime;height:400px;width:15%;float:left;padding:0px;}aside{background-color:Gray;width:15%;height:400px;float:right;padding:0px;}section{width:70%;height:400px;background-color:Purple;float:left;padding:0px;}footer{background-color:Fuchsia;height:120px;color:White;clear:both;text-align:center;padding:5px;}ul{list-style-type:none;}.sp{width:15px;padding:5px;}a{text-decoration:blink;}</style>
</head>
<body><header><h1>这里是Header,一号标题</h1><div><a href="#">菜单1</a><span class="sp">|</span><a href="#">菜单2</a><span class="sp">|</span><a href="#">菜单3</a><span class="sp">|</span><a href="#">菜单4</a><span class="sp">|</span><a href="#">菜单4</a><span class="sp">|</span><a href="#">菜单5</a><span class="sp">|</span><a href="#">菜单6</a><span class="sp">|</span><a href="#">菜单7</a><span class="sp"></div></header><nav><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li><li><a href="#">链接3</a></li><li><a href="#">链接4</a></li></ul></nav><section><h1>这里是正文</h1><p>这里是段落1</p><p>这里是段落2</p></section><aside><h1>这里是侧边框</h1><p>这里是段落1</p><p>这里是段落2</p></aside><footer>这里是页脚</footer>
</body>
</html>

CSS小知识

元素内间距，边框，外间距之间的关系

关于Padding , Border,Margin之间的关系，如下图所示：

样式的层叠远近顺序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS样式设置顺序

关于CSS样式，当样式要作用于四个方向或四条边时，可单独设置，也可以统一设置，如下所示：

设置一个值，统一作用于四条边，如下所示：

设置两个值，第1个值代表上，下，第2个值代表右，左，如下所示：

设置三个值，代表顺序，上，右，下，第四个值为空，和右保持一致，如下所示：

设置四个值，代表顺序，上，右，下，左，依次分别设置，如下所示：

在一个声明中，设置所有属性的值，顺序依次为：border-width,border-style,border-color，如：border，如下所示：

备注

谒金门·风乍起

【作者】冯延巳【朝代】五代

风乍起，吹皱一池春水。
闲引鸳鸯香径里，手挼红杏蕊。
斗鸭阑干独倚，碧玉搔头斜坠。
终日望君君不至，举头闻鹊喜。