日期:2014-05-17  浏览次数:20519 次

Html标签-Fieldset学习与使用

笔者在做网站设计网页的时候,经常需要实现这样的效果:把页面显示的元素按分类(或者说按组)来显示。这样说理解起来很费力,上个图就清晰明了了。

这种分块的页面显示,笔者很是喜欢。特别是每一个块状都有围起来border,在块的标题不在块外也不在块内,而嵌在块的border当中。

笔者在以前曾经这样实现过这种效果:2个或3个div。div1作为拥有border的div,div2作为标题,用绝对定位的方法来固定在div1的border中。这种实现当然需要div2设置背景,而且div2的index要高于div1。div3可作为块内内容div。

这种实现方法也不太复杂。但毕竟采用的元素定位使得代价有点大。

其实我们可以采用FIELDSET标签轻松实现上述的效果。那么实现的代码是:

<fieldset>
<legend>这里面是标题<legend>
这里面是FIELDSET标签内的内容。
这里面是FIELDSET标签内的内容。
</fieldset>

很简洁的代码就可以实现了!而且这个标签兼容各大浏览器。虽然在表现上面有小差别,但并不影响分块,也不会导致元素在不同浏览器下错位。

扩展

  • 圆角
    该标签的属性与样式与标准的一样。但在浏览器兼容方面有些差异:在IE6+中块的边框表现为圆角;在Firefox和chrome下都是直角。FF支持CSS3,所以解决FF下的圆角问题很简单:为fieldset标签的样式加上-moz-border-radius:5px即可。
    但在chrome下圆角无解。
  • 标题居中
    很多时候我们希望legend标签中的标题居中,用fieldset的text-align是解决不了的。但可以设置legend的属性align=”center”(w3c不赞成使用此属性)。

转载此文请注明源文出处:http://w