HTML水平线<hr>怎么用?
jerkzhang
<hr>标签在HTML页面中会显示成一条分隔内容的水平线。
<h1>H1标题</h1> <p>这是一个段落</p> <hr> <h2>H2标题</h2> <p>这是另一个段落</p> <hr> <p>这是又一个段落</p>
点击这里在专否沙盒中体验一下使用<hr>标签来画水平分割线。
<hr>标签默认情况下的display属性是block,即<hr>元素的两边都不会有其他内容,独立成行,对于分割线的颜色、粗细、样式都可以根据对border属性进行修改。
<style> hr { border-top: 1px solid red; border: 1px solid green; border-bottom: 1px solid blue; } </style> <hr>
通过上例可以看出border-top、border、border-bottom这三个属性都可以对<hr>标签的样式造成影响,所以比较合适的一种做法就是,把四边中的三边的设置成0粗度,仅显示其中一边。如下所示:
<style> hr { border: 0px; border-top: 1px solid red; } </style> <hr>