前段小白训练之抠图支付宝

本文主要是介绍前段小白训练之抠图支付宝，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

成品图

1. 前言

我可以你同样也可以，相信你能做出这个页面之后其他的页面也就没什么太大问题
当给你一个小页面时你会觉得我可以，当一个大页面摆在你面前的时候你可能会逃避，觉得自己不可以，就是
因为一个大页面包含太多太多的小页面了，很繁琐。我们可以一步一步来将它慢慢的划分为一个个小的模块，
然后经过时间的洗礼，属于你的大页面就做出来了
复制代码

2. 简介

学习前端也有两个星期了 
为了检测自己我决定将支付宝的首页作为自己的测试，巩固这段时间学到的东西和这段时间遗漏的东西还有学
习一些之前不足的东西，自己亲自去动手是一个很好的查漏补缺的过程
复制代码

3. 用到的编译器和插件

• vscode
• stylus

3.1 可能部分小白对stylus（编写样式的）不是很了解，楼主在这里给大家做个简单的介绍，这时候有人机会问了 我有css为啥还要用stylus呢？

3.1.1 因为stylus编写比css更加简洁（stylus能自动生成css）怎么说直接看图

我们发现stylus在书写中少了css中的 {}和：
(上边stylus代码 下边css代码)
复制代码

3.1.2 stylus用起来更加方便管理，能很快找到相应元素的位置，排版更加系统化

我们发现当直接在父级元素中写自己元素的属性设置时自动生成在父级元素下的子级元素的属性设置，
我们还可以看到左边的小箭头所示可以将写好的代码展开和收起，可以很明确的知道自己写到哪一步！
方便简洁
(上边stylus代码 下边css代码)
复制代码

3.1.3 这么好用的插件当然也是有弊端的，因为stylus实时生成文件，所以代码多的时候运行起来可能慢，时常加载不出来css，这都正常，因为css一直在刷新。谁让它方便呢

4.带你走进stylus

4.1 安装和使用

4.1.1 我们在终端中打开我们的即将编辑a.styl的文件

4.1.2 全局安装stylus输入命令 npm i -g stylus

4.1.3 如果出现错误是因为命令请求的地方很远于是我们安装一个淘宝下载npm config set registry registry.npm.taobao.org

4.1.4 安装好之后查询下版本号确定是否安装成功stylus --version

4.1.5 我们安装一下language-stylus快捷输入

这样stylus就可以使用了
复制代码

4.1.6 使用命令生成对应的css文件 stylus -w .\a.styl -o .\a.css

之后只需要保存styl即可实时生成css
复制代码

5.准备工作做好之后我们开始写页面了

5.1 构思：

首先我们看到整体页面因为中间内容是可以滑动的我们就知道这个大模块是由至少三个大框架构成top，
contern ，bottom。当然我们设置了一个warpper容器将他们包起来
复制代码

5.1.1 首先我们看到top

是由上下两个框架构成分别是search-item，function-item
search-item：由四个模块构成
function-item：由四个体积相等的模块构成
    要点：根据父级浮动容器子级flex：1来完成
    代码如下
复制代码

    <div class="top">
            <div class="search-item">
                <div class="search-address">
                    <p>荆州</p>
                    <div class="search-addressImg">
                        <img src="./imges/1.png" alt="">
                    </div>
                </div>
                <div class="search-input">
                    <div class="inputSearchImg">
                        <img src="./imges/4.png" alt="">
                    </div>
                    <p>搜索</p>
                    <input type="text">
                    <div class="inputVoiceImg">
                        <img src="./imges/5.png" alt="">
                    </div>
                </div>
                <div class="search-friend">
                    <div class="search-friendImg">
                        <img src="./imges/2.png" alt="">
                    </div>
                </div>
                <div class="search-add">
                    <div class="search-addImg">
                        <img src="./imges/3.png" alt="">
                    </div>
                </div>
            </div>
            <div class="function-item">
                <div class="functions function-scanning">
                    <div class="functionImg">
                        <img src="./imges/6.png" alt="">
                    </div>
                    <p>扫一扫</p>
                </div>
                <div class="functions function-pay">
                    <div class="functionImg">
                        <img src="./imges/7.png" alt="">
                    </div>
                    <p>付钱</p>
                </div>
                <div class="functions function-receive">
                    <div class="functionImg">
                        <img src="./imges/8.png" alt="">
                    </div>
                    <p>收钱</p>
                </div>
                <div class="functions function-card">
                    <div class="functionImg">
                        <img src="./imges/9.png" alt="">
                    </div>
                    <p>卡包</p>
                </div>
            </div>
        </div>
复制代码

5.1.2 我们来到contern

    是由四个模块构成分别是uses-item，advise-item，discount-item，fight-item并且是可以滑动的
    我们设置出行超出滑动属性overflow: scroll
        uses-item：由15个体积相等并且分三行的模块组成
            要点：根据父级浮动容器换行flex-wrap: wrap完成
        advise-item：由四个模块组成
        discount-item：由三个模块组成
            要点：1.根据父级浮动容器给图片设置flex：1这样图片自动填充剩余大小 
                 2.字体‘赚20元’为高亮子至于要添加一个span标签然后设置颜色即可
            注意：此时不能设置纵向居中align-items:center;因为本来flex就是设置宽高现在再来添
            加纵向居中就会显示图片原本的高度居中flex失效
        fight-item：由三个模块组成
            要点：1.根据父级浮动容器子级flex：1来完成
                  2.我们发现有些数字的字体好像与其他的格式不一样，那是因为我们调用了字体库形成
                  自定义字体因为本文章的主题是页面实现，如果对字体感兴趣的朋友可以关注我或私聊
                  我来讨论自定义字体的实现，之后也会发文来谈论我对自定义字体的理解
