Html标签-Fieldset学习与应用

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://www.aszx0413.com/blog