Fdream's Blog
专注于WEB前端开发
Powered by Google

虚线表格的制作方法

13 晴天 2005-4
Fdream 发表于 Ajax Web, 已被阅读 15043 次, 评论 2 条
关键词:网页 设计 特效 CSS 技巧
[ 阅读字体大小: ]

浏览网站的时候总是看见很多虚线表格,使得网页的边线看起来更舒服,其实做起来也很简单了,在表格的html里加上这个:

引用内容:

style="BORDER-LEFT:#000000 1PX DASHED;

BORDER-RIGHT: #000000 1PX DASHED;

BORDER-TOP: #000000 1PX DASHED;

BORDER-BOTTOM: #000000 1PX DASHED"

颜色是十六位代码,你可以自己设。

注:只能在IE5.5以上版本里用,到了NETSCAPE里一点用处都没有,除非你用做好的底图填充。

下面是一个例子:

引用内容:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD><TITLE>虚线表格</TITLE>

<META http-equiv=Content-Type content="text/html; charset=gb2312">

<STYLE>

.box {

BORDER-RIGHT: #000000 1px dotted; BORDER-TOP: #000000 1px dotted; BORDER-LEFT: #000000 1px dotted; WIDTH: 300px; COLOR: #000000; BORDER-BOTTOM: #000000 1px dotted; BACKGROUND-COLOR: #ffffff

}

.box1 {

BORDER-RIGHT: #000000 1px dotted; BORDER-TOP: #000000 0px dotted;

BORDER-LEFT: #000000 1px dotted; WIDTH: 300px; COLOR: #000000;

BORDER-BOTTOM: #000000 1px dotted; BACKGROUND-COLOR: #ffffff

}

</STYLE>

</HEAD>

<BODY>

<CENTER>

<table width="100%" id="table1" cellspacing="0" cellpadding="0"

style="border-width: 0; ">

<tr>

<td class=box> </td>

</tr>

<tr>

<td class=box1> </td>

</tr>

<tr>

<td class=box1> </td>

</tr>

</table>

</CENTER>

</BODY>

</HTML>

Related articles 您可能对这些文章也感兴趣:
Related comments 与该文相关的评论:(我也想说几句)
引用这个评论  Fdream 于 11/1/2005 12:28:08 PM 发表评论: 

Who are you?

Who are you?
引用这个评论  hello 于 11/1/2005 12:46:45 AM 发表评论: 

del&#101;te me

del&#101;te me
Add a comment 我来说两句: 
禁止表情
禁止UBB
禁止图片
识别链接
识别关键字
表  情
arrow
用户名:   密码:  (匿名可不写) 同时注册?
验证码:   看不清?换个图片  看不清楚?换个图片

 
Copyright © 2005-2008,Fdream All Rights Reserved
Processed in 0.1875396 second(s) , unknow queries
Powered by OWord V0.1, Even Not Alpha
(此博客程序为半成品,请勿索取,以免给您的心灵造成创伤^_^)
鄂ICP备05026031号