rem手机端（极速借款）

一、引入：

        

<link rel="stylesheet" href="css/1.css">
    <script>
        document.documentElement.style.fontSize = innerWidth / 25 + 'px'
    </script>

---

HTML:

        

  <!-- 头部 -->
    <div class="header">
        <!-- 信息图标 -->
        <div class="msg">
            <img src="img/shiliang.png" alt="">
        </div>
        <!-- 白色盒子 -->
        <div class="header-content">
            <li><img src="img/jk.png" alt=""></li>
            <li><span>0门槛</span> <span>5分钟极速审核</span></li>
            <li><span>凭身份证即可借款</span><span>最高额度</span><span>10万元</span></li>
        </div>
    </div>
    <!-- 免息借款 -->
    <div class="content">
        <li>
            <img src="img/lb_03.gif" alt="">
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </div>
    <!-- 福利专享 -->
    <div class="wefale">
        <!-- 居中盒子 -->
        <div class="wefale-box">
            <!-- 上层 -->
            <div class="wefale-box-top">
                <p>福利专享</p>
            </div>
            <!-- 下层 -->
            <div class="wefale-box-bottom">
                <!-- 邀请领现金 -->
                <div class="w-bottom-left">
                    <img src="img/t-1.png" alt="">
                    <p>邀请领现金</p>
                    <span>最高可得1000元</span>
                </div>
                <!-- 赚金币零利息 -->
                <div class="w-bottom-right">
                    <img src="img/t-2.png" alt="">
                    <p>赚金币低利息</p>
                    <span>免息借款等你来拿</span>
                </div>
                <!-- 优惠券 -->
                <div class="w-bottom-left2">
                    <img src="img/t-3.png" alt="">
                    <p>优惠券</p>
                    <span>各类优惠应有尽有</span>
                </div>
                <!-- 幸运抽奖 -->
                <div class="w-bottom-right2">
                    <img src="img/t-4.png" alt="">
                    <p>幸运抽奖</p>
                    <span>可获得免息借款</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <li>
            <p><img src="img/ft-1.png" alt=""></p>
            <p>首页</p>
        </li>
        <li>
            <p><img src="img/ft-2.png" alt=""></p>
            <p>首页</p>
        </li>
        <li>
            <p><img src="img/ft-3.png" alt=""></p>
            <p>首页</p>
        </li>
        <li>
            <p><img src="img/ft-4.png" alt=""></p>
            <p>首页</p>
        </li>
    </div>

---

