CSS实例教程:CSS制作虚线的2种方法

2016-02-20 00:18 5 1 收藏

今天图老师小编给大家展示的是CSS实例教程:CSS制作虚线的2种方法，精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！

【 tulaoshi.com - Web开发】

如何用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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlewww.webjx.com/titlestyle type="text/css"!--hr {border:1px #cccccc dotted;}--/style/headbodyhr size="1" noshade="noshade" //body/html
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

CSS定义一条水平虚线div的方法：

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlewww.webjx.com/titlestyle type="text/css"!--#aaa {border-top:1px dashed #cccccc;height: 1px;overflow:hidden;}--/style/headbodydiv id="aaa"a href="http://www.webjx.com/"网页教学网/a/div/body/html
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

来源:https://www.tulaoshi.com/n/20160220/1631634.html

上一篇： CSS网页制作入门实例:首行缩进两个文字
下一篇： Win10系统任务管理没有explorer.exe进程怎么办

看过《CSS实例教程:CSS制作虚线的2种方法》的人还看了以下文章更多>>

CSS实例教程:制作漂亮的网页表单

标签： Web开发

初中级练习，高手朋友们可以飘过。要求达到如下图所示的效果，各位不妨试一试~ 代码如下： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" hea...

Div CSS实例教程：页面制作方法

标签： Web开发

做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。就制作而言，我将一张页面分为四层：框架、布局、模块、列表和数据块。一、框架页面的框架基本上都是：“头”、“主体”、“尾”。但是对于一些页面如Tudou.com，由于布局的需要，还应在“头”的下面还要加个“菜单”。二、布局（以下...

CSS实例教程:制作网站横向导航

标签： Web开发

在上面一节我们讲到的是垂直的导航.但是大多网站用的还是横向的导航,那么就来跟我学下横向导航是如何实现的. 要怎么实现下面的效果.只要在列表项之间避免换行就行了,所以要把li转换为内联. HTML和CSS代码如下: ============================= !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

CSS实例教程:清除浮动Clear

标签： Web开发

课程关键词：清除浮动Clear 还记得第二课我们做的例子的效果么？最后效果是，红色方块和蓝色方块都处于一行，我们使用Float:left，打击了块状元素的霸道即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了Float:left;后，红色方块终于允许蓝色方块和它处于同一行。如图：我们换一种方法表达上面的意思，因为红色...

css实例教程:理解Float的含义

标签： Web开发

课程关键词：浮动页面布局有两种方式 1）浮动Float 2）定位Position 今天就来一个小小的练习，让大家理解Float的含义要求： 1）两个方块，一个红色#900，一个蓝色#009； 2）红色方块宽度和高度均为200像素，蓝色方块宽度为300像素，高度为200像素； 3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；页面效...

查看更多精彩>>