项目准备
lib文件中存放外来的文件,就比如这个项目使用到字体图标,那存放的就是字体图标的文件,css 样式,images 重要的图片,uploads 页面随时更新的图片,其次就是html文件。
base.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{text-decoration: none;}
img{
width: 100%;
vertical-align: middle;
}
orders.css
body{
background-color: #f7f7f8;
}
/* common公共样式 */
.red{
color: #cf4444;
}
.pannel{
background-color: #fff;
border-radius: 5px;
margin-bottom: 10px;
}
.common_rest{
display: flex;
justify-content: space-between;
font-size: 13px;
color: #262626;
margin-bottom: 29px;
}
/* 主体部分 */
.main{
/*下面设内边距是因为 固定定位脱标 会覆盖标准流的位置
因此paading-bottom至少要大于等于固定部分的高度,防止被遮盖*/
padding: 12px 11px 80px;
}
/* 用户信息开始 */
.main .user_msg{
display: flex;
padding: 15px 0 14px 11px;
align-items: center;
}
.main .user_msg .login{
width: 30px;
height: 30px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border-radius: 15px;
margin-right: 12px;
text-align: center;
line-height: 30px;
}
.icon-location{
font-size: 16px;
color: #fff;
}
.main .user_msg .usr{
flex: 1;
}
/* .main .user_msg .usr p{
font-size: 15px;
color: #262626;
}
.main .user_msg .usr p:last-child{
font-size: 12px;
color: #333;
margin-top: 10px;
} */
.main .user_msg .usr .top{
display: flex;
align-items: center;
}
.main .user_msg .usr .top h5{
width: 55px;
font-size: 15px;
color: #262626;
}
.main .user_msg .usr .top span{
font-size: 13px;
color: #333;
}
.main .user_msg .usr .bottom{
margin-top: 10px;
}
.main .user_msg .usr .bottom span{
font-size: 12px;
color: #333;
}
.main .user_msg .more{
width: 44px;
height: 44px;
text-align: center;
line-height: 44px;
}
.icon-more{
font-size: 10px;
color: #808080;
}
/* 用户信息结束 */
/*商品信息开始 */
.main .goods{
/* 数量多少 是否留区域看产品经理 */
display: flex;
align-items: center;
padding: 11px 0 11px 11px;
}
.main .goods .pic{
width: 85px;
height: 85px;
margin-right: 12px;
}
.main .goods .info{
flex: 1;
}
.main .goods .info .top{
font-size: 13px;
color: #262626;
}
.main .goods .info .center{
width: 88px;
height: 11px;
background-color: #f7f7f8;
margin-top: 7px;
color: #888;
font-size: 11px;
}
.main .goods .info .bottom{
margin-top: 13px;
}
.main .goods .info .red i{
font-size:20px;
font-style: normal;
}
.main .info del{
font-size: 9px;
color: #999;
}
.main .goods .count{
width: 44px;
height: 44px;
/* background-color: pink; */
text-align: center;
line-height: 44px;
}
.main .goods .count span{
font-size: 7px;
color: #262626;
}
.main .goods .count i{
margin-left: 5px;
font-size: 15px;
color: #262626;
font-style: normal;
}
/* 商品信息结束 */
/* 配送方式开始 */
.main .rest{
padding: 14px 15px 16px 13px;
}
.main .rest div:last-child{
margin-bottom: 0px;
}
.main .rest h5{
font-weight: 400;
}
.main .rest div:nth-child(2){
justify-content: flex-start;
}
.main .rest div:nth-child(2) h5{
margin-right: 19px;
}
.main .rest div:nth-child(2) span{
font-size:12px;
color: #989898;
}
/* 配送方式结束 */
/* 总价格 */
.price{
padding: 14px 15px 16px 13px;
}
.main .price h5{
font-weight: 400;
}
/* 总价格结束 */
/* 主体部分结束 */
/* 支付部分 */
.pay{
/* 一加上定位之后需要加上宽度,因为加上定位之后会脱标
那盒子的宽度就不再默认为父元素的宽度 */
/* 使用flex布局 给父元素加上flex 变身弹性盒子 */
position: fixed;
display: flex;
/* 布局方式,空白都在两个盒子之间 */
/* 改变主轴对称方式 */
justify-content: space-between;
/* 改变侧轴对称方式 使居中 */
align-items: center;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
background-color: #fff;
border-top: 1px solid #ededed;
padding:0 10px;
}
/*默认字体大小为12px */
/* 修改一些字体样式 */
.pay .left span{
font-size: 11px;
}
.pay .left span i{
font-size:20px;
font-style: normal;
}
.pay .right a{
display: block;
width: 91px;
height: 35px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border: none;
border-radius: 3px;
color: #fff;
font-size: 13px;
text-align: center;
line-height: 35px;
}
/* 支付部分结束 */
order.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="user_msg pannel">
<div class="login">
<span class="iconfont icon-location"></span>
</div>
<div class="usr">
<!-- <p>林丽 15896907282</p>
<p>北京市 海淀区 中关村软件园 信息科技大厦1号楼410#</p> -->
<!--
姓名与联系方式都是后台数据,一般单独设置标签,这里可以设置div也可以设置p,只要把姓名 与 联系方式 再套一个标签就行
因为想把姓名设置一个标题,标题是块级元素因此就不能使用p
-->
<div class="top">
<h5>林丽</h5>
<span>15896907282</span>
</div>
<div class="bottom">
<span>北京市 海淀区 中关村软件园 信息科技大厦1号楼410#</span>
</div>
</div>
<div class="more">
<span class="iconfont icon-more">
</span>
</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
-->
<div class="top">
康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温…
</div>
<div class="center">
粉色 红外体温计
</div>
<div class="bottom">
<span class="red">¥<i>266.00</i></span>
<del>¥266.00</del>
</div>
</div>
<div class="count">
<span>x<i>1</i></span>
</div>
</div>
<!-- 商品购物信息结束 -->
<!-- 配送方式 -->
<div class="pannel rest">
<div class="common_rest">
<h5>配送方式</h5>
<span>顺丰快递</span>
</div>
<div class="common_rest">
<h5>买家备注</h5>
<span>希望可以尽快发货,谢谢</span>
</div>
<div class="common_rest">
<h5>支付方式</h5>
<span>支付宝<i class="iconfont"></i></span>
</div>
</div>
<!-- 配送方式结束 -->
<!-- 总价格 -->
<div class="pannel price">
<div class="common_rest">
<h5>配送方式</h5>
<span>顺丰快递</span>
</div>
<div class="common_rest">
<h5>买家备注</h5>
<span>希望可以尽快发货,谢谢</span>
</div>
<div class="common_rest">
<h5>支付方式</h5>
<span>支付宝<i class="iconfont"></i></span>
</div>
</div>
<!-- 总价格结束 -->
</div>
<!-- 主体部分结束 -->
<!-- 支付部分 固定定位 位置不会改变固定在屏幕上 -->
<div class="pay">
<div class="left">
<!-- 266.00是不固定,很多时候需要改变
因此需要单独起个标签-->
合计:<span class="red">¥<i>266.00</i></span>
</div>
<div class="right">
<a href="#">
去支付
</a>
</div>
</div>
<!-- 支付部分结束 -->
</body>
</html>
页面效果
这里的数据以iphone6/7/8为例(之后会有含移动适配的页面,感谢b站黑马,项目来自于这上面的)
里面有设计稿,可以自己做一做,设计稿测量可以用PxCook或者PS
(移动端设计稿一般在开发模式下调为2x)
链接:https://pan.baidu.com/s/1S3K0AN2B6ersyEi4IPbIzg
提取码:2db0