移动Web学习04-移动端订单结算页PC端个人中心页面

2024-04-06 11:04
文章标签 学习 web 页面 04 个人 订单 移动 中心 pc 结算

本文主要是介绍移动Web学习04-移动端订单结算页PC端个人中心页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

5、电商结算页面案例

image-20240405171930209

css

body{background-color: #F2F2F2;
}
* {box-sizing: border-box;margin: 0;padding: 0;
}.main{padding: 12px 11px 80px;
}.pay{display: flex;height: 80px;background-color: #fff;bottom: 0;width: 100%;border-top: 1px solid #ededed;position: fixed;padding: 0 10px;/* 两边元素贴边 */justify-content: space-between;/* 沿侧轴居中对齐 */align-items: center;
}
.pay .pay-left{font-size: 12px;color: #1e1e1e;
}.pay .pay-left span{color: #cf4444;
}.pay .pay-left span i{font-size: 20px;font-style: normal;font-weight: 700px;
}
.pay .pay-right{width: 91px;height: 35px;text-align: center;line-height: 35px;color: #fff;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);border-radius: 3px;
}.pay .pay-right a{width: 42px;height: 35px;font-size: 13px;color: #ffffff;line-height: 35px;font-family: MicrosoftYaHei;text-decoration: none;text-align: center;font-weight: normal;font-stretch: normal;letter-spacing: 0px;
}.pannel{background-color: #fff;border-radius: 5px;margin-bottom: 10px;
}
.user_msg{display: flex;padding: 15px 0 15px 11px;align-items: center;
}.user_msg .location{width: 30px;height: 30px;background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);color: #fff;text-align: center;line-height: 30px;margin-right: 15px;border-radius: 50%;
}
.user{flex: 1;
}
.user .top{display: flex;justify-content: flex-start;align-items: center;
}
.user .top h5 {width: 55px;font-size: 15px;font-weight: 400;
}
.user .top p {font-size: 13px;margin-left: 15px;
}.user .bottom{margin-top: 5px;font-size: 12px;
}
.more{width: 44px;height: 44px;/* background-color: #2ad1ff; */text-align: center;line-height: 44px;color: #808080;/* border: 1px solid #3a9cff; */
}.product{padding: 11px 0px 11px  11px;display: flex;align-items: center;
}
.pic{width: 85px;height: 85px;/* background-color: pink;  */
}
.txt{flex: 1;margin: 0px 12px;
}
.txt h5{font-size: 13px;color: #262626;font-weight: 400;/* 多行文本溢出 */display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 2;overflow:hidden;text-overflow: ellipsis;
}
.count{width: 44px;height: 44px;text-align: center;line-height: 44px;background-color: skyblue;
}
.txt .goods_style{display: inline;font-size: 11px;height: 16px;letter-spacing: 0px;color: #888888;background-color: #f1f1f1;padding: 0px 4px;border-radius: 2px;
}/* 我这里span写错了 */
.txt .goods_style span:first-child{margin-right: 10px;
}.txt .goods_price{color: #999;font-size: 12px;margin-top: 3px;
}
.txt .goods_price i,
.txt .goods_price em{font-size: 10px;
}
.txt .goods_price i{color: #cf4444;
}
.txt .goods_price span{font-size: 16px;color: #cf4444;margin-right: 12px;
}.other{padding: 11px;
}.other ul li{display: flex;align-items: center;margin-bottom: 25px;color: #262626;font-size: 13px;
}
.other ul li h5{font-weight: 400px;
}
/* 选中计数行 old */
.other ul li:nth-child(2n+1){justify-content: space-between;
}
/* 选中最后一行让下边距变为0  */
.other ul li:last-child{margin-bottom: 0;
}.other ul li:nth-child(2) p{font-size: 12px;margin-left: 19px;
}.other ul li i{color: #808080;font-size: 13px;margin-right: 2px; 
}

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><title>填写订单</title><!-- 引入初始化的css文件 --><link rel="stylesheet" href="./css/base.css"><!-- 引入字体图标的css文件 --><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><!-- 引入自己的css文件 --><link rel="stylesheet" href="./css/order.css">
</head>
<body><!-- main 主体内容 start--><div class="main"><!-- 用户信息 start --><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><!-- 用户信息 end --><!-- 商品信息 start --><div class="pannel product"><div class="pic"><a href=""><img src="./uploads/pic.png" alt=""></a></div><div class="txt"><h5>康尔贝 非接触式红外体温仪领券立减30元 婴儿级材质 测温测温测温测温测温</h5><p class="goods_style"><span class="firstSpan">粉色</span><span>红外体温计</span></p><p class="goods_price"><i>¥</i><span>266</span> <em>¥</em><del>299</del></p></div><div class="count"><i class="iconfont icon-x"></i><span>1</span></div></div><!--  商品信息 end --><!--  其他信息start --><div class="pannel other"><ul><li><h5>配送方式</h5><p>顺丰快递</p></li><li><h5>买家备注</h5><p>希望可以快点发货</p></li><li><h5>支付方式</h5><p>支付宝<i class="iconfont icon-more"></i></p></li></ul></div><!-- 其他信息end --><!--  配送信息start --><div class="pannel other"><ul><li><h5>商品总价</h5><p>￥299.00</p></li><li><h5>运费</h5><p>￥0.00</p></li><li><h5>折扣</h5><p>-￥30.00</p></li></ul></div><!-- 其他信息end --><!--  配送信息start --><div class="pannel other"><ul><li><h5>商品总价</h5><p>￥299.00</p></li><li><h5>运费</h5><p>￥0.00</p></li><li><h5>折扣</h5><p>-￥30.00</p></li></ul></div><!-- 其他信息end --></div><!-- main 主体内容 end--><!-- pay底部支付 start --><div class="pay"><div class="pay-left">合计:<span>￥<i>266.00</i></span></div><div class="pay-right"><a href="#">去支付</a></div></div><!--pay底部支付 end -->
</body>
</html>

