（七）实现网页布局

实现界面：

　　　　　　

代码如下：

 1 <html>
 2     <head>
 3         <title>实现网页布局</title>
 4         <meta charset="utf-8">
 5     </head>
 6     <body topmargin="0">
 7     <table border="0" width="960" align="center" cellpadding="0" cellspacing="0">
 8         <tr height="90" bgcolor="red" align="center">
 9         <td><font size="6" color="white"><b>网页的头部</b></font></td>
10         </tr>
11     <tr>
12     <td>
13     <table  bgcolor="yellow"  height="500" width="30%" align="left">
14     <tr align="center">
15     <td><b><font size="6" color="white">网页的左部</font></b></td>
16     </tr>
17     </table>
18     <table  bgcolor="grenn"  height="500" width="70%" align="left">
19     <tr align="center">
20     <td><b><font size="6" color="white">网页的右部</font></b></td>
21     </tr>
22     </table>
23     </td></tr>
24     <tr height="90" bgcolor="red" align="center">
25         <td><font size="6" color="white"><b>网页的底部</b></font></td>
26     </tr>
27     </table>
28     </body>
29 </html>

 重要属性解释：

6.topmargin="0"  标示浏览器与表格上方距离为0px

7.cellpadding="0" 每个单元格之间的距离为0

7.cellspacing="0" 表格边框与单元格补白的距离

 

posted @ 2015-12-21 11:29  花花妹子。  阅读(150)  评论(0)    收藏  举报