HTML 布局
我们日常生活中打开的网页总是规章有序，看着让人很舒服，但是你知道他们是怎么做到的？他们就是利用我们的HTML元素+一些css样式进行的布局，那么我们今天来学习怎么给页面布局吧。
网站布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
提示：网页布局对改善网站的外观非常重要，请慎重设计您的网页布局。
HTML 布局 - 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素。
实例
下面的例子使用五个 div 元素来一些简单的css样式创建多列布局：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <div id="container" style="width:400px"> <div id="header" style="background-color:#baff9e;"> <h1 style="margin-bottom:0;">主要的网站标题</h1></div> <div id="menu" style="background-color:#45caff;height:200px;width:150px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:250px;float:left;"> 这里是内容</div> <div id="footer" style="background-color:#fdd8ff;clear:both;text-align:center;"> 版权 © php.cn</div> </div> </body> </html>
上面的 HTML 代码会产生如下结果：
使用表格的 HTML 布局
注释：<table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：
实例
使用<table> 元素来布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <table width="400" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>网站标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:50px;"> <b>网站菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:350px;"> 网站内容</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © php.cn</td> </tr> </table> </body> </html>
代码运行结果：
HTML 布局
Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程.
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
例如使用 Bootstrap
Bootstrap 是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：
如需学习 Bootstrap 的知识，请阅读我们的 Bootstrap 教程。
