Day04修改主轴方向，小兔鲜pc端；溢出省略号

于 2023-07-23 13:19:24 发布
阅读量25 收藏
点赞数
分类专栏： 移动web 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52284271/article/details/131857430
版权

修改主轴方向
在这里插入图片描述
在这里插入图片描述
flex-wrap:nowrap是默认值 不换行

调整弹性盒子换行方式
在这里插入图片描述

小兔鲜-pc 订单

<!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 rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/center.css">
</head>

<body>
    <!-- 项部导航 -->
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href="./login.html">请先登录</a>
                </li>
                <li>
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="mobile sprites"></i> 手机版
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header clearfix">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">生鲜</a>
                    </li>
                    <li>
                        <a href="javascript:;">美食</a>
                    </li>
                    <li>
                        <a href="javascript:;">餐厨</a>
                    </li>
                    <li>
                        <a href="javascript:;">电器</a>
                    </li>
                    <li>
                        <a href="javascript:;">居家</a>
                    </li>
                    <li>
                        <a href="javascript:;">洗护</a>
                    </li>
                    <li>
                        <a href="javascript:;">孕婴</a>
                    </li>
                    <li>
                        <a href="javascript:;">服装</a>
                    </li>
                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a href="javascript:;" class="xtx_search_cart sprites">
                    <i>2</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜">
                </div>
            </div>
        </div>
    </div>

    <!-- 内容：待完成 -->
    <div class="xtx-body">
        <div class="wrapper">
            <!-- 侧边栏 -->

            <!-- 用户 -->
            <div class="aside">
                <div class="user">
                    <img src="./uploads/avatar_1.png" alt="">
                    <h5>张小花</h5>
                    <p><img src="./images/vip_gold.png" alt="" class="pic"><i>黄金会员</i></p>
                </div>
            <!-- 用户 -->

            <!-- 用户信息 -->
                <div class="msg">
                    <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>
                        <li><a href="#">邀请有礼</a></li>
                        <li><a href="#">幸运抽奖</a></li>
                    </ul>
                </div>
                <div class="msg">
                    <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>
                    </ul>
                </div>
                <div class="msg">
                    <ul>
                        <li><a href="#">我的收藏</a></li>
                        <li><a href="#">收藏的商品</a></li>                  
                        <li><a href="#">收藏的商品</a></li>                  
                        <li><a href="#">收藏的商品</a></li>                  
                    </ul>
                </div>
                <div class="msg">
                    <ul>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">帮助中心</a></li>                  
                        <li><a href="#">在线客服</a></li>                  
                    </ul>
                </div>



            </div>
            <!-- 用户信息 -->


            <!-- 侧边栏结束 -->


            <!-- 主题内容 -->

            <div class="main">
                <!-- 用户账户预览 -->
                <div class="overview">
                    <div>
                        <a href="#">
                            <img src="./images/vip.png" alt="">
                            <p>会员中心</p>
                        </a>
                        <a href="#">
                            <img src="./images/safe.png" alt="">
                            <p>安全设置</p>
                        </a>
                        <a href="#">
                            <img src="./images/address.png" alt="">
                            <p>地址管理</p>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                    </div>
                </div>
                <!-- 用户账户预览 -->

                <!-- 订单 -->
                <div class="pannel orders">
                    <div class="pannel-title">
                        <h4>我的订单</h4>
                        <a href="#">查看全部></a>
                    </div>
                    <div class="content">
                        <ul>
                            <li>
                                <div class="goods">
                                    <div class="pic">
                                        <a href="#"><img src="./uploads/order_goods_1.jpg" alt=""></a>
                                    </div>
                                    <div class="txt">
                                        <h5>拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</h5>
                                        <p>颜色：<i>白色</i>  尺码：<i>M </i> 数量：<i>1</i></p>
                                    </div>
                                </div>
                                <div class="status">
                                    <a href="#">待付款</a>
                                </div>
                                <div class="pay common">
                                    <p>￥99.00</p>
                                    <p>（含运费：¥10.00元）</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="action common">
                                    <a href="#">立即付款</a>
                                    <a href="#">查看详情</a>
                                    <a href="#">取消订单</a>
                                </div>
                            </li>
                            <li>
                                <div class="goods">
                                    <div class="pic">
                                        <a href="#"><img src="./uploads/order_goods_2.jpg" alt=""></a>
                                    </div>
                                    <div class="txt">
                                        <h5>李宁跑步鞋男鞋空气弧李宁跑步鞋男鞋空气弧</h5>
                                        <p>颜色：<i>灰色</i>  尺码：<i>42 </i> 数量：<i>1</i></p>
                                    </div>
                                </div>
                                <div class="status">
                                    <a href="#">待收货</a>
                                    <a>查看物流</a>
                                </div>
                                <div class="pay common">
                                    <p>￥199.00</p>
                                    <p>（含运费：¥10.00元）</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="action common">
                                    <a href="#">确认收货</a>
                                    <a href="#">查看详情</a>
                                    <a href="#">取消订单</a>
                                </div>

                            </li>
                        </ul>
                    </div>
                </div>


                <!-- 订单 -->

                <!-- 收藏的商品 -->

                <div class="pannel orders">
                    <div class="pannel goods2">
                        <div class="pannel-title">
                            <h4>收藏的商品</h4>
                            <a href="#">查看全部></a>    
                        </div>
                        <div class="scgoods">
                            <ul>
                                <li>
                                    <div class="pic">
                                        <div>
                                            <a href="#"><img src="./uploads/clothes_goods_1.jpg" alt=""></a>
                                            <div class="txt">
                                                <h5>人本秋季厚底帆布鞋<br>韩版低帮增高学生</h5>
                                                <p>￥<i>55</i></p>
                                            </div>
        
                                        </div>
                                        <div>
                                            <a href="#" class="dis">
                                                <img src="./uploads/clothes_goods_2.jpg" alt="">
                                                <span class="disc">6折</span>
                                            </a>
                                            <div class="txt">
                                                <h5>人迪士尼真皮针扣表带宽度<br>14-16mm规格双色压纹</h5>
                                                <p>￥<i>20.9</i></p>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#"><img src="./uploads/clothes_goods_3.jpg" alt=""></a>
                                            <div class="txt">
                                                <h5>三都港 冷冻无公害黄花鱼<br>700g 2条 袋装</h5>
                                                <p>￥<i>209</i></p>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#"><img src="./uploads/clothes_goods_4.jpg" alt=""></a>
                                            <div class="txt">
                                                <h5>ONLY夏季新款高腰宽松<br>七分阔腿裙裤休闲裤</h5>
                                                <p>￥<i>274.5</i></p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>

                </div>
                <!-- 收藏的商品结束 -->

            <!-- 我的足迹 -->
                 
            <div class="pannel orders">
                <div class="pannel goods2">
                    <div class="pannel-title">
                        <h4>我的足迹</h4>
                        <a href="#">查看全部></a>
                     </div>
                     <div class="scgoods">
                        <ul>
                            <li>
                                <div class="pic">
                                    <div>
                                        <a href="#"><img src="./uploads/clothes_goods_5.jpg" alt=""></a>
                                        <div class="txt">
                                            <h5>拉夫劳伦t恤男正品<br>圆领短袖</h5>
                                            <p>￥<i>99</i></p>
                                        </div>
    
                                    </div>
                                    <div>
                                        <a href="#" class="dis">
                                            <img src="./uploads/clothes_goods_6.jpg" alt="">
                                            <span class="disc">6折</span>
                                        </a>
                                        <div class="txt">
                                            <h5>李宁跑步鞋男鞋空气弧<br>2018春季款                                          </h5>
                                            <p>￥<i>171.9</i></p>
                                        </div>
                                    </div>
                                    <div>
                                        <a href="#"><img src="./uploads/clothes_goods_3.jpg" alt=""></a>
                                        <div class="txt">
                                            <h5>三都港 冷冻无公害黄花鱼<br>700g 2条 袋装</h5>
                                            <p>￥<i>209</i></p>
                                        </div>
                                    </div>
                                    <div>
                                        <a href="#"><img src="./uploads/clothes_goods_4.jpg" alt=""></a>
                                        <div class="txt">
                                            <h5>ONLY夏季新款高腰宽松<br>七分阔腿裙裤休闲裤</h5>
                                            <p>￥<i>274.5</i></p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
             <!-- 我的足迹结束 -->
            <!-- 主题内容 -->
        </div>
    </div>



    <!-- 内容 -->


    <!-- 公共底部 -->
    <div class="xtx_footer">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">物流快捷</a>
                    <a href="javascript:;" class="quality">品质新鲜</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

