今天我们实现这个效果：
结构如下：
<!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>Document</title>
<link rel="stylesheet" href="../lib/iconfont/iconfont.css">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/orders.css">
</head>
<body>
<!-- 主体模块开始 -->
<div class="main">
<!-- 个人信息 -->
<div>
<div class="user_massage">
<div class="location"><i class="iconfont icon-location"></i></div>
<div class="user">
<div class="top">
<h5>谢豪杰</h5>
<p>15871016096</p>
</div>
<div class="bottom">北京市 海淀区 中关村软件园 信息科技大厦1号 楼410# </div>
</div>
<a href="#" class="more iconfont icon-more"></a>
</div>
</div>
<!-- 个人信息结束 -->
<!-- 商品模块开始 -->
<div class="goods">
<div class="pic"><img src="./pic.png" alt=""></div>
<div class="info">
<h4>康尔贝 非接触式红外体温仪</h4>
<p class="youhui">领券立减30元 婴儿级材质 测温…</p>
<p class="pink">粉色 红外体温计</p>
<div class="price">
<span class="red">¥<i>266 </i></span>
<span>¥299</span>
</div>
</div>
<div class="count">
<i class="iconfont icon-x"></i>
<span>1</span>
</div>
</div>
<!-- 商品模块结束 -->
<!-- 物流配送开始 -->
<div class="rest">
<div>
<h5>配送方式</h5>
<p>顺丰快递</p>
</div>
<div>
<h5 class="min">买家备注</h5>
<p>希望可以尽快发货，谢谢~</p>
</div>
<div>
<h5>支付方式</h5>
<p>支付宝<i class="iconfont iconfont icon-more"></i></p>
</div>
</div>
<!-- 物流配送结束 -->
<!-- 收费价格开始 -->
<div class="sale">
<div>
<h5>商品总价</h5>
<p>￥299.00</p>
</div>
<div>
<h5>运费</h5>
<p>￥0.00</p>
</div>
<div>
<h5>折扣</h5>
<p>-￥30.00</p>
</div>
</div>
<!-- 收费价格结束 -->
</div>
<!-- 主体模块结束 -->
<!-- 底部模块开始 -->
<footer class="pay">
<div class="left">合计：
<span class="red">￥
<i>266.00</i>
</span>
</div>
<div class="right">
<a href="#">去支付</a>
</div>
</footer>
<!-- 底部模块结束 -->
</body>
</html>样式如下：
/* 主体模块开始 */
body {
background-color: #f8f8f8;
}
/* 主体模块开始 */
.main {
padding: 12px 11px 80px;
}
.main>div {
margin-bottom: 10px;
background-color: rgb(255, 255, 255);
border-radius: 20px;
}
/* .main div:nth-child(1) {
height: 85px;
} */
/* .main div:nth-child(2) {
height: 108px;
}
.main div:nth-child(3) {
height: 125px;
}
.main div:nth-child(4) {
height: 125px;
} */
/* 个人信息 */
.user_massage {
display: flex;
padding: 15px 0px 14px 11px;
}
.user_massage .location {
width: 30px;
height: 30px;
margin-right: 10px;
background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);
border-radius: 15px;
text-align: center;
line-height: 30px;
color: rgb(255, 255, 255);
}
.user_massage .user {
flex: 1;
color: rgb(0, 0, 0);
font-size: 15px;
}
.user_massage .more {
width: 44px;
height: 44px;
background-color: rgb(255, 255, 255);
line-height: 44px;
text-align: center;
color: rgb(0, 0, 0);
}
.user .top {
display: flex;
}
.user .top h5 {
padding-right: 23px;
font-size: 15px;
font-weight: 400;
}
.user .top p {
font-size: 13px;
}
.user .bottom {
margin-top: 13px;
font-size: 13px;
}
/* 个人信息结束 */
/* 商品模块开始 */
.goods {
display: flex;
padding: 11px 0px 11px 11px;
}
.goods .pic {
width: 85px;
height: 85px;
margin-right: 12px;
border-radius: 2px;
}
.goods .info {
flex: 1;
font-size: 13px;
color: rgb(0, 0, 0);
}
.goods .count {
width: 44px;
height: 44px;
text-align: center;
line-height: 44px;
}
.info h4 {
font-size: 13px;
font-weight: 400;
color: #262626;
}
.info .youhui {
font-size: 13px;
margin: 5px 0;
}
.info .pink {
display: inline-block;
background-color: #f7f7f8;
padding: 3px 4px;
font-size: 11px;
border-radius: 2px;
color: #888888;
}
.info .price {
margin-top: 10px;
font-size: 12px;
}
.info .price .red {
color: #cf4444;
}
.info .price i {
font-size: 16px;
}
.price span:nth-child(2) {
margin-left: 14px;
color: #999;
text-decoration: line-through;
}
/* 商品模块结束 */
/* 物流配送开始 */
.rest {
padding: 15px;
}
.rest>div {
display: flex;
margin-bottom: 30px;
}
.rest div:last-child {
margin-bottom: 0;
}
.rest div:nth-child(odd) {
justify-content: space-between;
}
.rest h5,
.rest p {
font-size: 13px;
color: #262626;
font-weight: 400;
}
.rest div:nth-child(2) p {
margin-left: 20px;
font-size: 12px;
color: #989898;
}
.rest i {
font-size: 9px;
color: #808080;
}
/* .min {} */
/* 物流配送结束 */
/* 收费价格开始 */
.sale {
padding: 15px;
}
.sale>div {
display: flex;
margin-bottom: 30px;
}
.sale div:last-child {
margin-bottom: 0;
}
.sale div {
justify-content: space-between;
}
.sale h5,
.sale p {
font-size: 13px;
color: #262626;
font-weight: 400;
}
/* 收费价格结束 */
/* 主体模块结束 */
/* 底部模块开始 */
.pay {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
height: 80px;
background-color: #fff;
border-top: 1px solid #ededed;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 9px;
padding-right: 11px;
}
.left .red {
color: #cf4444;
font-size: 11px;
}
.left i {
font-size: 20px;
}
.right a {
display: block;
width: 90px;
height: 35px;
background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);
color: rgb(255, 255, 255);
font-size: 13px;
text-align: center;
line-height: 35px;
border-radius: 3px;
}
/* 底部模块结束 */
