課程
/前端開發(fā)
/JavaScript
/DOM事件探秘
大家誰有qq和按鍵的關(guān)于HTML和css的代碼
2017-03-06
源自：DOM事件探秘 4-4
正在回答
在html中的代碼：
? ? <div class="loginPanel" id="loginPanel">
? ? ? ? ?<div style="position: relative; z-index: 1;">
? ? ? ? ? ? <div class="ui_boxyClose" id="ui_boxyClose"></div>
? ? ? ? </div>
? ? ? ? <div class="login_logo_webqq"></div>
?
? ? ? ? <div class="inputs">
? ? ? ? ? ? <div class="sign-input"><span>帳 號：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ號碼或Email帳號" onFocus="if (value =='QQ號碼或Email帳號'){value =''}" onBlur="if (value ==''){value='QQ號碼或Email帳號';}" /></span></div>
? ? ? ? ? ? <div class="sign-input"><span>密 碼：</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
? ? ? ? <div class="bottomDiv">
? ? ? ? ? ? <div class="btn" style="float: left"></div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="選擇在線狀態(tài)">
? ? ? ? ? ? ? ? ? ? <div id="loginStateShow" class="login-state-show online">狀態(tài)</div>
? ? ? ? ? ? ? ? ? ? <div class="login-state-down">下</div>
? ? ? ? ? ? ? ? ? ? <div class="login-state-txt" id="login2qq_state_txt">在線</div>
? ? ? ?<ul id="loginStatePanel" class="statePanel login-state" style="display: none">
? ? ? ? <li id="online" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon online"></div>
? ? ? ? ? ? <div class="stateSelect_text">我在線上</div>
? ? ? ? </li>
? ? ? ? <li id="callme" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon callme"></div>
? ? ? ? ? ? <div class="stateSelect_text">Q我吧</div>
? ? ? ? <li id="away" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon away"></div>
? ? ? ? ? ? <div class="stateSelect_text">離開</div>
? ? ? ? <li id="busy" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon busy"></div>
? ? ? ? ? ? <div class="stateSelect_text">忙碌</div>
? ? ? ? <li id="silent" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon silent"></div>
? ? ? ? ? ? <div class="stateSelect_text">請勿打擾</div>
? ? ? ? <li id="hidden" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon hidden"></div>
? ? ? ? ? ? <div class="stateSelect_text">隱身</div>
? ? </ul>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? </div>
在css中的代碼：
? .loginPanel {
? ? ? ? ? ? width: 380px;
? ? ? ? ? ? height: 247px;
? ? ? ? ? ? left: 400px;
? ? ? ? ? ? top: 120px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? background: #f6f6f6;
? ? ? ? ? ? -moz-border-radius: 10px;
? ? ? ? ? ? -webkit-border-radius: 10px;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? -moz-box-shadow: 0 0 8px #000;
? ? ? ? ? ? -webkit-box-shadow: 0 0 8px #000;
? ? ? ? ? ? box-shadow: 0 0 8px #000;
? ? ? ? }
? ? ? ? .login_logo_webqq {
? ? ? ? ? ? background: url('../images/login_window_logo.png') no-repeat -210px -0px;
? ? ? ? ? ? margin-left: 100px;
? ? ? ? ? ? margin-top: 10px;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 44px;
? ? ? ? ? ? cursor: move;
? ? ? ? .inputs {
? ? ? ? ? ? font: bold 15px arial;
? ? ? ? ? ? margin-left: 80px;
? ? ? ? ? ? margin-top: 30px;
? ? ? ? ? ? .inputs .sign-input {
? ? ? ? ? ? ? ? padding-bottom: 20px;
? ? ? ? ? ? }
? ? ? ? ? ? ? ? .inputs .sign-input input {
? ? ? ? ? ? ? ? ? ? width: 170px;
? ? ? ? ? ? ? ? ? ? border: 1px #ccc solid;
? ? ? ? ? ? ? ? ? ? color: #868686;
? ? ? ? ? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? ? ? ? ? padding: 2px;
? ? ? ? ? ? ? ? ? ? -moz-border-radius: 10px;
? ? ? ? ? ? ? ? ? ? -webkit-border-radius: 10px;
? ? ? ? ? ? ? ? ? ? -khtml-border-radius: 10px;
? ? ? ? ? ? ? ? ? ? -border-radius: 10px;
? ? ? ? ? ? ? ? ? ? outline: none;
? ? ? ? ? ? ? ? }
? ? ? ? .btn {
? ? ? ? ? ? background: url("../images/login_btn.png") no-repeat -111px 0;
? ? ? ? ? ? width: 111px;
? ? ? ? ? ? height: 36px;
? ? ? ? ? ? border: 0;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 20px;
? ? ? ? ? ? color: #0C4E7C;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? margin-left: 14px;
? ? ? ? .login-state-trigger {
? ? ? ? ? ? display: block;
? ? ? ? ? ? float: left;
? ? ? ? ? ? height: 16px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? width: 120px;
? ? ? ? ? ? margin: 4px 0 0 0;
? ? ? ? .login-state-trigger2 {
? ? ? ? ? ? margin: 10px 0 0 20px;
? ? ? ? .login-state-down {
? ? ? ? ? ? background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent;
? ? ? ? ? ? height: 6px;
? ? ? ? ? ? margin-top: 5px;
? ? ? ? ? ? text-indent: -999em;
? ? ? ? ? ? width: 7px;
? ? ? ? .login-state-show {
? ? ? ? ? ? height: 14px;
? ? ? ? ? ? width: 14px;
? ? ? ? ? ? margin: 1px 4px 0 0;
? ? ? ? .login-state-txt {
? ? ? ? ? ? margin-left: 5px;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? >line-height:18px!important;
? ? ? ? .login-state .callme {
? ? ? ? ? ? background: url("../images/ptlogin.png") -72px 0 no-repeat;
? ? ? ? .login-state .online {
? ? ? ? ? ? background: url("../images/ptlogin.png") 0 0 no-repeat;
? ? ? ? .login-state .away {
? ? ? ? ? ? background: url("../images/ptlogin.png") -18px 0 no-repeat;
? ? ? ? .login-state .busy {
? ? ? ? ? ? background: url("../images/ptlogin.png") -36px 0 no-repeat;
? ? ? ? .login-state .silent {
? ? ? ? ? ? background: url("../images/ptlogin.png") -108px 0 no-repeat;
? ? ? ? .login-state .hidden {
? ? ? ? ? ? background: url("../images/ptlogin.png") -54px 0 no-repeat;
? ? ? ? .statePanel {
? ? ? ? ? ? display: none;
? ? ? ? ? ? right: 68px;
? ? ? ? ? ? top: 193px;
? ? ? ? ? ? z-index: 10;
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? border-width: 1px;
? ? ? ? ? ? border-style: solid;
? ? ? ? ? ? border-color: #ccc #6a6a6a #666 #cdcdcd;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 133px;
? ? ? ? ? ? background: white;
? ? ? ? ? ? line-height: 1.5;
? ? ? ? ? ? .statePanel .statePanel_li {
? ? ? ? ? ? ? ? display: block;
? ? ? ? ? ? ? ? float: left;
? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? padding: 3px 0;
? ? ? ? ? ? ? ? width: 100px;
? ? ? ? ? ? ? ? height: 16px;
? ? ? ? ? ? ? ? line-height: 16px;
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? ? ? zoom: 1;
? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? .stateSelect_icon {
? ? ? ? ? ? margin: 2px 0 0 5px;
? ? ? ? .stateSelect_text {
? ? ? ? ? ? margin: 0 0 0 22px;
? ? ? ? .bottomDiv {
? ? ? ? ? ? margin-left: 70px;
? ? ? ? .ui_boxyClose{width:28px;height:28px;position:absolute;top:-10px;right:-10px;cursor:pointer;background:url('../images/boxy_btn.png') no-repeat;z-index:1}.ie6_0 .ui_boxyClose{background:0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')}
非常有喜 提問者
舉報
DOM事件？本課程會通過實例來給小伙伴們講解如何使用這些事件
1 回答QQ面板的html和css代碼
3 回答代碼問題-求幫助
2 回答HTML出現(xiàn)亂碼
2 回答不是很懂這段代碼。。求解釋
5 回答代碼錯在哪里了 萌新求解
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-03-06
在html中的代碼：
? ? <div class="loginPanel" id="loginPanel">
? ? ? ? ?<div style="position: relative; z-index: 1;">
? ? ? ? ? ? <div class="ui_boxyClose" id="ui_boxyClose"></div>
? ? ? ? </div>
? ? ? ? <div class="login_logo_webqq"></div>
?
? ? ? ? <div class="inputs">
? ? ? ? ? ? <div class="sign-input"><span>帳 號：</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ號碼或Email帳號" onFocus="if (value =='QQ號碼或Email帳號'){value =''}" onBlur="if (value ==''){value='QQ號碼或Email帳號';}" /></span></div>
? ? ? ? ? ? <div class="sign-input"><span>密 碼：</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
? ? ? ? </div>
? ? ? ? <div class="bottomDiv">
? ? ? ? ? ? <div class="btn" style="float: left"></div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="選擇在線狀態(tài)">
? ? ? ? ? ? ? ? ? ? <div id="loginStateShow" class="login-state-show online">狀態(tài)</div>
? ? ? ? ? ? ? ? ? ? <div class="login-state-down">下</div>
? ? ? ? ? ? ? ? ? ? <div class="login-state-txt" id="login2qq_state_txt">在線</div>
? ? ? ?<ul id="loginStatePanel" class="statePanel login-state" style="display: none">
? ? ? ? <li id="online" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon online"></div>
? ? ? ? ? ? <div class="stateSelect_text">我在線上</div>
? ? ? ? </li>
? ? ? ? <li id="callme" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon callme"></div>
? ? ? ? ? ? <div class="stateSelect_text">Q我吧</div>
? ? ? ? </li>
? ? ? ? <li id="away" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon away"></div>
? ? ? ? ? ? <div class="stateSelect_text">離開</div>
? ? ? ? </li>
? ? ? ? <li id="busy" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon busy"></div>
? ? ? ? ? ? <div class="stateSelect_text">忙碌</div>
? ? ? ? </li>
? ? ? ? <li id="silent" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon silent"></div>
? ? ? ? ? ? <div class="stateSelect_text">請勿打擾</div>
? ? ? ? </li>
? ? ? ? <li id="hidden" class="statePanel_li">
? ? ? ? ? ? <div class="stateSelect_icon hidden"></div>
? ? ? ? ? ? <div class="stateSelect_text">隱身</div>
? ? ? ? </li>
? ? </ul>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
在css中的代碼：
? .loginPanel {
? ? ? ? ? ? width: 380px;
? ? ? ? ? ? height: 247px;
? ? ? ? ? ? left: 400px;
? ? ? ? ? ? top: 120px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? background: #f6f6f6;
? ? ? ? ? ? -moz-border-radius: 10px;
? ? ? ? ? ? -webkit-border-radius: 10px;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? -moz-box-shadow: 0 0 8px #000;
? ? ? ? ? ? -webkit-box-shadow: 0 0 8px #000;
? ? ? ? ? ? box-shadow: 0 0 8px #000;
? ? ? ? }
? ? ? ? .login_logo_webqq {
? ? ? ? ? ? background: url('../images/login_window_logo.png') no-repeat -210px -0px;
? ? ? ? ? ? margin-left: 100px;
? ? ? ? ? ? margin-top: 10px;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 44px;
? ? ? ? ? ? cursor: move;
? ? ? ? }
? ? ? ? .inputs {
? ? ? ? ? ? font: bold 15px arial;
? ? ? ? ? ? margin-left: 80px;
? ? ? ? ? ? margin-top: 30px;
? ? ? ? }
? ? ? ? ? ? .inputs .sign-input {
? ? ? ? ? ? ? ? padding-bottom: 20px;
? ? ? ? ? ? }
? ? ? ? ? ? ? ? .inputs .sign-input input {
? ? ? ? ? ? ? ? ? ? width: 170px;
? ? ? ? ? ? ? ? ? ? border: 1px #ccc solid;
? ? ? ? ? ? ? ? ? ? color: #868686;
? ? ? ? ? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? ? ? ? ? padding: 2px;
? ? ? ? ? ? ? ? ? ? -moz-border-radius: 10px;
? ? ? ? ? ? ? ? ? ? -webkit-border-radius: 10px;
? ? ? ? ? ? ? ? ? ? -khtml-border-radius: 10px;
? ? ? ? ? ? ? ? ? ? -border-radius: 10px;
? ? ? ? ? ? ? ? ? ? outline: none;
? ? ? ? ? ? ? ? }
? ? ? ? .btn {
? ? ? ? ? ? background: url("../images/login_btn.png") no-repeat -111px 0;
? ? ? ? ? ? width: 111px;
? ? ? ? ? ? height: 36px;
? ? ? ? ? ? border: 0;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 20px;
? ? ? ? ? ? color: #0C4E7C;
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? margin-left: 14px;
? ? ? ? }
? ? ? ? .login-state-trigger {
? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? display: block;
? ? ? ? ? ? float: left;
? ? ? ? ? ? height: 16px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? width: 120px;
? ? ? ? ? ? margin: 4px 0 0 0;
? ? ? ? }
? ? ? ? .login-state-trigger2 {
? ? ? ? ? ? margin: 10px 0 0 20px;
? ? ? ? }
? ? ? ? .login-state-down {
? ? ? ? ? ? background: url("../images/ptlogin.png") no-repeat scroll 0 -22px transparent;
? ? ? ? ? ? float: left;
? ? ? ? ? ? height: 6px;
? ? ? ? ? ? margin-top: 5px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? text-indent: -999em;
? ? ? ? ? ? width: 7px;
? ? ? ? }
? ? ? ? .login-state-show {
? ? ? ? ? ? float: left;
? ? ? ? ? ? height: 14px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? text-indent: -999em;
? ? ? ? ? ? width: 14px;
? ? ? ? ? ? margin: 1px 4px 0 0;
? ? ? ? }
? ? ? ? .login-state-txt {
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin-left: 5px;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? >line-height:18px!important;
? ? ? ? }
? ? ? ? .login-state .callme {
? ? ? ? ? ? background: url("../images/ptlogin.png") -72px 0 no-repeat;
? ? ? ? }
? ? ? ? .login-state .online {
? ? ? ? ? ? background: url("../images/ptlogin.png") 0 0 no-repeat;
? ? ? ? }
? ? ? ? .login-state .away {
? ? ? ? ? ? background: url("../images/ptlogin.png") -18px 0 no-repeat;
? ? ? ? }
? ? ? ? .login-state .busy {
? ? ? ? ? ? background: url("../images/ptlogin.png") -36px 0 no-repeat;
? ? ? ? }
? ? ? ? .login-state .silent {
? ? ? ? ? ? background: url("../images/ptlogin.png") -108px 0 no-repeat;
? ? ? ? }
? ? ? ? .login-state .hidden {
? ? ? ? ? ? background: url("../images/ptlogin.png") -54px 0 no-repeat;
? ? ? ? }
? ? ? ? .statePanel {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right: 68px;
? ? ? ? ? ? top: 193px;
? ? ? ? ? ? z-index: 10;
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? border-width: 1px;
? ? ? ? ? ? border-style: solid;
? ? ? ? ? ? border-color: #ccc #6a6a6a #666 #cdcdcd;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 133px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? background: white;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? line-height: 1.5;
? ? ? ? }
? ? ? ? ? ? .statePanel .statePanel_li {
? ? ? ? ? ? ? ? display: block;
? ? ? ? ? ? ? ? float: left;
? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? padding: 3px 0;
? ? ? ? ? ? ? ? width: 100px;
? ? ? ? ? ? ? ? height: 16px;
? ? ? ? ? ? ? ? line-height: 16px;
? ? ? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? ? ? zoom: 1;
? ? ? ? ? ? ? ? cursor: pointer;
? ? ? ? ? ? }
? ? ? ? .stateSelect_icon {
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin: 2px 0 0 5px;
? ? ? ? ? ? width: 14px;
? ? ? ? ? ? height: 14px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .stateSelect_text {
? ? ? ? ? ? margin: 0 0 0 22px;
? ? ? ? }
? ? ? ? .bottomDiv {
? ? ? ? ? ? margin-left: 70px;
? ? ? ? }
? ? ? ? .ui_boxyClose{width:28px;height:28px;position:absolute;top:-10px;right:-10px;cursor:pointer;background:url('../images/boxy_btn.png') no-repeat;z-index:1}.ie6_0 .ui_boxyClose{background:0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='boxy_btn.png',sizingMethod='scale')}