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

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>