HTML 布局（Layouts）
要想让你的网站更好看，布局非常重要.
要非常细心的设计你网页布局.
亲自试一试 - 例子
网页布局之 <div> 元素
示例演示了如何使用 <div> 元素布局.
网页布局之 <table> 元素
示例演示了如何使用 <table> 元素布局.
网页布局
大多数网站把内容放到多个列中（类似杂志或报纸排版）.
多列可以用 <div> 或 <table>元素进行创建。 可以使用CSS的position（位置），背景、颜色等性质创建丰富多彩的页面.
|
虽然可以使用表格创建漂亮的布局，但是表格是被设计为展示数据的 - 不是布局工具！ |
|---|
HTML布局 - 使用 <div> 元素
div元素是个块级元素，用于将HTML元素分组.
下面的例子使用了5个div元素创建多列布局，创建和上面的例子一样的效果：
例子
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © phpxuexi.net</div>
</div>
</body>
</html>
亲自试一试 »
上面代码展示的结果如下：:
Main Title of Web Page
HTML
CSS
JavaScript
HTML布局 - 使用表格
创建布局的简单方式是使用HTML的 <table> 标签.
创建多列布局可以使用 <div> 或者 <table> 元素. 可以使用CSS的position（位置），背景、颜色等性质创建丰富多彩的页面.
|
|
使用 <table> 创建漂亮的布局是不正确的. <table> 元素是用于显示数据的! |
|---|
下面的例子使用的表格是3行2列 - 第一行和最后一行都使用了合并列（colspan）的属性:
例子
<html>
<body>
<table width="500">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © phpxuexi.net</td>
</tr>
</table>
</body>
</html>
亲自试一试 »
上面代码显示的结果如下:
Main Title of Web Page |
|
|
Menu
HTML CSS JavaScript |
Content goes here |
| Copyright © phpxuexi.net | |
HTML布局 - 使用提示
提示: 使用CSS的最大优势是如果把CSS文件放在外部进行引用，你的网站会非常容易维护. 你可以通过这个文件更改网页布局.
提示: 由于高级的布局需要时间来创建，更快速的选择是使用模板.在百度或谷歌搜索“免费网站模板”（你可以使用这些已建好的模板并且在此基础上进行修改）.
