论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS制作虚线的方法

文章类别:div+css | 发表日期:2009-12-5 11:25:08

如何用CSS定义虚线?在CSS中定义虚线一般有两种方法:一种是定义DIV的CSS样式,另一种是通过hr的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.webjx.com</title>
<style type="text/css">
<!--
hr {border:1px #cccccc dotted;}
-->
</style>
</head>
<body>
<hr size="1" noshade="noshade" />
</body>
</html>
CSS定义一条水平虚线div的方法:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.webjx.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.webjx.com/">网页教学网</a></div>
</body>
</html>
需要你注意hr方法中CSS的定义:hr {border:1px #cccccc dotted;} 用了dotted属性。在div的方法中用了dashed属性。从表面上讲,两者没有明显的区别。但在不同的浏览器环境下,可能会存在一些差异。但这些都无关紧要了,因为大多数人看到的是一样的效果。

上一篇:li标记在IE下产生间距 人气:2400
下一篇:{教程}CSS布局调试的方法 人气:2320
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058