zoukankan      html  css  js  c++  java
  • 上下左右固定特效

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>position: fixed</title>
    <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    }
    #content {
    height: 5000px;
    width: 50%;
    border-right: 10px dotted red;
    }
    #demo_t, #demo_b, #demo_l, #demo_r {
    background: #f90;
    position: fixed;
    }
    #demo_t, #demo_b {
    left: 0;
    width: 100%;
    }
    #demo_l, #demo_r {
    width: 50px;
    top: 300px;
    }
    #demo_t {
    top: 0;
    }
    #demo_b {
    bottom: 0;
    }
    #demo_l {
    left: 0;
    }
    #demo_r {
    right: 0;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    html {
    /*这个可以让IE6下滚动时无抖动*/
    background: url(about:black) no-repeat fixed
    }
    #demo_t, #demo_b, #demo_l, #demo_r {
    position: absolute;
    }
    #demo_t, #demo_b {
    /*这个解决body有padding时,IE6下100%不能铺满的问题*/
     expression(offsetParent.clientWidth);
    }
    /*下面三组规则用于IE6下top计算*/
    #demo_l, #demo_r {
    top: expression(offsetParent.scrollTop + 300);
    }
    #demo_t {
    top: expression(offsetParent.scrollTop);
    }
    #demo_b {
    top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="demo_t">此处显示  id "demo" 的内容</div>
    <div id="demo_b">此处显示  id "demo" 的内容</div>
    <div id="demo_l">此处显示  id "demo" 的内容</div>
    <div id="demo_r">此处显示  id "demo" 的内容</div>
    <div id="content"></div>
    </body>
    </html>
    View Code
  • 相关阅读:
    用Html+Js实现的“自动补全”功能
    利用js为table添加行
    Flex 当鼠标悬停在DataGrid某行上时用datatoolField显示当前行
    Flex中设置编译器参数
    Linux2 在Linux(CentOS)上配置SSH免登陆
    线程笔记
    I/O
    网络编程
    Linux基础
    进程间的通信
  • 原文地址:https://www.cnblogs.com/mmcmmc/p/3941403.html
Copyright © 2011-2022 走看看