使用fieldset布局新闻模块
定义和用法
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
legend：说明每组的内容描述。
实例：
Code<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
fieldset {
padding:5px;
/*margin:10px;*/
/* color:#C6C6C6; */
}
legend {
font-weight:800;
background:#fff;
border:#b6b6b6 solid 1px;
padding:1px 6px;
color: rgb(1, 0, 67);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<legend>重要新闻</legend>
<table width="100%;" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="19%;" valign="top">
<img src="./images/zhengyaoxinwen.jpg" alt="重要新闻图片" width="90" height="150" border="0" class="border1pixblack" /></td>
<td width="81%;" valign="top">
<table width="100%;" height="100%;"><tbody><tr><td valign="top">
<div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td>
<td align="left"><a title="海洋所两人获青岛市岗位能手表彰" href="http://www.qdio.ac.cn/newsview.aspx?newsid=698"> <font color="#000000">海洋所两人获青岛市岗位能手表彰</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle ">
<img src="./images/titlearrow.gif"></div></td><td align="left"><a title="“科学一号”轮穿越赤道进入南太平洋" href="http://www.qdio.ac.cn/newsview.aspx?newsid=695"> <font color="#000000">“科学一号”轮穿越赤道进入南太平洋</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td><td align="left"><a title="科海物业优质高效完成生物楼供暖改造工程" href="http://www.qdio.ac.cn/newsview.aspx?newsid=692"> <font color="#000000">科海物业优质高效完成生物楼供暖改造工程</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td><td align="left"><a title="所领导新年慰问老领导" href="http://www.qdio.ac.cn/newsview.aspx?newsid=691"> <font color="#000000">所领导新年慰问老领导</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td><td align="left"><a title="海洋所博士实践团走进市南区第二实验小学参加“主题能动教学法”研讨会" href="http://www.qdio.ac.cn/newsview.aspx?newsid=690"> <font color="#000000">海洋所博士实践团走进市南区第二实验小学参加“主…</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle ">
<img src="./images/titlearrow.gif"></div></td><td align="left"><a title="海洋所2008年度管理人员和管理部门年度考核工作启动" href="http://www.qdio.ac.cn/newsview.aspx?newsid=688"> <font color="#000000">海洋所2008年度管理人员和管理部门年度考核工…</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td><td align="left"><a title="中科院海洋所全国海洋综合调查50周年暨改革开放30周年纪念大会隆重举行" href="http://www.qdio.ac.cn/newsview.aspx?newsid=684"> <font color="#000000">中科院海洋所全国海洋综合调查50周年暨改革开放…</font></a></td></tr><tr><td> </td><td align="right"><a href="http://www.qdio.ac.cn/newslist.aspx?newscatalog=1"> <font color="rgb(1, 0, 67)">>>更多内容</font></a></td></tr></tbody></table></td>
</tr>
</tbody></table>
</fieldset>
<fieldset>
<legend>重要新闻</legend>
<table width="100%;" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="19%;" valign="top">
<img src="./images/zhengyaoxinwen.jpg" alt="重要新闻图片" width="90" height="150" border="0" class="border1pixblack" /></td>
<td width="81%;" valign="top">
<table width="100%;" height="100%;"><tbody><tr><td valign="top">
<div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td>
<td align="left"><a title="海洋所两人获青岛市岗位能手表彰" href="http://www.qdio.ac.cn/newsview.aspx?newsid=698"> <font color="#000000">海洋所两人获青岛市岗位能手表彰</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle ">
<img src="./images/titlearrow.gif"></div></td><td align="left"><a title="“科学一号”轮穿越赤道进入南太平洋" href="http://www.qdio.ac.cn/newsview.aspx?newsid=695"> <font color="#000000">“科学一号”轮穿越赤道进入南太平洋</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td><td align="left"><a title="科海物业优质高效完成生物楼供暖改造工程" href="http://www.qdio.ac.cn/newsview.aspx?newsid=692"> <font color="#000000">科海物业优质高效完成生物楼供暖改造工程</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td><td align="left"><a title="所领导新年慰问老领导" href="http://www.qdio.ac.cn/newsview.aspx?newsid=691"> <font color="#000000">所领导新年慰问老领导</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td><td align="left"><a title="海洋所博士实践团走进市南区第二实验小学参加“主题能动教学法”研讨会" href="http://www.qdio.ac.cn/newsview.aspx?newsid=690"> <font color="#000000">海洋所博士实践团走进市南区第二实验小学参加“主…</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle ">
<img src="./images/titlearrow.gif"></div></td><td align="left"><a title="海洋所2008年度管理人员和管理部门年度考核工作启动" href="http://www.qdio.ac.cn/newsview.aspx?newsid=688"> <font color="#000000">海洋所2008年度管理人员和管理部门年度考核工…</font></a></td></tr><tr><td valign="top"><div class=".homenewstitle "><img src="./images/titlearrow.gif"></div></td><td align="left"><a title="中科院海洋所全国海洋综合调查50周年暨改革开放30周年纪念大会隆重举行" href="http://www.qdio.ac.cn/newsview.aspx?newsid=684"> <font color="#000000">中科院海洋所全国海洋综合调查50周年暨改革开放…</font></a></td></tr><tr><td> </td><td align="right"><a href="http://www.qdio.ac.cn/newslist.aspx?newscatalog=1"> <font color="rgb(1, 0, 67)">>>更多内容</font></a></td></tr></tbody></table></td>
</tr>
</tbody></table>
</fieldset>
</div>
</form>
</body>
</html
扫一扫
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
