来看看：CSS进修教程:制造网页中的虚线

显示全部楼层 · 发表于 2015-1-15 22:58:36

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以轻松地控制页面的布局。
破洛洛文章简介：CSS进修教程:制造网页中的虚线.
1、CSS边框虚线
这里经由过程边框属性的虚线边框border把持虚线。以下设置的css高度(cssheight)和css宽度（csswidth）为350像素是为了便于寓目演示别的意义。
1、四边为虚线边框
border:1pxdashed#000;玄色虚线边框
实例：
CSS代码：.poluoluo{border:1pxdashed#000;height:50px;width:350px}
Html代码：<divclass="poluoluo">我的四边为玄色虚线边框</div>
这里设置边框缩写体例界说poluoluo选择器四边边框为1px的玄色虚线边框
2、右边为虚线：
CSS代码：.poluoluo-1{border-left:1pxdashed#000;height:50px;width:350px}
Html代码：<divclass="poluoluo-1">我的右边为玄色虚线边框</div>
这里设置了右边一边为玄色虚线边框
3、右侧为虚线：
CSS代码：.poluoluo-2{border-right:1pxdashed#000;height:50px;width:350px}
Html代码：<divclass="poluoluo-2">我的右侧为玄色虚线边框</div>
这里设置了右侧一边为玄色虚线边框
4、顶部边（上边）为虚线：
CSS代码：.poluoluo-3{border-top:1pxdashed#000;height:50px;width:350px}
Html代码：<divclass="poluoluo-3">我的上边为玄色虚线边框</div>
这里设置了顶边（上边线）一边为玄色虚线边框
5、底部边（下边）为虚线：
CSS代码：.poluoluo-4{border-bottom:1pxdashed#000;height:50px;width:350px}
Html代码：<divclass="poluoluo-4">我的下边为玄色虚线边框</div>
这里设置了底边（下边线）一边为玄色虚线边框
6、恣意一边不为虚线，别的三边为虚线情形
到场右侧边框不为虚线而没有边线，别的三边为玄色虚线边框
CSS代码：.poluoluo-5{border:1pxdashed#000;border-right:0;height:50px;width:350px}
Html代码：<divclass="poluoluo-5">我的右侧边框无边线而别的三边为玄色虚线边框实例</div>
这里经由过程先设置了该工具四边为玄色1px虚线边框，紧接着又设置一边边线为0的设置，如许相称于设置了3边的边框虚线属性，可是这里注重边框属性设置前后按次。
以上实例完全DIV+CSS代码以下：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="gb2312"/>
<title>CSS虚线poluoluo实例申明www.poluoluo.com</title>
<style>
.poluoluo{border:1pxdashed#000;height:50px;width:350px}
.poluoluo-1{border-left:1pxdashed#000;height:50px;width:350px}
.poluoluo-2{border-right:1pxdashed#000;height:50px;width:350px}
.poluoluo-3{border-top:1pxdashed#000;height:50px;width:350px}
.poluoluo-4{border-bottom:1pxdashed#000;height:50px;width:350px}
.poluoluo-5{border:1pxdashed#000;border-right:0;height:50px;width:350px}
/*www.poluoluo.com实例*/
</style>
</head>
<body>
www.poluoluo.comcss虚线实例实例<br>
<divclass="poluoluo">我四边为虚线边框</div><br>
<divclass="poluoluo-1">我的右边为玄色虚线边框</div><br>
<divclass="poluoluo-2">我的右侧为玄色虚线边框</div><br>
<divclass="poluoluo-3">我的上边为玄色虚线边框</div><br>
<divclass="poluoluo-4">我的下边为玄色虚线边框</div><br>
<divclass="poluoluo-5">我的右侧边框无边线而别的三边为玄色虚线边框实例</div>
</body>
</html>

以演出示各类色彩的虚线边框
2、超链接虚线下划线
我们经常会设置被链接的笔墨内容要末带链接有虚线的下划线，或鼠标挪动到有链接的笔墨上呈现虚线下划线，这个怎样完成的呢，这里为人人先容关于CSS超链接的虚线下划线。
1、带链接笔墨有虚线下划线
这里也是经由过程CSSborder边框属性来把持超链接a工具的CSS款式。
演示CSS代码：
a{border-bottom:1pxdashed#111;}/*这里设置带链接笔墨下方呈现虚线下划线*/
a:hover{border:0;}/*这里设置鼠标经由被链接笔墨时不呈现虚线*/
完全DIVCSS代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="gb2312"/>
<title>CSS虚线下划线poluoluo实例申明</title>
<style>
a{border-bottom:1pxdashed#111;text-decoration:none;}
a:hover{border:0;}
</style>
</head><body>
接待到<ahref="http://www.poluoluo.com/">CSS教程网</a>的www.poluoluo.com-poluoluo进修CSS
</body>
</html>

申明：text-decoration:none;这个是往失落CSS下划线（超链接默许自带的下划线属性）
2、鼠标放到带链接笔墨上时呈现虚线下划线
这个和下面的很类似，只需对超链接A往失落下划线，对鼠标经由时CSS笔墨下方带虚线边框下划线便可。
对应CSS代码：
a{text-decoration:none;}
a:hover{border-bottom:1pxdashed#111;}
如许就完成，人人无妨尝尝超链接下划线实例。
3、列表型CSS虚线下划线
经常他们碰着CSSLI的时分但愿此CSS列表款式每排内容下方为虚线支解开
这里我们只需对LI设置底部边框为虚线边框便可。
起首我们是在对CSS初始化情形下设置CSS代码：
li{border-bottom:1pxdashed#111;}便可完成li的列表型内容如上图虚线离隔效果（每一个li内容底部为虚线边框）
另有我们经常遇见li的底部虚线很小就如一个点那末小，而border就很难完成了，这个时分我们必要一张虚线的点图片便可(一边高1像素宽3像素的1像素色彩图片便可完成)
对应CSSli代码：
Li{background:url(点图片路径)repeat-x0bottom}
这里不再具体演示我们在VIP也为人人具体先容和演示制造各类li的CSS常识点。
4、CSS界说一条程度虚线
这个很好了解一样可使用对div工具设置边框虚线便可完成同时也能够对hr程度线标签设置虚线属性便可完成程度虚线支解线。
这里带过便可以下：
对div设置程度虚线线：
.poluoluo{height:1px;width:100%;border-bottom:1pxdashed#000;}
对应HTML代码：
<divclass="poluoluo"></div>
对hr程度支解线设置属性：
第一种，hr标签内设置虚线属性：
<hrsize=1style="color:blue;border-style:dashed;width:100%">

这里申明的是size为hr的值，一边设置为1便可。
第二种在css代码或CSS文件中界说hr的css属性
hr{border-top:1pxdashed#00F;}
对应html内hr题目代码：
<hrsize=1>
这里是对hr设置边框为顶部或底部高低边恣意一条边为1像素的蓝色虚线边框，同时设置hr的size为1，和第一种值大抵不异，独一区分在于当在html中呈现了hr标签，hr标签属性就为css设置，假如网页屡次呈现能够削减代码量。
以上一切的CSS虚线触及了cssborer、CSS下划线、CSS背景等常识，但愿人人能把握各类办法设置DIV虚线、虚线边框、DIVCSS虚线下划线的办法。
</p>
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：CSS进修教程:制造网页中的虚线

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子