移动端支付界面制作（小兔鲜项目）

代码
.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="./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="use-msg pannel"><div class="location"><i class="iconfont icon-location"></i></div><div class="use"><div class="top"><h5>李无敌</h5><p>1888888888</p></div><div class="bottom">中国大陆 北京市 </div></div><div class="more"><i class="iconfont icon-more"></i></div></div><!-- 用户信息 --><!-- 商品区域 --><div class="pannel goods"><div class="pic"><a href="#"><img src="./uploads/pic.png" alt=""></a></div><div class="info"><h5>康贝尔</h5><p><span>粉色</span> <span>红色体温计</span></p><div class="price"><span class="red">￥ <i>1</i></span><span>￥100</span></div></div><div class="count"><i class="iconfont icon-x"></i><span>1</span></div></div><!-- 商品区域 --><!-- 其他区域 --><section class="pannel rest"><div><h5>配送方式</h5><p>顺丰快递</p></div><div><h5>配送方式</h5><p>顺丰快递</p></div><div><h5>配送方式</h5><p>顺丰快递</p></div></section><!-- 其他区域 --></div><!-- 主题内容：滑动查看 --><!-- 底部内容：支付操作 --><div class="pay"><div class="left">合计：<span class="red">￥<i>466.00</i></span></div><div class="right"><a href="#">去支付</a></div></div><!-- 底部内容：支付操作 -->
</body>
</html>

.css

