74-案例-小兔仙确认订单

已于 2022-11-20 11:22:24 修改
阅读量711 收藏 1
点赞数 1
分类专栏： web前端 文章标签： css html 前端
于 2022-11-15 13:53:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62323730/article/details/127864245
版权

19-案例-小兔仙确认订单

lib文件夹 --- 》放字体，iconfont，框架，库等文件

手机端端网页 ---》 像素大厨 -- 》设计图模式选 2X ， ---》默认375px *813pt

页面最上面的时间和信号不用写代码，画红圈的不用写，从填写订单下面开始写

  • 最下面这一行“去支付”要固定在浏览器下面。固定定位 position:fixed
  • 盒子分成俩，上面一大块做滚轮-滑动查看，下面固定一条做支付。
  • 数据，内容 要准备标签，未来链接数据库可以替换数据。
  • 浏览器的最小字号是12px，所以设计图上字号小于12px的直接设置成12px
  • 红色字体颜色可以设置一个公共样式
  • 设计师给的图里有虚线框，代表这个区域是可以点的，右边的虚线框一般设置为44mm左右

/* 删除线 */ text-decoration: line-through;

小兔鲜-移动端-确认订单页面

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="../study/04-小兔鲜-确认订单/xiaotuxian/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="../study/04-小兔鲜-确认订单/xiaotuxian/css/base.css">
    <link rel="stylesheet" href="../study/04-小兔鲜-确认订单/xiaotuxian/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">
                    <p>北京市  海淀区  中关村软件园   信息科技大厦1号
                        楼410#   </p>
                </div>
            </div>
            <div class="more">
                <i class="iconfont icon-more"></i>
            </div>
       </div>
       <!-- 用户信息区域 -->


       <!-- 商品goods区域 -->
       <div class="pannel goods">
            <div class="pic">
                <a href="#">
                    <img src="../study/04-小兔鲜-确认订单/xiaotuxian/uploads/pic.png" alt="">
                </a>
            </div>
            <div class="info">
                <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>
       <!-- 商品goods区域 -->


       <!-- 其他 -->
       <!-- div.pannel  rest 其他 -->
       <!-- header nav section footer -->
        <section class="pannel rest">
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <div>
                <h5>买家备注</h5>
                <p>希望可以尽快发货，谢谢～</p>
            </div>
            <div>
                <h5>支付方式</h5>
                <p>支付宝<i class="iconfont icon-more"></i></p>
            </div>
        </section>
       <!-- 其他 -->


       <!-- 商品总价 -->
        <section class="pannel total">
            <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">
       <!-- left + right -->
       <div class="left">
        <!-- 合计和价格颜色不一样，单独把价格放一个标签 -->
        合计：<span class="red">¥<i>266.00</i></span>
       </div>
       <div class="right">
        <a href="#">去支付</a></div>
    </div>
    <!-- 底部支付：固定定位 -->
</body>
</html>

order.css代码

/* 主体内容：滑动查看 */
body {
    background-color: #f7f7f8;
}

/* 公共样式 */
.red {
    color: #cf4444;
}
/* 公共样式：面板pannel */
.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;
}

.user_msg .user .top p {
    font-size: 13px;
}

.user_msg .user .bottom p {
    font-size: 12px;
    margin-top: 5px;
    line-height: 18px;
}

.user_msg .more {
    width: 44px;
    height: 44px;
    /* background-color: pink; */
    text-align: center;
    line-height: 44px;
    color: #808080;
} 
/* 用户信息区域 */


/* 商品goods区域 */
.goods {
    display: flex;
    align-items: center;
    padding: 11px 0 11px 11px;
}

.goods .pic {
    width: 85px;
    height: 85px;
    margin-right: 12px;
}



.goods .info {
    flex: 1;
}

.goods .info h5 {
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
}

.goods .info p {
    width: 100px;
	height: 16px;
    margin: 5px 0;
    background-color: #f7f7f8;
	border-radius: 2px;
    font-size: 12px;
    color: #888888;

}

.goods .info p span:first-child {
    margin-right: 5px;
}

.goods .info .price {
    font-size: 12px;
}


