html5 div布局table,H5的div布局与table布局详解

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

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

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

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

p布局

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;

}

头部

内容菜单

内容主体

底部

效果图：

table布局：

table布局

这是头部
左菜单	内容	右菜单
这是底部

效果图：

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

分页查询的使用详解

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