网站布局
大多数网站会把内容安排到各个列中（就像杂志或报纸一样）
大多数网站可以使用<div>或者<table>元素来创建多列。css用于对元素进行定位，为页面创建背景以及色彩丰富的外观
使用<div>元素
<div>元素时用于分组HTML元素中的块级元素
实例：
<!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>118qq.top</title> </head> <body> <div id="common" style="width:500px;"> <div id="head" style="background-color:red;"> <h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="caidan" style="background-color:green; width:100px; height:200px; float:left;"> <b>菜单</b> <br>HTML<br>CSS<br>javasprict</div> <div id="main" style="background-color:yellow; width:400px; height:200px; float:left;"> <b>这里填写内容</b></div> <div id="footer" style="background-color:orange; width:500px; height:30px; text-align:center; clear:both;">118qq.top</div> </div> </body> </html>
使用<table>元素
使用<table>元素是创建布局的最简单的元素
提示：即使可以使用表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据，但表格不是布局工具
实例：
<!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>118qq.top</title> </head> <body> <table width="500px" border="0"> <tr> <td colspan="2" style="background-color:red;">主要网页标题</td> </tr> <tr> <td width="100px" style="background-color:green;"><b>菜单</b> <br>HTML<br>CSS<br>javasprict</td> <td width="400px" style="background-color:yellow;">这里是内容</td> </tr> <tr> <td colspan="2" height="30px" style="background-color:orange; text-align:center;">118qq.top</td> </tr> </table> </body> </html>
注意：
l 使用CSS最大的好处是，如果把CSS代码放在外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局
l 由于创建高级的布局非常耗时，使用模板是一个快速的选项