以下例子信息来自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>
222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
