• 二级菜单制作成果


    <style type="text/css">
    *{margin:0px auto; padding:0px; font-family:微软雅黑; font-size:20px; border-radius:8px;}
    #kuang{ width:200px; height:300px;}
    .list{ width:200px; height:60px; text-align:center; vertical-align:middle; font-weight:bold;}
    .list:hover{ background-color:#F03; color:#FFF;}
    
    
    </style>
    </head>
    
    <body>
    <div id="kuang" style=" 200px; height:400px; background-color:#F03;">
    <br/>
    <div id="wai"></div>
    <div class="list">首页</div>
    
    <div class="list"  onclick="xiao()">服务中心</div>
    
    <div id="xiao" style="display:none" onclick="xiao()">
    
           <div class="x1" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">产品介绍</div>
           <div class="x1" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">合作洽谈</div>
           <div class="x1"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">联系电话</div></div>
           
           
    <div class="list" onclick="x1()">会员中心</div>
          <div id="x1" style="display:none" onclick="x1()">
          <div class="x1" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">会员注册</div>
           <div class="x1" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">密码找回</div>
           <div class="x1"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">客服电话</div></div>
           
    <div class="list" onclick="x2()">售后中心</div>
            <div id="x2"  style="display:none" onclick="x2()">
            <div class="x2" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">产品退换</div>
           <div class="x2" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">意见反馈</div>
           <div class="x2"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">售后电话</div></div>
           
    <div class="list" onclick="x3()">联系客服</div>
           <div id="x3"   style="display:none" onclick="x3()">
           <div class="x3" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">客户咨询</div>
           <div class="x3" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">信息投诉</div>
           <div class="x3"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">投诉电话</div></div>
           
    <div class="list" onclick="x4()">在线咨询</div>
           <div id="x4" style="display:none" onclick="x4()">
           <div class="x4" style=" font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:30px;">人工咨询</div>
           <div class="x4" style="font-family:微软雅黑; font-size:14px;text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:20px;">短讯回复</div>
           <div class="x4"  style="font-family:微软雅黑; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; position:relative; bottom:10px">咨询电话</div></div>
    
    </div>
    </body>
    </html>
    <script>
    function xiao()
    {
        var xiao1=document.getElementById("xiao");
        if(xiao1.style.display=="none")
        {
            xiao1.style.display="block";
            }
            else
            {
                xiao1.style.display="none";
                }
        
        }
    function x1()
    {
        var xiao1=document.getElementById("x1");
        if(xiao1.style.display=="none")
        {
            xiao1.style.display="block";
            }
            else
            {
                xiao1.style.display="none";
                }
        
        }
    function x2()
    {
        var xiao1=document.getElementById("x2");
        if(xiao1.style.display=="none")
        {
            xiao1.style.display="block";
            }
            else
            {
                xiao1.style.display="none";
                }
        
        }
    function x3()
    {
        var xiao1=document.getElementById("x3");
        if(xiao1.style.display=="none")
        {
            xiao1.style.display="block";
            }
            else
            {
                xiao1.style.display="none";
                }
        
        }
    function x4()
    {
        var xiao1=document.getElementById("x4");
        if(xiao1.style.display=="none")
        {
            xiao1.style.display="block";
            }
            else
            {
                xiao1.style.display="none";
                }
        
        }
        
        
    
    </script>
  • 相关阅读:
    jQuery Ajax 全解析
    据说:2010年最佳Flash网站
    SWFKit 3.5 + 注册机
    几何算法
    不错的3d切换
    常见程式算法推演
    未知
    3d地形与道路
    在3D世界中创建不同的相机模式——创建一个第一人称射击游戏(FPS)的相机:Quake风格的相机
    在3D世界中创建不同的相机模式——天空盒
  • 原文地址:https://www.cnblogs.com/zqseven/p/6052696.html
Copyright © 2020-2023  润新知