html水平线 虚线
2014-02-21 09:10
495 查看
<html>
<head><title>美丽的水平线</title></head>
<body>
<p>一条没有阴影粗细为5像素,宽为整个文档一般的居中的水平线
</p>
<hr noshade size=5 align=center width=50%>
</body>
</html>
<hr>属性:
size: 设置水平分隔线的高度,单位:像素默认值是2
width: 设置水平分隔线的宽度, 单位:像素 % 默认值是100%
align: 设置水平分隔线的对齐方式。 默认值是center 还有left right
color: 设置水平分隔线的颜色。 默认值是black
noshade: 取消水平线的3d阴影
例:<hr size=1 color=redwidth=300>
显示效果如下:
如果想要垂直的线,可以这样来进行设置:
例:
<hr size=50color=red width=3align=center>
效果如下:
我们经常也用<hr>来进行设置虚线
可由以下几种方法:
最简单一种: <hr width=150style="border:1px dashed red;height:1px">
<hr style="border: 1px dashed #ccc; width: 100%;height: 1px;" />
效果如下:
dashed为虚线的意思 red就是直接定义的颜色
还有一种:
<hr style="BORDER-BOTTOM-STYLE: dotted;BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted;BORDER-TOP-STYLE: dotted" color=blue size=1width=80>
效果如下:
再一种就是利用css来进行控制:
例:
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted;BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted
}
</STYLE>
而在使用时,:<hr class=dotline color=green size=3width=200>
原文地址:http://blog.sina.com.cn/s/blog_72ce76690100rdbh.html
<head><title>美丽的水平线</title></head>
<body>
<p>一条没有阴影粗细为5像素,宽为整个文档一般的居中的水平线
</p>
<hr noshade size=5 align=center width=50%>
</body>
</html>
<hr>属性:
size: 设置水平分隔线的高度,单位:像素默认值是2
width: 设置水平分隔线的宽度, 单位:像素 % 默认值是100%
align: 设置水平分隔线的对齐方式。 默认值是center 还有left right
color: 设置水平分隔线的颜色。 默认值是black
noshade: 取消水平线的3d阴影
例:<hr size=1 color=redwidth=300>
显示效果如下:
如果想要垂直的线,可以这样来进行设置:
例:
<hr size=50color=red width=3align=center>
效果如下:
我们经常也用<hr>来进行设置虚线
可由以下几种方法:
最简单一种: <hr width=150style="border:1px dashed red;height:1px">
<hr style="border: 1px dashed #ccc; width: 100%;height: 1px;" />
效果如下:
dashed为虚线的意思 red就是直接定义的颜色
还有一种:
<hr style="BORDER-BOTTOM-STYLE: dotted;BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted;BORDER-TOP-STYLE: dotted" color=blue size=1width=80>
效果如下:
再一种就是利用css来进行控制:
例:
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted;BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted
}
</STYLE>
而在使用时,:<hr class=dotline color=green size=3width=200>
原文地址:http://blog.sina.com.cn/s/blog_72ce76690100rdbh.html
相关文章推荐
- HTML 注释 水平线
- HTML基础(图像标签 和 水平线标签)
- html字体属性控制,水平线,上下标,插入图片
- Silverlight嵌入到HTML之windowless属性及运用AjaxControlToolKit时出现虚线边框的问题
- html中加入虚线
- 制作虚线效果的水平线
- 简单掌握HTML中水平线标注与代码注释的用法
- html实现虚线分隔线3例
- Silverlight嵌入到HTML之windowless属性及运用AjaxControlToolKit时出现虚线边框的问题
- HTML中添加虚线
- HTML换行符和水平线
- HTML下划线用虚线表示
- html:字体属性控制,水平线,上下标,插入图片
- html 水平线中间添加文字
- html实现一个不断滚动的虚线矩形
- HTML <hr /> 标签 在页面中创建一条水平线
- html里添加虚线
- HTML 标题、水平线、注释、查看网页源码
- 制作虚线经典,水平线虚线
- 在html中打出一条虚线