rem手机端(个人中心)

一、先引入 链接 样式

        

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

    </script>

---

二、HTML整体部分

 <!-- 头部 -->
    <div class="header">
        <img src="img/header11.png" alt="">
        <!-- 可提金额 -->
        <div class="header-bottom">
            <p>可提金额(元)</p>
            <p>0.39</p>
            <span>提现</span>
        </div>
    </div>
    <!-- 购物 -->
    <div class="section">
        <img src="img/banner 3.png" alt="">
        <p>购物省钱攻略</p>
    </div>
    <!-- 收益中心 -->
    <div class="center">
        <!-- 收益中心 -->
        <div class="center-top">
            <p>收益中心</p>
        </div>
        <!--分类1 -->
        <div class="center-section">
            <li>
                <img src="img/my_floor_1_1.png" alt="">
                <p>我的收益</p>
            </li>
            <li>
                <img src="img/my_floor_1_2.png" alt="">
                <p>我的支付宝</p>
            </li>
            <li>
                <img src="img/my_floor_1_3.png" alt="">
                <p>年化利率</p>
            </li>
            <li>
                <img src="img/my_floor_1_4.png" alt="">
                <p>我的收藏</p>
            </li>
        </div>
    </div>
    <!-- 我的推广 -->
    <div class="center">
        <div class="center-top">
            <p>我的推广</p>
        </div>
        <!--分类2 -->
        <div class="center-section">
            <li>
                <img src="img/my_floor_2_1.png" alt="">
                <p>我的好友</p>
            </li>
            <li>
                <img src="img/my_floor_2_2.png" alt="">
                <p>分享海报</p>
            </li>
            <li>
                <img src="img/my_floor_2_3.png" alt="">
                <p>宣传素材</p>
            </li>
            <li>
                <img src="img/my_floor_2_4.png" alt="">
                <p>分享链接</p>
            </li>
        </div>
    </div>
    <!-- 合作福利 -->
    <div class="center">
        <div class="center-top">
            <p>合作福利</p>
        </div>
        <!--分类1 -->
        <div class="center-section">
            <li>
                <img src="img/my_floor_3_1.png" alt="">
                <p>好运必测</p>
            </li>
            <li>
                <img src="img/my_floor_3_2.png" alt="">
                <p>幸运抽奖</p>
            </li>
            <li>
                <img src="img/my_floor_3_3.png" alt="">
                <p>淘宝</p>
            </li>
            <li>
                <img src="img/my_floor_3_4.png" alt="">
                <p>猜多多</p>
            </li>
        </div>
    </div>
    <!-- 服务中心 -->
    <div class="center">
        <div class="center-top">
            <p>服务中心</p>
        </div>
        <!--分类1 -->
        <div class="center-section">
            <li>
                <img src="img/my_floor_4_1.png" alt="">
                <p>常见问题</p>
            </li>
            <li>
                <img src="img/my_floor_4_2.png" alt="">
                <p>服务中心</p>
            </li>
            <li>
                <img src="img/my_floor_4_3.png" alt="">
                <p>一件反馈</p>
            </li>
            <li>
                <img src="img/my_floor_4_4.png" alt="">
                <p>关于淘多</p>
            </li>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <li>
            <img src="img/tab_1_pre.png" alt="">
            <p>首页</p>
        </li>
        <li>
            <img src="img/tab_2_pre.png" alt="">
            <p>订单</p>
        </li>
        <li>
            <img src="img/tab_3_pre.png" alt="">
            <p>赚钱</p>
        </li>
        <li>
            <img src="img/tab_4_pre.png" alt="">
            <p>购物车</p>
        </li>
        <li>
            <img src="img/tab_5.png" alt="">
            <p>我的</p>
        </li>
    </div>

---

三、css整体样式

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

代表页面的整体背景颜色是#f5f5rf5 不是全白色 也可以给body设置
html {
    background-color: #f5f5f5;
}

