支付宝界面

最新推荐文章于 2024-05-18 16:20:54 发布
最新推荐文章于 2024-05-18 16:20:54 发布
阅读量150 收藏 1
点赞数
分类专栏： CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43254742/article/details/126283002
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../font//font_3564744_98wx7v57vt/iconfont.css">
    <title>Document</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        /* 全部 */
        .container{
            width: 1170px;
            height: 2532px; 
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            border: 1px solid black;
        }
        /* 页眉页脚 */
        header,footer{
            height: 168px;

        }
        header{
            background-color: #3476fe;
        }
        /* 主体 */
        main{
            flex: 1;
            display: flex;
            flex-direction: row;
            background: #f1f1f1;
        }
        nav{
            height: 249px;
            display: flex;
            flex-direction: row;
            background: #3476fe;
        }
        /* 页眉 */
        .box1{
            width: 825px;
            height: 97px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background: white;
            border-radius: 20px;
            border: 1px solid #5b729b;
            display: flex;
        }
        
        /* 水平排列 */
        .head{
            padding-top: 53px;
            padding-left: 33px;
            padding-right: 33px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
        }
        .head-left{
            display: flex;
            flex-direction:column;
        }
        header span:nth-child(1){
            font-size: 43px;
            color: white;
        }
        header span:nth-child(2){
            padding-top: 8px;
            font-size: 26px;
            color: white;
        }

        .icon-xiangxia{
            font-size: 24px;
            color: white;
            padding: 0px 22px;
        }
        .icon-icon_tianjia{
            font-size: 65px;
            color: white;
            padding-left: 50px;
            line-height: 1.5;
        }
        .icon-fangdajing{
            font-size: 43px;
            height: 97px;
            color: #a1a1a1;
            line-height: 97px;
            padding: 0 28px;
            float: left;
        }
        .box1 input{
            font-size: 42px;
            color: #6a6a6c;
            border: 0px;
        }
        .box1 input:nth-child(2n){
            width: 558px;
            text-align: left;
            color: #626262;
            float: left;
        }
        .box1 input:nth-child(2n-1){
            width: 153px;
            border-radius: 14px;
            text-align: center;
            color: #3773e5;
            border-left: 5px solid #e6ebee;
            background: white;
            float: left;
            /* border: 0px; */
        }
        /* 导航栏 */
        nav div{
            width: 132px;
            height:168px;
            margin:44px 79px;
            display: flex;
            flex-direction: column;
            text-align: center;            
        }
        nav div .iconfont{
            font-size: 100px;
            color: white;
        }
        nav div span{
            font-size: 44px;
            color: white;
        }
        /* 主体 */
        aside{
            width: 17px;
        }
        article{
            flex: 1;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        /* 顶部 */
        .section-top{
            width: 227px;
            height: 227px;
            box-sizing: border-box;    
            display: flex;
            flex-direction: column;
        }
        .section-top img{       
            width: 90px;     
            height: 90px;            
            margin: 0 auto;
            padding-top: 55px;
        }
        .section-top span{
            font-size: 37px;            
            margin: 0 auto;
            padding-top: 30px;
            color: #3e3e3e;
        }
        /* 中部 */
        .secion-center{
            width: 1100px;
            height: 300px;
            margin: 0 auto;
            margin-top: 40px;
            background: white;
            border-radius: 26px;
            box-sizing: border-box;
        }
        .secion-center-3{
            width: 1100px;
            height: 400px;
            border-radius: 26px;
            background: white;
            margin-top: 40px;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .secion-center-1{
            height: 100px;
            display: flex;
            padding: 0 35px;
            font-size: 39px;
            color: #6a6a6a;
            line-height: 100px;
        }
        h1{
            margin-left: 33px;
            padding: 56px 0 0 0;
            font-size: 55px;
            color: black;
        }
        .secion-center-1 div{
            float: left;
        }
        .secion-center-1-left{
            margin: 0;
            padding: 0;
            width: 735px;
            text-align: left;
            display:flex;
            /* justify-content:center; 水平居中*/
            align-items:center;	/* 垂直居中 */

        }
        .span-1{
            color: black;
            margin: 0 23px;
            font-weight: bold;
        }
        .span-2{
            color: #656565;
        }
        .secion-center-1-left img{
            width: 63px;
            height: 61px;
        }
        .secion-center-1-right{
            width: 420px;
            text-align: right;
            
        }   
        .icon-xiangyoujiantou{
            font-size: 39px;
        }  
        
        .secion-center-2{
            display: flex;
            justify-content: center;
            margin-top: 35px;
            
        }
        .secion-center-2-span{
            margin-top: 43px;
            padding:0 30px;
            font-weight: bold;
            font-size: 37px;
            overflow: hidden;
        }
        /* footer */
        footer{
            border-top: 0.5px solid #b3aaaa;
            display: flex;
        }
        footer div{
            width: 234px;
            margin-top: 20px;
            display: flex;
            flex-direction:column;
            text-align: center;            
        }
        footer div .iconfont{
            font-size: 66px;
            color: #626262;
        }
        footer div span{
            margin-top: 25px;
            font-size: 25px;
            color: #626262;
            
        }
        
        
    </style>
    <div class="container">
        <header class="head">
            <div class="head-left">
                <span>深圳<i class="iconfont icon-xiangxia"></i></span>                
                <span>小雨&emsp;25°C</span>            
            </div>     
            <div class="box1"> 
                <i class="iconfont icon-fangdajing"></i>
                <input type="text" value="机票火车票">
                <input type="submit" value="搜索">
            </div>
            <i class="iconfont icon-icon_tianjia"></i>
        </header>
        <nav>
            <div>
                <i class="iconfont icon-saoyisao"></i>
                <span>扫一扫</span>
            </div>
            <div>
                <i class="iconfont icon-yishoukuan"></i>
                <span>收付款</span>
            </div>
            <div>
                <i class="iconfont icon-zihangche"></i>
                <span>出行</span>
            </div>
            <div>
                <i class="iconfont icon-qiabao"></i>
                <span>卡包</span>
            </div>
        </nav>
        <main>
            <aside></aside>
            <article>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="section-top">
                    <img src="../img/支付宝荷包.png" alt="">
                    <span>支付宝荷包</span>
                </section>
                <section class="secion-center">
                    <div class="secion-center-1">
                        <div class="secion-center-1-left">最新消息</div>
                        <div class="secion-center-1-right">18条新消息
                            <i class="iconfont icon-zhifupingtai-zhifubao" style="color:red; font-size:24px;line-height:100px;"></i>
                            <i class="iconfont icon-xiangyoujiantou"></i>                                                 
                        </div>
                    </div>
                    <div class="secion-center-1">
                        <div class="secion-center-1-left">
                            <img src="../img/理财.png" alt="">
                            <span class="span-1">支付助手</span>
                            <span class="span-2">退款到账通知￥8.04元</span>
                        </div>
                        <div class="secion-center-1-right">3小时前<i class="iconfont icon-xiangyoujiantou"></i>                                                 
                        </div>
                    </div>
                    <div class="secion-center-1">
                        <div class="secion-center-1-left">
                            <img src="../img/蚂蚁.png" alt="">
                            <span class="span-1">蚂蚁森林</span>
                            <span class="span-2">能量球签收通知</span>
                        </div>
                        <div class="secion-center-1-right">5小时前<i class="iconfont icon-xiangyoujiantou"></i>                                                 
                        </div>
                    </div>                    
                </section>
                <section class="secion-center">
                    <div class="secion-center-2">
                        <img src="../img/center.png" alt="">
                    </div>
                    
                </section>
                <h1>为你精选</h1>
                <section class="secion-center-3">
                    <div class="secion-center-2">
                        <img src="../img/hpvlunbotu.png" alt="">
                    </div>
                    <div class="secion-center-2-span">
                        <span>接种HPV疫苗可以预防宫颈癌，保护女性健康~根据自己的年龄预约适合自己的HPV疫苗吧！</span>
                    </div>
                    
                </section>
            </article>
            <aside></aside>
        </main>
        <footer>
            
            <div>
                <i class=" iconfont icon-zhifubao" style="color: #3477fc;font-size:110px;"></i>               
            </div>
            <div>
                <i class="iconfont icon-licai"></i>
                <span>理财</span>
            </div>
            <div>
                <i class="iconfont icon-shenghuo"></i>
                <span>生活</span>
            </div>
            <div>
                <i class="iconfont icon-xiaoxi"></i>
                <span>消息</span>
            </div>
            <div>
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </div>
        </footer>
    </div>
</body>
</html>

在这里插入图片描述

码码大海
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android 支付宝登录界面,模仿支付宝登录页的实现（android）
weixin_42122432的博客
05-26 1287
先看看支付宝登录页面长什么模样 首先 看见图 先分析 登录页面所需要的元素——需要一个ImageView 存放用户头像接下来就是账号密码输入框了 (里面的细节在于 当开始输入的 在编辑框后面会出现一个小叉，用于删除文本，该选中的框 下面的那条线会变蓝色)再往下面 就是button了接下来我们就开始考虑方案——1.头像 (我们可以使用fresco库来加载图片，具体用法这里不提了)2.两个输入...
android支付宝支付界面设计,支付宝移动端App ui界面设计规范
weixin_36078669的博客
05-28 3426
对于ui初学者来说，ui界面设计规范有着非常正确和重要的指导意义。而当我们要接一个新的设计项目时，如能拿到该产品的同行老大来做研究那是最好不过。设计风格可以根据自己的品牌调性来做，但基本的设计尺寸规范等最好还是有优质产品来做参考。今天有幸拿到支付宝内部设计文件跟大家分享，这一套支付宝app移动端ui界面设计规范，相信对大家有帮助。01-了解支付宝品牌在ui设计的延伸性整理图案图形设计文档有助于更好...
Android支付宝财富界面,10分钟带你看懂支付宝的交互设计（二）
weixin_30673719的博客
05-29 931
原标题：10分钟带你看懂支付宝的交互设计(二)本文是《10分钟带你看懂支付宝的交互设计》系列的第二篇。本文主要从支付宝的底部导航栏中的“财富”、“朋友”、“我的”三个部分，为大家分析支付宝页面中的交互设计。 上篇文章中，我们分析了支付宝的首页，了解了：支付宝的首页是如何通过设计实现了其主要功能？接下来的文章中，我们来看看：支付宝在其它界面的交互设计又是怎么样的呢？一、“财富”篇按照“国际分析案例”...
uni-app解析银行卡（支付宝）返回form表单，唤起支付宝界面
Xinacridine的博客
06-08 1430
form表单唤起支付
模仿手机支付宝界面
12-08 1091
动态显示aplashimage，控制手势密码，TabbarController与navigationController结合使用，定制tableViewController，自定义UIButton。
android支付界面设计,Android支付宝支付设计开发
weixin_32715349的博客
05-28 1297
在移动支付领域，支付宝支付占用巨大份额，根据艾瑞咨询公布的报告数据：2014Q3，支付宝斩获了82.6%的市场份额，在移动支付的霸主地位越来越稳固。财付通支付的发力点在微信支付和手Q支付，在移动支付格局中取得了10.0%的市场份额，排名第二。支付宝在移动支付领域的统治地位，使得我们有必要梳理支付宝移动开发流程。本文写作的目的就是梳理支付流程，从架构层面讲述如何在移动应用中嵌入支付宝支付功能，以及指...
支付宝原型设计-低保真Axure9支付宝界面设计
Mongkian的博客
07-22 2607
Axure9原型参考链接： https://jt6l6a.axshare.com 一、首页 二、理财 三、口碑 四、消息和我的 五、下载链接 有需要的朋友可以下载参考，感谢支持！ https://download.csdn.net/download/heart_sun/20417231 ...
支付宝登录界面
qq_23979127的博客
12-06 891
支付宝登录页面亲测
android仿支付宝首页更多、应用编辑界面
热门推荐
奋斗
06-30 1万+
项目越来越大，模块越来越多，首页上展示的东西又不能全部都展示出来，只能选择几个重要的模块展示出来。但是不同的用户关注的层面不一样，只好让用户自己去选择需要展示的应用。就像支付宝的应用编辑界面一样。 ### 自定义界面和支付宝界面 ### 整体介绍 总的来说实现了从json数据转化为当前界面，可以自由的编辑界面保存到本地。 主要界面布局 一个标题栏...
iOS支付宝 界面定制
空之轨迹
01-03 3188
因为ipad应用需要添加支付宝功能 在支付宝论坛http://club.alipay.com/read-htm-tid-9976972.html （2012.11.23更新） 上找到了最新的 无线支付sdk http://download.alipay.com/public/api/base/WS_SECURE_PAY_SDK.zip 这个界面是检测到没有吧安装支付宝客服端 让我们
Android仿支付宝支付界面界面界面
05-19
仿支付宝支付界面
ios 支付宝demo，可供下载和跳转支付宝界面
11-13
支持ios跳转支付宝页面，还可以自定义界面进行支付，支持开发者扩展，进行支付，里面有详细的注释，提供详细的讲解。
仿支付宝界面。所有图标，旧版本的，喜新版本勿下
11-12
仿支付宝的图标和首页几面， 只有界面的代码，其他的没有，只有图标代码，首页UI ，请注意
ios 支付宝demo，可供自定义支付和跳转支付宝界面支付
11-13
提供支付宝自定义界面支付，和跳转支付宝app进行订单支付。里面有详细的注释和详解，供新手参考
应用的自动更新代码，亲测可用，模仿支付宝界面
11-08
应用的自动更新代码，亲测可用，模仿支付宝界面 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
前端三大件速成 03 CSS（2）常用属性、内外边距及定位布局
weixin_42830015的博客
05-18 990
前端三大件速成 03 CSS（2）常用属性、内外边距及定位布局
css中用来设置表格的一些样式属性
qwguo
05-16 612
等属性来设置表格的样式，并使用。伪类来交替改变行的背景色。在这个示例中，我们使用了。
CSS-相对和绝对和固定位置
最新发布
Kevin7_35Durant的博客
05-18 295
将位置改成相对位置，与原先的位置顶部相距100px。原来的位置是占用状态，其他元素无法使用。改变位置的参照物是自己原来的位置。元素的位置在网页滚动时不变。属性值：relative。属性值：absolute。改变位置的参照物是父元素。属性：position。属性：position。属性：positon。
css笔记总结2
fishniu35的博客
05-15 443
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.id 选择器和类选择器最大的不同在于使用次数上。
用Android studio编写仿支付宝界面程序
05-31
如果您想使用Android Studio编写仿支付宝界面程序，可以按以下步骤操作： 1. 打开Android Studio，创建一个新的项目； 2. 在项目中创建需要的Activity、Fragment、布局文件等，用于实现仿支付宝界面的各个模块； 3....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值