一、使用<div>元素布局

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>div布局</title><styletype="text/css">body{margin:0px;}#container{width:100%;height:950px;background-color:darkgray;}#heading{width:100%;height:10%;background-color:aqua;}#content_menu{width:30%;height:80%;background-color:aquamarine;float:left;}#content_body{width:70%;height:80%;background-color:blueviolet;float:left;}#footing{width:100%;height:10%;background-color:black;clear:both;}</style></head><body><divid="container"><divid="heading">头部</div><divid="content_menu">内容菜单</div><divid="content_body">内容主体</div><divid="footing">底部</div></div></body></html>


二、使用<table>元素布局

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>table布局</title><styletype="text/css">body{margin:0px;}#container{width:100%;height:950px;background-color:darkgray;}#heading{width:100%;height:10%;background-color:aqua;}#content_menu{width:30%;height:80%;background-color:aquamarine;float:left;}#content_body{width:70%;height:80%;background-color:blueviolet;float:left;}#footing{width:100%;height:10%;background-color:black;clear:both;}</style></head><body><tablewidth="100%"height="950px"><tr><tdcolspan="2"width="100%"height="10%">这是头部</td></tr><tr><tdwidth="30%"height="80%">左菜单</td><tdwidth="70%"height="80%">主体</td></tr><tr><tdwidth="100%"height="10%"colspan="2">这是底部</td></tr></table></body></html>