结构化表单布局
<head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>选择符类型_标签选择符</title> <style type="text/css"> #regForm fieldset { padding:20px;; border:0; border-top:1px #d0d0bf solid; } #regForm legend { padding:0 10px; font-weight:bold; } #regForm .dataArea { padding:3px 0; } #regForm .frist { padding:8px 0 2px; } #regForm .subArea input { padding:1px 4px; } #regForm label { width:112px; text-align:right; float:left; } </style> </head> <body> <form id="regForm"> <fieldset> <legend>登陆信息</legend> <div class="dataArea frist"> <label for="username"> 用户 名 ： </label><input type="text" id="username" class="input" /> </div> <div class="dataArea"> <label for="password"> 密 码 ： </label><input type="text" id="password" class="input" /> </div> <div class="dataArea"> <label for="passwordVerify"> 确 认 密 码 ： </label><input type="text" id="passwordVerify" class="input" /> </div> </fieldset> <fieldset> <legend>个人信息</legend> <div class="dataArea frist"> <label for="nickname"> 昵 称 ： </label><input type="text" id="nickname" /> </div> <div class="dataArea"> <label for="email" class="hint"> 电子邮 件 ： </label><input type="text" id="email" /> </div> <div class="subArea"> <input type="submit" value="注册 " /> <input type="button" value="返回" /> </div> </fieldset> </form> </body>
表单外边框设置
<head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>选择符类型_标签选择符</title> <style type="text/css"> Fieldset { Margin:0 0 10px 0; Padding: 5px; Border: 1px solid #333; } Legend { Background-color: #ddd; Margin:0; Padding: 5px; Border-style: solid; Border-width: 1px; Border-color: #fff #aaa #666 #fff; } Fieldset { Background: #ddd; } </style> </head> <body> <form> <fieldset> <legend>登陆信息</legend> </fieldset> </form> </body>