fieldset的使用

最新推荐文章于 2020-01-06 18:21:01 发布

zhoucl0220

最新推荐文章于 2020-01-06 18:21:01 发布

阅读量176

点赞数

分类专栏： Html/CSS 文章标签： CSS HTML F# 工作

本文链接：https://blog.csdn.net/zhoucl0220/article/details/83910775

版权

Html/CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

zhoucl0220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fieldset的使用

由于工作需要在一个页面中展示多个像groupbox空间的框，由于以前从来没有使用过fieldset标签，本能的想到的是用DIV+span的方式来实现，但是这有个缺点，就是span的位置通过的是绝对定位的，不能根据groupbox里面的内容自动的调整，因此采用了fieldset来实现：[code="html"] GroupBox Demo ...
复制链接

扫一扫

专栏目录