div布局与table布局详解

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

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

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

    div布局  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布局   

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！