.goods .info .price i {
    font-size: 16px;
    font-style: normal;
}


.goods .price span:last-child {
    font-size: 12px;
    color: #999999;
    margin-left: 5px;
    /* 删除线 */
    text-decoration: line-through;
}


.goods .count {
    width: 44px;
    height: 44px;
    margin-right: 5px;
    /* background-color: pink; */
    text-align: center;

}
/* 商品goods区域 */




/* rest其他模块 */
.rest {
    padding: 15px;
}

.rest div {
    display: flex;
    margin-bottom: 30px;

}

/* 第一个和第三个div设置主轴对齐方式 */
.rest div:nth-child(2n+1) {
    /* 主轴分布，分别分布在两端 */
    justify-content: space-between;
}

.rest h5,
p {
    font-size: 13px;
    /* 取消h5加粗 */
	font-weight: 400;
	line-height: 21px;
	color: #262626; 
}

.rest div:nth-child(2n) {
    display: flex;
}

.rest div:nth-child(2n) h5 {
    margin-right: 20px;
}


.rest div:nth-child(2n) p {
    font-size: 12px;
    color: #989898;
}

.rest div:last-child {
    margin-bottom: 0;
}

.rest div:last-child .iconfont {
    margin-left: 10px;
    width: 7px;
	height: 11px;
    color: #808080;
    line-height: 11px;
}
/* rest其他模块 */



/* 商品总价 */
.total {
    padding: 15px;
}

.total div {
    display: flex;
    margin-bottom: 30px;
    justify-content: space-between;
}

.total div h5,
span {
    font-size: 13px;
    /* 取消h5加粗 */
	font-weight: 400;
	line-height: 21px;
	color: #262626; 
}

.total div i {
    font-style: normal;
}

.total div:last-child {
    margin-bottom: 0;
}

/* 商品总价 */


/* 主体内容：滑动查看 */





/* 底部支付：固定定位 position:fixed */
.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;
    /* i标签是斜体，加normal就取消斜体了 */
    font-style: normal;
}


.pay .right a {
    /* a标签是行内元素，一行可显示多个，由内容撑开，变成块元素能设置宽高 */
    display: block;
    width: 91px;
	height: 35px;
    /* 渐变背景 */
	background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    /* 圆角 */
	border-radius: 3px;

    /* 去除a标签的下划线 */
    text-decoration: none;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
	line-height: 35px;
    font-size: 13px;
	color: #ffffff;
}

/* 底部支付：固定定位 */

base.css代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100%;
}

代码运行效果图

 

