注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML水平线段标记:HR  

2010-02-21 05:46:27|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  

 

 

 

           html水平线段标记

 
 
HR标签简介:

          

HR标签在HTML页面中创建一条水平线,在屏幕上显示一条水平线。

水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

在HTML中,<hr> 标签没有结束标签。在XHTML 中,<hr> 必须被正确地关闭,比如<hr />。

 

 

实例
被水平线分隔的标题和段落:

<h1>This is header 1</h1>
<hr>
<p>This is some text</p>

 

This is header 1


This is some text

 

 

<HR>的属性:

   size 水平线的宽度,规定hr元素的高度(厚度)。
   width 水平线的长度,用占屏幕宽度的百分比或象素值来表示,规定hr元素的长度。
   align 水平线的对齐方式,有LEFT RIGHT CENTER三种,规定hr元素的对齐方式。
   noshade 线段无阴影属性,为实心线段,规定 hr 元素的颜色呈现为纯色。

 

1、size线段粗细的设定:

 

<HR>
这是第一条线段,无size设定,取内定值SIZE=1来显示
<HR SIZE=5>
这是第二条线段,SIZE=5
<HR SIZE=10>
这是第三条线段,SIZE=10

 

 

 


这是第一条线段,无size设定,取内定值SIZE=1来显示
这是第二条线段,SIZE=5
这是第三条线段,SIZE=10

 

 

2、width线段长度的设定:

 

<HR SIZE=3>
 这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示
<HR width=50 SIZE=5>
这是第二条线段,WIDTH=50(点数方式)
<HR width="50%" SIZE=7>
这是第三条线段,WIDTH=50%(百分比方式)

 

 


这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示
这是第二条线段,WIDTH=50(点数方式)
这是第三条线段,WIDTH=50%(百分比方式)

 

3、align线段排列的设定:

 

<HR width="50%" SIZE=5>
 这是第一条线段,无ALIGN设定,(取内定值RIGHT显示)
<HR align=center width="60%" SIZE=7>
这是第二条线段,居中对齐
<HR align=right width="70%" SIZE=2>
这是第三条线段,向右对齐

 

 


这是第一条线段,无ALIGN设定,(取内定值RIGHT显示)
这是第二条线段,居中对齐
这是第三条线段,向右对齐

 

4、noshade无阴影的设定,为实心线段:

 

<HR WIDTH=80% SIZE=5>
这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
这是第二条线段,有NOSHADE设定

 


这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示
这是第二条线段,有NOSHADE设定

HR标签水平分隔线修饰特效:

 

none:无样式;dotted:点线;dashed:虚线;solid:实线;

double:双线;groove:槽线;ridge:脊线;inset:内凹;outset:外凸。

1、dotted:点线
<HR style="border:3 dotted #ff0033" width="100%" SIZE=3>


2、dashed:虚线
<HR style="border:3 dashed #ff0033" width="100%" SIZE=3>


3、solid:实线
<HR style="border:3 solid #ff0033" width="100%" SIZE=3>


4、double:双线
<HR style="border:3 double #ff0033" width="100%" SIZE=3>


5、groove:槽线
<HR style="border:6 groove #ff0033" width="100%" SIZE=6>


6、ridge:脊线
<HR style="border:6 ridge #ff0033" width="100%" SIZE=6>


7、inset:内凹
<HR style="border:6 inset #ff0033" width="100%" SIZE=6>


8、outset:外凸
<HR style="border:6 outset #ff0033" width="100%" SIZE=6>


通过实践5—8并不理想,最好不要用。

 

 

两头渐变透明 纺锤形 右边渐变透明 左边渐变透明 立体效果 钢针效果

备注:这几种效果不适合表内嵌套存在,例句写在表外:

1、两头渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>


2、纺锤形:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>


3、右边渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>


4、左边渐变透明:
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>


5、立体效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>


6、钢针效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>

 


欢迎光临启野博客!
  评论这张
 
阅读(1840)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017