fieldset的运用

2012-10-07

fieldset的使用由于工作需要在一个页面中展示多个像groupbox空间的框，由于以前从来没有使用过fieldset标签

fieldset的使用
由于工作需要在一个页面中展示多个像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>

热点排行

Web前端

fieldset的运用