HTML 布局

HTML 布局
网页布局对改善网站的外观非常重要。
大多数网站可以使用 < div> 或者 < table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

一、HTML 布局 - 使用< div> 元素

div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：

实例

<div style="width: 500px">
    <div style="background-color: red">
        <h1 style="margin-bottom: 0;text-align: center">div布局</h1>
    </div>
    <div style="background-color: green;width: 100px;height: 200px;float: left">
        菜单<br>
        num<br>
        text<br>
        content
    </div>
    <div style="text-align: center;width: 300px;height: 200px;background-color: blue;float:left ">
        中间内容
    </div>
    <div style="background-color: yellow;float:left;width: 100px;height: 200px">
        右边内容
    </div>
    <div style="background-color: gray;height: 50">
        <p align="center">哈哈哈</p>
    </div>

</div>

上面的 HTML 代码会产生如下结果：

二、HTML 布局 - 使用表格

使用 HTML < table> 标签是创建布局的一种简单的方式。
注意 即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
实例

<table style="width: 500px; border: 0">
    <tr>
        <td style="background-color: yellow;" colspan="3" align="center" ><h1>table布局</h1></td>
    </tr>
    <tr>
       <td style="background-color: blue;width: 100px;height: 200px;vertical-align: top">菜单<br>
       name<br>
       age<br>
       content</td>
        <td style="background-color: #ffffff;width: 300px;height: 200px;vertical-align: top">
            中间的内容
        </td>
        <td style="background-color: red;width:100px;height: 200px;vertical-align: top">
            右边的内容
        </td>
    </tr>

    <tr>
        <td colspan="3" style="background-color:#FFA500;text-align:center;">
            底部</td>
    </tr>
</table>

上面的 HTML 代码会产生以下结果：

HTML 布局 - 有用的提示
注意: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

注意: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

HTML 布局标签和描述
< div> 定义文档区块，块级(block-level)
< span> 定义 span，用来组合文档中的行内元素。
代码 ：

<div>
    <h4>这个标签在div中</h4>
    <p>这个标签也在<span style="color: red">div</span>中 </p>
</div>
<p>这是一段不错<span style="color: red">漂亮</span>的话</p>

效果：