扁平化自适应移动端app下载页4种配色

扁平化自适应移动端app下载页4种配色，这是在枫瑞网盘里面一个很久的下载页，无意看了下之前杀马特的文章，发现了还有一个引导页没有去分享，于是修改了几个东西，贡献一下吧。一共四种配色，橙色，蓝色（好看），黄色，绿色（好看）

pc端预览图：

移动端预览图：

1.代码说明

一共四个模版，网页底部有选项切换，一般情况下，我们只要一个就可以了，个人感觉可以删除，因为不知道的作者为啥要写在一起

 <div class="down_nav"> <ul> <li class="cheng active track " trackname="App_DownLoad_SHD"><span></span><i>模版一</i></li> <li class="lan track " trackname="App_DownLoad_ECar"><span></span><i>模版二</i></li> <li class="huang track " trackname="App_DownLoad_ZNMC"><span></span><i>模版三</i></li> <li class="lv track " trackname="App_DownLoad_JGB"><span></span><i>模版四</i></li> </ul> </div>

枫瑞是喜欢蓝色和绿色，因为不是那么刺眼，

其余的可以直接删除整个div，down_slide后面的数据代表第几个模版

<div class="swiper-slide down_slide2"> </div>

2.图标替换

代码其实都还好，在pc端的时候有看到前面的几个图标吧，作者是使用了一个图标库，i标签后面就是图标

 <div class="down_mes"> <p><i class="iconfont icon-xiaoshi"></i>文案很可爱</p> <p><i class="iconfont icon-dingdanluru"></i>我是可以编辑的文字</p> <p><i class="iconfont icon-kanban-"></i>马上要过春节了</p> <p><i class="iconfont icon-cheku_"></i>可是还没有女盆友</p> </div>

图标文件在fonts/iconfont.svg中，都是拼音，替换i标签的icon-后面的拼音就可以了

3.样机图片

看到预览图的手机了吧，这个我们要是一定修改到的，为了大家方便，也是放了一个样机psd文件，大家下载ps 就可以处理

a，首先psd文件导入到ps中，双击第一个只能图层

b，刷机后会得到一个黑色的长方形，我们要图片内容丢进去，铺满长方行，保存文件，在关闭该图层就好了，最后保存为png

相关源码以及样机请关注微信微信公众号“枫瑞博客网”回复“app下载页”获取源码