fieldset的使用

zhoucl

浏览: 48830 次
性别:
来自: 北京

最近访客更多访客>>

BuFanQi_Info

taylorgao

cyouakari

18318726484

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html/CSS

CSS HTML F#工作

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

分享到：