前端程序媛Ying
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
小兔仙注册案例
desson
03-29 347
立即执行函数(回顾) 多个立即执行函数用分号隔开 分号放在立即执行函数前面或者后面 ; (function () { }()) (function () { }()); 补充内容：chang事件与input和blur的区别 <input type="text" name="" id=""> <textarea name="" id="" cols="30" rows="10"></textarea> <s
小兔仙项目搭建
csdnlirui的博客
02-14 1440
一、项目样式补充 1.1精灵图 场景：多张小图合并成为一张大图，这张大图片称为精灵图。 优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度。 1.2精灵图使用步骤 1.创建一个盒子，设置盒子的尺寸和小图尺寸相同。 2.将精灵图设置为盒子的背景图片。 3.修改背景图位置。 /*background-image：px px；*/ 精灵图一般用行内标签-span-b-i 然后再修改css为块元素display： 2.1设置背景图片大小 background-size：宽度 高度；
小兔鲜（五个页面包含：登录，购物车等）
10-19
HTML期末大作业需要，做一个五个网页的网站，我就把之前在看黑马程序员的前端视频的时候写的小兔鲜儿网站改进了一下加了一点东西，然后增加了几个页面。
二、6-1小兔鲜确认订单移动端页面-flex-总结
m0_52766105的博客
10-28 458
Flex小兔鲜确认订单页面总结
移动web 第四天flex布局、实战演练小兔仙
12-25
移动web flex布局、实战演练小兔仙
移动端支付界面制作（小兔鲜项目）
绿色水杯
08-26 1271
代码 .html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>确认订单</title> <link rel="stylesheet" href="./l
css 选择器（选择第几倍的元素），nth-child（2n+1）
PrimaryColor
09-18 6191
直接上代码： 选择2倍的第一个元素： div:nth-child(2n+1) 选择2倍的第二个元素： div:nth-child(2n+2) 选择3倍的第一个元素： div:nth-child(3n+1) 选择3倍的第二个元素： div:nth-child(3n+2) 选择3倍的第三个元素： div:nth-child(3n+3) 以此类推。 ...
移动端布局——Flex布局
m0_45659764的博客
04-02 2063
一、Flex布局 思考 多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用) 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题 一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 1.1 Flex布局模型构成 作用 基于Fl...
二、小兔仙Vue3（项目介绍）
weixin_60968779的博客
05-28 3007
小兔仙Vue3项目介绍
小兔鲜静态页面（Html5+CSS3）
Concise200的博客
12-22 4049
小兔鲜静态页面1. 补充知识点精灵图背景图片大小盒子阴影过渡 1. 补充知识点 精灵图 介绍 使用步骤 例子 精灵图如下： 取第三个小图，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
html(10-小鲜兔儿项目)
热门推荐
缘友一世的博客
03-12 1万+
文章目录综合项目小兔鲜项目一 分析1 Header 部分开发2Footer 部分开发3 网站入口 xtx-entry 部分开发4 新鲜好物面板 xtx-new-goods 部分开发5 生鲜商品面板 xtx-fresh-goods 部分开发二 项目结构三 代码实现3.1 index.html 代码3.2 base.css 代码3.3 common.css 代码3.4 index.css 代码四 效果 综合项目小兔鲜项目 一 分析 1 Header 部分开发 2Footer 部分开发
html小兔鲜案例--部分代码
weixin_51237312的博客
03-27 2324
html案例部分代码
11-小兔鲜项目搭建-代码
小红果果的博客
08-03 4385
案例-小兔鲜
移动端布局
Lotus_fragrance的博客
05-09 233
1.移动端特点 PC端网页和移动端网页不同点 1.PC屏幕大，网页固定版心 2.手机屏幕小， 网页宽度多数为100% 如何在电脑里面边写代码边调试移动端网页效果？ 谷歌模拟器 谷歌模拟器 使用谷歌模拟器调试移动端网页 分辨率 屏幕尺寸： 指的是屏幕对角线的长度，一般用英寸来度量 了解移动端主流设备分辨率 PC分辨率 1920 * 1080 1366 * 768........... 缩放150% (1920.
vue3小兔鲜商城项目学习笔记+资料分享02
weixin_44125573的博客
11-10 4853
vue3小兔鲜商城项目学习笔记
移动端的一些小项目
Primary_Insist的博客
11-09 418
1.初始移动端----小兔鲜确认订单项目 2.rem移动端适配的使用-----游乐园项目 3.vw/vh移动端适配的使用-----哔哩哔哩项目 仓库地址：stage_project: 这里包含一些前端学习的针对某个知识点的阶段小项目 ...
小兔鲜儿电商前台项目（一） —— 项目初始化
ailsa_csdn的博客
04-07 3998
电商项目的初始化：搭建项目结构、配置代码规范
【每日一练】小兔鲜项目-01
qq_46580087的博客
01-23 3286
小兔鲜项目-01 头部快捷导航
vue黑马之小兔鲜首页组件案例
最新发布
m0_74577714的博客
12-29 860
素材领取：点我领取素材 提取码：1024 页面开发思路： 1.分析页面，按模块拆分组件，搭架子 (局部或全局注册) 2.根据设计图，编写组件html 结构 css 样式(已准备好) 3.拆分封装通用小组件 (局部或全局注册将来>通过js动态染，实现功能 父组件代码： <template> <div class="App"> <!-- 快捷链接 --> <XtxShortCut></XtxShortCut> <
黑马程序员前端 Vue3 小兔鲜电商项目——（十一）支付页
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
06-26 1424
黑马程序员前端 Vue3 小兔鲜电商项目——（十一）支付页
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值