fieldset的使用
由于工作需要在一个页面中展示多个像groupbox空间的框，由于以前从来没有使用过fieldset标签，本能的想到的是用DIV+span的方式来实现，但是这有个缺点，就是span的位置通过的是绝对定位的，不能根据groupbox里面的内容自动的调整，因此采用了fieldset来实现：
如果根据这样的布局，来通过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>
<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>