加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

html水平线 虚线

(2011-04-24 12:38:58)
标签:

杂谈

分类: 网页设计

<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=red width=300>
显示效果如下:

 


 



如果想要垂直的线,可以这样来进行设置:
例:
<hr size=50color=red width=3 align=center>
效果如下:

 


 



我们经常也用<hr>来进行设置虚线
可由以下几种方法:

最简单一种: <hr width=150 style="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=1 width=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=3 width=200>

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有