代碼塊

###效果圖：

###佈局方式： 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>