由于工作需要在一个页面中展示多个像groupbox空间的框,由于以前从来没有使用过fieldset标签,本能的想到的是用DIV+span的方式来实现,但是这有个缺点,就是span的位置通过的是绝对定位的,不能根据groupbox里面的内容自动的调整,因此采用了fieldset来实现:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GroupBox Demo</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<fieldset id="f_01">
<legend id="l_01">本单位上报情况</legend>
<div id="outDiv_01">
<table id="tb_01">
<tr>
<td>标题栏一</td>
<td>标题栏二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
</table>
</div>
</fieldset>
<fieldset id="f_02">
<legend id="l_02">本单位上报情况</legend>
<div id="outDiv_02">
<table id="ta_02">
<tr>
<td>标题栏一</td>
<td>标题栏二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
</table>
</div>
</fieldset>
<fieldset id="f_03">
<legend id="l_03">本单位上报情况</legend>
<div id="outDiv_03">
<table id="tb_03">
<tr>
<td>标题栏一</td>
<td>标题栏二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
</table>
</div>
</fieldset>
</body>
</html>
如果根据这样的布局,来通过fieldset的id在相应的CSS文件中如下所示:
#f_01, #f_02, #f_03 {
margin:5px 10px 10px 10px;
}
table tr hover {
background-color:red;
cursor:hand;
}
则会出现:在table的tr中,鼠标滑过的时候,在IE6中,各个fieldset之间出现小幅的动,因此在后来改用Div来包裹fieldset,通过Div来设置相应的margin值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>GroupBox Demo</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<div id="oDiv_01>
<fieldset id="f_01">
<legend id="l_01">本单位上报情况</legend>
<div id="outDiv_01">
<table id="tb_01">
<tr>
<td>标题栏一</td>
<td>标题栏二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="oDiv_02>
<fieldset id="f_02">
<legend id="l_02">本单位上报情况</legend>
<div id="outDiv_02">
<table id="ta_02">
<tr>
<td>标题栏一</td>
<td>标题栏二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="oDiv_03>
<fieldset id="f_03">
<legend id="l_03">本单位上报情况</legend>
<div id="outDiv_03">
<table id="tb_03">
<tr>
<td>标题栏一</td>
<td>标题栏二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
<tr>
<td>数据行--列一</td>
<td>数据行--列二</td>
</tr>
</table>
</div>
</fieldset>
</div>
</body>
</html>
分享到:
相关推荐
MyJsp(html的fieldset使用 MyJsp(html的fieldset使用MyJsp(html的fieldset使用MyJsp(html的fieldset使用
6. **layout**:FieldSet 使用的布局类型,可以选择 `accordion`、`anchor`、`border`、`card`、`column`、`fit`、`form` 或 `table`。可以通过 `layoutConfig` 配置进一步定制布局参数。 7. **animCollapse**:...
本文将详细介绍如何使用Extjs实现一个两行两列布局的`FieldSet`。 #### 一、整体结构设计 首先,我们需要理解给定代码的整体结构。该代码定义了一个名为`setsc`的`FieldSet`实例。这个实例包含两个主要部分:标题...
例如,可以使用 border 属性来设置 fieldset 元素的边框样式,可以使用 padding 属性来设置 fieldset 元素的内边距,可以使用 margin 属性来设置 fieldset 元素的外边距等。 在交互方面,fieldset 元素可以使用 ...
Fieldset使用React Contex,这会影响性能,因此请确保您的数据和字段树确实如此复杂,以至于需要<Fieldset> 。 无论如何,一开始不要尝试使用它。 :check_mark_button: 如果满足以下条件,则可能需要它: 您确实...
<fieldset id="annex1" style="width:800px"> <legend>SubTable 1 SubTable List Field1 Field2 Field3 ...
在这个"jquery fieldset和legend标签代码.zip"中,我们很可能会找到一个使用jQuery来增强这两个元素样式的示例。 jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个...
这篇博客文章“fieldset相关的总结”可能详细介绍了`<fieldset>`的使用方法、作用以及在实际项目中的应用。尽管没有具体的描述内容,但我们可以从标签“源码”和“工具”推测,博主可能深入探讨了`<fieldset>`的HTML...
这里提到的模仿MSDN的可收放Fieldset,可能是指微软开发者网络(MSDN)网站上的一种实现方式,它们通常会使用自定义的图形和动画效果来提供更好的视觉体验。 首先,我们来看标签:"收放"、"HTML"、"fieldset"、...
本文将深入探讨`<fieldset>`标签的概述、用途以及如何使用它来创建更加清晰、有结构的表单。 一、`<fieldset>`标签的基本概念 `<fieldset>`标签就像一个容器,可以将相关的表单字段(如输入框、选择框、按钮等)...
用Ext自定义一个类似于Fieldset的组件,还有数据绑定昂,跟json数据的交互,和后台交互使用了URLLoader,很强大,之前在网上找了很多,没有找到,后来我师傅给我源码,这里跟大家分享一下,有用到的童鞋们可以参考...
cmxform-fieldset
6. **layout**: FieldSet可以使用多种布局模式,如accordion、anchor、border、card、column、fit、form和table。每种布局都有其特定的用途和配置方式。 7. **animCollapse**: 如果设置为`true`,FieldSet在展开和...
`<fieldset>`标签用于定义一个字段集,通常与`<legend>`标签配合使用,`<legend>`为字段集提供了一个标题或说明,帮助用户理解字段集的目的。例如: ```html <fieldset> <legend>Personalia: <label>Name: ...
"fieldset 和 legend 标签的使用和样式设置" 在 HTML 中,fieldset 和 legend 标签是两个常用的标签,用于组织和描述表单元素。但是,这两个标签经常被设计师遗忘或忽视,本文将重点介绍这两个标签的使用、样式设置...
从文件内容中可以看出,这篇文章详细讲解了如何使用JavaScript来实现FieldSet元素的展开与收缩功能。为了达到这个效果,需要使用HTML来构建FieldSet界面,再结合JavaScript来控制其内部表格的显示和隐藏,以及相应的...
本篇将详细探讨如何使用JavaScript来控制`<fieldset>`元素的高度。 #### 代码解读 首先,让我们来分析一下给定的示例代码。这段代码定义了一个名为`admin_Size`的函数,该函数接受两个参数:`num`(表示要调整的...
Flex3自定义组件类似于Fieldset
`<legend>` 标签是与 `<fieldset>` 配对使用的,它定义了 `<fieldset>` 的标题或说明。`<legend>` 的内容会显示在 `<fieldset>` 的顶部,提供表单分组的描述。对于屏幕阅读器用户来说,`<legend>` 还提供了重要的上...