form div label .text{width:152px;height:26px;padding:0 2px;border:1px solid #ccc}
form div label b{ font-weight:normal;font-size:12px;color:#ccc;visibility:hidden}
form div em{ display:inline-block;font-size:12px;text-align:center;color:#fff;vertical-align:middle;font-style:normal;width:53px;height:15px;line-height:15px;background:#FFD099}
form div .active{ background-color:#FF6600}
div span{ display:inline-block;width:80px;text-align:right}
2016-04-23
2015-04-23
那些個(gè)圖片自己建立一個(gè)images文件夾，放進(jìn)去就行了
2015-04-23
style.css
/*reset*/
body,div,dl,dt,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td{margin:0;padding:0;font:12px/1.5 "????","Arial","sans-serif","Tahoma";color:#666}
ul,ol,li{ list-style:none}
img{ border:none}
input,select,img{ vertical-align:middle}
label{ vertical-align:middle}
input:focus,textarea:focus{ outline:none}
.btn{ border:none 0}
.mb10{ margin-bottom:10px}
/*main*/
form{ width:740px;height:500px;margin:100px auto}
form div{ overflow:hidden;clear:both}
form div label{ float:left;clear:both}
form div label .text{width:152px;height:26px;padding:0 2px;border:1px solid #ccc}
form div label b{ font-weight:normal;font-size:12px;color:#ccc;visibility:hidden}
form div em{ display:inline-block;font-size:12px;text-align:center;color:#fff;vertical-align:middle;font-style:normal;width:53px;height:15px;line-height:15px;background:#FFD099}
form div .active{ background-color:#FF6600}
div span{ display:inline-block;width:80px;text-align:right}
.submitBtn{ width:135px;height:33px;background:url(./images/sprite.png);color:#fff;margin:20px 0 0 80px}
.changeImg{ width:22px;height:22px;display:inline-block;vertical-align:middle;background:url(./images/sprite.png)no-repeat 0 -128px}
.msg{ line-height:12px;color:#999;float:left;margin-left:5px;display:none}
.msg ?i{ display:inline-block;vertical-align:middle;width:25px;height:20px;background:url(./images/sprite.png) no-repeat;}
.msg .ati{ background-position:0 -71px}
.msg .err{ background-position:0 -39px}
.msg .ok{ background-position:0 -99px}
2015-04-23
form.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="new.js"></script>
</head>
<body>
<form method="www.mukewang.com">
? ? <div><label><span>會員名：</span><input type="text" class="text" /></label><p class="msg"></p></div>
<div><label><span></span><b id="count"></b></label></div>
<div><label><span>登錄密碼：</span><input type="password" class="text"></label><p class="msg"></p></div>
<div style="margin:3px 0 10px 0"><label><span></span><em class="active">弱</em><em>中</em><em>強(qiáng)</em></label></div>
<div style="margin-bottom:20px"><label><span>確認(rèn)密碼：</span><input type="password" class="text" disabled="" /></label>
<p class="msg"><i class="ati"></i></p></div>
<div><label><span>驗(yàn)證碼:</span><input type="text" class="text" style="width:50px" />
<img src="images/get_img.jpg" width="100" height="30" /><a class="changeImg" href="javascript:;" title="重新獲取驗(yàn)證碼"></a></label></div>
? ? <div><input class="submitBtn btn" type="submit" value="同意協(xié)議并注冊" /></div>
</form>
</body>
</html>