千爪妖 在 用组合表格设置网站页面 日志中写到:
|
用组合表格设置网站页面 |
使用说明:其中需要用到代码转换成图标,代码转换成图标的方法请打开以下网页:229.两种超简单代码转换法(原创)
<table align=center border=1 cellspacing=0 cellpadding=0 width=450>
<tbody>
<tr>
<td width=100><div align=center>Logo</div></td>
<td width=350><div align=center>Banner here</div></td>
</tr>
</tbody>
</table>
以下是上面代码的效果,也就是“页面”的第一层了:
|
Logo |
Banner here |
往下的第二层将显示网站的大类,即这个网站的几个主版块。我们这里打算将网站分区五个版块,那么,我们需要设置一张1×5的表格,代码如下:
“层二”代码:
<tabel align=center border=1 cellpadding=0 cellspacing=0 width=450>
<tbody>
<tr>
<td width="20%"><div align=center>版块一</div></td>
<td width="20%"><div align=center>版块二</div></td>
<td width="20%"><div align=center>版块三</div></td>
<td width="20%"><div align=center>版块四</div></td>
<td width="20%"><div align=center>版块五</div></td>
</tr>
</tbody>
</table>
把层一和层二代码连起来,效果如下(为了使层一和层二分开两个象素,我们在层一和层二之间加了一个高度为2的表格,以下各层之间均如此处理):
|
Logo |
Banner here |
|
版块一 |
版块二 |
版块三 |
版块四 |
版块五 |
第三层是网页主体内容显示的地方,我们分成左、中、右三个方阵,左右各占100个象素,中间还剩250个象素。由于是三个表格并排在一起的,我们需要在它们的外面加一个表格以框住它们。
“层三”代码:
<table align=center border=0 cellpadding=0 cellspacing=0 width=450><tbody><tr><td>
<table align=left border=1 cellpadding=0 cellspacing=0 width=100 height=200><tbody><tr><td></td></tr></tbody></table>
<table align=left border=1 cellpadding=0 cellspacing=0 width=250 height=200><tbody><tr><td></td></tr></tbody></table>
<table align=left border=1 cellpadding=0 cellspacing=0 width=100 height=200><tbody><tr><td></td></tr></tbody></table>
</td></tr></tbody></table>
层三的代码中,我们令三个表格都居左,这样它们才能很好地靠在一起而不至于散乱。当然了,如果我们用一张一行三列的表格来代替效果会更好,也更容易控制,出于表格的“组合”演示,我们才用了三张并排的表格的。
以下是三个层的组合效果:
|
Logo |
Banner here |
|
版块一 |
版块二 |
版块三 |
版块四 |
版块五 |
|
最后是第四层了。我们在第四层里放置一些网页信息之类的内容。这个简单,只是一张表格而已。代码并不复杂:
“层四”代码:
<table align=center border=1 cellpadding=0 cellspacing=0 width=450><tbody>
<tr>
<td><div align=center>【你要写的字】</div></td>
</tr>
</tbody></table>
好了,让我们来看看整体效果如下:
|
Logo |
Banner here |
|
版块一 |
版块二 |
版块三 |
版块四 |
版块五 |
|
|
|
OK,我们的“网页”做好了,剩下的工作是,你得通过修改和增加代码来细化它、美容它,使之成为一个真正的网页。
更多精彩内容请点击博客主页:
偶的博客网博客主页:
http://yls88888.bokee.com 或 鹰震天或
偶的和讯博客主页:

