HTML 布局

从一个结构良好的Html文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮。

使用 <div> 元素的 HTML 布局

注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。这个例子使用了四个 <div> 元素来创建多列布局：

实例

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div id="header">
<h1>世界名城</h1>
</div>
<div id="nav">
伦敦<br>
巴黎<br>
东京<br>
</div>
<div id="section">
<h1>伦敦</h1>
<p>
伦敦是英国的首都。它是英国人口最多的城市，拥有超过1300万居民的大都市。
</p>
<p>
伦敦位于泰晤士河上，两千年来一直是一个主要的定居点，它的历史可以追溯到罗马人建立它的时候，罗马人把它命名为朗蒂尼。
</p>
</div>
<div id="footer">
版权所有
</div>
</body>

运行一下

使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：

HTML5 语义元素

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

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

实例

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<header>
<h1>世界名城</h1>
</header>
<nav>
伦敦<br>
巴黎<br>
东京<br>
</nav>
<section>
<h1>London</h1>
<p>
伦敦是英国的首都。它是英国人口最多的城市，拥有超过1300万居民的大都市。
</p>
<p>
伦敦位于泰晤士河上，两千年来一直是一个主要的定居点，它的历史可以追溯到罗马人建立它的时候，罗马人把它命名为朗蒂尼。
</p>
</section>
<footer>
版权所有
</footer>
</body>
</html>

运行一下

使用表格的 HTML 布局

注释：<table> 元素不是作为布局工具而设计的。<table> 元素的作用是显示表格化的数据。使用

元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

实例

<!DOCTYPE html>
<html>
<head>
<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td { 
    padding:10px;
}
table.lamp th {
    width:40px;
}
</style>
</head>
<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    表元素不是设计为布局工具的。
  </td>
</tr>
</table>
</body>
</html>

运行一下

HTML 布局

使用 <div> 元素的 HTML 布局

实例

使用 HTML5 的网站布局

HTML5 语义元素

实例

使用表格的 HTML 布局

实例

分类导航