样式表

.xtx-body {
    padding: 30px 0 85px;
    background-color: #f6f6f6;
}
.xtx-body .wrapper {
    display: flex;
}
.xtx-body .aside {
    margin-right: 18px;
    width: 227px;
    min-height: 500px;
    background-color: #ffffff;
}
.xtx-body .main {
    flex: 1;
    /* background-color: skyblue; */
}
/* 主题内容 */



/* 侧边栏 */
/* 用户 */
.xtx-body .aside .user{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 230px;
    border-bottom: 1px solid #f4f4f4;
}
.xtx-body .aside .user img {
    width: 85px;
}
.aside .user h5 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
    color: #333333;
}
.aside .user p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 93px;
    height: 26px;
    border-radius: 13px;
    background-color: #e05e2f;
}
.aside .user p .pic {
    width: 15px;
    height: 16px;
}
.aside .user p i {
    font-size: 14px;
    color: #f9f9f9;
    margin-left: 5px;
}
/* 用户 */

/* 用户信息 */
.aside .msg {
    display: flex;
    justify-content: center;align-items: center;
    border-bottom: 1px solid #f4f4f4;
}
.aside .msg li {
    padding: 30px 0;

}
.aside .msg li:first-child a {
    font-size: 18px;
    color: #333333;
}
.aside .msg li a {
    font-size: 14px;
    color:  #666666;
}
.aside .msg li:hover a {
    color: #5eb69c;
}
.aside .msg li:first-child:hover a {
    font-size: 18px;
    color: #333333;
}
.aside .msg li:first-child:hover {
    list-style-type: none;
}
.aside .msg li:hover {
    color: #5eb69c;
    list-style-type: disc;
}
/* .aside .msg li:last-child {
    border-bottom: 1px solid #000;
}  */

