纯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 @   KenBlove  阅读(2144)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
点击右上角即可分享
微信分享提示