• 鼠标悬浮,下拉菜单,距离一定距离


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.0 Transitional//EN">
    <HTML>

    <HEAD>
    <TITLE>news</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <link href="css/base.css" type="text/css" rel="stylesheet" />
    <link href="css/public.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/pop.js"></script>

    </HEAD>

    <BODY>

    <div class="bottom">
    <div class="bottom-nav">
    <a href="#" class="gyhj">关于我们</a>
    <ul class="about-pop">
    <li><a href="">公司简介</a>
    </li>
    <li><a href="">组织架构</a>
    </li>
    <li><a href="">公司资质</a>
    </li>
    <li><a href="">董事长致辞</a>
    </li>
    </ul>
    <a href="" class="hzhb">合作伙伴</a>
    <a href="" class="xmjs">项目介绍</a>
    <a href="" class="tdjs">团队介绍</a>

    <a href="" class="gsfc">公司风采</a>
    <a href="" class="xwzx">新闻中心</a>
    <a href="" class="zxns">招贤纳士</a>
    <a href="" class="lxwm">联系我们</a>

    </div>
    </div>
    <!----bottom------>
    </BODY>

    </HTML>

    ===================

    .bottom {
    100%;
    height: 200px;
    background-color: #E8E8E8;
    border-top: 5px #861F99 solid;
    padding-top: 5px;
    margin: 200px auto;
    }
    .bottom .bottom-nav {
    1200px;
    height: 200px;
    margin: 50px auto 0;
    position: relative;
    }
    .bottom-nav .gyhj {
    background: url(../images/gyhj-logo.png)0 no-repeat;
    background-size: 36%;
    }
    .bottom-nav .gyhj:hover {
    background: url(../images/gyhj-logo-hover.png)0 no-repeat;
    background-size: 36%;
    }
    .bottom-nav .hzhb {
    background: url(../images/hzhb-logo.png)0 no-repeat;
    background-size: 36%;
    }
    .bottom-nav .hzhb:hover {
    background: url(../images/hzhb-logo-hover.png)0 no-repeat;
    background-size: 36%;
    }
    .bottom-nav .xmjs {
    background: url(../images/xmjs-logo.png)0 no-repeat;
    background-size: 25%;
    }
    .bottom-nav .xmjs:hover {
    background: url(../images/xmjs-logo-hover.png)0 no-repeat;
    background-size: 25%;
    }
    .bottom-nav .tdjs {
    background: url(../images/tdjs-logo.png)0 no-repeat;
    background-size: 28%;
    }
    .bottom-nav .tdjs:hover {
    background: url(../images/tdjs-logo-hover.png)0 no-repeat;
    background-size: 28%;
    }
    .bottom-nav .gsfc {
    background: url(../images/gsfc-logo.png)0 no-repeat;
    background-size: 30%;
    }
    .bottom-nav .gsfc:hover {
    background: url(../images/gsfc-logo-hover.png)0 no-repeat;
    background-size: 30%;
    }
    .bottom-nav .xwzx {
    background: url(../images/xwzx-logo.png)0 no-repeat;
    background-size: 30%;
    }
    .bottom-nav .xwzx:hover {
    background: url(../images/xwzx-logo-hover.png)0 no-repeat;
    background-size: 30%;
    }
    .bottom-nav .zxns {
    background: url(../images/zxns-logo.png)0 no-repeat;
    background-size: 43%;
    }
    .bottom-nav .zxns:hover {
    background: url(../images/zxns-logo-hover.png)0 no-repeat;
    background-size: 43%;
    }
    .bottom-nav .lxwm {
    background: url(../images/lxwm-logo.png)0 no-repeat;
    background-size: 28%;
    }
    .bottom-nav .lxwm:hover {
    background: url(../images/lxwm-logo-hover.png)0 no-repeat;
    background-size: 28%;
    }
    .bottom-nav a {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    110px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    text-indent: 50px;
    margin-left: 22px;
    margin-right: 12px;
    position: relative;
    z-index: 999;
    }
    .bottom-nav a:hover {
    color: #87209A;
    }
    .bottom-nav p {
    font-size: 16px;
    text-align: center;
    margin-top: 30px;
    color: #9C9C9C;
    }
    /*上面是联系我们部分*/

    /*底部悬浮弹出小层部分*/

    .about-pop {
    110px;
    height: 245px;
    text-align: center;
    position: absolute;
    z-index: 90;
    left: 18px;
    top: -180px;
    background-color: #E8E8E8;
    display: none;
    }
    .about-pop li {
    height: 30px;
    100%;
    line-height: 30px;
    text-align: center;
    margin-left: -22px;
    }
    .about-pop li a {
    110px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    text-indent: 0px!important;
    }
    .about-pop li:hover a {
    color: #ffffff;
    background-color: #88209B;
    }
    .gyhj:hover .about-pop {
    display: block;
    }
    /*底部悬浮弹出小层部分*/

    .color-red{
    color: #E53333;
    }

    ==========================

    function getHtml(url){
    var h = $('#boot').height();
    $('#sonWp').load(url,function(){
    $('#moku').animate({'top':-h},500);
    });
    }

    function goBoot(){
    $('#moku').animate({'top':0},500,function(){
    $('#sonWp').html('');
    });
    }

    /*这段是点击我们出现的悬浮层*/
    $(function () {
    $('#boot').height($(window).height());
    $(".gyhj").mouseover(function () {
    $(".about-pop").show();
    });
    $(".about-pop").mouseleave(function () {
    $(".about-pop").hide();
    });
    });
    /*这段是点击我们出现的悬浮层*/

    =====================

  • 相关阅读:
    Android TabHost(选项卡)
    监控工具之---Prometheus查询持久性(六)
    监控工具之---Prometheus表达式promQL生产中应用(五)
    Grafana Configuration 参数详解(1)
    监控工具之---Prometheus数据可视化Grafana(七)
    监控工具之---Prometheus 安装详解(三)
    监控工具之---Prometheus 配置exporter四)
    Kubernetes容器编排技术---kubectl命令行工具用法详解(三)
    Kubernetes容器编排技术---Kubernetes基于kubeadm安装与配置(二)
    Azure Iaas基础之---创建虚拟机
  • 原文地址:https://www.cnblogs.com/leshao/p/4651681.html
Copyright © 2020-2023  润新知