[置顶] 一个app下载框

      今天闲着没事，就研究了下公司的网站，就“偷”了点东西出来。下面来制作一个简单的app下载框，为我的公司作下宣传哈。

需要的技术支持：一般jQuery库；

HTML代码如下：

 

<div class="app_download">
	<div class="download_logo"></div>
	<span class="download_cont">下载康爱多APP，享受正品与实惠！</span>
	<a href="http://app.360kad.com/k/wp1.apk" class="download">立即下载</a>
	<a href="javascript:void(0)" class="close_btn" onclick="closeDown()"></a>
</div>

CSS代码如下：

 

.app_download{width: 320px;height: 60px;position: fixed;margin:0 auto;right:0;left:0;bottom: 0;background: rgba(0,0,0,0.6);}
.app_download .download_logo{display: inline-block;width:50px;height: 100%;background: url(http://skin.360kad.com/mskin/img/201308/app_icon3.png) no-repeat;background-size: 40px 40px;background-position: center;float: left;}
.app_download .download_cont{display:inline-block;width:155px;padding:10px 0 10px 5px;float:left;height:100%;color: #fff;}
.app_download .download{display: inline-block;width: 80px;height: 30px;line-height: 30px;float: left;text-decoration: none;color: #333;background: #fff;text-align: center;margin: 15px 5px;border-radius: 5px;}
.app_download .close_btn{display: inline-block;width:20px;height:100%;background:#333 url(http://skin.360kad.com/mskin/img/201308/close-icon.png) no-repeat top right;background-size: 20px 20px;float: left;border-radius: 0 0 0 100%;}

js代码如下：

function closeDown(){
	$('.app_download').hide();
}

      有几个关键点需要注意下：

1.合理设置宽高：做的是WAP端下载app框，这里为下载框设置的宽高分别为320px和60px；

2.app下载框的定位：使用固定定位，定位在页面的顶部或底部都可以，在这里选在定位在底部。实现的关键代码是position:fixed;margin:0 auto;right:0;left:0;bottom:0;；

3.合理布局：这里设置logo的大小为40px的宽高，并给了个padding，让它看起来更舒服一点。这里用background来控制logo图片的显示，用background-size:40px 40px;来设置背景图片的大小。用background-position:center;来将背景图片居中显示；包括右边的关闭按钮也是用背景图片显示并定位的；

4.美观与用户体验：内容部分都有给个上下padding:10px和左padding:5px；下载按钮中的文字居中显示，line-height:30px;实现在下载按钮中垂直方向上的居中显示；关闭按钮图标定位在右上，防止用户误点。设置左下角border-radius为50%，以进一步美化。

最终的效果如下：

      不足之处，还望多多指正。

• 
• 大小: 6.3 KB

• 查看图片附件