精仿DiscuzX2右上角独立登入框效果（集成验证码问答）

PctDK

<style type="text/css">#umenu .loginform input.txt {margin:4px 3px 3px 5px;height:17px; line-height:17px; padding:2px 4px;border-top:#848484 1px solid;border-left:#848484 1px solid;border-right:#e0e0e0 1px solid;border-bottom:#e0e0e0 1px solid; width:120px;}
2 [9 Y& w3 Q( s" M/ WPCT論壇#umenu .checkbox {vertical-align:middle; margin:0px 0px 1px 0px;}
2 u) k' Z: \3 g* E) f# c1 u5 z( P#umenu .qqlogin {border-right:1px solid #ddd; margin-right:10px; padding-right:5px;text-align:center;margin-top:5px;}
8 D3 E9 F$ Z. W1 h; x4 rwww.pct.sclub.com.tw#umenu {z-index:888;}
. F" h" h/ V: k* ^, R+ @#umenu #yzbox { width:142px;position:absolute; border:1px solid #ddd; background:#fff; top:60px; right:100px; padding:5px;z-index:1000;}
/ R& {! |! \( M/ A4 L  ~www.pct.sclub.com.tw#umenu #questionid { margin:-1px; }4 H2 R" @8 v" E' m
#umenu .selecttype { width:140px;border:1px solid #ddd; overflow:hidden;margin:5px 0;height:auto!important;}* [4 f) A& I# B6 c1 a2 W! N/ d& n3 z$ x
#umenu #yzbox input.txt {width:132px;margin:0px;}
) C$ p; Z( n% J4 f; ?; a#umenu .closea { color:#333; font-size:12px; float:right;display:inline-block;width:16px;}
7 L3 @: w$ s; T6 r#umenu .submit {width:70px; border:#235994 1px solid;color:#fff;background:#06c;height:23px;}
  a, ^* N1 x- f* }$ \3 I) X#umenu .zd {margin-right:7px;}+ j1 ]# Q( N( `7 D, ^: P
#umenu .loginform label {display:inline!important;}www.pct.sclub.com.tw! ?% i+ ]5 \" p1 u
#umenu .loginform {width:auto!important;height:auto!important;border-right:0px!important;padding:0px!important;margin:0px!important;}PCT論壇8 [) i  n1 L1 N" a
.lzc a {display:inline-block;border:#e6e6e6 1px solid;background:#eee;font-weight:700;margin:2px 5px 0 10px!important;height:21px;line-height:21px;padding:0px 10px;}
6 X5 Y) i: v1 Z* c# L6 c1 A( aPCT論壇.yzwd {width:100px;display:inline-block;}& [7 [  c  y, V0 L5 i" C: d
</style>
: @5 e% F3 I* v! p0 u, {) ~<script type="text/javascript">
7 ^7 @+ b7 C9 r9 Ffunction $(id){return document.getElementById(id);}
/ K, V, [0 Z* z6 R3 ]- L$ mfunction Sdiv(Aid) {if($(Aid) !=null){$(Aid).style.display = 'block'}}
. {, l& ^  u) tPCT論壇function Cdiv(Bid) {if($(Bid) !=null){$(Bid).style.display = 'none'}}
. J. W9 a, v! \6 E8 Y* Dwww.pct.sclub.com.tw</script>www.pct.sclub.com.tw1 Q" U9 l# s6 _" H5 J) j  e
<div id="tb_1" style="display:none">$ t  R3 Q: e. ^3 }
<div class="qqlogin left">; G8 `3 m$ N: [0 Y- P2 F
<p><a href="/connect.php?mod=login&op=init&referer=index.php"><img src="http://images.5d6d.net/dz7/plugins/qqconnect/qq_login.gif" class="vm" alt="QQ登入" /></a></p>- i: X5 Y( `3 Z* @" N  ]
<p class="hm xg1" style="padding-top: 2px;">只需一步，快速開始</p>4 e  R& B+ O4 O1 [2 ~( Q/ u  G+ L

$ [$ l) \3 H* o0 J</div>9 W5 D% z3 f4 v) |4 x9 e7 m; ~
<div class="fastlogin left">+ e8 B$ e0 M6 O" A: i
<form method="post" name="login" id="loginform" class="gateform"  action="/logging.php?action=login&loginsubmit=yes">
/ m" H' i% M4 ~9 n0 m+ UPCT論壇<input type="hidden" name="formhash" value="a45a9ada" />
2 p& o& m3 P0 |+ T$ R: VPCT論壇<input type="hidden" name="referer" value="index.php" />
, g! G* l* N) ~8 v  O<div class="loginform nolabelform">( t7 ~2 k% Q/ }: ~' i* S4 u
<input type="hidden" name="loginfield" value="username" />
- R% P7 H1 o% a$ R  m2 p* f, |<p>用戶名<input type="text" name="username" autocomplete="off" size="36" class="txt" tabindex="1" value="" /><span class="zd"><input type="checkbox" class="checkbox" name="cookietime" id="cookietime" tabindex="1" value="2592000"  /> <label for="cookietime">自動登入</label></span><a href="javascript:;" title="忘記密碼" class="fpw">忘記密碼</a></p><p>密碼<input type="password" id="password3" name="password"  onfocus="javascript:Sdiv('yzbox')"  size="36" class="txt" tabindex="1" /><span><button class="submit" type="submit" name="loginsubmit" value="true" tabindex="1">登入</button></span><span class="lzc"><a href="registerbbs.php" title="註冊帳號">馬上加入PCT會員</a></span></p>
3 W1 w* L+ N. P6 I7 |: r8 n, [www.pct.sclub.com.tw<div id="yzbox" style="display:none;">www.pct.sclub.com.tw$ p6 y$ o( `5 P2 H, O
<p class="s_clear"><span class="left yzwd">驗證問答</span><a href="javascript:viod(0);" title="關閉" class="closea">X</a></p>
3 p2 q6 ~8 X! u- j, K<div class="selecttype">
* i( ~2 A. R4 z& p# `www.pct.sclub.com.tw<select id="questionid" name="questionid">3 c+ X: M: n/ d* F0 R9 j
<option value="0">安全提問</option>
) m3 _3 \) J: J( W<option value="1">母親的名子</option>, w4 J; y7 a/ X
<option value="2">爺爺的名字</option>
" {* {6 a! P8 E& q8 o9 l<option value="3">父親出生的城市</option>
) n; j; X) \. S3 q6 Z/ D/ c<option value="4">您其中一位老師的名字</option>www.pct.sclub.com.tw. ~/ x& q/ J  c8 Y* b
<option value="5">您個人電腦的型号</option>$ h6 W( e: g$ W' _: ?) M
<option value="6">您最喜歡的餐廳名稱</option>
! K& U2 {( \& B: O4 ?, B/ A4 i/ @PCT論壇<option value="7">駕駛執照的最後四位数字</option>
: r0 T' o; |& ]# X$ q</select>3 f5 m: ~1 A; K3 p% W/ F
</div>www.pct.sclub.com.tw$ h* z8 `/ T' c' n
<p><input type="text" name="answer" id="answer"  autocomplete="off" size="36" class="txt" tabindex="1" /></p>www.pct.sclub.com.tw# E3 w; t1 Q6 d$ d9 {% X1 t1 R
</div>www.pct.sclub.com.tw' e9 p; D. n- l) t6 O$ Q( H
</div>% u. K+ @0 e7 e9 Z( o* @
</form></div>
! G# M* W8 p; ^' o! t</div><script type="text/javascript">
( P6 a4 p/ }+ k; i# W( F! Uif ($("umenu") != null ){
" [  s) O6 k1 r/ J3 t! o0 QPCT論壇if(discuz_uid == 0){$("umenu").innerHTML = $('tb_1').innerHTML;$('tb_1').style.display='none'};if (discuz_uid == 0 && $("logging") != null){$("umenu").innerHTML =""}}</script>