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

2016-02-20 00:18 11 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属性。从表面上讲，两者没有明显的区别。但在不同的浏览器环境下，可能会存在一些差异。但这些都无关紧要了，因为大多数人看到的是一样的效果。

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

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

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

CSS实例教程:纯CSS实现圆角框

标签： Web开发

序言：在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。在我们的以前的项...

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

标签： Web开发

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

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

标签： Web开发

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

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

标签： Web开发

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

CSS教程(2)：通过实例学习CSS背景

标签： Web开发

本教程一共三个例子：1、设置背景颜色;2、设置文本的背景颜色;3、将图像设置为背景。参考网页教学网关于CSS背景的理论知识：CSS教程(1)：学习CSS背景相关知识 1、设置背景颜色本例演示如何为元素设置背景颜色。 html head style type="text/css" body {background-color: yellow} h1 {background-color: #00ff00} h2 {backg...

查看更多精彩>>