zoukankan      html  css  js  c++  java
  • 来自一个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

  • 相关阅读:
    css3---2D效果 ---3D效果
    PHP 代 码 操 作 文 件
    文件上传
    在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据
    在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据
    使用 AJAX + 三级联动 实现分类出全国各地的省,市,区
    AJAX里使用的弹窗样式 tanchuang.js tanchuang.css
    jquery-1.11.2.min.js
    使用【 ajax 】【 bootstrap 】显示出小窗口 详情内容 一些代码意思可以参考下一个文章
    AJAX基本操作 + 登录 + 删除 + 模糊查询
  • 原文地址:https://www.cnblogs.com/webdm/p/1951822.html
Copyright © 2011-2022 走看看