首页产品库评测行情新闻|手机数码笔记本台式机DIY硬件数字家庭数码相机办公外设|软件下载游戏开发|社区

更多

数码相机
MP4
LCD
机箱
音箱

天极网 > 软件频道 > 设计在线 > 网页UI设计>活用表格美化网页

活用表格美化网页

2001-05-02 11:19作者:出处:天极设计在线责任编辑:


  三、活用表格美化网页

  表格的作用不仅仅局限于页面的元素定位、排版布局,在实际的应用我们还可以利用它来美化整个页面。接下来我们就将接触到表格的灵活应用,你会发现:原来表格的世界还可以这么精彩!

  考虑到现在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”属性制作细线表格

共6页。 1 2 3 4 5 6 :

关注此文的读者还看过:

返回网页UI设计首页

共6页。 123456下一页

软件频道最新更新

热点推荐

天极服务|关于我们|About us|网站律师|RSS订阅|友情合作|加入我们|天极动态|网站地图|意见反馈|MSN/QQ上看天极
Copyright (C) 1999-2012 Yesky.com, All Rights Reserved 版权所有 天极网络