HTML 布局-工具盒子

前言：

网站常常以多列显示内容（就像杂志和报纸）。

HTML 布局 - 使用div元素

<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

HTML 布局 - 使用table元素

使用 HTML <table> 标签是创建布局的一种简单的方式。

使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素
**header：**定义文档或节的页眉

**nav：**定义导航链接的容器

**section：**定义文档中的节

**article：**定义独立的自包含文章

**aside：**定义内容之外的内容（比如侧栏）

**footer：**定义文档或节的页脚

**details：**定义额外的细节

**summary：**定义 details 元素的标题

这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>陌上花-blog</title> 
<style>
header {
    background-color:#FFA500;
    color:white;
    text-align:center;
    padding:5px;     
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;          
}
section {
    width:350px;
    float:left;
    padding:10px;        
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;         
}
</style>
</head>
<body>
<header>
<h1>陌上花-blog</h1>
</header>
<nav>
首页<br>
关于<br>
</nav>
<section>
<h1>London</h1>
<p>
内容在这里
</p>
</section>
<footer>
版权 © 陌上花
</footer>
</body>
</html>

以及id命名法：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>陌上花-blog</title> 
</head>
<body>
<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">陌上花-blog</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>首页</b><br>
关于<br>
</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © 陌上花</div>

</div>

</body>
</html>

下面的例子使用表格制作：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>陌上花-blog</title> 
</head>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>陌上花-blog</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>首页</b><br>
关于<br>

</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © 陌上花</td>
</tr>
</table>

</body>
</html>

注：即使可以使用 HTML 表格来创建漂亮的布局，但表格的目的是呈现表格化数据，不是布局工具！