[练习] 便捷入口效果，很多商务网站用到兼容 ie ff opera

最新推荐文章于 2019-09-03 14:13:52 发布
pcduron
最新推荐文章于 2019-09-03 14:13:52 发布
阅读量354
点赞数
文章标签： opera ie blog url float class
本文链接：https://blog.csdn.net/pcduron/article/details/4437497
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="keywords" content="关键字描述" />
<meta name="description" content="站点描述" />
<meta name="author" content="顾振宇,zy.e@163.com" />
<meta name="copyright" content="版权所有" />
<link rel="shortcut icon" href="/favicon.ico" mce_href="favicon.ico" type="image/x-icon" />
<link rel="bookmark" href="/favicon.ico" mce_href="favicon.ico" type="image/x-icon" />
<title></title>
<mce:style type="text/css"><!--
*{ 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; float:left;}
.login{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/quickbg.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(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.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(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -183px; width:69px;padding-left:35px; height:37px;  overflow:hidden; line-height: 32px; font-weight:700;}
.rrow ul li .yhzc{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -152px;}
#yhzc{background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -183px;height:37px;}
.rrow ul li .hysj{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -152px; }
#hysj{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -183px;height:37px;}
.rrow ul li .fbxx{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -220px; }
#fbxx{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -251px;height:37px;}
.rrow ul li .gstg{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -220px; }
#gstg{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -251px;height:37px;}
.rrow ul li .xzmj{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -288px; }
#xzmj{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -319px;height:37px;}
.rrow ul li .bzzx{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -288px; }
#bzzx{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -319px;height:37px;}
.rrow ul .hoverli{background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.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(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.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(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif); line-height: 21px;padding-left:18px;margin-right: 10px; }
a:hover.btn{background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -20px;}
#btn4{background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.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; }
--></mce:style><style type="text/css" mce_bogus="1">*{ 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; float:left;}
.login{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/quickbg.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(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.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(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -183px; width:69px;padding-left:35px; height:37px;  overflow:hidden; line-height: 32px; font-weight:700;}
.rrow ul li .yhzc{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -152px;}
#yhzc{background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -183px;height:37px;}
.rrow ul li .hysj{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -152px; }
#hysj{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -183px;height:37px;}
.rrow ul li .fbxx{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -220px; }
#fbxx{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -251px;height:37px;}
.rrow ul li .gstg{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -220px; }
#gstg{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -251px;height:37px;}
.rrow ul li .xzmj{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -288px; }
#xzmj{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -319px;height:37px;}
.rrow ul li .bzzx{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -288px; }
#bzzx{ background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) -104px -319px;height:37px;}
.rrow ul .hoverli{background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.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(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.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(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif); line-height: 21px;padding-left:18px;margin-right: 10px; }
a:hover.btn{background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.gif) 0 -20px;}
#btn4{background:url(https://p-blog.csdn.net/images/p_blog_csdn_net/pcduron/EntryImages/20090812/btn.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>
<div class="rrow">
<div id="login" class="login">
<h2>便捷入口<span><a class="w" title="快速登陆">快速登陆</a></span></h2>
<dl class="qlogin clearfix"><dt>快速登陆</dt>
<dd>用户名：<input class="input2" type="text" /></dd>
<dd>密   码：<input class="input2" type="password" /></dd>
<dd><input class="btn" id="btn4" type="submit" value="立即登陆" /><a class="passw" href="">忘记密码？</a></dd>
</dl>
<ul>
<li id="btype1" class="hoverli"><span class="yhzc" id="yhzc" href="" title="用户注册">用户注册</span><span class="hysj" href="" title="会员升级">会员升级</span>
<div class="block"><a href="">我要寻求帮助1...</a><a href="">网上贸易从此开始1...</a></div>
<div><a href="">我要寻求帮助2...</a><a href="">网上贸易从此开始2...</a></div>
</li>
<li id="btype2"><span class="fbxx" href="" title="发布信息">发布信息</span><span class="gstg" href="" title="公司推广">公司推广</span>
<div><a href="">我要寻求帮助3...</a><a href="">网上贸易从此开始3...</a></div>
<div><a href="">我要寻求帮助4...</a><a href="">网上贸易从此开始4...</a></div>
</li>
<li id="btype3"><span class="xzmj" href="" title="寻找买家">寻找买家</span><span class="bzzx" href="" title="帮助中心">帮助中心</span>
<div><a href="">我要寻求帮助5...</a><a href="">网上贸易从此开始5...</a></div>
<div><a href="">我要寻求帮助6...</a><a href="">网上贸易从此开始6...</a></div>
</li>
</ul>
</div><!-- login -->
<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>
</body>
</html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
pcduron
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[练习] 便捷入口效果，很多商务网站用到兼容 ie ff opera

<!--*{ 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%;}.cle
复制链接

扫一扫