使用div+css模拟fieldset标签

fieldset是html中一个不常见的标签，一般用于包装表单元素以及显示一些提醒信息，在浏览器中会有一些非常酷的效果。虽然绝大部分的浏览器都支持css fieldset 样式，但是显示的效果仍不尽相似，如边框、宽度等，为了维持一致的效果，参考网上的资料，整理实现了使用div+css模拟fieldset。

因网上资料很多，且大多原理相似，不知最初何人所创，故此处只列举一个百度排名靠前的：

效果截图：

标题可以按照文字数量自动适应css fieldset 样式，边框材质可以改变，高度可以按照内容自动适应，当然有了源代码什么都可以改。

html源码：

<div id="DivFieldset1" style="font-family:微软雅黑;font-size:Small;display:block;clear:left;padding:0;margin:0;">
<div id="DivFieldset1_title" style="position:relative;display:inline;left:10px;top:8px;white-space:nowrap;text-align:center;background-color:#ffffff;font-weight:bold">这里是标题</div>
<div id="DivFieldset1_content" style="height:90px;width:400px;border:#D2691E 1px solid;">
<div style="margin:15px 5px 8px 10px;overflow:auto">这里是内容</div>
</div>
</div>

然后我又开了历史的倒车，把这个封装成了一个asp.net webform 自定义控件。

设计时效果：

设计时源码：

<cc1:DivFieldset ID="DivFieldset1" runat="server" FieldsetContent="这里是内容" FieldsetHeight="90px" FieldsetTitle="这里是标题" FieldsetWidth="400px" FieldsetBorderColor="Chocolate" Font-Names="微软雅黑" Font-Size="Small">
</cc1:DivFieldset>

运行效果跟纯html是一样一样的。

除了借助属性可以设定内容，还可以在标签中直接编写内容，但是它们没法选其二，并且属性优先，如下：

<cc1:DivFieldset ID="DivFieldset1" runat="server" FieldsetHeight="90px" FieldsetTitle="这里是标题" FieldsetWidth="400px" FieldsetBorderColor="Chocolate" Font-Names="微软雅黑" Font-Size="Small">这里是内容。
</cc1:DivFieldset>

控件的属性：

这几个特殊的属性是为了便于控制相关风格的，有了人们简单设定下就可以用上了，当然控件的其他有关样式的属性似乎会起作用。

如果愿意使用此控件，点击此处下载，无毒无公害。

本博客所有文章如无特别标明均为原创。

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