html如何布局

　　p布局

　　<!DOCTYPEhtml>

　　<html>

　　<headlang="en">

　　<metacharset="utf-8">

　　<style>

　　body{margin:0;padding:0;}

　　#header{width:100%;height:90px;background:#b19f9d;}

　　#nav{margin:0auto;width:70%;height:90px;background:#fcf;}

　　.content{width:950px;height:900px;background:#847369;margin:0auto;}

　　.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>

　　<headerid="header">

　　<navid="nav">空空</nav>

　　</header>

　　<pclass="content">

　　<pclass="left"></p>

　　<pclass="right"></p>

　　</p>

　　</body>

　　</html>

　　2.div布局

　　<!DOCTYPEhtml>

　　<html>

　　<headlang="en">

　　<metacharset="utf-8">

　　<style>

　　body{margin:0;padding:0;}

　　#header{width:100%;height:90px;background:#b19f9d;}

　　#nav{margin:0auto;width:70%;height:90px;background:#fcf;}

　　.content{width:950px;height:900px;background:#847369;margin:0auto;}

　　.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>

　　<headerid="header">

　　<navid="nav">空空</nav>

　　</header>

　　<divclass="content">

　　<divclass="left"></div>

　　<divclass="right"></div>

　　</div>

　　</body>

　　</html>

　　3.table布局

　　<!DOCTYPEhtml>

　　<html>

　　<headlang="en">

　　<metacharset="utf-8">

　　<style>

　　</style>

　　</head>

　　<bodymarginheight="0px"marginwidth="0px">

　　<tablewidth="100%"height="950px"style="background-color:gray">

　　<tr>

　　<tdcolspan="2"width="100%"height="10%"style="background-color:aqua"><td>

　　</tr>

　　<tr>

　　<tdwidth="20%"height="80%"style="background-color:blue"><td>

　　<tdwidth="80%"height="80%"style="background-color:blue"><td>

　　</tr>

　　<tr>

　　<tdcolspan="2"width="100%"height="10%"style="background-color:black"><td>

　　</tr>

　　</table>

　　</body>

　　</html>

　　<!DOCTYPEhtml>

　　<html>

　　<headlang="en">

　　<metacharset="utf-8">

　　<style>

　　body{

　　margin:0auto;

　　}

　　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>

　　<tablecellspacing="0"cellpadding="0"border="0">

　　<trid="header">

　　<tdcolspan="2"><td>

　　</tr>

　　<trid="content">

　　<tdclass="content_left"><td>

　　<tdclass="content_right"><td>

　　</tr>

　　<trid="footer">