标签导航：

这次给大家带来H5的div布局与table布局详解，H5div布局与table布局的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例为大家解析了html5 p布局与table布局，供大家参考，具体内容如下

p布局：html+css实现简单布局。

#container中height不能写成百分数，必须为具体高度。

nbsp;html>  
  
  
    <meta>  
    <title>p布局</title>  
    <style>  
        body{  
            margin:0;  
            padding:0;  
        }  
        #container{  
            width:100%;  
            height:650px;  
            background-color: aqua;  
        }  
        #heading{  
            width:100%;  
            height:10%;  
            background-color: azure;  
        }  
        #content-menu{  
            width:30%;  
            height:80%;  
            background-color: chartreuse;  
            float:left;  
        }  
        #content-body{  
            width:70%;  
            height:80%;  
            background-color: chocolate;  
            float:left;  
        }  
        #footer{  
            width:100%;  
            height:10%;  
            background-color: darkgrey;  
            clear: both;  
        }  
    </style>  
  
  
    <p>  
        </p><p>头部</p>  
        <p>内容菜单</p>  
        <p>内容主体</p>  
        <p>底部</p>  
      
  

效果图：

table布局：

nbsp;html&gt;  
  
  
    <meta>  
    <title>table布局</title>  
  
  
    
                                                                                                                                                    
这是头部
左菜单内容右菜单
这是底部
     

效果图：

推荐阅读：

分页查询的使用详解

JS的日期相关函数使用详解