当前位置：首页 > news >正文

基于HTML弹性布局做的支付宝界面

news 来源：原创 2024/9/20 1:21:07

里面有一些语言图标，想用的可以去iconfont-阿里巴巴矢量图标库里面寻找，这类图标跟文字一样可以设置大小、文本居中之类的，并不算严格意义上的图片，废话不多说，直接上成果和代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../img/语言图标/iconfont.css"><style>*{margin: 0;padding: 0;}.box{width: 955px;height: 1420px;margin: 0 auto;/* background: yellow; */display: flex;flex-direction: column;}/* header设置 */header{height: 124px;background: #232939;display: flex;color: white;}header i.iconfont{width: 118px;height: 124px;line-height: 124px;text-align: center;font-size: 48px;}header span{font-size: 40px;flex: 1;height: 124px;line-height: 124px;/* text-align: center; */}/* footer设置 */footer{height: 128px;background: gray;display: flex;}footer div{flex: 1;/* border: 1px solid red;box-sizing: border-box; */display: flex;flex-direction: column;justify-content: center;color: #acadaf;background: white;}footer div:hover{color: #06a9ee;}footer div i.iconfont{height: 66px;line-height: 66px;text-align: center;font-size: 58px;}footer div span{height: 36px;line-height: 36px;text-align: center;font-size: 28px;}/* section设置 */section{flex: 1;background: #f4f5f9;}.main{display: flex;height: 278px;justify-content: space-around;align-items: center;color: white;background: #232939;}.main div{width: 120px;height: 168px;/* background: red; */display: flex;flex-direction: column;justify-content: space-between;}.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: green;}.list div span{height: 61px;line-height: 61px;text-align: center;font-size: 30px;}.pic{margin-top: 25px;}.pic img{width: 955px;height: 221px;}</style>
</head>
<body><div class="box"><header><i class="iconfont icon-iconfonticon1"></i><span>账单</span><i class="iconfont icon-iconfonticon4"></i><i class="iconfont icon-iconfonticon4"></i><i class="iconfont icon-iconfonticon4"></i></header><section><div class="main"><div><i class="iconfont icon-saoyisao"></i><span>扫一扫</span></div><div><i class="iconfont icon-saoyisao"></i><span>扫一扫</span></div><div><i class="iconfont icon-saoyisao"></i><span>扫一扫</span></div><div><i class="iconfont icon-saoyisao"></i><span>扫一扫</span></div></div><div class="list"><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div><div><i class="iconfont icon-huokuan"></i><span>贷款</span></div></div><div class="pic"><img src="../img/支付宝01.png" alt=""></div></section><footer><div><i class="iconfont icon-jizhangben"></i><span>记账本</span></div><div><i class="iconfont icon-jizhangben"></i><span>记账本</span></div><div><i class="iconfont icon-jizhangben"></i><span>记账本</span></div><div><i class="iconfont icon-jizhangben"></i><span>记账本</span></div></footer></div>
</body>
</html>