html写网页如何布局

2020-11-27 来源：客趣旅游网

html常用的布局有两种。第一种一是div布局，优点是比较方便简洁，代码比较少，制作和维护也比较容易，就是有些地方不同的浏览器兼容性不一样，可能会有不同的显示。第二种是table布局，代码比较多，到后期维护起来是非常头疼的，但是table布局规避了许多浏览器不兼容的问题。

1.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 class="content"> 
 <div class="left"></div> 
 <div class="right"></div> 
 </div> 
 <footer></footer> 
</body> 
 
 
</html>

2.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" style="background-color:gray"> 
 <tr> 
 <td colspan="2" width="100%" height="10%" style="background-color: aqua" ><td> 
 </tr> 
 <tr> 
 <td width="20%" height="80%" style="background-color: blue" ><td> 
 <td width="80%" height="80%" style="background-color: blue" ><td> 
 </tr> 
 <tr> 
 <td colspan="2" width="100%" height="10%" style="background-color: black" ><td> 
 </tr> 
 
 </table> 
</body> 
 
 
</html>

总结：

table布局比较局限，div 比较开放，设计样式比较多，效果美观，table好处是所有浏览器都兼容div缺点是兼容性很麻烦。

全部栏目

html写网页如何布局