6、PC端个人中心案例

image-20240405172136989

css代码

.xtx-boy {background-color: #f4f4f4;padding: 30px 0 85px;
}
.xtx-boy .container{display: flex;justify-content: space-between;
}
.xtx-boy .container .aside{width: 227px;height: 500px;background-color: palegreen;}.xtx-boy .container .main{width: 999px;/* 回头再删除 让里面的内容撑开就行 *//* height: 500px; */background-color: orange;
}.main .overview{display: flex;background-color: #fff;padding: 20px 0px;height: 132px;margin-bottom: 18px;
}
/* 每个div占一份 */
.overview div{flex: 1;display: flex;justify-content: space-evenly;align-items: center;text-align: center;
}
.overview div a{display: flex;height: 55px;/* 改变主轴方式 */flex-direction: column;align-items: center;/* 上下居中 */justify-content: space-between;
}
.overview div:first-child{border-right: 1px solid #f1f1f1;
}/* .overview div img{ *//* width: 25px;height: 22px; *//* margin-bottom: 7px;
} */
.overview  span{color: #e05e30;font-size: 25px;height: 30px;display: block;line-height: 25px;
}
.pannel{background-color: #fff;padding: 28px 19px;margin-bottom: 20px; 
}
.paner-title{font-size: 16px;color: #333;/* background: pink; */height: 45px;display: flex;justify-content: space-between;
}
.paner-title h4{font-size: 22px;font-weight: 400;
}
.paner-title a{color: #999;font-family: simsum;margin-top: 5px;margin-right: 15px;
}.content li{display: flex;border: 1px solid #ccc;height: 137px;margin-bottom: 20px;font-size: 14px;
}
.content li:last-child{margin-bottom: 0;
}
.content .goods{flex:1;display: flex;align-items: center;
}
.content .goods .pic{width: 107px;height: 107px;background-color: pink;margin: 0 5px 0 12px;
}
.content .goods .pic img{width: 107px;height: 107px;
}.content .goods .txt h5{font-size: 16px;font-weight: 400;margin-bottom: 10px;/* 溢出隐藏 */width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; 
}
.content .state{width: 200px;/* line-height: 135px; */text-align: center;padding-top: 50px; color: #e05e30;
}.content .state p:nth-child(2){color: #999;
}
.content .price{display: flex;flex-direction: column;justify-content: center;align-items: center;/* text-align: center;padding-top: 30px; */width: 200px;border-left: 1px solid #ccc;border-right: 1px solid #ccc;
}
.content .price p:first-child{color: #9a2e1f;
}
.content .pay{width: 180px;
}
.content .pay{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 180px;
}
.content .pay p:nth-child(1){width: 100px;height: 30px;background-color:  #5eb69c;text-align: center;line-height: 30px;color: #fff;margin-bottom: 10px;border-radius: 2px;
}

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><!-- 网站说明 --><meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。"><!-- 关键字 --><meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入初始化文件 css reset base.css --><link rel="stylesheet" href="./css/base.css"><!-- 引入common.css  公共的头部和底部 --><link rel="stylesheet" href="./css/common.css"><!--引入center.css  公共的头部和底部 --><link rel="stylesheet" href="./css/cente2.css"></head><body><!-- 头部模块开始 --><header><!-- 快捷导航 --><div class="xtx-shortcut"><div class="container"><ul><li><a href="#">请先登录</a></li><li class="sep">|</li><li><a href="#">免费注册</a></li><li class="sep">|</li><li><a href="#">我的订单</a></li><li class="sep">|</li><li><a href="#">会员中心</a></li><li class="sep">|</li><li><a href="#">帮助中心</a></li><li class="sep">|</li><li><a href="#">在线客服</a></li><li class="sep">|</li><li><a href="#"><i></i>手机版</a></li></ul></div></div><!-- 导航栏 --><div class="xtx-main-nav container"><!-- logo --><div class="logo"><h1><a href="./index.html" title="小兔鲜儿">小兔鲜儿</a></h1></div><!-- nav --><nav class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">生鲜</a></li><li><a href="#">美食</a></li><li><a href="#">餐厨</a></li><li><a href="#">电器</a></li><li><a href="#">居家</a></li><li><a href="#">洗护</a></li><li><a href="#">孕婴</a></li><li><a href="#">服装</a></li></ul></nav><!-- search --><div class="search"><input type="text" placeholder="搜一搜"></div><!-- car --><a href="#" class="car"><span>2</span></a></div></header><!-- 头部模块结束 --><!-- 用户中心内容区域 start--><div class="xtx-boy"><div class="container"><!-- 左侧内容 --><div class="aside">123</div><!-- 右侧内容 --><div class="main"><!-- 右侧第一个盒子（会员中心，优惠卷） --><div class="overview"><div class="overview-left"><a href=""><img src="./images/vip.png" alt="" width="25" height="22"><p>会员中心</p></a><a href=""><img src="./images/safe.png" alt="" width="25" height="22"><p>安全设置</p></a><a href=""><img src="./images/address.png" alt=""  width="18" height="25"><p>地址管理</p></a></div><div class="overview-right"><a href=""><span>6</span><p>优惠卷</p></a><a href=""><span>70</span><p>礼品卡</p></a><a href=""><span>120</span><p>积分</p></p></p></a></div></div><!-- 订单模块 start--><div class="pannel order"><!-- 我的订单头部 start --><div class="paner-title"><h4>我的订单</h4><a href="#">查看全部 &gt;</a></div><!-- 我的订单头部 end --><!-- 我的订单内容 start--><div class="content"><ul><li><div class="goods"><div class="pic"><img src="./uploads/order_goods_1.jpg" alt=""></div><div class="txt"><h5>拉夫劳伦T恤男正品圆领短袖</h5><p>颜色: 白色 尺码: M 数量: 1</p></div></div><div class="state"><p>代付款</p><p>查看物流</p></div><div class="price"><p>￥99.00</p><p>(含运费：￥10.00)</p><p>在线支付</p></div><div class="pay"> <p>立即付款</p><p>查看详情</p><p>取消订单</p></div></li><li><div class="goods"><div class="pic"><img src="./uploads/order_goods_1.jpg" alt=""></div><div class="txt"><h5>拉夫劳伦T恤男正品圆领短袖</h5><p>颜色: 白色 尺码: M 数量: 1</p></div></div><div class="state"><p>代付款</p><p>查看物流</p></div><div class="price"><p>￥99.00</p><p>(含运费：￥10.00)</p><p>在线支付</p></div><div class="pay"> <p>立即付款</p><p>查看详情</p><p>取消订单</p></div></li><li><div class="goods"><div class="pic"><img src="./uploads/order_goods_1.jpg" alt=""></div><div class="txt"><h5>拉夫劳伦T恤男正品圆领短袖</h5><p>颜色: 白色 尺码: M 数量: 1</p></div></div><div class="state"><p>代付款</p><p>查看物流</p></div><div class="price"><p>￥99.00</p><p>(含运费：￥10.00)</p><p>在线支付</p></div><div class="pay"> <p>立即付款</p><p>查看详情</p><p>取消订单</p></div></li><li><div class="goods"><div class="pic"><img src="./uploads/order_goods_1.jpg" alt=""></div><div class="txt"><h5>拉夫劳伦T恤男正品圆领短袖</h5><p>颜色: 白色 尺码: M 数量: 1</p></div></div><div class="state"><p>代付款</p><p>查看物流</p></div><div class="price"><p>￥99.00</p><p>(含运费：￥10.00)</p><p>在线支付</p></div><div class="pay"> <p>立即付款</p><p>查看详情</p><p>取消订单</p></div></li></ul></div><!-- 我的订单内容 end --></div><!-- 订单模块 end--></div></div></div><!-- 用户中心内容区域  end--><!-- 底部开始 --><footer><!-- 上盒子 --><div class="footer-t"><div class="container"><dl class="customer"><dt>客户服务</dt><dd class="zaixian"><a href="#"><p>在线客服</p></a></dd><dd class="wenti"><a href="#"><p>问题反馈</p></a></dd></dl><dl class="us"><dt>关注我们</dt><dd class="gongzhonghao"><a href="#"><p>公众号</p></a></dd><dd class="weibo"><a href="#"><p>微博</p></a></dd></dl><!-- 下载模块 --><dl class="download"><dt>下载APP</dt><dd class="qrcode"><img src="./uploads/qrcode.png" alt=""></dd><dd class="down"><p>扫描二维码</p><p>立马下载APP</p><a href="#">下载页面</a></dd></dl><!-- 热线模块 --><dl class="hotline"><dt>服务热线</dt><dd><p>400-0000-000</p><p>周一至周日 8:00-18:00</p></dd></dl></div></div><!-- 下盒子 --><div class="footer-b"><!-- 服务模块 --><div class="xtx-service"><a href="#">价格亲民</a><a href="#">物流快捷</a><a href="#">品质新鲜</a></div><!-- 版权模块 --><div class="xtx-copyright"><p><a href="#">关于我们</a> |<a href="#">帮助中心</a> |<a href="#">售后服务</a> |<a href="#">配送与验收</a> |<a href="#">商务合作</a> |<a href="#">搜索推荐</a> |<a href="#">友情链接</a></p><p>CopyRight @ 小兔鲜儿</p></div></div></footer><!-- 底部结束 -->
</body></html>

