布局
一、使用<div>元素布局
头+体（左右）+尾
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>div布局</title> 6 <style type="text/css"> 7 body{ 8 margin: 0px; 9 } 10 div#container{ 11 min-width: 100%; 12 height: 950px; 13 background-color: burlywood; 14 } 15 div#heading{ 16 width: 100%; 17 height: 10%; 18 background-color: aqua; 19 } 20 div#content_left{ 21 width: 30%; 22 height: 80%; 23 background-color: brown; 24 /*从左到右的排序方式 必须有*/ 25 float: left; 26 } 27 div#content_right{ 28 width: 70%; 29 height: 80%; 30 background-color: darkorange; 31 /*从左到右的排序方式 必须有 不然会上下排列*/ 32 float: left; 33 } 34 div#footing{ 35 width: 100%; 36 height: 10%; 37 background-color: forestgreen; 38 /*上面设定了浮动，如果不清除浮动，则默认跟着做浮动 不会出现在最下面*/ 39 clear: both; 40 } 41 </style> 42 </head> 43 <body> 44 <div id="container"> 45 <div id="heading">头部</div> 46 <div id="content_left">内容菜单</div> 47 <div id="content_right">内容主体</div> 48 <div id="footing">底部</div> 49 </div> 50 </body> 51 </html>
二、使用<table>元素布局
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>table布局</title> 6 <style type="text/css"> 7 body{ 8 margin: 0px; 9 } 10 div#container{ 11 min-width: 100%; 12 height: 950px; 13 background-color: burlywood; 14 } 15 div#heading{ 16 width: 100%; 17 height: 10%; 18 background-color: aqua; 19 } 20 div#content_left{ 21 width: 30%; 22 height: 80%; 23 background-color: brown; 24 /*从左到右的排序方式 必须有*/ 25 float: left; 26 } 27 div#content_right{ 28 width: 70%; 29 height: 80%; 30 background-color: darkorange; 31 /*从左到右的排序方式 必须有 不然会上下排列*/ 32 float: left; 33 } 34 div#footing{ 35 width: 100%; 36 height: 10%; 37 background-color: forestgreen; 38 /*上面设定了浮动，如果不清除浮动，则默认跟着做浮动 不会出现在最下面*/ 39 clear: both; 40 } 41 </style> 42 </head> 43 <body marginheight="0px" marginwidth="0px"> 44 <table width="100%" height="950px" style="background-color: aliceblue"> 45 <tr> 46 <td colspan="2" width="100%" height="10%" style="background-color: aqua">这是头部</td> 47 </tr> 48 <tr> 49 <td width="30%" height="80%" style="background-color: darkcyan">左菜单</td> 50 <td width="70%" height="80%" style="background-color: olivedrab">右菜单</td> 51 </tr> 52 <tr> 53 <td width="100%" height="10%" colspan="2" style="background-color: mediumpurple">这是底部</td> 54 </tr> 55 </table> 56 </body> 57 </html>
