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

2016-02-19 21:37 12 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的HTML教程:html水平线段<HR />,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

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

HR有三个属性:

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

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

Webjx.Com

线段粗细的设定

HTML
HEAD
TITLE线段粗细的设定/TITLE
/HEAD

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

/HTML

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

线段长度的设定
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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

Webjx.Com

线段排列的设定

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

Webjx.Com  

无阴影的设定

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

最后一个水平线:

来源:https://www.tulaoshi.com/n/20160219/1626673.html

延伸阅读
标签: Web开发
在不同浏览器,H标签呈现的效果是有区别的。目前, 流行的浏览器是IE6,FIREFOX(FF)和IE7,随着时间的推移, 相信使用IE7的比例会不断提高。 作为块级元素的H标签,在写CSS文件时, 最好定义行高line-height, 不要定义高度height,因为定义了高度, 就限制了块级元素H的高度, 在不同浏览器, 很难实现比较统一的效果,我曾经遇到,在IE6,...
标签: Web开发
对于CSS定义hr /水平线标签,常用的有以下几种样式,仅供参考。对于  程序代码 height:1px;border:none; 的主要用途就是Css Reset,关于Css Reset可以搜索下博客里其他文章介绍。  HTML代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xm...
&lt;海的味道我知道&gt;海苔猪油椭圆蟹壳黄偷懒无发酵版 1. 1.主要配料和步骤,可以参考这位同学的菜单(因为这里省去了发酵步骤)认为上面参考做剂子叠层次的面团和出来比较干,所以调整了油水配比。<arel="nofollow"target="_blank"href="http://www...
标签: Web开发
var re = /&/g; var str = "http://www.163.com?id=333&r=999&o=000"; str.replace(re,"&");
标签: 口味食谱
红糖姜味奶茶-物喜姜茶包版&lt;可以喝的姜撞奶&gt; 准备材料,制作过程中请使用微波炉可用的杯子。 沸水浸泡姜茶,加盖泡五分钟。<br>去盖后再用微波炉加热30秒,更好的释放姜味。 ...

经验教程

646

收藏

70
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部