body {background-color: #f7f7f8;
}/* .red */
.red {color: #cf4444;
}/* 公共样式 */
.pannel {margin-bottom: 10px;background-color: #fff;border-radius: 5px;
}/* 主题内容：滑动查看 */
.main {padding: 12px 11px 80px;
}
/* 用户信息 */
.use-msg {display: flex;align-items: center;padding: 15px 0px 15px 11px;
}
.use-msg .location i {display: block;width: 30px;height: 30px;margin-right: 10px;text-align: center;line-height: 30px;background-image: linear-gradient(90deg,#6fc2aa 5%,#54b196 100%);border-radius: 50%;color: #fff;
}
.use-msg .use {flex: 1;
}
.use-msg .top {display: flex;
}
.use-msg .top h5 {width: 55px;
}
.use-msg .bottom {font-size: 12px;margin-top: 5px;
}
.use-msg .more i {display: block;width: 40px;height: 40px;text-align: center;line-height: 44px;color: #808080;
}/* 商品区域 */
.goods {align-items: center;padding: 11px 0px 11px 11px;display: flex;
}
.goods .pic {margin-right: 10px;width: 85px;
}
.goods .info {flex: 1;
}
.goods .count {width: 44px;height: 44px;text-align: center;line-height: 44px;
}
.goods .info h5 {font-size: 13px;color: #262626;font-weight: 400px;
}
.goods .info p {ruby-merge: 5px 0;width: 95px;height: 16px;color: #888888;font-size: 12px;background-color: #f7f7f8;
}
.goods .info p span:nth-child(1) {margin-right: 5px;
}
.goods .info .price {font-size: 12px;
}
.goods .info .price span:nth-child(1) {margin-right: 5px;
}
.goods .info .price span:nth-child(2) {color: #999999;text-decoration: line-through;
}
.goods .info .price i {font-size: 16px;
}/* 其他区域 */
.rest {padding: 13px;
}
.rest div {display: flex;margin-bottom: 30px;
}
.rest div:nth-child(3) {margin-bottom: 0px;
}
.rest div:nth-child(2n+1) {justify-content: space-between;
}
.rest div:nth-child(2) h5 {margin-right: 20px;
}
.rest div h5, .rest div p {font-size: 13px;color: #262626;font-weight: 400;
}
.rest div:nth-child(2) p {font-style: 12px;color: #989898;
}/* 主题内容：滑动查看 *//* 底部内容：支付操作 */
.pay {/* 这个支付界面肯定是要一直固定在末尾的，这样子就可以方便有用户进行支付 */position: fixed;display: flex;bottom: 0px;left: 0px;height: 78px;/* 宽度是要加的 */width: 100%;padding: 0 11px;border: 1PX solid #ededed;justify-content: space-between;align-items: center;
}
.pay .left {font-size: 12px;
}
.pay .left i {font-size: 20px;}
.pay .right a {display: block;width: 90px;height: 35px;border-radius: 3px;text-align: center;line-height: 35px;color: #ffffff;font-size: 13px;background-image: linear-gradient(90deg,#6fc2aa 5%,#54b196 100%);
}

补充：大体框架就是这样子，具体参数值需要修改。

总结：这个是移动端的支付界面，使用的是flex弹性布局效果，对于中间的这一部分内容，就是可以使用将中间内容中设置为填充满设于空间的知识就可以了。还有就是所有的细节都需要使用标签进行包裹，以便于后期进行数据修改。如果中间没有内容的话，就可以使用主轴上的布局显示效果，between，这样子就可以将两个盒子分别贴左右边了，还有就是可以使用侧轴居中效果将盒子居中显示。flex布局不仅仅使用于移动端业务，还可以适用于PC端业务因为flex布局就是为了布局而生，这样就可以避免使用浮动技术了。

移动端支付界面制作（小兔鲜项目）相关推荐

【每日一练】小兔鲜项目-01
今天终于接触到了小兔鲜项目,之前在前端群里一直听到有人提起过. 下面开始分析一下小兔鲜: 首先,搭建框架,创建小兔鲜文件夹. 1.创建项目目录: 2.然后搭建index页面 <!DOCTYPE ...
前端vue3.0小兔鲜项目
博主收集到了一个完整的项目前端vue3.0框架的小兔鲜项目,学习前端的小伙伴可以找我来领. 完整的教学视频+代码+笔记项目地址:http://erabbit.itheima.net/ 需要的联系q ...
小兔鲜项目-原生JS实现页面放大镜效果模块
目录 1. 项目搭建 1.1 在项目开始之前,先做好准备工作,创建这样的文件目录 1.1.1 css文件夹 1.1.2 images文件 1.1.3 uploads文件 1.2 HTML结构 1.2. ...
小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript
目录 1. 项目搭建 1.1 在项目开始之前,先做好准备工作,创建这样的文件目录,git和vscode直接忽略. 1.1.1 css文件夹 1.1.2 images文件 1.1.3 js文件 1.1. ...
2、小兔鲜项目-文件+目录准备
新建项目文件夹 xtx-pc-client,在VScode中打开 • 在实际开发中,项目文件夹不建议使用中文 • 所有项目相关文件都保存在 xtx-pc-client 目录中复制 favicon.i ...
小兔鲜项目搭建-精灵图、背景图片大小、盒子阴影、过渡
1.1精灵图: 使用步骤: 1.创建一个盒子,设置盒子的尺寸和小图尺寸相同 2.将精灵图设置为盒子的背景图片 3.修改背景图位置精灵图的标签一般都用行内标签,如span,b,i: 背景图位置属性:b ...
vue3小兔鲜商城项目学习笔记+资料分享01
最近正在学习vue3小兔鲜,需要相关学习资料的可以点链接 https://docs.qq.com/doc/DUmhUVERtUHpLaG1a 下面试学习笔记项目起步项目预览地址小兔鲜儿商城:ht ...
制作网站首页（小兔鲜儿电商购物平台）
目录项目前置分析布局头部模块底部模块项目前置 <!DOCTYPE html> <html lang="zh-CN"> <head>&l ...
vue3小兔鲜商城项目学习笔记+资料分享06
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记购物车模块购物车功能分析 [外链图片转存失败,源站可能有防盗链机制, ...

移动端支付界面制作（小兔鲜项目）

移动端支付界面制作（小兔鲜项目）相关推荐

最新文章

热门文章