仿支付宝界面-----css实现

已于 2022-10-16 20:04:22 修改
阅读量416 收藏 1
点赞数
分类专栏： CSS学习 文章标签： css html 前端
于 2022-10-16 20:01:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46563235/article/details/127350632
版权

图形字体可以去iconfont网站去下载，网址如下

iconfont-阿里巴巴矢量图标库

目录：

 

案例效果：

 

代码：

<!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">
    <title>Document</title>
    <!-- 引入字体 -->
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        .box{
            border: 1px solid black;
            width: 955px;
            height: 1420px;
            margin: 0 auto;
            background: white;
            display: flex;
            flex-direction: column;
        }
        /* header */
        header{
            height: 124px;
            background: #232939;
            display: flex;
        }
        header i.iconfont{
            width: 118px;
            height: 124px;
            line-height: 124px;
            text-align: center;
            font-size: 48px;
            color: white;
        }
        header span{
            flex: 1;
            height: 124px;
            line-height: 124px;
            font-size: 40px;
            color: white;
        }


        /* footer */
        footer{
            height: 128px;
            background: white;
            display: flex;
            
        }
        footer div{
            flex: 1;
     
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        footer div i.iconfont{
            height: 66px;
            text-align: center;
            font-size: 58px;
        }
        footer div span{
            height: 36px;
            text-align: center;
            font-size: 28px;
        }
        footer div:hover{
            color: blue;
        }


        /* section */
        section{
            flex: 1;
        }
        .main{
            display: flex;
            height: 278px;
            background: #232939;
            justify-content: space-around;
            align-items: center;
        }
        .main div{
            width: 120px;
            height: 168px;
            background: #232939;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: white;
        }

        .main div i{
            font-size: 110px;
            text-align: center;
        }
        .main div span{
            font-size: 32px;
            text-align: center;
        }
        .list{
            display: flex;
            flex-wrap: wrap;
            background: white;
        }
        .list div{
            width: 25%;
            height: 208px;
            border: 1px solid gray;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .list div i{
            height: 77px;
            line-height: 77px;
            text-align: center;
            font-size: 55px;
            color: orange;
        }
        .list div span{
            height: 61px;
            line-height: 61px;
            text-align: center;
            font-size: 30px;
        }
        .pic{
            background: white;
            text-align: center;
            margin: 25px;
        }
    </style>
</head>
<body>
    <div class="box">
        <header>
            <i class="iconfont icon-liebiao"></i>
            <span>账单</span>
            <i class="iconfont icon-kefuyouxian"></i>
            <i class="iconfont icon-sousuo"></i>
            <i class="iconfont icon-jia"></i>
        </header>
        <section>
            <div class="main">
                <div>
                    <i class="iconfont icon-iconfontscan"></i>
                    <span>扫一扫</span>
                </div>
                <div>
                    <i class="iconfont icon-iconfontscan"></i>
                    <span>扫一扫</span>
                </div>
                <div>
                    <i class="iconfont icon-iconfontscan"></i>
                    <span>扫一扫</span>
                </div>
                <div>
                    <i class="iconfont icon-iconfontscan"></i>
                    <span>扫一扫</span>
                </div>
            </div>
            
            <div class="list">
                <div>
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div>
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div>
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div>
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div>
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div>
                     <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div> 
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div> 
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div> 
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div> 
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div> 
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
                <div> 
                    <i class="iconfont icon-huiliuqujinkoushipin"></i>
                    <span>订票</span>
                </div>
            </div>
            <div class="pic">
                <img src="1.jpg" alt="">
            </div>
        </section>
        <footer>
            <div>
                <i class="iconfont icon-zhifubaozhifu"></i>
                <span>支付宝</span>
            </div>
            <div>
                <i class="iconfont icon-zhifubaozhifu"></i>
                <span>支付宝</span>
            </div>
            <div>
                <i class="iconfont icon-zhifubaozhifu"></i>
                <span>支付宝</span>
            </div>
            <div>
                <i class="iconfont icon-zhifubaozhifu"></i>
                <span>支付宝</span>
            </div>
        </footer>
    </div>
</body>
</html>

你还要我怎样？
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（257）:flex-direction
歌谣的博客
12-30 299
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
react-Reactnative仿支付宝密码输入框
08-15
在React Native中，仿支付宝密码输入框的实现涉及到多个关键知识点，这包括组件设计、状态管理、触摸事件处理以及自定义样式。以下是对这些技术点的详细解释： 1. **React Native基础知识**：React Native是...
div文字左右上下居中方法
weixin_33904756的博客
08-30 381
1、要想让图片左右对齐，我们可以在div里写入"style:text-align:center;"代码来实现。　　2、要想使图片居中，多数人可能会考虑使用"vertical-align:middle"代码。这样加上后发现却没有出现效果。　　IE、firefox浏览器的逐步解决方法：　　1）针对图片设置如下代码：style="_margin-top: expression_r(( 300 - t...
css图片在div内上下居中的方法
czs8585的专栏
07-15 8041
参考代码： 要想让图片左右对齐，我们可以在div里写入”style:text-align:center;”,左右居中问题好解决，现在看一下，IE6,IE7和firefox里，图片都已经是左右居中了，技术的难点是如何让图片在三个浏览器垂直居中。 大部分人可能会考虑使用vertical-align:middle来使图片居中，加上去看看没有出现效果，这里我们针对图片设置如下代码：st
代码实现:图片在div里面上下左右居中的方法
最新发布
2401_83810323的博客
06-04 333
要实现图片在 `<div>` 元素里面上下左右居中，你可以使用 CSS 的 flexbox 或者绝对定位来实现。元素里面上下左右居中。选择使用哪种方法取决于你的具体需求和布局。无论是使用 Flexbox 还是绝对定位，都可以实现图片在。在这个示例中，我们创建了一个包含图片的。在这个示例中，我们创建了一个包含图片的。属性，我们将图片水平和垂直居中对齐。然后，我们为图片添加一个类名为。这将使图片相对于父元素居中对齐。元素，并将其样式设置为。元素，并将其样式设置为。
DIV中图片上下居中解决方案
ppzhu1122的博客
07-01 1105
DIV中图片上下居中解决方案
uni-app 仿扎克新闻mpZAKER-master（带截图）
04-10
【uni-app 仿扎克新闻mpZAKER-master（带截图）】项目是一个使用uni-app框架开发的移动新闻应用示例，旨在模仿知名新闻应用ZAKER的功能和界面设计。uni-app是一个基于Vue.js的多端开发框架，允许开发者用一套代码...
JS+CSS实现仿支付宝菜单选中效果代码
10-23
总结来说，通过CSS和JavaScript的结合使用，我们能够实现富有动态效果和交互性的Web界面。这样的菜单选中效果的实现，涉及到对CSS样式规则的精确控制，以及对JavaScript事件监听器和DOM操作的熟练运用。通过上述代码...
HTML---CSS----基础知识及代码----各种小程序网页设计
04-09
在这个“HTML---CSS----基础知识及代码----各种小程序网页设计”主题中，我们将深入探讨这两门语言的核心概念、语法以及在创建小程序和网页设计中的应用。 首先，HTML是一种标记语言，它定义了网页的内容结构，如...
基于UNI-APP的仿转转二手市场APP页面模板
02-23
此外，模板还可能包含了样式表（CSS）、脚本（JS）以及图片资源，以实现丰富的交互效果和视觉呈现。 总之，"基于UNI-APP的仿转转二手市场APP页面模板"是一个实用的开发资源，它结合了UNI-APP的跨平台能力和转转APP...
css实现div内图片上下左右居中
09-25
DIV容器内设置 text-align:center 即可让图片居中，但是DIV内默认的图片是上对齐，不会上下居中，如果想要实现这样的效果，JS判断是比较麻烦的，因为DIV容器内的图片高度是不一定的，那么只有用table了，我想大多数人事不愿意这么做的，那么怎么办呢，还是用CSS控制下吧
应用的自动更新代码，亲测可用，模仿支付宝界面
11-08
应用的自动更新代码，亲测可用，模仿支付宝界面 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
仿支付宝界面。所有图标，旧版本的，喜新版本勿下
11-12
仿支付宝的图标和首页几面， 只有界面的代码，其他的没有，只有图标代码，首页UI ，请注意
多种方法实现自适应布局
weixin_30555125的博客
05-02 222
最近切了几个手机端的网页，第一次切的是美团的首页，为了自适应不同的手机分辨率，需要用到自适应布局，切图的时候是用的第一中方法，用到了定位，后来查找了一些其他方法，现在就介绍几种自适应布局的实现方法： 美团网页头就用到了自适应 地址：”长沙“，右边的”我的“是固定宽度，不会因分辨率不同而改变大小，中间内容自适应；这里就用三个div来代替表示吧。 html部分： 1 <div cla...
js隐藏和显示二维码
weixin_45097456的博客
09-27 693
第一次写博客，请多多指教，话不多说；滑入和滑出。 ` <style type="text/css"> #bx1{ width: 10px; height: 500px; background-color: aqua; position: relative; /* 相对定位 */ } #bx2{ wid...
图片上下居中
weixin_30329623的博客
02-08 882
image里添加此属性 vertical-align:middle; 转载于:https://www.cnblogs.com/junyi-bk/p/10356128.html
CSS3实现图片在DIV中上下左右居中
jia2799897415的博客
12-23 842
CSS3实现图片在DIV中上下左右居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3实现图片在DIV中上下左右居中</title> <style> .container{width:600px;height:600px;border:1px solid red;position: relative;}
flex九宫格布局
记录本人工作中遇到的问题、经验总结以及分享。
06-14 705
css
CSS设置 使div中的图片垂直上下居中
前人种树，后人乘凉
08-18 1345
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目：   “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”   当然出题并不是随意，而是有其现实的原因，垂直居中是
使用JavaScript实现支付宝6位数字密码输入效果
作者通过HTML、CSS和JavaScript实现了一个具有真实输入框和6个假输入框的交互界面，模拟用户输入数字的过程。" 在实现这个功能时，首先我们需要理解基本的HTML结构。在给出的代码片段中，可以看到一个`<div>`元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值