首页 理论教育水平线标签-基于HTML与CSS网页设计

水平线标签-基于HTML与CSS网页设计

【摘要】:要想在网页中生成一条水平分割线,将不同的内容信息分开,使文字看起来更加清晰明确,那么就要使用到
标签来达到此目的。一个简单的
标签可以实现简单的分割线,轻松地修饰段落排版,使之更加美观。
标签的多种属性就解决了这些问题。通过给
标签设置一定的属性,可以使它具有更强的表达效果。
标签常用的属性有width,size,align,color 和title。size 可以理解为分隔线的厚度或高度,属性值默认单位同宽度。例1.10:测试水平分割线标签。

要想在网页中生成一条水平分割线,将不同的内容信息分开,使文字看起来更加清晰明确,那么就要使用到<hr />标签来达到此目的。

一个简单的<hr/ >标签可以实现简单的分割线,轻松地修饰段落排版,使之更加美观。不过对于不同的应用场合,<hr />默认单一的线条样式显然难以满足要求。<hr/>标签的多种属性就解决了这些问题。

通过给<hr />标签设置一定的属性,可以使它具有更强的表达效果。<hr/>标签常用的属性有width,size,align,color 和title。width 即宽度设置,属性值默认单位为像素,也可以用百分比来表示分隔线所占空间的比例。size 可以理解为分隔线的厚度或高度,属性值默认单位同宽度。align 为对齐方式,类似于<p>的align。color即颜色,根据需要设置分隔线的不同颜色。title 属性使用不多,浏览者光标悬停在分隔线上时出现属性值的内容提示。

说明

<hr/>的默认对齐方式是居中。HTML 的宽度和高度属性默认单位为像素,一般无需标识单位。

<hr />还有一个属性是noshade,当分隔线没有设置颜色,并且设置了一定的size 时,分隔线看上去是立体下凹的,有阴影。如果使用了noshade 属性,分隔线将会呈现单色。在E:\web\chapter1 目录下创建名为hr.html 的网页文件,编写代码如例1.10 所示。

例1.10:测试水平分割线标签。(www.chuimin.cn)

运行效果如图1.11 所示。

图1.11 测试水平分割线标签