移动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。

相关文章

Go学习记录之runtime包深入解析

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,：本文主要介绍Go学习记录之runtime包的... 目录前言：一、runtime包内容学习1、作用：① Goroutine和并发控制：② 垃圾回收：③ 栈和
阅读更多...
springboot加载不到nacos配置中心的配置问题处理

springboot加载不到nacos配置中心的配置问题处理

《springboot加载不到nacos配置中心的配置问题处理》：本文主要介绍springboot加载不到nacos配置中心的配置问题处理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录springboot加载不到nacos配置中心的配置两种可能Spring Boot 版本Nacos
阅读更多...
Nacos注册中心和配置中心的底层原理全面解读

Nacos注册中心和配置中心的底层原理全面解读

《Nacos注册中心和配置中心的底层原理全面解读》：本文主要介绍Nacos注册中心和配置中心的底层原理的全面解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录临时实例和永久实例为什么 Nacos 要将服务实例分为临时实例和永久实例?1.x 版本和2.x版本的区别
阅读更多...
Android学习总结之Java和kotlin区别超详细分析

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,：本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1：Kotlin 如何解决 Java 的 NullPointerExceptio
阅读更多...
python web 开发之Flask中间件与请求处理钩子的最佳实践

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1
阅读更多...
SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

《SpringCloud使用Nacos配置中心实现配置自动刷新功能使用》SpringCloud项目中使用Nacos作为配置中心可以方便开发及运维人员随时查看配置信息,及配置共享,并且Nacos支持配... 目录前言一、Nacos中集中配置方式？二、使用步骤1.使用$Value 注解2.使用@Configur
阅读更多...
SpringBoot项目Web拦截器使用的多种方式

SpringBoot项目Web拦截器使用的多种方式

《SpringBoot项目Web拦截器使用的多种方式》在SpringBoot应用中,Web拦截器（Interceptor）是一种用于在请求处理的不同阶段执行自定义逻辑的机制,下面给大家介绍Sprin... 目录一、实现 HandlerInterceptor 接口1、创建HandlerInterceptor实
阅读更多...
Web技术与Nginx网站环境部署教程

Web技术与Nginx网站环境部署教程

《Web技术与Nginx网站环境部署教程》：本文主要介绍Web技术与Nginx网站环境部署教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Web基础1.域名系统DNS2.Hosts文件3.DNS4.域名注册二.网页与html1.网页概述2.HTML概述3.
阅读更多...
Python使用Reflex构建现代Web应用的完全指南

Python使用Reflex构建现代Web应用的完全指南

《Python使用Reflex构建现代Web应用的完全指南》这篇文章为大家深入介绍了Reflex框架的设计理念,技术特性,项目结构,核心API,实际开发流程以及与其他框架的对比和部署建议,感兴趣的小伙... 目录什么是 ReFlex？为什么选择 Reflex？安装与环境配置构建你的第一个应用核心概念解析组件
阅读更多...
Nginx使用Keepalived部署web集群（高可用高性能负载均衡）实战案例

Nginx使用Keepalived部署web集群（高可用高性能负载均衡）实战案例

《Nginx使用Keepalived部署web集群（高可用高性能负载均衡）实战案例》本文介绍Nginx+Keepalived实现Web集群高可用负载均衡的部署与测试,涵盖架构设计、环境配置、健康检查、... 目录前言一、架构设计二、环境准备三、案例部署配置 前端 Keepalived配置 前端 Nginx
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2