背景半透明效果 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>底部浮动条</title> <script src="http://w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <style type="text/css"> body{margin:0px;} .footer-wrap{position:fixed;z-index: 1002;width: 100%;bottom: 0;height: 40px;line-height: 40px;} .footer-bg{position: absolute;left: 0;z-index: 1;width: 100%;height: 100%;background: #071828;filter: alpha(opacity=85);opacity: 0.85;} .footer-con{text-align: center;color: #fff;} .footer-con ul{margin: 0 0 0 35px;} .footer-con li{float: left;margin-left: 10px;list-style: none;font-size: 12px;font-family: 'microsoft yahei';} .footer-con .close{position: absolute;right: 10px;top: 2px;display: block;margin-left:40px;transition: all 400ms;font-size: 30px;color: #fff;text-decoration: none;} .back_top{position: fixed;right: 20px;bottom: 100px;} </style> </head> <body> <div style="background:#999;height:1800px;width:100%;"></div> <div class="footer-wrap"> <div class="footer-bg"> <div class="footer-con"> <ul> <li>版权所有© 西游车展网(www.xcabc.com)</li> <li>备案号：粤ICP备13086105号</li> <li>客服电话：0755-23919676</li> <li>合作QQ：2596120672</li> </ul> <a href="javascript:void(0);" class="close">×</a> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".footer-con .close").click(function(){ $(".footer-wrap").hide(); }) }); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 底部浮动条 喜欢 (0)or分享 (0)
