5.10 HTML5 布局的使用

布局的需求可能会根据我们的页面的需求多样化。我们看一下几种不同的布局方式。

使用 `<div>` 元素布局

新建一个 index02.html 文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div布局</title>
</head>
<body>
   <div id="container">
       <div id="heading">头部</div>
       <div id="content_menu">内容菜单</div>
       <div id="content_body">内容主题</div>
       <div id="footing">底部</div>
   </div>
</body>
</html>

看一下效果：

图片说明

只是简单的文字排列，之前说过如果 div 没有任何样式修饰的话是没有任何效果的。下面我们写点样式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        div#container {
            width: 100%;
            height: 950px;
            background-color: darkgray;
        }
    </style>
</head>
<body>
   <div id="container">
       <div id="heading">头部</div>
       <div id="content_menu">内容菜单</div>
       <div id="content_body">内容主题</div>
       <div id="footing">底部</div>
   </div>
</body>
</html>

效果如图：

图片说明

外部有一个白色边框，下面去掉：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        div#container {
            width: 100%;
            height: 950px;
            background-color: darkgray;
        }
    </style>
</head>
<body>
   <div id="container">
       <div id="heading">头部</div>
       <div id="content_menu">内容菜单</div>
       <div id="content_body">内容主题</div>
       <div id="footing">底部</div>
   </div>
</body>
</html>

然后灰色就会充满整个屏幕。我们完成接下来的样式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        #container {
            width: 100%; //会充满整个屏幕
            height: 950px;
            background-color: darkgray;
        }
        #heading {
            width: 100%;
            height: 10%; //整个的高度已经定义好了，所以用 %
            background-color: aqua;
        }
        #content_menu {
            width: 30%;
            height: 80%;
            background-color: aquamarine;
            float: left;
        }
        #content_body {
            width: 70%;
            height: 80%;
            background-color: blueviolet;
            float: left;
        }
        #footing {
            width: 100%;
            height: 10%;
            background-color: black;
            clear: both;
        }
    </style>
</head>
<body>
   <div id="container">
       <div id="heading">头部</div>
       <div id="content_menu">内容菜单</div>
       <div id="content_body">内容主题</div>
       <div id="footing">底部</div>
   </div>
</body>
</html>

刷新浏览器看下效果：

图片说明

这就是一个简单的 div 布局实例。

使用元素布局

这和 div 其实也比较相似，我们创建一个 index03.html 文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body>
   <table width="100%" height="950px" style="background-color: darkgray">
   </table>
</body>
</html>

来简单的看下效果：

图片说明

这个背景是灰色的，同样的我们可以去掉四周白色的边框：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
   <table width="100%" height="950px" style="background-color: darkgray">
   </table>
</body>
</html>

这是头部
左菜单
这是底部

这样就可以去掉，下面用表格布局完成上面的效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body>
   <table width="100%" height="950px" style="background-color: darkgray">
       <tr>
           <td colspan="2" width="100%" height="10%" style="background-color="aqua">这是头部</td>
       </tr>
       <tr>
           <td width="30%" height="80%" style="background-color: blue">左菜单</td>
           <td width="70%" height="80%" style="background-color: blueviolet"></td>
       </tr>
       <tr>
           <td width="100%" height="10%" colspan="2" style="background-color: darkcyan">这是底部</td>
       </tr>
   </table>
</body>
</html>

看下效果：

图片说明

跟上面实现的效果是一致的。我们也可以把中间分为三个部分：将顶部和底部变为合并三个单元格，在中间部分添加一列即可。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body>
   <table width="100%" height="950px" style="background-color: darkgray">
       <tr>
           <td colspan="3" width="100%" height="10%" style="background-color="aqua">这是头部</td>
       </tr>
       <tr>
           <td width="20%" height="80%" style="background-color: blue">左菜单</td>
           <td width="60%" height="80%" style="background-color: blueviolet">内容主体</td>
           <td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
       </tr>
       <tr>
           <td width="100%" height="10%" colspan="3" style="background-color: darkcyan">这是底部</td>
       </tr>
   </table>
</body>
</html>

图片说明

这样就能分出来了。在每个格子中我们还可以添加其他的内容，比如我们可以在左菜单内添加个列表：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body>
   <table width="100%" height="950px" style="background-color: darkgray">
       <tr>
           <td colspan="3" width="100%" height="10%" style="background-color="aqua">这是头部</td>
       </tr>
       <tr>
           <td width="20%" height="80%" style="background-color: blue">
               <ul>
                   <li>ios</li>
                   <li>android</li>
                   <li>html5</li>
               </ul>
           </td>
           <td width="60%" height="80%" style="background-color: blueviolet">内容主体</td>
           <td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
       </tr>
       <tr>
           <td width="100%" height="10%" colspan="3" style="background-color: darkcyan">这是底部</td>
       </tr>
   </table>
</body>
</html>

效果如下：

图片说明