html如何布局

p布局

 !DOCTYPE html  html  head lang= en  meta charset= utf-8  title /title  style 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;} /style  /head  body  header id= header  nav id= nav 空空 /nav  /header  p >
2.div布局
 !DOCTYPE html  html  head lang= en  meta charset= utf-8  title /title  style  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;}  /style  /head  body  header id= header  nav id= nav 空空 /nav  /header  div >
3.table布局
 !DOCTYPE html  html  head lang= en  meta charset= utf-8  title /title  style  /style  /head  body marginheight= 0px marginwidth= 0px  table width= 100% height= 950px >
 !DOCTYPE html  html  head lang= en  meta charset= utf-8  title /title  style  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; } /style  /head  body  table cellspacing= 0 cellpadding= 0 border= 0  tr id= header  td colspan= 2 td  /tr  tr id= content  td >
 相关推荐：
问题：关于一个坛友的html布局实现_html/css_WEB-ITnose
HTML布局之计算器(div+css)_html/css_WEB-ITnose
，html布局的问题。_html/css_WEB-ITnose
以上就是html如何布局 的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。