.header {
    width: 25rem;
    height: 13.3333rem;
    /* background-color: khaki; */
    background-image: url(../img/header.png);
    background-repeat: no-repeat;
    background-size: 25rem 13.3333rem;
}

.header img {
    width: 25rem;
    height: 3.4rem;
}

/* 可提金额 */
.header-bottom {
    width: 22.6667rem;
    height: 5.3333rem;
    background-image: url(../img/4.png);
    /* background-color: khaki; */
    background-size: 22.6667rem 5.3333rem;
    margin-top: 6.6667rem;
    position: absolute;
    margin-left: 1.2rem;
    box-shadow: 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
    border-radius: .8333rem;
}

.header-bottom p:nth-child(1) {
    color: #666;
    font-size: .9333rem;
    margin-left: 1.1rem;
    margin-top: 1.1667rem;
}

.header-bottom p:nth-child(2) {
    color: #ee2c3b;
    font-size: 1.6667rem;
    margin-left: 1.1rem;
    margin-top: .6667rem;
}

.header-bottom span {
    width: 3.7rem;
    height: 1.5rem;
    border: 1px solid red;
    display: inline-block;
    text-align: center;
    line-height: 1.5rem;
    border-radius: .8333rem;
    color: #ee2c3b;
    float: right;
    margin-top: -2rem;
    margin-right: .6667rem;
}

/* 购物 */
.section {
    width: 25rem;
    height: 8.3333rem;
    background-color: #fff;
    z-index: 10;
}

.section img {
    width: 25rem;
    height: 5.7rem;
    margin-top: 2.5rem;
}

.section p {
    color: #fff;
    font-size: 1.3333rem;
    font-weight: 900;
    letter-spacing: .0667rem;
    margin-top: -4.5rem;
    margin-left: 8rem;
}

/* 收益中心 */
.center {
    width: 25rem;
    height: 7.7667rem;
    background-color: #fff;
    margin-top: .7667rem;
}

/* 收益中心 */
.center-top {
    width: 22.6667rem;
    height: 1.8667rem;
    /* background-color: lightblue; */
    margin: auto;
}

.center-top p {
    font-size: 1rem;
    line-height: 2.3333rem;
    margin-left: 1.2667rem;
}

/* 分类 */
.center-section {
    width: 22.6667rem;
    height: 5.9rem;
    /* background-color: lightcoral; */
    margin: auto;
}

.center-section li {
    width: 5rem;
    height: 5.9rem;
    /* background-color: lightsalmon; */
    float: left;
}

.center-section li img {
    width: 2rem;
    height: 2rem;
    margin-left: 1.5rem;
    margin-top: 1.4333rem;
}

.center-section li p {
    color: #666;
    font-size: .8rem;
    margin-left: .3333rem;
    text-align: center;
    margin-top: .3333rem;
}

.center-section li:nth-child(2) {
    margin-left: 0.9rem;
}

.center-section li:nth-child(3) {
    margin-left: 1rem;
}

.center-section li:last-child {
    float: right;
}

/* 底部 */
.footer {
    width: 25rem;
    height: 3.3333rem;
    background-color: #fff;
    margin-top: .7rem;
    border-top: 1px solid #ccc;
}

.footer li {
    width: 3.2333rem;
    height: 3.3333rem;
    float: left;
}

.footer li img {
    width: 1.1667rem;
    height: 1.3rem;
    margin-left: 1rem;
    margin-top: .5667rem;
}

.footer li p {
    text-align: center;
    color: #666;
    font-size: .6667rem;
    letter-spacing: .0667rem;
}

.footer li:nth-child(2) {
    margin-left: 2.5rem;
}

.footer li:nth-child(3) {
    margin-left: 2.5rem;
}

.footer li:nth-child(4) {
    margin-left: 2rem;
}

.footer li:last-child {
    float: right;
}

---

结尾：整体效果图：