移动Web学习04-移动端订单结算页&PC端个人中心页面

都是数据而已

于 2024-04-05 23:37:35 发布

阅读量878

点赞数 27

文章标签：前端学习 css

本文链接：https://blog.csdn.net/qq_45052183/article/details/137412526

版权

5、电商结算页面案例

css

body{
  background-color: #F2F2F2;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main{
  padding: 12px 11px 80px;
}

.pay{
  display: flex;
  height: 80px;
  background-color: #fff;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #ededed;
  position: fixed;
  padding: 0 10px;
  /* 两边元素贴边 */
  justify-content: space-between;
  /* 沿侧轴居中对齐 */
  align-items: center;
}
.pay .pay-left{
  font-size: 12px;
  color: #1e1e1e;
}

.pay .pay-left span{
  color: #cf4444;
}

.pay .pay-left span i{
  font-size: 20px;
  font-style: normal;
  font-weight: 700px;
}
.pay .pay-right{
  width: 91px;
	height: 35px;
  text-align: center;
  line-height: 35px;
  color: #fff;
  background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);
  border-radius: 3px;
}

.pay .pay-right a{
  width: 42px;
	height: 35px;
  font-size: 13px;
  color: #ffffff;
  line-height: 35px;
	font-family: MicrosoftYaHei;
  text-decoration: none;
  text-align: center;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
}

.pannel{
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
}
.user_msg{
  display: flex;
  padding: 15px 0 15px 11px;
  align-items: center;
}

