纯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>

你可能感兴趣的:(纯CSS实现底部固定漂浮导航)