CSS实例教程:制作漂亮的网页表单
|
初中级练习，高手朋友们可以飘过。要求达到如下图所示的效果，各位不妨试一试~
代码如下： <!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Form demo</title> <style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#666666; background:#fff; text-align:center; } * { margin:0; padding:0; } a { color:#1E7ACE; text-decoration:none; } a:hover { color:#000; text-decoration:underline; } h3 { font-size:14px; font-weight:bold; } pre,p { color:#1E7ACE; margin:4px; } input, select,textarea { padding:1px; margin:2px; font-size:11px; } .buttom{ padding:1px 10px; font-size:12px; border:1px #1E7ACE solid; background:#D0F0FF; } #formwrapper { width:450px; margin:15px auto; padding:20px; text-align:left; border:1px solid #A4CDF2; } fieldset { padding:10px; margin-top:5px; border:1px solid #A4CDF2; background:#fff; } fieldset legend { color:#1E7ACE; font-weight:bold; padding:3px 20px 3px 20px; border:1px solid #A4CDF2; background:#fff; } fieldset label { float:left; width:120px; text-align:right; padding:4px; margin:1px; } fieldset div { clear:left; margin-bottom:2px; } .enter{ text-align:center;} .clear { clear:both; } --> </style> </head> <body> <div id="formwrapper"> <h3>已注册用户登录</h3> <form action="" method="post" name="apLogin" id="apLogin"> <fieldset> <legend>用户登录</legend> <div> <label for="Name">用户名</label> <input type=&q |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