css:

        

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
html{
    background-color: #f4f4f4;
}
/* 头部 */
.header{
    width: 25rem;
    height: 15.3333rem;
    background-image: url(../img/bunner-BJ.png);
    background-repeat: no-repeat;
    background-size: 25rem 15.333333rem;
}
/* 信息图标 */
.msg{
    width:25rem;
    height:2.2667rem;
    padding-right: 1.7333333rem;
    box-sizing: border-box;
    text-align: right;
    padding-top: 0.666667rem;
}
/* 信息图标 */
.msg img{
    width: 1.6rem;
    height: 1.6rem;
}
/* 内容区 白色盒子 */
.header-content{
    width: 19.766667rem;
    height: 8.4rem;
    margin: auto;
    /* 给予放款 */
    background-image: url(../img/jyfk1.png);
    background-repeat: no-repeat;
    background-color: #fff;
    margin-top: .6667rem;
    border-radius: .8333rem;
    background-size:6.766667rem 5.6rem;
    background-position:12.6667rem .3333rem;
}
.header-content li:nth-child(1),.header-content li:nth-child(1) img{
    width: 6.5333rem;
    height:auto;
    /* 距离上 左 */
    margin: 1.1rem 0 0 0.8rem;
}
.header-content li:nth-child(1) img{
    margin: 1.1rem 0 0 0.7rem;
}
.header-content li:nth-child(2){
    font-size: 1rem;
    padding-top: 0.833333rem;
    margin-left:1.3rem;
    font-style: italic;
    letter-spacing:0.1667rem;
}
.header-content li:nth-child(2) span:nth-child(2){
    padding-left:0.1rem;
}   
.header-content li:nth-child(3){
    font-size: 0.666667rem;
    margin-top:0.5rem;
    margin-left:1.3rem;
    margin-top: 1rem;
}
/* 第二个以后的span */
.header-content li:nth-child(3) span+span{
    padding-left: .4rem;
}
.header-content li:nth-child(3) span:nth-child(3){
    color: #46a8ff;
}
/* 免息借款 */
.content{
    width:23rem;
    height: 7.666667rem;
    background-color: #fff;
    margin: auto;
    margin-top: -1.5rem;
    border-radius:1.2rem;
    /* 阴影偏移的位置x,y  阴影大小  阴影颜色*/
    box-shadow:-0.166667rem -0.166667rem 0.166667rem rgba(0, 0, 0, 0.2);
} 
.content li:nth-child(1){
    width: 19.8rem;
    height: 4.7333rem;
    margin: auto;
    padding-top:1rem;
}
.content li:nth-child(1) img{
    width: 19.8rem;
    height: 4.7333rem;
}
.content li:nth-child(2){
    width: 3.5rem;
    height: .3333rem;
    display: flex;
    justify-content: space-between;
    margin: auto;
    margin-top: .4667rem;
}
.content li:nth-child(2) span{
    display: inline-block;
    width: .3333rem;
    height: .3333rem;
    border:2px solid #9c9c9c;
    border-radius:50%;
}
.content li:nth-child(2) span:nth-child(1){
    width: .8rem;
    height: .3333rem;
    background-color: #6cb3ff;
    border-radius:0.1667rem;
    border: none;
    margin-top:0.18rem;
}
/* 福利专享 */
.wefale{
    width: 25rem;
    height:14.8rem;
    background-color:#fff;
    margin-top: .6667rem;
    border-radius: .8333rem;
}
/* 居中盒子 */
.wefale-box{
    width: 23rem;
    height: 14.8rem;
    /* background-color: pink; */
    margin: auto;
}
/* 上层 */
.wefale-box-top{
    width: 23rem;
    height: 3.2rem;
    /* background-color: khaki; */
    background-image: url(../img/zk2.png);
    background-repeat: no-repeat;
    background-size: 1.3333rem 1.3333rem;
    background-position:0 1rem;
}
.wefale-box-top p{
    font-size:1rem;
    margin-left: 1.8rem;
    line-height: 3.2rem;
}
/* 下层 */
.wefale-box-bottom{
    width: 23rem;
    height: 10.5rem;
    /* background-color: lavenderblush; */
}
/* 邀请领现金 */
.w-bottom-left{
    width: 11.2333rem;
    height: 4.8333rem;
    /* background-color: mediumorchid; */
    float: left;
    border-radius: .8333rem;
    background-image: url(../img/t1.png);
    background-repeat: no-repeat;
    background-size: 11.1rem 4.7667rem;
}
.w-bottom-left img{
    width: 2.5rem;
    height:2.8667rem;
    margin-left:0.8rem;
    margin-top: .9333rem;
}
.w-bottom-left p{
    font-size: .9333rem;
    letter-spacing:0.1667rem;
    color: #fff;
    margin-left:4rem;
    margin-top:-3rem;
}
.w-bottom-left span{
    color: #f4f4f4;
    font-size: .6667rem;
    margin-left:4rem;
    letter-spacing: .0667rem;
}
/* 赚金币领现金 */
.w-bottom-right{
    width: 11.2333rem;
    height: 4.8333rem;
    /* background-color:lightblue; */
    float: right;
    border-radius: .8333rem;
    background-image: url(../img/t2.png);
    background-repeat: no-repeat;
    background-size: 11.1rem 4.7667rem;
}
.w-bottom-right img{
    width: 2.5rem;
    height:2.8667rem;
    margin-left:0.8rem;
    margin-top: .9333rem;
}
.w-bottom-right p{
    font-size: .9333rem;
    letter-spacing:0.1667rem;
    color: #fff;
    margin-left:4rem;
    margin-top:-3rem;
}
.w-bottom-right span{
    color: #f4f4f4;
    font-size: .6667rem;
    margin-left:4rem;
    letter-spacing: .0667rem;
}
/* 优惠券 */
.w-bottom-left2{
    width: 11.2333rem;
    height: 4.8333rem;
    /* background-color:darkcyan; */
    float:left;
    margin-top:0.7667rem;
    border-radius: .8333rem;
    background-image: url(../img/t3.png);
    background-repeat: no-repeat;
    background-size: 11.1rem 4.7667rem;
}
.w-bottom-left2 img{
    width: 2.5rem;
    height:2.8667rem;
    margin-left:0.8rem;
    margin-top: .9333rem;
}
.w-bottom-left2 p{
    font-size: .9333rem;
    letter-spacing:0.1667rem;
    color: #fff;
    margin-left:4rem;
    margin-top:-3rem;
}
.w-bottom-left2 span{
    color: #f4f4f4;
    font-size: .6667rem;
    margin-left:4rem;
    letter-spacing: .0667rem;
}
/* 幸运抽奖 */
.w-bottom-right2{
    width: 11.2333rem;
    height: 4.8333rem;
    /* background-color:orange; */
    float:right;
    margin-top:0.7667rem;
    border-radius: .8333rem;
    background-image: url(../img/t4.png);
    background-repeat: no-repeat;
    background-size: 11.1rem 4.7667rem;
}
.w-bottom-right2 img{
    width: 2.5rem;
    height:2.8667rem;
    margin-left:0.8rem;
    margin-top: .9333rem;
}
.w-bottom-right2 p{
    font-size: .9333rem;
    letter-spacing:0.1667rem;
    color: #fff;
    margin-left:4rem;
    margin-top:-3rem;
}
.w-bottom-right2 span{
    color: #f4f4f4;
    font-size: .6667rem;
    margin-left:4rem;
    letter-spacing: .0667rem;
}
/* 底部 */
.footer{
    width:25rem;
    height: 3.92rem;
    position: absolute;
    bottom: 0;
    background-color: white;
    display: flex;
    justify-content: space-evenly;
    border-top: .04rem solid #e7e7e7;
}
.footer li{
    width: 3.6rem;
    height: 3.92rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
/* li里面的第一个li 里面的第一个p  第一个p里面的第一个li的img图片*/
.footer li:nth-child(1) p:nth-child(1),.footer li:nth-child(1) p:nth-child(1) img{
    width: 2.24rem;
    height: 2.2rem;
}
/* li 里面的第二个p的字体大小 */
.footer li p:nth-child(2){
    font-size: .8rem;
}
/* 第一个li第二个p的字体颜色 */
.footer li:nth-child(1) p:nth-child(2){
    color: #6cb5ff;
}
/* 第二个li里面的第一个p 第二个li里面的第一个图片 */
.footer li:nth-child(2) p:nth-child(1),.footer li:nth-child(2) p:nth-child(1) img{
    width: 1.92rem;
    height: 2rem;
}
/* 第三个li里面的第一个p 第三个li里面的第一个图片 */
.footer li:nth-child(3) p:nth-child(1),.footer li:nth-child(3) p:nth-child(1) img{
    width: 1.92rem;
    height: 1.92rem;
}
/* 第四个li里面的第一个p 第三个li里面的第四个图片 */
.footer li:nth-child(4) p:nth-child(1),.footer li:nth-child(4) p:nth-child(1) img{
    width: 1.96rem;
    height: 1.96rem;
}

---

完成效果图：