怎样在网站每个页面加一个“浮动的层”如图所示！需要的顶起来！！！

2016-07-07 15:03 来源：www.chinab4c.com 作者：ecshop专家


演示网站：http://www.100fo.com

网站页面加个“浮动的层”求相关的代码，越详细越好，先谢谢大家，也希望大家顶起来哦！

回答：
求高手指点哦，速度跟帖哦 ，谢谢！

其实。。和简单

<div class="page_bot">
<div class="page_help">
<ul class="user_link">
<li class="d01"><a class="login_msg" href="/house/" title="我的小屋">用户小屋</a></li>
<li class="d02"><a href="/cart/"><p>购物车有(<b class="user_cart_count">0</b>)件商品</p></a></li>
<li class="d03"><a href="/cart/" title="">去结算</a></li>
<li class="d04"><a class="login_msg" href="/house/order/" title="我的订单">我的订单</a></li>
</ul>
<ul class="channel_link">
</ul>
<ul class="o_link">
<li class="home"><a href="/" rel="nofollow" title="home">home</a></li>
<li class="top"><a href="/" id="bot_top" title="top" rel="nofollow">top</a></li>
<li class="ts"><a rel="nofollow" title="投诉建议" href="http://100fo.zoossoft.com/LR/Chatpre.aspx?id=LHN42990130&lng=cn" target="_blank">投诉建议</a></li>
<li class="close"><a id="bot_close" href="/" title="关闭" rel="nofollow">关闭</a></li>
</ul>
</div>
</div>

加在页脚~~



css~~


/*--page_bot--*/
.page_bot{width:100%; position:fixed; left:0; bottom:0; height:34px; line-height:34px; background:#f0f0f0; z-index:1000000;
_position:absolute;
_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop+(documentElement.clientHeight - this.clientHeight):document.body.scrollTop+(document.body.clientHeight - this.clientHeight));
}
.page_help{width:950px; margin:0 auto; padding:0; height:34px; line-height:34px; background:#f0f0f0; overflow:hidden; font-size:12px;}
.page_help ul{list-style:none; margin:0; padding:0;}
.page_help .user_link{width:370px; float:left; clear:right; margin-right:15px; margin-top:7px; height:20px; line-height:20px; overflow:hidden; padding-left:10px;}
.page_help .user_link li{float:left; margin:0; padding:0; height:20px; line-height:20px; overflow:hidden;}
.page_help .user_link li.d01{background:url(../img/page_dot01.jpg) 0px 2px no-repeat; padding:0px 10px 0 16px;}
.page_help .user_link li.d02{background:url(../img/page_dot02.jpg) 0px 2px no-repeat; padding:0px 10px 0 20px;}
.page_help .user_link li.d02 a b{color:#f07c91;}
.page_help .user_link li.d03{background:url(../img/page_dot03.jpg) 0px 2px no-repeat; padding:0px 10px 0 12px;}
.page_help .user_link li.d04{background:url(../img/page_dot04.jpg) 0px 2px no-repeat; padding-left:18px;}
.page_help .user_link li a{color:#565656;}
.page_help .user_link li a:hover{color:#f00; text-decoration:none;}
.page_help .channel_link{float:left; width:290px; height:39px; margin:7px 0 0 0; padding:0; overflow:hidden;}
.page_help .channel_link li{float:left; margin:0 6px 0 0; padding:0;background:url(../img/page_dot05.jpg) no-repeat; width:69px; height:20px; line-height:20px; text-align:center;}
.page_help .channel_link li a{font-size:12px; color:#565656;}
.page_help .channel_link li a:hover{color:#f00; text-decoration:none;}
.page_help .o_link{float:right; padding:0; overflow:hidden; margin:7px 0 0 0;}
.page_help .o_link li{float:left; margin:0 10px 0 0; padding:0; height:20px;}
.page_help .o_link li img{height:20px;}
.page_help .o_link li.home{text-indent:-99999px; text-align:left; width:42px; height:20px; overflow:hidden;}
.page_help .o_link li.home a{background:url(../img/page_dot06.jpg) 0px 0px no-repeat; width:42px; height:20px; display:block;}
.page_help .o_link li.top{text-indent:-99999px; text-align:left; height:20px; overflow:hidden;}
.page_help .o_link li.top a{background:url(../img/page_dot07.jpg) 0px 0px no-repeat; width:36px; height:20px; display:block;}
.page_help .o_link li.ts{color:#fff; height:20px; width:67px; line-height:20px;}
.page_help .o_link li.ts a{color:#fff; background:#bd7fbe; width:67px; height:20px; line-height:20px; display:block;}
.page_help .o_link li.ts a:hover{color:#fff; text-decoration:none;}
.page_help .o_link li.close{text-indent:-99999px; text-align:left; width:24px; height:20px; overflow:hidden; margin-right:0;}
.page_help .o_link li.close a{background:url(../img/bot_close_01.jpg) 0px 0px no-repeat; width:24px; height:20px; display:block;}
.page_help .o_link li.close a:hover{background:url(../img/bot_close_01.jpg) 0px 0px no-repeat;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.qiji { height:1200px; }
.qiji2 { background:#F0F0F0 none repeat scroll 0 0; bottom:0; height:34px; left:0; line-height:34px; position:fixed; width:100%; z-index:1000000; }
</style>
<script>
function cc(){
document.getElementById("qiji2").style.display="none";//关闭按钮
}
</script>
</head>
<body>
<div class="qiji"></div>
<div class="qiji2" id="qiji2">111111111111111111111111111111111<a onclick="cc();" href="#">close</a></div>
</body>
</html>

谢谢 先测试下

1分钟内测试成功！感谢 感谢 nicholas_ng爱死你了www.eftree.com

支持！！！！

nicholas_ng
这位大哥可否整理好发出来，对于新手的我，看着很晕

顶起啊 lz好强大啊

有需要加我qq：13216819包搞定！www.eftree.com都是免费哦！