这篇关于移动Web学习04-移动端订单结算页PC端个人中心页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/879742。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
跨国公司撤出在华研发中心的启示：中国IT产业的挑战与机遇

跨国公司撤出在华研发中心的启示：中国IT产业的挑战与机遇

近日，IBM中国宣布撤出在华的两大研发中心，这一决定在IT行业引发了广泛的讨论和关注。跨国公司在华研发中心的撤出，不仅对众多IT从业者的职业发展带来了直接的冲击，也引发了人们对全球化背景下中国IT产业竞争力和未来发展方向的深思。面对这一突如其来的变化，我们应如何看待跨国公司的决策？中国IT人才又该如何应对？中国IT产业将何去何从？本文将围绕这些问题展开探讨。 跨国公司撤出的背景与
阅读更多...
学习hash总结

学习hash总结

2014/1/29/   最近刚开始学hash，名字很陌生，但是hash的思想却很熟悉，以前早就做过此类的题，但是不知道这就是hash思想而已，说白了hash就是一个映射，往往灵活利用数组的下标来实现算法，hash的作用：1、判重；2、统计次数；
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程（Gaussian Process，简称GP）是一种概率模型，用于描述一组随机变量的联合概率分布，其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数（或核函数） 1.3 核函数1.4 高斯过程回归（Gauss
阅读更多...
Java Web指的是什么

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用，主要通过Java EE（Enterprise Edition）平台来实现。  主要特点和技术包括： 1. Servlets和JSP：     Servlets 是Java编写的服务器端程序，用于处理客户端请求和生成动态网页内容。     JSP（JavaServer Pages）
阅读更多...
【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络（1）sklearn

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络（1）sklearn

系列文章目录 监督学习：参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归（SAheart.csv） 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2