来自一个B2B网站的CSS滑动门

代码简介:B2B网站的滑动门,可以定义某一个TAB是否滑动切换,有时候我们需要让某一个滑动门的菜单不滑动,有其它用途,你可以参考一下本代码,本代码原型是从一个B2B网站上扒下来的。

代码内容:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>来自一个B2B网站的CSS滑动门_网页代码站(www.webdm.cn)</title>
<STYLE type=text/css>
TD
{
FONT-SIZE
: 14px; COLOR: #000; FONT-FAMILY: 宋体
}
A:link
{
COLOR
: #3d362b
}
A:visited
{
COLOR
: #3d362b
}
A:hover
{
COLOR
: #f60
}
BODY #search
{
CLEAR
: both; WIDTH: 540px; HEIGHT: 50px
}
BODY #search #left
{
FLOAT
: left
}
BODY #search #searchleft
{
PADDING-LEFT
: 30px; FLOAT: left; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
BODY #search #searchleft1
{
PADDING-LEFT
: 30px; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
FORM
{
PADDING-RIGHT
: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY #newsearch
{
WIDTH
: 540px; HEIGHT: 30px
}
BODY #newsearchtop
{
WIDTH
: 540px; HEIGHT: 25px; TEXT-ALIGN: right
}
BODY #newsearchtop LI
{
FONT-SIZE
: 12px; FLOAT: left
}
.newsearchinsidew
{
BORDER-TOP
: #cccccc 1px solid; MARGIN-TOP: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 70px; CURSOR: hand; LINE-HEIGHT: 21px; BORDER-BOTTOM: #cc3300

1px solid
; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: underline}
.newsearchinsider
{/* www.webdm.cn */
BORDER-RIGHT
: #cc3300 1px solid; BORDER-TOP: #cc3300 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #cc3300 1px solid; WIDTH: 70px; COLOR: #ffffff;

PADDING-TOP
: 5px; HEIGHT: 25px; BACKGROUND-COLOR: #ff7300; TEXT-ALIGN: center}
.newsearchinsider A:visited
{
COLOR
: #ffffff; TEXT-DECORATION: none
}
.newsearchinsidew A:hover
{
background-color
:#CCCCCC;WIDTH: 69px; TEXT-ALIGN: center
}
BODY #newsearchbottom
{
BORDER-RIGHT
: #cc3300 1px solid; BORDER-LEFT: #cc3300 1px solid; BORDER-BOTTOM: #cc3300 1px solid; POSITION: relative; HEIGHT: 50px;

BACKGROUND-COLOR
: #ff7300;/* www.webdm.cn */
}
BODY #newsearchbottom #e1
{Z-INDEX: 0; LEFT: 0px; VISIBILITY: visible; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e2
{Z-INDEX: 0; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e3
{Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e4
{Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e5
{Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e6
{Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e7
{Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
UL
{PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
</STYLE>
<SCRIPT>
function doClick(o){
o.className
="newsearchinsider";
var j;
var id;
var e;
for(var i=1;i<=7;i++){
id
="v"+i;
j
= document.getElementById(id);
e
= document.getElementById("e"+i);
if(id != o.id){
j.className
="newsearchinsidew";
e.style.visibility
= "hidden";
}
else{
e.style.visibility
= "visible";
}
}

var id = o.id+"";
var dd=id.substring(1,2);
var curForm = document.getElementById("FormSearch"+dd);
var inputv ;
for(var i=1;i<=7;i++){
var otherForm = document.getElementById("FormSearch"+i);
}

}
function doOut(o){

}
</SCRIPT>
</HEAD>
<BODY>
<br><br>
<DIV id=search>
<DIV id=newsearch>
<DIV id=newsearchtop>
<UL>
<LI><DIV class=newsearchinsider id=v1 onClick="javascript:doClick(this)"><A href="http://www.webdm.cn">供应信息</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v2 onClick="javascript:doClick(this)"><A href="http://www.webdm.cn">求购信息</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v3 onMouseOver="javascript:doClick(this)"><A href="/">产品目录</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v4 onMouseOver="javascript:doClick(this)"><A href="http://www.webdm.cn">公司库</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v5 onMouseOver="javascript:doClick(this)"><A href="/">商业资讯</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v6 onMouseOver="javascript:doClick(this)"><A href="/">商人社区</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v7 onMouseOver="javascript:doClick(this)"><A href="http://www.webdm.cn">拍卖信息</A></DIV></LI>
</UL>
</DIV>
<DIV id=newsearchbottom>
<DIV id=e1><DIV id=left><DIV id=searchleft1>搜索 供应信息</DIV></DIV></DIV>
<DIV id=e2><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV>
<DIV id=e3><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV>
<DIV id=e4><DIV id=left><DIV id=searchleft1>请输入产品名或公司名关键字</DIV></DIV></DIV>
<DIV id=e5><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV>
<DIV id=e6><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV>
<DIV id=e7><DIV id=left><DIV id=searchleft1>请输入拍卖关键字</DIV></DIV></DIV></DIV></DIV>
</DIV><DIV></DIV>
</BODY>
</HTML>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:http://www.webdm.cn/webcode/a38337f4-4ba8-4c50-8ed0-05d185e6a517.html

原文地址:https://www.cnblogs.com/webdm/p/1951822.html