zoukankan      html  css  js  c++  java
  • 二级菜单制作成果

    <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>
  • 相关阅读:
    windows10的子系统linux(wsl)
    关于js的比较
    关于parseInt,很神奇
    vue修改数组元素通过arr[0]=val的方式不生效
    wps表格 VLookUp 函数
    青年大学习_收集截图方案
    个人记录_uwsgi,nginx与django之间的关系以及各自的作用
    Ubuntu16.04系统中创建新用户
    idea 启动或debug springboot web项目特别慢的解决方案
    利用Aop实现动态分库分表
  • 原文地址:https://www.cnblogs.com/zqseven/p/6052696.html
Copyright © 2011-2022 走看看