复制代码

    <div class="contern">
            <div class="uses-item">
                <div class="use">
                    <div class="useImg">
                        <img src="./imges/e.png" alt="">
                    </div>
                    <p>外卖</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/mei.png" alt=""></div>
                    <p>美食/玩乐</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/jiu.png" alt=""></div>
                    <p>酒店住宿</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/dian.png" alt=""></div>
                    <p>电影演出</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/shenfen.png" alt=""></div>
                    <p>市民中心</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/zhuanz.png" alt=""></div>
                    <p>转账</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/xinyong.png" alt=""></div>
                    <p>信用卡还款</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/shouji.png" alt=""></div>
                    <p>充值中心</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/yuebao.png" alt=""></div>
                    <p>余额宝</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/bao.png" alt=""></div>
                    <p>蚂蚁保险</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/xiao.png" alt=""></div>
                    <p>校园生活</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/zhima.png" alt=""></div>
                    <p>芝麻信用</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/che.png" alt=""></div>
                    <p>火车票机票</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/jian.png" alt=""></div>
                    <p>健康码</p>
                </div>
                <div class="use">
                    <div class="useImg"><img src="./imges/gengduo.png" alt=""></div>
                    <p>更多</p>
                </div>
            </div>
            <div class="advise-item">
                <div class="adviseImg">
                    <img src="./imges/mayi.png" alt="">
                </div>
                <li>你有8条未读消息<p>2小时前</p>
                </li>
                <div class="news">8</div>
                <div class="arrowImg">
                    <img src="./imges/jiantou.png" alt="">
                </div>
            </div>
            <div class="discount-item">
                <div class="discount">
                    <div class="text">
                        <div class="discount-big">
                            <p>动动手指<span>赚20元</span></p>
                        </div>
                        <div class="discount-small">
                            <p>0.1元包邮好货分享好友</p>
                            <div class="discount-go">
                                <p>GO</p>
                            <div class="goImg"><img src="./imges/jiantou1.png" alt=""></div>
                        </div>
                        </div>
                    </div>
                    <div class="discount-money">
                        <img src="./imges/baozang.jpg" alt="">
                    </div>
                </div>
                <div class="middle">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="fight-item">
                <div class="fightTitle">
                    <p>抗击新冠肺炎<span>较昨日新增却增病例</span></p>
                </div>
                <div class="fightContent">
                    <div class="truth">
                        <div class="number number1">
                            <span class="bignumber1"></span>
                            <p>湖北新增</p>
                        </div>
                        <div class="number number2">
                            <span class="bignumber2"></span>
                            <p>国内新增</p>
                        </div>
                        <div class="number number3">
                            <span class="bignumber3"></span>
                            <p>境外输入新增</p>
                        </div>
                        <div class="number number4">
                            <span class="bignumber4"></span>
                            <p>国外新增</p>
                        </div>
                    </div>
                </div>
                <div class="fightProtects">
                    <div class="fightProtect">
                        <div class="protectImg"><img src="./imges/haiwai.png" alt=""></div>
                        <p>海外动态</p>
                    </div>
                    <div class="fightProtect">
                        <div class="protectImg"><img src="./imges/taqing.png" alt=""></div>
                        <p>踏青好去处</p>
                    </div>
                    <div class="fightProtect">
                        <div class="protectImg"><img src="./imges/chuxing.png" alt=""></div>
                        <p>交通出行</p>
                    </div>
                    <div class="fightProtect">
                        <div class="protectImg"><img src="./imges/fanghu.png" alt=""></div>
                        <p>防护必买</p>
                    </div>
                    <div class="fightProtect">
                        <div class="protectImg"><img src="./imges/haodian.png" alt=""></div>
                        <p>好店榜单</p>
                    </div>
                </div>
            </div>
        </div>            
复制代码

5.1.3 我们来到bottom

是由五个等面积模块组成
要点：根据父级浮动容器子级flex：1来完成
代码如下
复制代码

    <div class="bottom-item">
            <div class="modular">
                <div class="modularImg">
                    <img src="./imges/shouye.png" alt="">
                </div>
                <p>首页</p>
            </div>
            <div class="modular">
                <div class="modularImg"><img src="./imges/licai.png" alt=""></div>
                <p>理财</p>
            </div>
            <div class="modular">
                <div class="modularImg"><img src="./imges/koubei.png" alt=""></div>
                <p>口碑</p>
            </div>
            <div class="modular">
                <div class="modularImg"><img src="./imges/pengyou.png" alt=""></div>
                <p>朋友</p>
            </div>
            <div class="modular">
                <div class="modularImg">
                    <img src="./imges/wode.png" alt="">
                </div>
                <p>我的</p>
            </div>
        </div>
复制代码

5.1.4 css

因为代码过多，有需要私聊
复制代码

5.1.5 页面展示

支付宝页面

因为此样式是用根据手机的样式设计的，如果直接用浏览器显示可能产生视觉效果上的误差请大家观看
的时候用让浏览器显示成手机模式，检查网页源代码后执行如下图操作
复制代码

6.总结

页面实现就是一个比较注意细节但是不难技术，只要理清结构，了解相应样式功能，页面这块应该是没有
什么问题，只是需要时间的打磨让你的页面更加精致更加完美，当然本人实现的页面比较粗糙，希望大家
前来提意见给建议大家一起学习一起进步
复制代码

这篇关于前段小白训练之抠图支付宝的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！