css fieldset 样式_fieldset css样式_css fieldset

要超过以上的效果，我们可以在一个区域里用背景图片去做css fieldset 样式，其实在xhtml里有这种的标签可以去用。

插入代码：

<fieldset> 域（Defines a fieldset）

<legend> 域标题（Defines a title in a fieldset）

但是为了确保兼容性，实际操作出来并不是那么简单。页面代码：

插入代码：

<fieldset>

<legend>dUcky的私生活</legend>

<ul>

<li>dUcky的私生活！新年快乐！</li>

<li>dUcky的私生活！新年快乐！</li>

<li>dUcky的私生活！新年快乐！</li>

<li>dUcky的私生活！新年快乐！</li>

</ul>

</fieldset>

通过样式定义

插入代码：

*{font-size:12px;margin:0;padding:0; font-family:Arial, Helvetica, sans-serif;}

fieldset{padding:10px;margin:10px;width:160px;color:#453739; border:#453739 solid 1px;}

legend{color:#933A34;font-weight:bold; background:#FFFFFF;}

ul{list-style-type: none;}

li{margin-top:4px;}

通过CSS，我们可以超过自己想要的效果。但是这上面有些问题：

1. 关于兼容性。我首先是把所有的padding和margin都设成0，因为IE和FF默认的都不一样。

2. 在IE6里，控制fieldset与前面容器的视口是用padding-top，而margin-top没有反应...在FF里是用margin-top。

3. 如果定义fieldset的边框的风格bordercss fieldset 样式，那么在IE6里边框会与legend里的文字重叠叠加，而默认的风格不会。所以必须帮legend一个背景挡住边框，这里是background:#FFFFFF。

总的来说，在FF中更好控制一点，虽然这种的标签用的不多，但是可非常迅速的超过一些效果。但是看到有人说假如用fieldset来布局就不符合语义了，fieldset必须用在form标签后面。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-138699-1.html