iconfont模仿支付宝app的布局页面-html代码-BFW代码库

代码语言：html
代码描述：iconfont模仿支付宝app的布局页面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>
        /* 公共样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,body {
            height: 100%;
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        li {
            list-style: none;
        }

        input {
            outline: none;
            border: 0;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .clear-both::after {
            content: "";
            display: block;
            clear: both;
        }

        img {
            vertical-align: middle!important;
        }
@font-face {
            /*声明字体 引用字体*/
            /*font-family:"icomoon";*/
            /*src:url('../fonts/icomoon.eot');*/
            /*src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),*/
            /*url('../fonts/icomoon.woff') format('woff'),*/
            /*url('../fonts/icomoon.ttf')  format('truetype'),*/
            /*url('../fonts/icomoon.svg#SofiaProLight')  format('svg');*/
            /*font-weight:normal;*/
            /*font-style:normal;  /* 倾斜字体正常 */

        }
        i {
            font-family: "icomoon";
            font-style: normal;
        }
    </style>
    <!-- 引入公共样式 -->

    <!-- 引入字体样式 -->

<style>
    @font-face {
    font-family: "iconfont";
    src: url('iconfont.eot?t=1595232791058');
    /* IE9 */
    src: url('iconfont.eot?t=1595232791058#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('iconfont.woff?t=1595232791058') format('woff'), url('iconfont.ttf?t=1595232791058') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1595232791058#iconfont') format('svg');
    /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-icon:before {
    content: "\e602";
}

.icon-zhuanzhang:before {
    content: "\e603";
}

.icon-xinyongqiahuankuan:before {
    content: "\e604";
}

.icon-saoyisaojianjiban:before {
    content: "\e639";
}

.icon-logo:before {
    content: "\e66a";
}

.icon-shoujichongzhi:before {
    content: "\e62e";
}

.icon-qian:before {
    content: "\e63c";
}

.icon-tianmao:before {
    content: "\e627";
}

.icon-didichuhang:before {
    content: "\e736";
}

.icon-shenghuojiaofei:before {
    content: "\e643";
}

.icon-mayijubao:before {
    content: "\e61c";
}

.icon-qiabao:before {
    content: "\e669";
}

.icon-icon--:before {
    content: "\e754";
}

.icon-pengyou:before {
    content: "\e69e";
}

.icon-taopiaopiao1:before {
    content: "\e501";
}

.icon-jiahao:before {
    content: "\e6c3";
}

.icon-waimai:before {
    content: "\e621";
}

.icon-koubei:before {
    content: "\e61d";
}

.icon-zhifubao:before {
    content: "\e60a";
}

.icon-weimingmingwenjianjia_tongxunlu:before {
    content: "\e63a";
}

.icon-caidan:before {
    content: "\e660";
}

.icon-chaoshi:before {
    content: "\e617";
}

.icon-shuqian:before {
    content: "\e61b";
}

.icon-feiji:before {
    content: "\e6bb";
}

.icon-search:before {
    content: "\e605";
}

.icon-qian1:before {
    content: "\e502";
}

.icon-hongbao:before {
    content: "\e60d";
}

.icon-fukuanma:before {
    content: "\e614";
}

</style>
    <!-- 引入自己样式 -->
    <style>
        body {
            background-color: rgb(245, 245, 249);
        }

        .header {
            /* header 头部 */
            width: 100%;
            height: 8.533333rem;
            background-color: rgb(63, 69, 79);
            overflow: hidden;
        }

        p {
            font-size: 0.8rem;
        }

        .h_top {
            display: flex;
            justify-content: space-between;
            padding: 0 1.173333rem;
            font-size: 0.746666rem;
            color: #fff;
            margin-top: 0.666666rem;
        }

        .h_top i {
            color: #fff;
            font-size: 0.746666rem;
        }

        .h_bottom {
            margin-top: 1.333333rem;
            display: flex;
            justify-content: space-between;
            padding: 0 2rem;
            text-align: center;
            color: #fff;
        }

        .h_bottom li {
            position: relative;
        }

        .h_bottom i {
            display: block;
            font-size: 1.733333rem;
            color: #fff;
            margin-bottom: 0.586666rem;
        }

        .h_bottom li:last-of-type i {
            display: block;
            width: 1.986666rem;
            height: 1.986666rem;
            border-radius: 50%;
            background-color: #fff;
        }

        .m_top {
            /* main 主体 */
            display: flex;
            flex-direction: column;
        }

        .m_top li {
            display: flex;
            background-color: #fff;
        }

        .m_top a {
            width: 25%;
            height: 4.853333rem;
            text-align: center;
            border-left: 0.026666rem solid #CCCCCC;
            border-top: 0.026666rem solid #CCCCCC;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .m_top i {
            font-size: 1.333333rem;
            margin-bottom: 0.48rem;
        }

        /* 改颜色部分 */
        .m_top li:first-of-type a:first.........完整代码请登录后点击上方下载按钮下载查看