zoukankan      html  css  js  c++  java
  • 仿天涯底部固定漂浮导航

    首先我们看一下天涯网:http://www.tianya.cn/focus/index.shtml

    它的页面的最先面就是我们要做的

    简单的看一下CSS样式部分:

    body {
    background-image
    :url(text.gif); /* for IE6    图片类型随便 */
    background-attachment
    :fixed;
    }
    #bottomNav 
    {
    background-color
    :#096;
    z-index
    :999;
    position
    :fixed;
    bottom
    :0;
    left
    :0;
    width
    :100%;
    _position
    :absolute; /* for IE6 */
    _top
    : expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */
    overflow
    :visible;
    }

    HTML部分加上这个id为 #bottomNav 的DIV即可:

    <div id="bottomNav">固定漂浮物在此处O(∩_∩)O~</div>

    注意引号""


    再看看这些需要注意的地方:

    _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);


    看到 _top 大家都知道是为IE6独家准备的,但是当我只加了上面这句时,IE6下拉动滚动条看到的这个漂浮物是抖动的


    注意:

    1.    _top:是只管IE6的,

    2.   

    static 默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。 

    relative 位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。 

    absolute 位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。 

    fixed 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。 




  • 相关阅读:
    SA (后缀数组) 学习笔记
    loj2318 「NOIP2017」宝藏[状压DP]
    hdu4352 XHXJ's LIS[数位DP套状压DP+LIS$O(nlogn)$]
    【鸽】poj3311 Hie with the Pie[状压DP+Floyd]
    P1879 [USACO06NOV]玉米田Corn Fields[轮廓线DP]
    hdu4507 吉哥系列故事——恨7不成妻[数位DP]
    BZOJ3329 Xorequ[数位DP+递推矩阵快速幂]
    poj1015 Jury Compromise[背包]
    hdu3586 Information Disturbing[二分答案+树形DP]
    BZOJ4247 挂饰[背包]
  • 原文地址:https://www.cnblogs.com/zhengenru2008/p/1514660.html
Copyright © 2011-2022 走看看