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-radiu.........完整代码请登录后点击上方下载按钮下载查看