本篇文章主要介绍html如何布局 ，感兴趣的朋友参考下，希望对大家有所帮助。
p布局
body{margin: 0; padding: 0;}#header{width:100%; height: 90px; background: #b19f9d; }#nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;}.content{width: 950px; height: 900px; background: #847369; margin: 0 auto;}.left{width:30%; height: 900px; background: #decfd4; float: left;}.right{width: 70%; height: 900px; background: #b3a19d; float: left;}footer{width:100%; height: 150px; background: #a8817a;}
2.div布局
body{margin: 0; padding: 0;} #header{width:100%; height: 90px; background: #b19f9d; } #nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;} .content{width: 950px; height: 900px; background: #847369; margin: 0 auto;} .left{width:30%; height: 900px; background: #decfd4; float: left;} .right{width: 70%; height: 900px; background: #b3a19d; float: left;} footer{width:100%; height: 150px; background: #a8817a;}
3.table布局
body{ margin: 0 auto; } table{ width: 100%; height: 950px; background: gray; }#header{width: 100%;height: 10%;background: aqua;}#content{width: 100%;height: 80%;background: blue;}/**如果这里的父元素定了高度，子元素就不要定高度，然后table标签的属性在样式里面是不通用**/.content_left{width: 30%;background: #f60;}.content_right{width: 70%;background: #fcc;}#footer{width: 100%;height: 10%;background: aqua;}
相关推荐：
问题：关于一个坛友的html布局实现_html/css_WEB-ITnose
立即学习“前端免费学习笔记（深入）”；
HTML布局之计算器(div+css)_html/css_WEB-ITnose
，html布局的问题。_html/css_WEB-ITnose
以上就是html如何布局 的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546180.html
微信扫一扫 
支付宝扫一扫 
