鲁达 使用 <div> 元素的 HTML 布局
注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
这个例子使用了四个 <div> 元素来创建多列布局：
<html> <head> <style> #header { background-color:#1aaa11; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; color:#faaaff; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:#166611; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h1>天华信息教育</h1> </div> <div id="nav" > 第一组<br> 第二组<br> 第三组<br> </div> <div id="section"> <h2>这是标题</h2> <p> 这是内容 </p> <p> 这是内容 </p> </div> <div id="footer"> 天华信息教育 </div> </body> </html>HTML基础教程：div元素实现布局
HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
<html> <head> <style> header { background-color:#1aaa11; color:white; text-align:center; padding:5px; } nav { line-height:30px; background-color:#eeeeee; color:#faaaff; height:300px; width:100px; float:left; padding:5px; } section { width:350px; float:left; padding:10px; } footer { background-color:#166611; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <header> <h1>天华信息教育</h1> </header> <nav> 第一组<br/> 第二组<br/> 第三组<br/> </nav> <section> <h1>这是标题</h1> <p> 这是内容 </p> <p> 这是内容 </p> </section> <footer> 天华信息教育 </footer> </body> </html>HTML基础教程：div元素实现布局