简单实例剖析：用CSS设计水平虚线
[ 来路：21kn.com 时间：2007-7-7 21:09:25 点击： ]
用CSS定义一条水平的虚线呢？
我们首先需要了解，关于线条的CSS的两个样式：
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
水平线条，我们可以用hr来实现，也可以定义一个div，将它的高度设为1px或其它你想要的高度。
CSS定义一条水平虚线hr的方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.21kn.com</title><style type="text/css"><!-- hr {border:1px #cccccc dotted;}--></style></head><body><hr size="1" noshade="noshade" /></body></html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
CSS定义一条水平虚线div的方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.21kn.com</title><style type="text/css"><!-- #aaa {border-top:1px dashed #cccccc;height: 1px;overflow:hidden;}--></style></head><body><div id="aaa"><a href="http://www.21kn.com/">网页教学网 - www.21kn.com</a></div></body></html>
需要你注意hr方法中CSS的定义：hr {border:1px #cccccc dotted;} 用了dotted属性。在div的方法中用了dashed属性。从表面上讲，两者没有明显的区别。但在不同的浏览器环境下，可能会存在一些差异。但这些都无关紧要了，因为大多数人看到的是一样的效果。虚线。：）
：：：：站长友情提示：多花一分钟学点什么都好：：：：
上一篇：使用DIV+CSS制作网页后，表格Table还有用吗？ 下一篇：网页CSS技巧：闭合浮动元素超级简单的方法
= = 免责声明 = =
① 欢迎转载我网所刊信息，请注明“来源：E天下网络”。 ② 凡本网注明“来源：XXX（非E天下网络）”的作品，均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的，请在30日内进行。 ※联系方式：Airtofly@163.com
：：推荐文章：：
：：图像设计：：
Copyright © 2007 21kn.com Inc. All rights reserved.e天下网络工作室
网站白天客服QQ：26875416 (非24小时) 合作QQ：597004688 粤ICP备06026423号
