代码块

###效果图：

###布局方式： html <a class="btn-down" href=""><img src="images/kbdown.png" class="img-full"></a> css .btn-down{ position: fixed;left: 0;bottom: -1px; width: 100%; z-index: 999;} .img-full { width: auto; max-width: 100%; margin: 0 auto; display: block; } //如果引入了global.css 则这行不需要再次引用了 所需图片

开吧 html 内容

<!--开吧分享下载提醒按钮-->
<section class="box btn-godown" onclick="justkaibaUrl()">
	<img src="http://static.kaiba315.com/kaiba-logo.png" class="btn-godown-logo" >
	<div class="box-flex">
		<h2>开吧</h2>
		<p>开启车上新生活</p>
	</div>
	<input type="button" class="btn-small" value="下载">
	<span><img src="http://static.kaiba315.com/kbbtn-close-grey.png" ></span>
</section>
<!--/开吧分享下载提醒按钮-->

开吧 css 内容

.btn-godown{width:100%;z-index:999;font-size:10px;height:5em;-webkit-box-align:center;-webkit-box-pack:center;padding:0 1em;box-sizing:border-box;background-color:#fff;font-family:Arial, "微软雅黑", sans-serif;display:box;display:-webkit-box;display:-moz-box;width:100%;}
.btn-godown .box-flex{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
.btn-godown-logo{height:3.5em;margin-right:0.8em;display:block;}
.btn-godown h2,.btn-godown p{margin:0;padding:0;line-height:1em;}
.btn-godown h2{font-size:2em;color:#222;font-weight:normal;margin-bottom:0.2rem;}
.btn-godown p{font-size:1em;color:#818181;}
.btn-godown .btn-small{border:1px solid #f70;padding:0 1em;-webkit-appearance: none;height:2.2em;line-
	height:2.2em;font-size:1.2em;color:#f70;background-color:transparent;display:block;border-radius:4px;}
.btn-godown span{width: 5%;display: block;text-align: center;margin-left:0.5em;}
.btn-godown span img{width: 100%;vertical-align: middle;}
@media screen and (min-width:330px){
	.btn-godown{font-size:12px;}
}

开吧 js 内容

(记得要连jquery噢)
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	$(function(){
		$(".btn-godown span").click(function(event){
			$(this).parent(".btn-godown").hide();
			event.stopPropagation();
			return false;
		});
	});
	function justkaibaUrl(){
        	window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.hz.czfw.app';  //跳转到开吧下载页
    	}
function kaibaTip(){
        layer.open({
            content:'请先下载开吧app',
            btn:['确定','取消'],
            yes:function(){
                window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.hz.czfw.app';
            },
            no:function(){
                layer.closeAll();
            }
        })
    }
	
</script>