/* 用户信息 */


/* 侧边栏结束 */






/* 用户账户预览 */

.wrapper .main .overview {
    display: flex;
    height: 132px;
    margin-bottom: 18px;
    padding: 20px 0;
    background-color: #fff;
}
.wrapper .main .overview div {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex: 1;
    text-align: center;
}
.overview div:first-child {
    border-right: 1px solid #f4f4f4;
}
.overview div a:last-child img {
    width: 18px;
}
/* 或者单独给第三张图定义一个类名再更改宽度 */
/* .overview div .addr {
    width: 18px;
} */
.overview div img {
    width: 25px;
    margin-bottom: 10px;
}
.overview div span {
    font-size: 25px;
    color: #e05e30;
}
.overview div p {
    font-size: 16px;
    color: #333333;

}


/* 用户账户预览 */

/* 订单 */

/* 公共样式 */
.pannel {
    padding: 28px 20px;
    margin-bottom: 20px;
    background-color: #fff;
}
.pannel .pannel-title {
    display: flex;
    justify-content: space-between;
    height: 45px;

    border-bottom: 1px solid #f4f4f4;
}
.pannel .pannel-title h4 {
    font-size: 22px;
    font-weight: 400;
    color: #333333;
}
.pannel .pannel-title a {
    margin-top: 8px;
    font-size: 16px;
    color: #999999;
}
.orders .content li {
    display: flex;
    /* justify-content: space-between; */
    height: 137px;
    margin-top: -1px;
    margin-bottom: 20px;
    background-color: #f4f4f4;
} 
.orders .content li:last-child {
    margin-bottom: 0;
}
.orders .content .goods {
    display: flex;
    flex: 1;
    align-items: center;
    margin-right: 120px;
}
.orders .content .goods .pic {
    width: 107px;
    height: 107px;
}
.orders .content .goods img {
    flex: 1;
    padding: 17px 0 14px 12px;
}
.orders .content .goods .txt {
    flex: 1;
    /* 溢出的时候显示省略号 */
    /* 因为弹性盒子的宽度可以被内容撑开   不换行的文字可以撑开这个盒子的尺寸 */
    width: 0;
}
.orders .content .goods .txt h5 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
}
.orders .content .goods .txt p {
    font-size: 14px;
    color: #999999;
}
.orders .content .status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
}
.orders .content .status a {
    font-size: 14px;
    color:  #e05e30;
}
.orders .content .status a:last-child {
    font-size: 14px;
    color: #999999;
}
.orders .content .pay {
    width: 200px;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
}
.orders .content .pay p:nth-child(1) {
    color: #9a2e1f;
}
.orders .content .action {
    width: 180px;
}
.orders .content .action a:first-child {
    width: 100px;
    height: 30px;
    margin-bottom: 10px;
    border-radius: 2px;
    background-color: #5eb69c;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
}
.orders .content .common {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* 公共样式 */


/* 订单 */


/* 收藏的商品 */
.orders .goods2 .scgoods .pic {
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
}
.orders .goods2 .scgoods .pic img {
    width: 160px;
    height: 160px;
}
.orders .goods2 .scgoods .txt h5 {
    margin-top: 23px;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
}
.orders .goods2 .scgoods .txt p {
    font-size: 17px;
    color: #9a2e1f;
}
.orders .goods2 .scgoods .txt p i {
    font-size: 22px;
}
.orders .goods2 .scgoods .pic .dis {
    position: relative;
}
.orders .goods2 .scgoods .pic .disc {
    position: absolute;
    top: -74px;
    left: -14px;
    width: 28px;
    height:51px;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    color: #5eb69c;
    border: 1px solid #5eb69c;
    border-radius: 3px;
}

/* 收藏的商品 */


/* 主题内容 */

效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

溢出省略号
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

预格式化文本，保留空格，tab 回车
瑜 ～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值