html5中如何实现div布局与table布局-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

html5中如何实现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;  
        }  
      
  
  
      
        头部

内容菜单

内容主体

底部

效果图：

html5中如何实现div布局与table布局

table布局：

效果图：

html5中如何实现div布局与table布局

感谢你能够认真阅读完这篇文章，希望小编分享的“html5中如何实现div布局与table布局”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!

网站栏目：html5中如何实现div布局与table布局-创新互联
文章转载：http://lswzjz.com/article/diojsh.html

新闻中心

其他资讯