仿雅虎首頁快捷登錄入口及導航模塊的代碼

2024-09-05 12:20:42

字體：大中小

來源：轉載

供稿：網友

仿雅虎首頁網站快捷入口導航模塊的代碼，里面有用戶登錄框，這個大家或許會用上吧，放到你網站著頁作為用戶登錄也挺行。

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>仿雅虎首頁網站快捷入口和快</title><style>*{ margin:0; padding:0; border:none;}body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif; height:100%;}li{list-style:none;}html{ height:100%;}.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}a:link{ color:#000; text-decoration:none; }a:visited{ color:#000; text-decoration:none; }a:hover{ color:#000; text-decoration:none; }.rrow{width:224px;}.login{ background:url(/jscss/demoimg/201010/box.png); height:210px;width:224px;  overflow:hidden;}.login h2{ color:#fff; font-size:14px; padding:4px 12px; line-height: 30px;height:24px; overflow:hidden; }.login h2 span{ font-size:12px; float:right;margin:-31px 23px 0 0;line-height: 32px;font-weight:400; cursor:pointer;}.rrow ul{ margin:5px 6px; }.rrow ul li {width:216px; height:31px;margin-bottom: 5px; overflow:hidden; float:left;}.rrow ul li a,.rrow ul li span{ cursor:pointer; display:block; float:left; margin-right: 4px; background:url(/jscss/demoimg/201010/title.gif) 0 -152px; width:69px;padding-left:35px; height:31px;  overflow:hidden; line-height: 32px; font-weight:700;}.rrow ul li .lhover{ display:block; float:left; margin-right: 4px; background:url(/jscss/demoimg/201010/title.gif) 0 -183px; width:69px;padding-left:35px; height:37px;  overflow:hidden; line-height: 32px; font-weight:700;}.rrow ul li .yhzc{ background:url(/jscss/demoimg/201010/title.gif) 0 -152px;}#yhzc{background:url(/jscss/demoimg/201010/title.gif) 0 -183px;height:37px;}.rrow ul li .hysj{ background:url(/jscss/demoimg/201010/title.gif) -104px -152px; }#hysj{ background:url(/jscss/demoimg/201010/title.gif) -104px -183px;height:37px;}.rrow ul li .fbxx{ background:url(/jscss/demoimg/201010/title.gif) 0 -220px; }#fbxx{ background:url(/jscss/demoimg/201010/title.gif) 0 -251px;height:37px;}.rrow ul li .gstg{ background:url(/jscss/demoimg/201010/title.gif) -104px -220px; }#gstg{ background:url(/jscss/demoimg/201010/title.gif) -104px -251px;height:37px;}.rrow ul li .xzmj{ background:url(/jscss/demoimg/201010/title.gif) 0 -288px; }#xzmj{ background:url(/jscss/demoimg/201010/title.gif) 0 -319px;height:37px;}.rrow ul li .bzzx{ background:url(/jscss/demoimg/201010/title.gif) -104px -288px; }#bzzx{ background:url(/jscss/demoimg/201010/title.gif) -104px -319px;height:37px;}.rrow ul .hoverli{background:url(/jscss/demoimg/201010/title.gif) 0 -357px;height:92px;  overflow:hidden; line-height: 32px; font-weight:700;}.qlogin{height:92px; width:210px; line-height: 32px; margin:5px 0 0 10px; display:none;}.qlogin dt{ height:0; overflow:hidden; }.qlogin dd{ padding:4px; width:210px; height:22px; text-align:left; float:left;clear:both;overflow:hidden;}.qlogin dd .passw,.qlogin a:hover.passw{ margin: -4px 12px 0 0; float:right;}.rrow ul li div{ margin-top: 5px; width:210px; display:none;}.rrow ul li div a,.rrow ul li div a:hover{background:url(/jscss/demoimg/201010/title.gif) -80px -1px; height:20px; line-height: 20px; clear:both; font-weight: 400; width:170px;}.rrow ul li div a:hover{ text-decoration:underline; }.rrow ul li .block,.rrow .block{ display:block; }.rrow ul .none{ display:none; }.btn{font-size:12px; font-family:宋體; float:left; width:57px; height:20px; overflow:hidden; background:url(/jscss/demoimg/201010/title.gif); line-height: 21px;padding-left:18px;margin-right: 10px; }a:hover.btn{background:url(/jscss/demoimg/201010/title.gif) 0 -20px;}#btn4{background:url(/jscss/demoimg/201010/title.gif);width:75px; margin-left: 48px; cursor:pointer;}.input2{font-size:12px; border:1px solid #999; width:140px; height:16px; padding:1px 2px 0 2px; }</style></head><body><table width="18%" height="420" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>    <td><div   id="70qarhlowxag"   class="rrow">      <div   class="70qarhlowxag"   id="login" class="login">        <h2>便捷入口<span>快速登陸</span></h2>        <dl class="qlogin clearfix">          <dt>快速登陸</dt>          <dd>用戶名：              <input name="text" type="text" class="input2" />          </dd>          <dd>密   碼：              <input name="password" type="password" class="input2" />          </dd>          <dd>            <input name="submit" type="submit" class="btn" id="btn4" value="立即登陸" />            忘記密碼？</dd>        </dl>        <ul>          <li id="btype1" class="hoverli"><span id="70qarhlowxag"    class="yhzc" id="yhzc" href="#" target="_blank" title="用戶注冊">用戶注冊</span><span id="70qarhlowxag"    class="hysj" href="#" target="_blank" title="會員升級">會員升級</span>              <div   id="70qarhlowxag"   class="block">1...1...</div>            <div>2...2...</div>          </li>          <li id="btype2"><span id="70qarhlowxag"    class="fbxx" href="#" target="_blank" title="發布信息">發布信息</span><span id="70qarhlowxag"    class="gstg" href="#" target="_blank" title="公司推廣">公司推廣</span>              <div>3...3...</div>            <div>4...4...</div>          </li>          <li id="btype3"><span id="70qarhlowxag"    class="xzmj" href="#" target="_blank" title="尋找買家">尋找買家</span><span id="70qarhlowxag"    class="bzzx" href="#" target="_blank" title="幫助中心">幫助中心</span>              <div>5...5...</div>            <div>6...6...</div>          </li>        </ul>      </div>      <script type=text/javascript>	  var login = document.getElementById("login");var yhzc = document.getElementById("yhzc");var h2 = login.getElementsByTagName("h2");var dl = login.getElementsByTagName("dl");var ul = login.getElementsByTagName("ul");var lis = ul[0].getElementsByTagName("li");var allspan = ul[0].getElementsByTagName("span");var qlog = h2[0].getElementsByTagName("a");var divs = login.getElementsByTagName("div");qlog[0].onclick = function(){for(var i = 0; i < divs.length; i++){divs[i].className = null;}for(var i = 0; i < allspan.length; i++){allspan[i].id = null;}lis[0].className = "none";dl[0].className = "qlogin block";}for(var x = 1; x < 4; x++){show();}function show(){var test = "btype" +x;var btype = document.getElementById("btype" + x);var as = btype.getElementsByTagName("a");var bdivs = btype.getElementsByTagName("div");var spans = btype.getElementsByTagName("span");for(var i = 0; i < spans.length; i++){spans[i].num = i;spans[i].onmouseover = type;}function type(){for(var i = 0; i < lis.length; i++){lis[i].className = null;}for(var i = 0; i < allspan.length; i++){allspan[i].id = null;}for(var i = 0; i < divs.length; i++){divs[i].className = null;}dl[0].className = "qlogin";yhzc.id = null;spans[this.num].id = spans[this.num].className;bdivs[this.num].className = "block";btype.className = "hoverli";}}	  </script>    </div>         </td>  </tr></table></body></html>

上一篇：css豎向菜單，帶三角導航

下一篇：實用的不規則TAB選項卡代碼