web前端—小兔鲜儿项目（移动端）
目录
1.顶部（用户信息部分）
（1）html：
<!-- 主体内容: 滑动查看 -->
<div class="main">
<!-- 用户信息 ，调用pannel公共属性-->
<div class="pannel user_msg">
<!-- 分为三个区域location、user、more -->
<div class="location">
<i class="iconfont icon-location"></i>
</div>
<div class="user">
<!-- 分为两部分top、bottom -->
<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>
<!-- 用户信息 -->
</div>（2）CSS ：
/* 面板公共样式：两个板块间有10像素距离；背景色白色；边框圆角：5像素； */
.pannel {
margin-bottom: 10px;
background-color: #fff;
border-radius: 5px;
}
/* 主体内容 */
.main {
/* 80px: 为了内容不被底部区域盖住 */
padding: 12px 11px 80px;
}
/* 用户信息 */
.user_msg {
display: flex;
/* 侧轴垂直居中 */
align-items: center;
/* 边距: 上:15px;右0px;下15px;左11px */
padding: 15px 0 15px 11px;
}
/* 图标盒子 */
.user_msg .location {
width: 30px;
height: 30px;
/* 图标和字体有间距 */
margin-right: 10px;
/* 渐变颜色 */
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border-radius: 50%;
/* 内容水平垂直居中 */
text-align: center;
line-height: 30px;
color: #fff;
}
.user_msg .user {
flex: 1;
}
.user_msg .user .top {
display: flex;
}
.user_msg .user .top h5 {
/* 留三个字长度 */
width: 55px;
font-size: 15px;
font-weight: 400;
}
.user_msg .user .top p {
font-size: 13px;
}
.user_msg .user .bottom {
margin-top: 5px;
font-size: 12px;
}
.user_msg .more {
width: 44px;
height: 44px;
/* background-color: pink; */
text-align: center;
line-height: 44px;
color: #808080;
}2.中间（其他部分）
（1）html
<!-- 商品 -->
<div class="pannel goods">
<!-- 分为三个模块：图片，信息，数量 -->
<div class="pic">
<a href="#"><img src="./uploads/pic.png" alt=""></a>
</div>
<div class="info">
<!-- 分成三部分 h5标题,p标签,<div>标签 -->
<h5>康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温…</h5>
<p><span>粉色</span> <span>红外体温计</span></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.pannel rest -->
<!-- header nav section footer -->
<section class="pannel rest">
<!-- 分为三个div模块 -->
<div>
<h5>配送方式</h5>
<p>顺丰快递</p>
</div>
<div>
<h5>买家备注</h5>
<p>希望可以尽快发货，谢谢~</p>
</div>
<div>
<h5>支付方式</h5>
<p>支付宝</p>
<div class="more">
<i class="iconfont icon-more"></i>
</div>
</div>
</section>
<!-- 其他信息 -->
<!-- 商品其他信息 -->
<section class="pannel goodsrest">
<div>
<h5>商品总价</h5>
<span>¥ <i>299.00</i></span>
</div>
<div>
<h5>运费</h5>
<span>¥ <i>0.00</i></span>
</div>
<div>
<h5>折扣</h5>
<span class="red">- ¥ <i>30.00</i></span>
</div>
</section>
<!-- 商品其他信息 -->
（2）CSS
/* 商品 */
.goods {
display: flex;
/* 边距: 上:11px;右0px;下11px;左11px */
padding: 11px 0 11px 11px;
}
.goods .pic {
/* 在base.css里img width:100%,所以可以控制父级改图片大小 */
width: 85px;
height: 85px;
margin-right: 10px;
}
.goods .info {
flex: 1;
}
.goods .info h5 {
font-size: 13px;
color: #262626;
/* 文字不加粗 */
font-weight: 400;
}
.goods .info p {
width: 95px;
height: 20px;
margin: 5px 0;
background-color: #f7f7f8;
font-size: 12px;
color: #888;
}
.goods .info p span:first-child {
/* span标签之间5像素距离 */
margin-right: 5px;
}
.goods .info .price {
font-size: 12px;
}
.goods .info .price i {
font-size: 16px;
}
.goods .info .price span:last-child {
/* span标签之间5像素距离 */
margin-left: 5px;
color: #999;
/* 横删除线 */
text-decoration: line-through;
}
.goods .count {
width: 44px;
height: 44px;
/* background-color: pink; */
/* 居中 */
text-align: center;
line-height: 44px;
}
/* 其他信息 */
.rest {
padding: 15px;
}
.rest div {
display: flex;
/* 所有div底部间距30px */
margin-bottom: 30px;
}
.rest div:last-child {
/* 去除最后一个div底部间距 */
margin-bottom: 0;
}
/* 找到第一个和第三个div设置主轴对齐方式，奇数2n+1*/
.rest div:nth-child(2n+1) {
/* div设置主轴对齐方式 */
justify-content: space-between;
}
/* 第二行标题和p之间的距离 */
.rest div:nth-child(2) h5 {
margin-right: 20px;
}
/* 所有h5和p标签字体颜色相同,不加粗 */
.rest h5
{
font-size: 13px;
color: #262626;
font-weight: 400;
}
.rest p {
font-size: 13px;
color: #262626;
}
/* 备注文字 */
.rest div:nth-child(2) p {
font-size: 12px;
color: #989898;
}
.rest div:nth-child(3) p {
margin-left: auto;
}
.rest div:nth-child(3) div{
margin-left:7px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
color: #808080;
}
/* 商品其他信息 */
.goodsrest {
padding: 15px;
}
.goodsrest div {
display: flex;
/* 所有div底部间距30px */
margin-bottom: 30px;
}
.goodsrest div:last-child{
margin-bottom: 0;
}
.goodsrest div{
justify-content:space-between;
}
.goodsrest h5
{
font-size: 13px;
color: #262626;
font-weight: 400;
}
.goodsrest span {
font-size: 13px;
}
3.底部（结算部分）
（1） html：
</div>
<!-- 底部支付: 固定定位 -->
<div class="pay">
<!-- 布局：左边 合计:xxx 右边:去支付 -->
<div class="left">
<!-- 将价格放置<i>标签可利用JS改变订单价格 -->
合计: <span class="red">￥<i>266.00</i></span>
</div>
<div class="right">
<!-- 要跳转用a标签 -->
<a href="#">去支付</a>
</div>
</div>
<!-- 底部支付: 固定定位 -->（2）CSS：
/* 公共样式 */
.red {
color: #cf4444;
}
/* 底部支付 */
.pay {
/* 定位 */
position: fixed;
left: 0;
bottom: 0;
/* 处理脱标 */
width: 100%;
height: 80px;
/* 对左、右div用flex布局 */
display: flex;
/* 主轴对齐方式，设置左、右div标签之间距离 */
justify-content: space-between;
/* 侧轴对齐方式 ，设置左、右div标签垂直居中*/
align-items: center;
/* 设置左、右div标签边距 */
padding: 0 11px;
/* background-color: pink; */
border-top: 1px solid #ededed;
}
.pay .left {
font-size: 12px;
}
.pay .left i {
font-size: 20px;
}
.pay .right a {
display: block;
width: 90px;
height: 35px;
/* 渐变，在像素大厨里直接粘贴 */
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
/* 圆角 */
border-radius: 3px;
/* 文字水平居中 */
text-align: center;
line-height: 35px;
font-size: 13px;
color: #fff;
}
/* 底部支付 */4.总代码
（1）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>
<link rel="stylesheet" href="./lib/iconfont/iconfont.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/orders.css">
</head>
<body>
<!-- 主体内容: 滑动查看 -->
<div class="main">
<!-- 用户信息 -->
<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>
<!-- 用户信息 -->
<!-- 商品 -->
<div class="pannel goods">
<!-- 分为三个模块：图片，信息，数量 -->
<div class="pic">
<a href="#"><img src="./uploads/pic.png" alt=""></a>
</div>
<div class="info">
<!-- 分成三部分 h5标题,p标签,<div>标签 -->
<h5>康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温…</h5>
<p><span>粉色</span> <span>红外体温计</span></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.pannel rest -->
<!-- header nav section footer -->
<section class="pannel rest">
<!-- 分为三个div模块 -->
<div>
<h5>配送方式</h5>
<p>顺丰快递</p>
</div>
<div>
<h5>买家备注</h5>
<p>希望可以尽快发货，谢谢~</p>
</div>
<div>
<h5>支付方式</h5>
<p>支付宝</p>
<div class="more">
<i class="iconfont icon-more"></i>
</div>
</div>
</section>
<!-- 其他信息 -->
<!-- 商品其他信息 -->
<section class="pannel goodsrest">
<div>
<h5>商品总价</h5>
<span>¥ <i>299.00</i></span>
</div>
<div>
<h5>运费</h5>
<span>¥ <i>0.00</i></span>
</div>
<div>
<h5>折扣</h5>
<span class="red">- ¥ <i>30.00</i></span>
</div>
</section>
<!-- 商品其他信息 -->
</div>
<!-- 主体内容: 滑动查看 -->
<!-- 底部支付: 固定定位 -->
<div class="pay">
<div class="left">
合计: <span class="red">￥<i>266.00</i></span>
</div>
<div class="right">
<a href="#">去支付</a>
</div>
</div>
<!-- 底部支付: 固定定位 -->
</body>
</html>（2）CSS
body {
background-color: #f7f7f8;
}
/* 公共样式 */
.red {
color: #cf4444;
}
.pannel {
margin-bottom: 10px;
background-color: #fff;
border-radius: 5px;
}
/* 主体内容 */
.main {
/* 80px: 为了内容不被底部区域盖住 */
padding: 12px 11px 80px;
}
/* 用户信息 */
.user_msg {
display: flex;
align-items: center;
padding: 15px 0 15px 11px;
}
.user_msg .location {
width: 30px;
height: 30px;
margin-right: 10px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border-radius: 50%;
text-align: center;
line-height: 30px;
color: #fff;
}
.user_msg .user {
flex: 1;
}
.user_msg .user .top {
display: flex;
}
.user_msg .user .top h5 {
width: 55px;
font-size: 15px;
font-weight: 400;
}
.user_msg .user .top p {
font-size: 13px;
}
.user_msg .user .bottom {
margin-top: 5px;
font-size: 12px;
}
.user_msg .more {
width: 44px;
height: 44px;
/* background-color: pink; */
text-align: center;
line-height: 44px;
color: #808080;
}
/* 商品 */
.goods {
display: flex;
/* 边距: 上:11px;右0px;下11px;左11px */
padding: 11px 0 11px 11px;
}
.goods .pic {
/* 在base.css里img width:100%,所以可以控制父级改图片大小 */
width: 85px;
height: 85px;
margin-right: 10px;
}
.goods .info {
flex: 1;
}
.goods .info h5 {
font-size: 13px;
color: #262626;
/* 文字不加粗 */
font-weight: 400;
}
.goods .info p {
width: 95px;
height: 20px;
margin: 5px 0;
background-color: #f7f7f8;
font-size: 12px;
color: #888;
}
.goods .info p span:first-child {
/* span标签之间5像素距离 */
margin-right: 5px;
}
.goods .info .price {
font-size: 12px;
}
.goods .info .price i {
font-size: 16px;
}
.goods .info .price span:last-child {
/* span标签之间5像素距离 */
margin-left: 5px;
color: #999;
/* 横删除线 */
text-decoration: line-through;
}
.goods .count {
width: 44px;
height: 44px;
/* background-color: pink; */
/* 居中 */
text-align: center;
line-height: 44px;
}
/* 其他信息 */
.rest {
padding: 15px;
}
.rest div {
display: flex;
/* 所有div底部间距30px */
margin-bottom: 30px;
}
.rest div:last-child {
/* 去除最后一个div底部间距 */
margin-bottom: 0;
}
/* 找到第一个和第三个div设置主轴对齐方式，奇数2n+1*/
.rest div:nth-child(2n+1) {
/* div设置主轴对齐方式 */
justify-content: space-between;
}
/* 第二行标题和p之间的距离 */
.rest div:nth-child(2) h5 {
margin-right: 20px;
}
/* 所有h5和p标签字体颜色相同,不加粗 */
.rest h5
{
font-size: 13px;
color: #262626;
font-weight: 400;
}
.rest p {
font-size: 13px;
color: #262626;
}
/* 备注文字 */
.rest div:nth-child(2) p {
font-size: 12px;
color: #989898;
}
.rest div:nth-child(3) p {
margin-left: auto;
}
.rest div:nth-child(3) div{
margin-left:7px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
color: #808080;
}
/* 商品其他信息 */
.goodsrest {
padding: 15px;
}
.goodsrest div {
display: flex;
/* 所有div底部间距30px */
margin-bottom: 30px;
}
.goodsrest div:last-child{
margin-bottom: 0;
}
.goodsrest div{
justify-content:space-between;
}
.goodsrest h5
{
font-size: 13px;
color: #262626;
font-weight: 400;
}
.goodsrest span {
font-size: 13px;
}
/* 主体内容 */
/* 底部支付 */
.pay {
position: fixed;
left: 0;
bottom: 0;
display: flex;
/* 主轴对齐方式 */
justify-content: space-between;
/* 侧轴对齐方式 */
align-items: center;
width: 100%;
height: 80px;
padding: 0 11px;
/* background-color: pink; */
border-top: 1px solid #ededed;
}
.pay .left {
font-size: 12px;
}
.pay .left i {
font-size: 20px;
}
.pay .right a {
display: block;
width: 90px;
height: 35px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border-radius: 3px;
text-align: center;
line-height: 35px;
font-size: 13px;
color: #fff;
}
/* 底部支付 */（3）运行截图
扫一扫
1763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
