用fieldset、legend实现文字写在边线上的效果

先看一下用fieldset、legend实现的文字写在边线上的效果：

怎么样？不错吧，当然这里还加了自己的样式使得更漂亮，其实这是用简单的fieldset、legend标签实现的，实现如上效果代码如下：

<fieldset?style="width:?85%">
1. ??????????????<legend><span?class="wz">个人信息</span></legend>??????????????????<table?width="100%"?border="0"?cellpadding="0"?cellspacing="1"?class="table1">
2. ????????????????????<tr>????????????
3. ??????????????????????????<td?width="15%"?height="21"?class="biao_bg1"><span?class="wz">姓名：</span>?</td>??????????????????????????<td?width="30%"?class="td1">
4. ????????????????????????????<input?name="name"?type="text"?size="25"?class="wz">??????????????????????????</td>
5. ??????????????????????????<td?width="15%"?height="21"?class="biao_bg1"><span?class="wz">性别：</span></td>??????????????????????????<td?width="30%"?class="td1"?>?????????????????????????
6. ????????????????????????????????<select?name=sex?class="wz"?style="width:?150px;">????????????????????????????????????<option?value=0>男</option>
7. ????????????????????????????????????<option?value=1>女</option>????????????????????????????????</select>
8. ??????????????????????????</td>????????????????????</tr>
9. ????????????????????<tr>??????????????????????????<td?width="15%"?height="21"?class="biao_bg1"><span?class="wz">MSN：</span>?</td>
10. ??????????????????????????<td?width="30%"?class="td1">????????????????????????????<input?name="msn"?type="text"?size="25"?class="wz">
11. ??????????????????????????</td>??????????????????????????<td?width="15%"?height="21"?class="biao_bg1"><span?class="wz">QQ：</span>?</td>
12. ??????????????????????????<td?width="30%"?class="td1">????????????????????????????<input?name="qq"?type="text"?size="25"?class="wz">
13. ??????????????????????????</td>????????????????????</tr>
14. ????????????????????<tr>??????????????????????????<td?width="15%"?height="21"?class="biao_bg1"><span?class="wz">生日：</span>?</td>
15. ??????????????????????????<td?width="30%"?class="td1">?????????????????????????????<strong:newdate?name="birthday"?id="birthday"?width="150px"?skin="whyGreen"?isicon="true"></strong:newdate>
16. ??????????????????????????</td>??????????????????????????<td?width="15%"?height="21"?class="biao_bg1"><span?class="wz">家庭住址：</span></td>
17. ??????????????????????????<td?width="30%"?class="td1"><input?name=address?type="text"?size="25"?class="wz"></td>????????????????????</tr>
18. ??????????????????</table>????????????</fieldset>

?

1 楼 xwkp2008 2008-12-02 仅限于IE