纯CSS实现底部固定漂浮导航

以下例子信息来自http://www.uecss.com/index.php/fixed-floating-imitation-navigation/

页面加入样式:

Code
body {
background-image:url(text.txt); /* 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;
}

 

将要显示的DIV加上

 

Code
class="bottomNav"

 

下边这个是原创,也是纯CSS实现:

 

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>悬浮窗口</title>
    <style type="text/css">
    HTML {
        OVERFLOW: hidden; 
        HEIGHT: 100%;
    }
    BODY {
        BACKGROUND:#999; 
        MARGIN: 0px; 
        OVERFLOW:auto; 
        
        WIDTH: 100%; 
        HEIGHT: 100%;
    }
    #flow_wbox {
        BACKGROUND:#333;
        
        DISPLAY: block; 
        FLOAT: none; 
        
        BOTTOM: 0px! important; 
        POSITION: absolute; 
        
        WIDTH: 100%; 
        HEIGHT: 60px
    }
    </style>
</head>
<body>
    <div style="height: 1000px;">
        abc
    </div>
    <div id="flow_wbox">
            这里是悬浮窗口!!
    </div>
</body>
</html>
posted @ 2009-06-30 11:12  KenBlove  阅读(2140)  评论(0)  编辑  收藏  举报