芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
3

使用 <hr> 标签创建水平分隔线

作者 芒果/分类 代码/发布于 2011-02-10 20:39

语义化 Web 是一件让人蛋疼的事,面对各种浏览器折腾的情况,想要挨个爆菊,总是会用没神马意义的 div 和 span 嵌套一层又一层。

比如制作一条水平分割线,如果你不觉得别扭,你可能会使用以下方法:

<div style="border-bottom:1px solid #000;"></div>

如果该容器用于包裹其他文档内容,加一条边框也未尝不可。但如果没有内容,简直多此一举。

HTML 给了我们另一种选择,<hr> 标签:

<hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。

这时候你可能会说,<hr> 标签默认样式长得真难看,好吧,来点 CSS 调整下(注意重设默认样式):

hr{
	border:none;
	margin:0;
	height:0;
	border-bottom:1px solid #000;
}

这样你爽了吧?另外,<hr> 支持 align/noshade/size/width 四个属性,不建议使用,请用样式设定。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/hr-tag-create-horizontal-separator/" title="使用 <hr> 标签创建水平分隔线" rel="bookmark">使用 <hr> 标签创建水平分隔线 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 3 条群众意见

  1. s女王 /2011-02-12 13:33

    ie6,7需要hack下

    demo:http://jsbin.com/aluhi3 回应

    #1
  2. IM路人 /2011-02-12 20:35

    恩恩,最近折腾过一个demo页面,就用到了重定义的 hr 回应

    #2
  3. 惜墨|个人提升 /2011-02-14 23:07

    哈,不错的技巧,我把hr改成蓝色了 回应

    #3

下面我简单说几句