网页布局对改善网站的外观非常重要。
请慎重设计您的网页布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用 div 元素来创建多列布局：
| <div id="header"> |
| <h1>City Gallery</h1> |
| </div> |
| <div id="nav"> |
| London<br> |
| Paris<br> |
| Tokyo<br> |
| </div> |
| <div id="section"> |
| <h1>London</h1> |
| <p> |
| London is the capital city of England. It is the most populous city in the United Kingdom, |
| with a metropolitan area of over 13 million inhabitants. |
| </p> |
| <p> |
| Standing on the River Thames, London has been a major settlement for two millennia, |
| its history going back to its founding by the Romans, who named it Londinium. |
| </p> |
| </div> |
| <div id="footer"> |
| Copyright Web3.xin |
| </div> |
CSS:
| <style> |
| #header { |
| background-color:black ; |
| 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> |
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局：
