css布局实现手机端移动端钱包收支明细页面代码-html代码-BFW代码库

css布局实现手机端移动端钱包收支明细页面代码

代码语言：html

代码描述：css布局实现手机端移动端钱包收支明细页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>收支明细</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
    body{width: 100%;overflow-x: hidden;background: #f8f8f8;}
    img{vertical-align: middle;max-width: 100%;}
    .top-bar{width: 100%;height: .88rem;line-height: .88rem;text-align: center;position: relative;font-size: .38rem;color: #333333;}
    .top-bar a{width: .5rem;height: .88rem;position: absolute;top: 0;left: .3rem;background: url(//repo.bfw.wiki/bfwrepo/image/60b95f5dd4bec.png) left center no-repeat;background-size: .23rem auto;z-index: 2;}
    .top-bar i{width: .5rem;height: .88rem;position: absolute;top: 0;right: .3rem;background: url(//repo.bfw.wiki/bfwrepo/image/6122ed8e7e62b.png) right center no-repeat;background-size: .41rem auto;z-index: 2;}
    .container{width: 100%;padding: 0 .25rem 1rem .25rem;}
    /* 月份 */
    .month{width: 100%;height: auto;overflow: hidden;padding: .4rem 0;}
    .month ul{width: 100%;display: flex;justify-content: center;align-items: center;}
    .month ul li{font-size: .28rem;color: #999999;text-align: center;width: 1.1rem;margin: 0 .2rem;}
    .month ul li.on{font-size: .28rem;color: #ff7100;padding: .1rem;background: #fff1e5;border-radius: .25rem;}
    /* 信息总览 */
    .total-info{width: 100%;height: auto;overflow: hidden;}
    .total-info ul{width: 100%;display: flex;justify-content: center;align-items: center;height: 1.55rem;background: linear-gradient(to right,#fd738b,#ff2c6a);border-radius: .2rem;}
    .total-info ul li{width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;}
    .total-info ul li::after{content: "";display: block;width: .01rem;height: .35rem;background: #fd849d;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
    .total-info ul li p{font-size: .38rem;color: #ffffff;}
    .total-info ul li p i{font-size: .28rem;margin-right: .02rem;}
    .total-info ul li p span{margin-left: .05rem;color: #ffffff;}
    .total-info ul li span{font-size: .28rem;color: #ffc9d7;margin-top: .1rem;}
    /* 消费支出 */
    .chart{width: 100%;height: auto;overflow: hidden;background: #ffffff;padding: .35rem .3rem;margin-top: .4rem;border-radius: .2rem;}
    .chart .title{width: 100%;height: auto;overflow: hidden;display: flex;justify-content: space-between;align-items: center;}
    .chart .title h3{font-size: .34rem;color: #333333;font-weight: bold;}
    .chart .title .type{display: flex;align-items: center;}
    .chart .title .type span{width: .8rem;height: .45rem;line-height: .45rem;text-align: center;font-size: .2rem;color: #bcbcbc;background: #f7f7f7;}
    .chart .title .type span.on{background: #747d99;color: #ffffff;}
    .chart .title .type span:fi.........完整代码请登录后点击上方下载按钮下载查看