载入中
自定义HTML载入中... loading
282.用组合表格设置网站页面 [原创 2006-12-14 02:57:49]  删除... 
我顶 字号:

千爪妖用组合表格设置网站页面 日志中写到:

用组合表格设置网站页面

使用说明:其中需要用到代码转换成图标,代码转换成图标的方法请打开以下网页: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 或 鹰震天

偶的和讯博客主页:

http://yayb.blog.hexun.com鹰震天

发表评论
大 名:
(不填写则显示为匿名者)
网 址:
(您的网址,可以不填)
标 题:
内 容:
请根据下图中的字符输入验证码:
(您的评论将有可能审核后才能发表)
和讯个人门户 v1.0 | 和讯部落 | 客服中心