今天闲着没事,就研究了下公司的网站,就“偷”了点东西出来。下面来制作一个简单的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%,以进一步美化。
最终的效果如下:
不足之处,还望多多指正。
相关推荐
性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。... 另一方面,浏览器默认控件样式又少又丑...mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。
MUI手机app前端页面开发框架模板下载 MUI手机app前端页面开发框架模板下载
APP概念与框架技术,Web App发展趋势与未来的技术需求。
若依APP 一个非常火的java框架做个APP,若依Flutter安卓IOS桌面前端,若依安卓APP、若依苹果IOS APP、若依Linux APP、若依 MAC APP、若依 Windows APP 在若依官网看了介绍,框架使用了最新技术栈、前后端分离、完全...
一个app开发的框架,包含侧边栏,cardview,floatactionbutton,drawerlayout,tablayout+viewpager+fragment.其中一个fragment可以下拉刷新。
02. 商城APP - 模仿天猫 商城APP - 模仿天猫.rp 03. 微佛-完整版 微佛V3.rp 04. 外卖APP - 模仿饿了么 外卖APP - 模仿饿了么.rp 05. 艺术会展 艺术会展APP.rp 06. 脸谱-非完整版 脸谱-非完整版.rp 基于数据采集的...
基于uni-app框架的登录模板
PC+WAP,同一个后台,数据即时同步,简单适用!附带测试数据! 友好的seo,所有页面均都能完全自定义标题/关键词/描述,PHP程序,安全、稳定、快速;用低成本获取源源不断订单! 后台:域名/admin.php 账号:admin...
推荐一款Android安卓app开发框架_有超多的控件特效.zip list分页,grid分页,下拉刷新,进度框,图片轮播,表格,多线程下载器,侧边栏,图片上传,轮子选择,图表,Tab滑动,日历选择器 网络下载,多线程与线程池的...
Android 项目开发框架 (目前主流的app样式)
免积分下载超有用的app框架 自己总结整理的 包含activity栈管理消息管理 自己封装图片下载 和Imageloader第三方可供选择 封装MD5加密 封装联网解析接口回调 封装本地缓存机制 封装欢迎界面预读取下一个界面的数据 ...
本框架实现了安卓跨进程跨app通信的方便调用和封装
App框架 RAC MVVM Objection(路由)
1dialogButtonColor对话框按钮的颜色-1dialogButtonTextColor对话框按钮的文字颜色-1所有版本:点击查看使用步骤第一步: app/build.gradle进行依赖implementation 'com.azhon:appupdate:1.7.3'第二步:创建...
手机软件APP下载类网站pbootcms模板 游戏软件应用网站源码 模板自适应手机端 pbootcms内核开发的网站模板,该模板适用于手机APP网站、游戏软件网站等企业, 当然其他行业也可以做,只需要把文字图片换成其他行业的...
Mobile App手机框架html5模板下载4956.zip
PC+WAP,同一个后台,数据即时同步,简单适用!附带测试数据!后台:域名/admin.php账号:admin密码:admin模板特点1:手工书写DIV+CSS、代码精简无冗余。2:自适应结构,全球先进技术,高端视觉体验。3:SEO框架...
基于uni-app框架的校园极简生活跨平台移动应用的设计与实现.pdf
yii-advanced-app-2.0.2框架完整版下载
EL-ADMIN这个框架在java非常火,后端和前端的技术非常先进,发现缺少一个原生APP,经过一段时间的研究,使用Flutter把EL-ADMIN原生的APP做出来 1)这是自己开发的源码 2)提供几个获取列表、明细的例子,其它完全...