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

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

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

pc端预览图:

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

移动端预览图:

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

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-后面的拼音就可以了

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

3.样机图片

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

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

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

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

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

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

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

 

 

 

(0)
枫瑞博客枫瑞博客
上一篇 2019-12-20 08:50
下一篇 2019-12-27 15:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注