Flex布局-实现网上商城-个人中心页面

Flex布局-网上商城-个人中心页面

运用flex知识，可以快速实现弹性功能的页面。无论是排列方式还是横竖居中，flex都能轻松搞定，并具备弹性功能，可随屏幕变化而伸缩。下面这个网上商城-个人中心页面，综合运用了flex知识来实现，效果如图：

具体代码如下：

.main {
    display: flex;
    width: 1240px;
    margin: 0 auto;
}

.left {
    width: 232px;
    margin-right: 20px;
}

.right {
    flex: 1;
}

.user {
    /* 使用flex布局，将主轴更改为垂直方向，并居中，侧轴也居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 230px;
    background-color: #fff;
    border-bottom: 2px solid rgb(233, 233, 233);
}

.user>span {
    font-size: 20px;
}

.user>img {
    width: 85px;
    height: 85px;
}

.user>div {
    border-radius: 13px;
    /* 设置渐变色 */
    background-image: linear-gradient( 264deg, #e05e2f 0%, #ea745e 95%);
    width: 130px;
    text-align: center;
    padding: 4px 0px;
}

.user>div>span {
    font-size: 15px;
    color: #fff;
}

.user>div>img {
    margin-right: 2px;
    width: 18px;
    margin-top: -5px;
}

.account {
    display: flex;
    /* height: 486px; */
    flex-direction: column;
    align-items: center;
    border-bottom: 2px solid rgb(233, 233, 233);
    background-color: #fff;
    padding-bottom: 15px;
}

.account:nth-child(5) {
    border-bottom: 0;
}

.account_title {
    font-size: 19px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 23px;
}

.account>ul>li {
    margin-bottom: 23px;
    position: relative;
}

.account>ul>li:hover {
    color: #5eb69c;
    list-style: disc;
}

.right_top {
    display: flex;
    background-color: #fff;
    justify-content: space-around;
    padding: 30px 0px;
}

.vip,
.coupons {
    flex: 1;
}

.vip {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.vip_content {
    text-align: center;
}

.vip_content {
    cursor: pointer;
}

.vip_content>p {
    margin-top: 10px;
    font-size: 16px;
}

.vip_coupons>span {
    font-size: 24px;
    color: red;
}

.vip_coupons {
    padding-bottom: 1px;
}

.vip_content>img {
    width: 25px;
    height: 25px;
    margin-top: 12px;
}

.vip_line {
    border-left: 2px solid rgb(172, 172, 172, 0.3);
}

.right_middle {
    margin-top: 20px;
    background-color: #fff;
}

.right_middle_top {
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.right_middle_top>span {
    font-size: 20px;
    font-weight: 500;
}

.right_middle_top>a {
    font-size: 16px;
    color: rgb(133, 133, 133);
    padding-top: 3px;
}

.right_middle_content {
    display: flex;
    padding: 0px 15px;
}

.my_order_left {
    flex: 2;
    border: 1px solid rgb(224, 224, 224, 0.7);
}

.my_order_center_one,
.my_order_center_two,
.my_order_right {
    flex: 1;
}

.my_order_left>img {
    width: 107px;
    height: 107px;
}

.my_order_right,
.my_order_center_one,
.my_order_center_two {
    /* 使用flex布局，将主轴更改为垂直方向，并居中，侧轴也居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(224, 224, 224, 0.7);
    border-left: 0;
    padding: 15px 0;
}

.my_order_left {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-right: 0;
}

.my_order_left_text>p {
    /* 文字内容最多只能显示一行，超出则变为省略号 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    padding-left: 15px;
}

.my_order_left_text>span {
    font-size: 13px;
    color: rgb(177, 177, 177);
    padding-left: 15px;
}

.my_order_center_one>span:nth-child(1) {
    color: rgb(255, 112, 112);
}

.my_order_center_one>span:nth-child(2):hover {
    cursor: pointer;
}

.my_order_center_two>span:nth-child(1) {
    color: rgb(177, 2, 2);
}

.my_order_right>button {
    background-color: #5eb69c;
    border-radius: 5px;
    color: #fff;
    margin-bottom: 17px;
    padding: 6px 20px;
    border: 0;
}

.my_order_right>span:hover {
    /* 当鼠标经过时，光标变为手指模样 */
    cursor: pointer;
}

.right_middle_content {
    margin-bottom: 15px;
}

.right_middle {
    overflow: hidden;
}

.collection_all {
    display: flex;
    padding: 0 12px;
    margin-bottom: 15px;
}

.collection>img {
    width: 160px;
    height: 160px;
    margin-bottom: 7px;
}

.collection>img:hover {
    cursor: pointer;
}

.collection {
    padding: 0px 35px;
    flex: 1;
    text-align: center;
    position: relative;
}

.six {
    /* 将“六折”绝对定位到元素当中去 */
    position: absolute;
    top: 5px;
    left: 30px;
    width: 18px;
    height: 46px;
    color: rgb(22, 170, 46);
    border: 1px solid rgb(22, 170, 46);
    border-radius: 3px;
}

.collection_title>p {
    text-align: left;
}

.collection_title>p:nth-child(1):hover {
    cursor: pointer;
}

.collection_title>p:nth-child(2) {
    color: rgb(196, 0, 0);
}

.collection_title>p:nth-child(2)>span {
    font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <!-- 选link:favicon这个！！！ -->
    <link rel="shortcut icon" href="./bitbug_favicon.ico" type="image/x-icon" />
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。" />
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" />
    <!-- 引入css文件 -->
    <!-- 1.引入base.css -->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 2.引入common.css -->
    <link rel="stylesheet" href="./css/common.css" />
    <!-- 3.引入user.css -->
    <link rel="stylesheet" href="./css/user.css" />
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <header>
        <!-- 快捷导航栏 shortcut 模块 start -->
        <div class="shortcut">
            <div class="w">
                <ul>
                    <li><a href="#">请先登录</a></li>
                    <li><a href="#">免费注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">在线客服</a></li>
                    <li><a href="#">手机版</a></li>
                </ul>
            </div>
        </div>
        <!-- 快捷导航栏 shortcut 模块 end -->

        <!-- 小兔鲜儿头部 header 模块 start -->
        <div class="header w">
            <!-- logo -->
            <h1 title="小兔鲜儿">
                <a href="#">小兔鲜儿</a>
            </h1>

            <!-- 导航 nav -->
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">美食</a></li>
                    <li><a href="#">餐厨</a></li>
                    <li><a href="#">电器</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">洗护</a></li>
                    <li><a href="#">孕婴</a></li>
                    <li><a href="#">服装</a></li>
                </ul>
            </div>

            <!-- 搜索 search  -->
            <div class="search">
                <i></i>
                <input type="text" placeholder="搜一搜" />
            </div>

            <!-- 购物车 cart -->
            <div class="cart">
                <i>99+</i>
            </div>
        </div>
        <!-- 小兔鲜儿头部 header 模块 end -->
    </header>

    <!-- 个人中心的模块 main start -->
    <div class="main">
        <!-- 首先将网页中间的main内容分为左右两个大块 -->
        <div class="left">
            <div class="user">
                <img src="./uploads/avatar_1.png" alt="">
                <span>张小花</span>
                <div>
                    <img src="./uploads/vip_gold.png" alt="">
                    <span>黄金会员</span>
                </div>
            </div>
            <div class="account">
                <div class="account_title">
                    我的账户
                </div>
                <ul>
                    <li>个人中心</li>
                    <li>消息通知</li>
                    <li>个人信息</li>
                    <li>安全设置</li>
                    <li>地址管理</li>
                    <li>我的积分</li>
                    <li>我的足迹</li>
                    <li>邀请有礼</li>
                    <li>幸运抽奖</li>
                </ul>
            </div>
            <div class="account">
                <div class="account_title">
                    交易管理
                </div>
                <ul>
                    <li>我的订单</li>
                    <li>优惠券</li>
                    <li>视品卡</li>
                    <li>评价晒单</li>
                    <li>售后服务</li>
                </ul>
            </div>
            <div class="account">
                <div class="account_title">
                    我的收藏
                </div>
                <ul>
                    <li>收藏的商品</li>
                    <li>收藏的店家</li>
                    <li>收藏的评论</li>
                </ul>
            </div>
            <div class="account">
                <div class="account_title">
                    帮助中心
                </div>
                <ul>
                    <li>帮助中心</li>
                    <li>在线客服</li>
                </ul>
            </div>
        </div>
        <!-- 网页main内容的右边部分 -->
        <div class="right">
            <div class="right_top">
                <div class="vip">
                    <div class="vip_content">
                        <img src="./images/safe.png" alt="">
                        <p>会员中心</p>
                    </div>
                    <div class="vip_content">
                        <img src="./images/vip.png" alt="">
                        <p>安全设置</p>
                    </div>
                    <div class="vip_content">
                        <img src="./images/address.png" alt="">
                        <p>地址管理</p>
                    </div>
                </div>
                <div class="vip vip_line">
                    <div class="vip_content vip_coupons">
                        <span>6</span>
                        <p>优惠券</p>
                    </div>
                    <div class="vip_content vip_coupons">
                        <span>2</span>
                        <p>礼品卡</p>
                    </div>
                    <div class="vip_content vip_coupons">
                        <span>256</span>
                        <p>积分</p>
                    </div>
                </div>
            </div>
            <!-- 网页右边部分的中间内容 -->
            <div class="right_middle">
                <div class="right_middle_top">
                    <span>我的订单</span>
                    <a href="#">查看全部 ></a>
                </div>
                <div class="right_middle_content">
                    <div class="my_order_left">
                        <img src="./uploads/clothes_goods_5.jpg" alt="">
                        <div class="my_order_left_text">
                            <p>拉夫劳伦t恤男正品圆男正品圆男正品圆男正品圆领短袖拉</p>
                            <span>颜色：白色 尺码：M 数量：1</span>
                        </div>
                    </div>
                    <div class="my_order_center_one">
                        <span>待付款</span>
                        <span>查看物流</span>
                    </div>
                    <div class="my_order_center_two">
                        <span>￥99.00</span>
                        <span>(含运费：￥10.00元)</span>
                        <span>在线支付</span>
                    </div>
                    <div class="my_order_right">
                        <button>立即付款</button>
                        <span>查看详情</span>
                        <span>取消订单</span>
                    </div>
                </div>
                <div class="right_middle_content">
                    <div class="my_order_left">
                        <img src="./uploads/clothes_goods_6.jpg" alt="">
                        <div class="my_order_left_text">
                            <p>李宁跑步鞋男鞋空气弧度圆男正品圆男正品圆领短袖拉</p>
                            <span>颜色：白色 尺码：M 数量：1</span>
                        </div>
                    </div>
                    <div class="my_order_center_one">
                        <span>待付款</span>
                        <span>查看物流</span>
                    </div>
                    <div class="my_order_center_two">
                        <span>￥99.00</span>
                        <span>(含运费：￥10.00元)</span>
                        <span>在线支付</span>
                    </div>
                    <div class="my_order_right">
                        <button>立即付款</button>
                        <span>查看详情</span>
                        <span>取消订单</span>
                    </div>
                </div>
                <div class="right_middle_content">
                    <div class="my_order_left">
                        <img src="./uploads/clothes_goods_7.jpg" alt="">
                        <div class="my_order_left_text">
                            <p>拉夫劳伦t恤男正品圆男正品圆男正品圆男正品圆领短袖拉</p>
                            <span>颜色：白色 尺码：M 数量：1</span>
                        </div>
                    </div>
                    <div class="my_order_center_one">
                        <span>待付款</span>
                        <span>查看物流</span>
                    </div>
                    <div class="my_order_center_two">
                        <span>￥99.00</span>
                        <span>(含运费：￥10.00元)</span>
                        <span>在线支付</span>
                    </div>
                    <div class="my_order_right">
                        <button>立即付款</button>
                        <span>查看详情</span>
                        <span>取消订单</span>
                    </div>
                </div>
            </div>
            <div class="right_middle">
                <div class="right_middle_top">
                    <span>收藏的商品</span>
                    <a href="#">查看全部 ></a>
                </div>
                <div class="collection_all">
                    <div class="collection">
                        <img src="./uploads/clothes_goods_1.jpg" alt="">
                        <div class="collection_title">
                            <p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
                            <p> ￥<span>55</span></p>
                        </div>
                    </div>
                    <div class="collection">
                        <div class="six">6折</div>
                        <img src="./uploads/clothes_goods_2.jpg" alt="">
                        <div class="collection_title">
                            <p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p>
                            <p> ￥<span>20.9</span></p>
                        </div>
                    </div>
                    <div class="collection">
                        <img src="./uploads/clothes_goods_3.jpg" alt="">
                        <div class="collection_title">
                            <p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p>
                            <p> ￥<span>209</span></p>
                        </div>
                    </div>
                    <div class="collection">
                        <img src="./uploads/clothes_goods_4.jpg" alt="">
                        <div class="collection_title">
                            <p>ONLY夏季新款高腰宽松七分阔腿裤休闲裤</p>
                            <p> ￥<span>274.5</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_middle">
                <div class="right_middle_top">
                    <span>我的足迹</span>
                    <a href="#">查看全部 ></a>
                </div>
                <div class="collection_all">
                    <div class="collection">
                        <img src="./uploads/clothes_goods_5.jpg" alt="">
                        <div class="collection_title">
                            <p>拉夫劳伦t恤男正品圆男正品男正品</p>
                            <p> ￥<span>99</span></p>
                        </div>
                    </div>
                    <div class="collection">
                        <div class="six">6折</div>
                        <img src="./uploads/clothes_goods_6.jpg" alt="">
                        <div class="collection_title">
                            <p>李宁跑步鞋男鞋空气弧度帆布鞋韩版低帮增高学生</p>
                            <p> ￥<span>171.9</span></p>
                        </div>
                    </div>
                    <div class="collection">
                        <img src="./uploads/clothes_goods_3.jpg" alt="">
                        <div class="collection_title">
                            <p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p>
                            <p> ￥<span>209</span></p>
                        </div>
                    </div>
                    <div class="collection">
                        <img src="./uploads/clothes_goods_4.jpg" alt="">
                        <div class="collection_title">
                            <p>ONLY夏季新款高腰宽松七分阔腿裤休闲裤</p>
                            <p> ￥<span>274.5</span></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- 个人中心的模块 main end -->

    <footer>
        <!-- 联系模块 contact start -->
        <div class="contact w">
            <!-- 客户服务 -->
            <dl class="customer">
                <dt>客户服务</dt>
                <dd class="online">在线客服</dd>
                <dd class="feedback">问题反馈</dd>
            </dl>

            <!-- 关注我们 -->
            <dl class="customer focus">
                <dt>关注我们</dt>
                <dd class="online weixin">公众号</dd>
                <dd class="feedback weibo">微博</dd>
            </dl>

            <!-- 下载APP -->
            <dl class="download">
                <dt>下载APP</dt>
                <dd class="code">
                    <img src="./uploads/qrcode.png" alt="" />
                </dd>
                <dd class="now">
                    <p class="saomiao">扫描二维码</p>
                    <p>立马下载APP</p>
                    <a href="#">下载页面</a>
                </dd>
            </dl>

            <!-- 服务热线 -->
            <dl class="hotline">
                <dt>服务热线</dt>
                <dd>
                    <p class="tel">400-0000-000</p>
                    <p>周一至周日 8:00-18:00</p>
                </dd>
            </dl>
        </div>
        <!-- 联系模块 contact end -->

        <!-- 底部模块 footer start -->
        <div class="footer">
            <!-- 上半部分 服务部分 serive -->
            <div class="serive">
                <div class="w">
                    <a href="#">价格亲民</a>
                    <a href="#">物流快捷</a>
                    <a href="#">品质新鲜</a>
                </div>
            </div>

            <!-- 下半部分 版权区域 copyright -->
            <div class="copyright">
                <p>
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">帮助中心</a>
                    <span>|</span>
                    <a href="#">售后服务</a>
                    <span>|</span>
                    <a href="#">配送与验收</a>
                    <span>|</span>
                    <a href="#">商务合作</a>
                    <span>|</span>
                    <a href="#">搜索推荐</a>
                    <span>|</span>
                    <a href="#">友情链接</a>
                </p>
                <div class="xiao">CopyRight @ 小兔鲜儿</div>
            </div>
        </div>
        <!-- 底部模块 footer end -->
    </footer>

</body>

</html>