首页 > 开发 > HTML > 正文

HTML教程:html水平线段<HR />

2020-09-18 22:19:00
字体:
来源:转载
供稿:网友

这个标签可以在屏幕上显示一条水平线,用以分割页面中的不同部分。

<hr>有三个属性:

   size 水平线的宽度
   width 水平线的长,用占屏幕宽度的百分比或象素值来表示
   align 水平线的对齐方式,有left right center三种
   noshade 线段无阴影属性,为实心线段

  我们可以用几个例子来说明这线段的用法:

 


 

线段粗细的设定

<html>
<head>
<title>线段粗细的设定</title>
</head>

<body>
<p>这是第一条线段,无size设定,取内定值size=1来显示<br>
<hr />
<p>这是第二条线段,size=5<br>
<hr size=5>
<p>这是第三条线段,size=10<br>
<hr size=10>
</body>

</html>


 

 

线段长度的设定
<html>
<head>
<title>线段长度的设定</title>
</head>

<body>
<p>这是第一条线段,无width设定,取width内定值100%来显示<br>
<hr size=3>
<p>这是第二条线段,width=50(点数方式)<br>
<hr width=50 size=5>
<p>这是第三条线段,width=50%(百分比方式)<br>
<hr width=50% size=7>
</body>

</html>

 


 

线段排列的设定

<html>
<head>
<title>线段排列的设定</title>
</head>

<body>
<p>这是第一条线段,无align设定,(取内定值center显示)<br>
<hr width=50% size=5>
<p>这是第二条线段,向左对齐br>
<hr width=60% size=7 align=left>
<p>这是第三条线段,向右对齐<br>
<hr width=70% size=2 align=right>
</body>

</html>


 

 

无阴影的设定

<html>
<head>
<title>无阴影的设定</title>
</head>

<body>
<p>这是第一条线段,无noshade设定,取内定值阴影效果来显示<br>
<hr width=80% size=5>
<p>这是第二条线段,有noshade设定<br>
<hr width=80% size=7 align=left noshade>
</body>

</html>

最后一个水平线:

 


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表