css水平线样式,css线条样式

CSS如何定义HR水平线样式

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

专注于为中小企业提供成都网站制作、做网站、外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业忻城免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

html xmlns="" xml:lang="en" lang="en"

head

titleCSS定义HR水平线/title

style type="text/css"

.hr0{ height:1px;border:none;border-top:1px dashed #0066CC;}

.hr1{ height:1px;border:none;border-top:1px solid #555555;}

.hr2{ height:3px;border:none;border-top:3px double red;}

.hr3{ height:5px;border:none;border-top:5px ridge green;}

.hr4{ height:10px;border:none;border-top:10px groove skyblue;}

/style

/head

body

hr class="hr0" /

hr class="hr1" /

hr class="hr2" /

hr class="hr3" /

hr class="hr4" /

/body

/html

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的style标签中，输入css代码：div {height:60px;border-bottom:1px dashed}。

3、浏览器运行index.html页面，此时通过css定义了一个水平的虚线。

CSS定义HR水平线的几种样式，不要小看了HR水平线哦，用好了会给你的网页增色不少，这一段代码分别定义了几种漂亮的HR样式及颜色，供你参考，如果喜欢，直接拷贝代码就用吧。

当前文章：css水平线样式,css线条样式
转载来源：http://6mz.cn/article/dsgpphi.html