zoukankan      html  css  js  c++  java
  • CSS了一个浮动导航条

    绝对浏览器窗口定位positio:FIXED;

    下拉后出现返回顶部按钮

    图片是我们美工给做的。55*55px,中间缝隙3px。

    css:

    html,body {
    height:100%
    }
    html,body,form,input,span,p,img,ul,ol,li,dl,dt,dd {
    margin:0;
    padding:0;
    border:0
    }
    ul,ol {
    list-style:none
    }
    body {
    background:#fff;
    font:12px/1.5 arial,sans-serif;
    text-align:center;
    height:3000px;
    }
    a {
    text-decoration:none
    }
    a:hover {
    text-decoration:underline
    }

    #moquu_top,#moquu_f1,#moquu_f2,#moquu_f3,#moquu_f4 {
    z-index:2;
    55px;
    height:55px;
    right:50%;
    position:fixed;
    cursor:pointer;
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))
    }

    #moquu_f1 {
    top:360px;
    _margin-top:360px
    }
    #moquu_f1 a {
    background:url(../images/fbtn.png) -3px -1px;
    right:0;
    float:left;
    55px;
    height:55px;
    text-indent:-9999px
    }
    #moquu_f1 a:hover {
    background:url(../images/fbtn.png) -58px -1px
    }
    #moquu_f2 {
    top:422px;
    _margin-top:422px
    }
    #moquu_f2 a {
    background:url(../images/fbtn.png) -3px -59px;
    55px;
    height:55px;
    right:0;
    float:left;
    text-indent:-9999px
    }
    #moquu_f2 a:hover {
    background:url(../images/fbtn.png) -58px -59px
    }
    #moquu_f3 {
    top:484px;
    _margin-top:484px
    }
    #moquu_f3 a {
    background:url(../images/fbtn.png) -3px -117px;
    55px;
    height:55px;
    right:0;
    float:left;
    text-indent:-9999px
    }
    #moquu_f3 a:hover {
    background:url(../images/fbtn.png) -58px -117px
    }
    #moquu_f4 {
    top:546px;
    _margin-top:484px
    }
    #moquu_f4 a {
    background:url(../images/fbtn.png) -3px -175px;
    55px;
    height:55px;
    right:0;
    float:left;
    text-indent:-9999px
    }
    #moquu_f4 a:hover {
    background:url(../images/fbtn.png) -175px -175px
    }

    #moquu_top {
    top:608px;
    _margin-top:608px;
    background:url(../images/fbtn.png) -3px -231px;
    55px;
    height:55px
    }

    #moquu_top:hover {
    background:url(../images/fbtn.png) -62px -231px
    }
    .moquu_f1,.moquu_f2 {
    position:relative;
    z-index:2
    }
    .moquu_f1 a:hover .moquu_f1h,.moquu_f2 a:hover .moquu_f2h {
    display:block
    }

    body:

    <div id="moquu_f1" class="moquu_f1"><a href="javascript:void(0)"> <div class="moquu_f1h"></div></a></div>
    <div id="moquu_f2" class="moquu_f2"><a href="javascript:void(0)"> <div class="moquu_f2h"></div></a></div>
    <div id="moquu_f3"><a href="javascript:void(0)" class='moquu_f3'> </a></div>
    <div id="moquu_f4"><a href="javascript:void(0)" class='moquu_f3'> </a></div>
    <a id="moquu_top" href="javascript:void(0)"></a>

    哦对了。JS两个 jquery1.5.1min&jquery

  • 相关阅读:
    麦肯锡-不录取全能的平庸之才
    压力测试工具tsung
    Rebar:Erlang构建工具
    Recon-Erlang线上系统诊断工具
    cowboy-高性能简洁的erlang版web框架
    初次使用erlang的concurrent
    [JSP]自定义标签库taglib
    [JavaEE笔记]Cookie
    Java中的访问控制权限
    [Servlet] 初识Servlet
  • 原文地址:https://www.cnblogs.com/goodbeypeterpan/p/3921623.html
Copyright © 2011-2022 走看看