| | | 活用表格美化网页 | | 2001-05-02·
·星河··天极设计在线
| 1 2 3 4 5 6 下一页 三、活用表格美化网页
表格的作用不仅仅局限于页面的元素定位、排版布局,在实际的应用我们还可以利用它来美化整个页面。接下来我们就将接触到表格的灵活应用,你会发现:原来表格的世界还可以这么精彩!
考虑到现在DreamWeaver、Frontpage等软件的广泛使用,完全用手写代码来编制网页的人越来越少,所以,在制作以下实例的过程中,我们多是利用DreamWeaver来完成前期工作,然后再手工修改代码,最终实现我们所期望的效果。
1、一个象素宽的分隔线
有时候在网页排版时,我们需要一条细线,用图片似乎有点劳师动众了,其实,这个小问题用表格就能搞定。请看下面的例子:
代码: <table width="100%" cellspacing="0" border="0" bgcolor="#000000" height="1" cellpadding="0"> <tr> <td></td> </tr> </table>
在DreamWeaver中的快速通道
在Dreamweaver中插入一个一行一列的表格,表格的属性面板设置如下:
切换到原代码视窗,将<td> </td>中的“ ”去掉就ok了。如下图:

说明:其实就是一个高为“1pix”的表格,需要注意的是表格内不要有其他任何内容。如果你还需要其他颜色的分隔线,只需要改变表格的背景色 bgcolor 就可以了。利用这种方法我们还可以制作出细竖线,将表格的宽该为“1”就可以了。
练习:试制作出如下的效果
2、利用“cellspacing”属性制作细线表格
1 2 3 4 5 6 下一页 | | | 感谢
访问天极网,如果您觉得该文章涉及版权问题,请看这里!
|
|