移动端-确认订单页面

最新推荐文章于 2024-04-05 23:37:35 发布

小阿哈

最新推荐文章于 2024-04-05 23:37:35 发布

阅读量902

点赞数 2

分类专栏： html+CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/xxx857857857/article/details/127022543

版权

html+CSS 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

项目准备

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>林丽&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">
                    粉色&nbsp;红外体温计
                </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

小阿哈

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
移动端-确认订单页面

移动端-确认订单页面含源码与资源orders.cssorder.html页面效果这里的数据以iphone6/7/8为例（之后会有含移动适配的页面，感谢b站黑马，项目来自于这上面的）里面有设计稿，可以自己做一做，设计稿测量可以用PxCook或者PS(移动端设计稿一般在开发模式下调为2x)链接：https://pan.baidu.com/s
复制链接

扫一扫