当前位置:首页>网站设计>css教程>正文

简单实例：用CSS设计水平虚线

来源:不详时间:07-06-24 点击: 点击这里收藏本文

　　用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.jzxue.com-建站学</title> <style type="text/css">  </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.jxue.com</title> <style type="text/css">  </style> </head> <body> <div id="aaa"><a href="http://www.jzxue.com/">建站学 - jzxue.com</a></div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

　　需要你注意hr方法中CSS的定义：hr {border:1px #cccccc dotted;} 用了dotted属性。在div的方法中用了dashed属性。从表面上讲，两者没有明显的区别。但在不同的浏览器环境下，可能会存在一些差异。但这些都无关紧要了，因为大多数人看到的是一样的效果。虚线。：）

把此文章收藏到：　　　　　

相关教程

·DIV CSS网页布局中id与class的

·哪些HTML标签在DIV CSS设计中是

·您需要掌握的八个CSS布局技巧

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册