CSS fieldset 标签完成简单美化的表单代码,虽然它是一个表单,但对本例的教学意义来说应该划分到CSS类吧,用fieldset布置表单,简直是太方便了,不知道它的人,有可能会用UL/LI来布局表单,不是不可以,但精确布局表单结构会带来很大麻烦,何不使用fieldset呢?它带给你的绝对不只是惊喜…… 演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>fieldset表单</title> <style> h1 { font: 1.2em Arial, Helvetica, sans-serif; } input.txt { color: #00008B; background-color: #E3F2F7; border: 1px inset #00008B; width: 200px; } input.btn { color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; } form p { clear: left; margin: 0; padding: 0; padding-top: 5px; } form p label { float: left; width: 30%; font: bold 0.9em Arial, Helvetica, sans-serif; } fieldset { border: 1px dotted #61B5CF; margin-top: 16px; padding: 10px; } legend { font: bold 0.8em Arial, Helvetica, sans-serif; color: #00008B; background-color: #FFFFFF; } </style> </head> <body> <h1>用户注册表单:</h1> <form method="post" action="fieldset.html"> <fieldset> <legend>个人信息:</legend> <p> <label for="fullname">姓名:</label> <input type="text" name="fullname" id="fullname" class="txt" /> </p> <p> <label for="email">Email:</label> <input type="text" name="email" id="email" class="txt" /> </p> <p> <label for="password1">密码:</label> <input type="password" name="password1" id="password1" class="txt" /> </p> <p> <label for="password2">确认密码:</label> <input type="password" name="password2" id="password2" class="txt" /> </p> </fieldset> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="注册!" class="btn" /> </p> </form> </body> </html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行! 文章导航 CSS给select下拉列表的文字增加背景色带翻滚效果的导航条 利用jQuery模仿Flash效果