QQ拖拽及状态栏选择
HTML
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>QQ练习</title> 5 <link href="css/main.css" rel="stylesheet" /> 6 <script src="js/drag.js"></script> 7 </head> 8 <body> 9 <div class="loginPanel" id="loginPanel"> 10 <div style="position: relative; z-index: 1;"> 11 <div class="ui_boxyClose" id="ui_boxyClose"></div> 12 </div> 13 <div class="login_logo_webqq"></div> 14 15 <div class="inputs"> 16 <div class="sign-input"><span>帐 号：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" 17 class="input01" tabindex="1" value="QQ号码或Email帐号" 18 onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" /></span></div> 19 <div class="sign-input"><span>密 码：</span><span><input name="p" id="p" maxlength="16" 20 type="password" class="input01" tabindex="2" /></span></div> 21 </div> 22 23 <div class="bottomDiv"> 24 <div class="btn" style="float: left"></div> 25 <div> 26 <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="选择在线状态"> 27 <div id="loginStateShow" class="login-state-show online">状态</div> 28 <div class="login-state-down">下</div> 29 <div class="login-state-txt" id="login2qq_state_txt">在线</div> 30 <ul id="loginStatePanel" class="statePanel login-state" style="display: none"> 31 <li id="online" class="statePanel_li"> 32 <div class="stateSelect_icon online"></div> 33 <div class="stateSelect_text">我在线上</div> 34 </li> 35 <li id="callme" class="statePanel_li"> 36 <div class="stateSelect_icon callme"></div> 37 <div class="stateSelect_text">Q我吧</div> 38 </li> 39 <li id="away" class="statePanel_li"> 40 <div class="stateSelect_icon away"></div> 41 <div class="stateSelect_text">离开</div> 42 </li> 43 <li id="busy" class="statePanel_li"> 44 <div class="stateSelect_icon busy"></div> 45 <div class="stateSelect_text">忙碌</div> 46 </li> 47 <li id="silent" class="statePanel_li"> 48 <div class="stateSelect_icon silent"></div> 49 <div class="stateSelect_text">请勿打扰</div> 50 </li> 51 <li id="hidden" class="statePanel_li"> 52 <div class="stateSelect_icon hidden"></div> 53 <div class="stateSelect_text">隐身</div> 54 </li> 55 </ul> 56 </div> 57 </div> 58 </div> 59 </div> 60 </body> 61 </html>