.user_msg .location{
  width: 30px;
  height: 30px;
  background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    color: #fff;
    text-align: center;
    line-height: 30px;
    margin-right: 15px;
    border-radius: 50%;
}
.user{
 flex: 1;
}
.user .top{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.user .top h5 {
    width: 55px;
    font-size: 15px;
    font-weight: 400;
}
.user .top p {
  font-size: 13px;
  margin-left: 15px;
}

.user .bottom{
  margin-top: 5px;
  font-size: 12px;
}
.more{
  width: 44px;
  height: 44px;
  /* background-color: #2ad1ff; */
  text-align: center;
  line-height: 44px;
  color: #808080;
  /* border: 1px solid #3a9cff; */
}

.product{
  padding: 11px 0px 11px  11px;
  display: flex;
  align-items: center;
}
.pic{
  width: 85px;
  height: 85px;
  /* background-color: pink;  */
}
.txt{
  flex: 1;
  margin: 0px 12px;
}
.txt h5{
  font-size: 13px;
  color: #262626;
  font-weight: 400;
  /* 多行文本溢出 */
  display: -webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
  text-overflow: ellipsis;
}
.count{
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  background-color: skyblue;
}
.txt .goods_style{
  display: inline;
  font-size: 11px;
	height: 16px;
	letter-spacing: 0px;
	color: #888888;
  background-color: #f1f1f1;
  padding: 0px 4px;
  border-radius: 2px;
}

/* 我这里span写错了 */
.txt .goods_style span:first-child{
  margin-right: 10px;
}

.txt .goods_price{
  color: #999;
  font-size: 12px;
  margin-top: 3px;
}
.txt .goods_price i,
.txt .goods_price em{
  font-size: 10px;
}
.txt .goods_price i{
  color: #cf4444;
}
.txt .goods_price span{
  font-size: 16px;
  color: #cf4444;
  margin-right: 12px;
}

.other{
  padding: 11px;
}

.other ul li{
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    color: #262626;
    font-size: 13px;
}
.other ul li h5{
   font-weight: 400px;
}
/* 选中计数行 old */
.other ul li:nth-child(2n+1){
   justify-content: space-between;
}
/* 选中最后一行让下边距变为0  */
.other ul li:last-child{
  margin-bottom: 0;
}

.other ul li:nth-child(2) p{
  font-size: 12px;
  margin-left: 19px;
}

.other ul li i{
  color: #808080;
  font-size: 13px;
  margin-right: 2px; 
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <title>填写订单</title>
    <!-- 引入初始化的css文件 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入字体图标的css文件 -->
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <!-- 引入自己的css文件 -->
    <link rel="stylesheet" href="./css/order.css">
</head>
<body>
    <!-- main 主体内容 start-->
    <div class="main">
        <!-- 用户信息 start -->
        <div class="pannel user_msg">
             <div class="location">
                <i class="iconfont icon-location"></i>
             </div>
             <div class="user">
                <div class="top">
                    <h5>林丽</h5>
                    <p>18500667882</p>
                </div>
                <div class="bottom">北京市  海淀区  中关村软件园   信息科技大厦1号
                    楼410#</div>
             </div>
             <div class="more">
                <i class="iconfont icon-more"></i>
             </div>
        </div>
        <!-- 用户信息 end -->

        <!-- 商品信息 start -->
        <div class="pannel product">
             <div class="pic">
                <a href=""><img src="./uploads/pic.png" alt=""></a>
             </div>
             <div class="txt">
                <h5>康尔贝 非接触式红外体温仪领券立减30元 婴儿级材质 测温测温测温测温测温</h5>
                <p class="goods_style">
                    <span class="firstSpan">粉色</span><span>红外体温计</span>
                </p>
                <p class="goods_price">
                    <i>¥</i><span>266</span> 
                    <em>¥</em><del>299</del>
                </p>
             </div>
             <div class="count">
                <i class="iconfont icon-x"></i><span>1</span>
            </div>
        </div>
        <!--  商品信息 end -->
  
        <!--  其他信息start -->
        <div class="pannel other">
            <ul>
                <li>
                    <h5>配送方式</h5>
                    <p>顺丰快递</p>
                </li>
                <li>
                    <h5>买家备注</h5>
                    <p>希望可以快点发货</p>
                </li>
                <li>
                    <h5>支付方式</h5>
                    <p>支付宝<i class="iconfont icon-more"></i></p>
                </li>
            </ul>
        </div>
        <!-- 其他信息end -->
        

        <!--  配送信息start -->
        <div class="pannel other">
            <ul>
                <li>
                    <h5>商品总价</h5>
                    <p>￥299.00</p>
                </li>
                <li>
                    <h5>运费</h5>
                    <p>￥0.00</p>
                </li>
                <li>
                    <h5>折扣</h5>
                    <p>-￥30.00</p>
                </li>
            </ul>
        </div>
        <!-- 其他信息end -->

        <!--  配送信息start -->
        <div class="pannel other">
            <ul>
                <li>
                    <h5>商品总价</h5>
                    <p>￥299.00</p>
                </li>
                <li>
                    <h5>运费</h5>
                    <p>￥0.00</p>
                </li>
                <li>
                    <h5>折扣</h5>
                    <p>-￥30.00</p>
                </li>
            </ul>
        </div>
        <!-- 其他信息end -->
    </div>
    <!-- main 主体内容 end-->



    <!-- pay底部支付 start -->
    <div class="pay">
        <div class="pay-left">
            合计:<span>￥<i>266.00</i></span>
        </div>
        <div class="pay-right">
            <a href="#">去支付</a>
        </div>
    </div>
     <!--pay底部支付 end -->
</body>
</html>

6、PC端个人中心案例

css代码

.xtx-boy {
    background-color: #f4f4f4;
    padding: 30px 0 85px;
}
.xtx-boy .container{
    display: flex;
    justify-content: space-between;
}
.xtx-boy .container .aside{
    width: 227px;
    height: 500px;
    background-color: palegreen;
    
}

.xtx-boy .container .main{
    width: 999px;
    /* 回头再删除 让里面的内容撑开就行 */
    /* height: 500px; */
   background-color: orange;
}

.main .overview{
    display: flex;
    background-color: #fff;
    padding: 20px 0px;
    height: 132px;
    margin-bottom: 18px;
}
/* 每个div占一份 */
.overview div{
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}
.overview div a{
    display: flex;
    height: 55px;
    /* 改变主轴方式 */
    flex-direction: column;
    align-items: center;
    /* 上下居中 */
    justify-content: space-between;
}
.overview div:first-child{
    border-right: 1px solid #f1f1f1;
}

/* .overview div img{ */
    /* width: 25px;
    height: 22px; */
    /* margin-bottom: 7px;
} */
.overview  span{
    color: #e05e30;
    font-size: 25px;
    height: 30px;
    display: block;
    line-height: 25px;
}
.pannel{
  background-color: #fff;
  padding: 28px 19px;
  margin-bottom: 20px; 
}
.paner-title{
    font-size: 16px;
    color: #333;
    /* background: pink; */
    height: 45px;
    display: flex;
    justify-content: space-between;
}
.paner-title h4{
    font-size: 22px;
    font-weight: 400;
}
.paner-title a{
    color: #999;
    font-family: simsum;
    margin-top: 5px;
    margin-right: 15px;
}

.content li{
  display: flex;
  border: 1px solid #ccc;
  height: 137px;
  margin-bottom: 20px;
  font-size: 14px;
}
.content li:last-child{
    margin-bottom: 0;
}
.content .goods{
    flex:1;
    display: flex;
    align-items: center;
}
.content .goods .pic{
   width: 107px;
   height: 107px;
   background-color: pink;
   margin: 0 5px 0 12px;
}
.content .goods .pic img{
    width: 107px;
    height: 107px;
}

.content .goods .txt h5{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    /* 溢出隐藏 */
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}
.content .state{
    width: 200px;
    /* line-height: 135px; */
    text-align: center;
    padding-top: 50px; 
    color: #e05e30;
}

.content .state p:nth-child(2){
    color: #999;
}
.content .price{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* text-align: center;
    padding-top: 30px; */
    width: 200px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.content .price p:first-child{
    color: #9a2e1f;
}
.content .pay{
    width: 180px;
}
.content .pay{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 180px;
}
.content .pay p:nth-child(1){
    width: 100px;
    height: 30px;
    background-color:  #5eb69c;
    text-align: center;
    line-height: 30px;
    color: #fff;
    margin-bottom: 10px;
    border-radius: 2px;
}

html内容

<!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>
    <!-- 网站说明 -->
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <!-- 关键字 -->
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入初始化文件 css reset base.css -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入common.css  公共的头部和底部 -->
    <link rel="stylesheet" href="./css/common.css">
    <!--引入center.css  公共的头部和底部 -->
    <link rel="stylesheet" href="./css/cente2.css">

</head>

<body>
    <!-- 头部模块开始 -->
    <header>
        <!-- 快捷导航 -->
        <div class="xtx-shortcut">
            <div class="container">
                <ul>
                    <li><a href="#">请先登录</a></li>
                    <li class="sep">|</li>
                    <li><a href="#">免费注册</a></li>
                    <li class="sep">|</li>
                    <li><a href="#">我的订单</a></li>
                    <li class="sep">|</li>
                    <li><a href="#">会员中心</a></li>
                    <li class="sep">|</li>
                    <li><a href="#">帮助中心</a></li>
                    <li class="sep">|</li>
                    <li><a href="#">在线客服</a></li>
                    <li class="sep">|</li>
                    <li>
                        <a href="#">
                            <i></i>
                            手机版
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="xtx-main-nav container">
            <!-- logo -->
            <div class="logo">
                <h1>
                    <a href="./index.html" title="小兔鲜儿">小兔鲜儿</a>
                </h1>
            </div>
            <!-- nav -->
            <nav 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>
            </nav>
            <!-- search -->
            <div class="search">
                <input type="text" placeholder="搜一搜">
            </div>
            <!-- car -->
            <a href="#" class="car">
                <span>2</span>
            </a>
        </div>
    </header>
    <!-- 头部模块结束 -->

    <!-- 用户中心内容区域 start-->
    <div class="xtx-boy">
         <div class="container">
            <!-- 左侧内容 -->
            <div class="aside">123</div>
            <!-- 右侧内容 -->
            <div class="main">
                <!-- 右侧第一个盒子（会员中心，优惠卷） -->
                <div class="overview">
                      <div class="overview-left">
                        <a href="">
                            <img src="./images/vip.png" alt="" width="25" height="22">
                            <p>会员中心</p>
                        </a>
                        <a href="">
                            <img src="./images/safe.png" alt="" width="25" height="22">
                            <p>安全设置</p>
                        </a>
                        <a href="">
                            <img src="./images/address.png" alt=""  width="18" height="25">
                            <p>地址管理</p>
                        </a>
                      </div>
                      <div class="overview-right">
                        <a href="">
                            <span>6</span>
                            <p>优惠卷</p>
                        </a>
                        <a href="">
                           <span>70</span>
                           <p>礼品卡</p>
                        </a>
                        <a href="">
                            <span>120</span>
                            <p>积分</p></p></p>
                        </a>
                      </div>
                </div>
                <!-- 订单模块 start-->
                <div class="pannel order">
                    <!-- 我的订单头部 start -->
                   <div class="paner-title">
                        <h4>我的订单</h4>
                        <a href="#">查看全部 &gt;</a>
                   </div>
                   <!-- 我的订单头部 end -->

                   <!-- 我的订单内容 start-->
                   <div class="content">
                       <ul>
                          <li>
                            <div class="goods">
                                <div class="pic">
                                    <img src="./uploads/order_goods_1.jpg" alt="">
                                </div>
                                <div class="txt">
                                     <h5>拉夫劳伦T恤男正品圆领短袖</h5>
                                     <p>颜色: 白色 尺码: M 数量: 1</p>
                                </div>
                            </div>
                            <div class="state">
                                <p>代付款</p>
                                <p>查看物流</p>
                            </div>
                            <div class="price">
                                <p>￥99.00</p>
                                <p>(含运费：￥10.00)</p>
                                <p>在线支付</p>
                            </div>
                            <div class="pay"> 
                                <p>立即付款</p>
                                <p>查看详情</p>
                                <p>取消订单</p>
                            </div>
                          </li>
                          <li>
                            <div class="goods">
                                <div class="pic">
                                    <img src="./uploads/order_goods_1.jpg" alt="">
                                </div>
                                <div class="txt">
                                     <h5>拉夫劳伦T恤男正品圆领短袖</h5>
                                     <p>颜色: 白色 尺码: M 数量: 1</p>
                                </div>
                            </div>
                            <div class="state">
                                <p>代付款</p>
                                <p>查看物流</p>
                            </div>
                            <div class="price">
                                <p>￥99.00</p>
                                <p>(含运费：￥10.00)</p>
                                <p>在线支付</p>
                            </div>
                            <div class="pay"> 
                                <p>立即付款</p>
                                <p>查看详情</p>
                                <p>取消订单</p>
                            </div>
                          </li>
                          <li>
                            <div class="goods">
                                <div class="pic">
                                    <img src="./uploads/order_goods_1.jpg" alt="">
                                </div>
                                <div class="txt">
                                     <h5>拉夫劳伦T恤男正品圆领短袖</h5>
                                     <p>颜色: 白色 尺码: M 数量: 1</p>
                                </div>
                            </div>
                            <div class="state">
                                <p>代付款</p>
                                <p>查看物流</p>
                            </div>
                            <div class="price">
                                <p>￥99.00</p>
                                <p>(含运费：￥10.00)</p>
                                <p>在线支付</p>
                            </div>
                            <div class="pay"> 
                                <p>立即付款</p>
                                <p>查看详情</p>
                                <p>取消订单</p>
                            </div>
                          </li>
                          <li>
                            <div class="goods">
                                <div class="pic">
                                    <img src="./uploads/order_goods_1.jpg" alt="">
                                </div>
                                <div class="txt">
                                     <h5>拉夫劳伦T恤男正品圆领短袖</h5>
                                     <p>颜色: 白色 尺码: M 数量: 1</p>
                                </div>
                            </div>
                            <div class="state">
                                <p>代付款</p>
                                <p>查看物流</p>
                            </div>
                            <div class="price">
                                <p>￥99.00</p>
                                <p>(含运费：￥10.00)</p>
                                <p>在线支付</p>
                            </div>
                            <div class="pay"> 
                                <p>立即付款</p>
                                <p>查看详情</p>
                                <p>取消订单</p>
                            </div>
                          </li>
                       </ul>
                   </div>
                   <!-- 我的订单内容 end -->
                </div>
                <!-- 订单模块 end-->
            </div>
         </div>
    </div>
    <!-- 用户中心内容区域  end-->

    <!-- 底部开始 -->
    <footer>
        <!-- 上盒子 -->
        <div class="footer-t">
            <div class="container">
                <dl class="customer">
                    <dt>客户服务</dt>
                    <dd class="zaixian">
                        <a href="#">
                            <p>在线客服</p>
                        </a>
                    </dd>
                    <dd class="wenti">
                        <a href="#">
                            <p>问题反馈</p>
                        </a>
                    </dd>
                </dl>
                <dl class="us">
                    <dt>关注我们</dt>
                    <dd class="gongzhonghao">
                        <a href="#">
                            <p>公众号</p>
                        </a>
                    </dd>
                    <dd class="weibo">
                        <a href="#">
                            <p>微博</p>
                        </a>
                    </dd>
                </dl>
                <!-- 下载模块 -->
                <dl class="download">
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.png" alt="">
                    </dd>
                    <dd class="down">
                        <p>扫描二维码</p>
                        <p>立马下载APP</p>
                        <a href="#">下载页面</a>
                    </dd>
                </dl>
                <!-- 热线模块 -->
                <dl class="hotline">
                    <dt>服务热线</dt>
                    <dd>
                        <p>400-0000-000</p>
                        <p>周一至周日 8:00-18:00</p>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 下盒子 -->
        <div class="footer-b">
            <!-- 服务模块 -->
            <div class="xtx-service">
                <a href="#">价格亲民</a>
                <a href="#">物流快捷</a>
                <a href="#">品质新鲜</a>
            </div>
            <!-- 版权模块 -->
            <div class="xtx-copyright">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a> |
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </footer>
    <!-- 底部结束 -->
</body>

</html>

都是数据而已

关注

27
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
移动Web学习04-移动端订单结算页&PC端个人中心页面

5、电商结算页面案例cssbody{ background-color: #F2F2F2;}* { box-sizing: border-box; margin: 0; padding: 0;}.main{ padding: 12px 11px 80px;}.pay{ display: flex; height: 80px; background-color: #fff; bottom: 0; width: 100%; border-top:
复制链接

扫一扫