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="#">查看全部 ></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>
