当前位置：网站首页>Flex开发网页实例web端
Flex开发网页实例web端
2022-07-28 00:36:00 【小琳爱分享】
目标图形
详细的请看代码中的注释
基本框架样式
**H5**
<!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/order1.css">
</head>
<body></body>
</html>
**order1.css
编辑样式的css**
body{
background-color:#f7f7f8;
}
/* 主体内容：上下滑动 */
.main{
/* 此处给底部的边距是为了防止滑到底下被脱标的菜单栏
压住，底部边距距离是底部菜单栏的高度高一点点 */
margin: 12px 11px 80px 11px;
/* background-color:red; */
}
**base.css 清空无关样式**
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 16px/1.5 sans-serif;
color: #333;
background-color: #fff;
}
li {
list-style: none;
}
em,
i {
font-style: normal;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
color: #5eb69c;
}
img {
width: 100%;
vertical-align: middle;
}
input {
padding: 0;
border: none;
outline: none;
color: #333;
}
button {
cursor: pointer;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
一.底部支付栏
H5代码块
<!-- 底部支付：固定定位 -->
<div class="pay">
<div class="left">
<!-- 价格是要变动的，另写一个i标签 -->
合计：<span>￥<i>266.00</i></span>
</div>
<div class="right pannel">
<a href="#" alt="">去支付</a>
</div>
</div>
<!-- 底部支付：固定定位 -->
CSS代码块
/* 设置基本都有的样式 */
.pannel{
margin-bottom: 10px;
background-color:#fff;
border-radius: 5px;
}
/* 底部支付：固定定位 */
.pay{
position: fixed;
left: 0px;
bottom: 0px;
/* 前三行代码 此时用fixed定位是脱标的，不显示宽度了 */
width: 100%;
/* 加上100%的宽度，就可以显示出来了 */
height: 80px;
border-top: 1px solid #ededed;
display:flex;
padding: 0 11px;
/* 主轴对齐方式，将剩余的空间放到两个元素中间 */
justify-content: space-between;
/* 侧轴对齐方式 */
align-items: center;
}
.pay .left{
font-size: 12px;
color: #1e1e1e;
}
.pay .left span{
font-size: 11px;
color: #cf4444;
}
.pay .left i{
font-size: 20px;
color: #cf4444;
}
.pay .right a{
/* a标签不能展示高度，需要用block转换为块元素 */
display: block;
width: 91px;
height: 35px;
border-radius: 3px;
/* 渐变色 */
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
font-size: 13px;
text-align: center;
line-height: 35px;
letter-spacing: 0px;
color: #ffffff;
}
二.头部信息栏
H5代码块
<!-- 主体内容：上下滑动 -->
<div class="main ">
<!-- 用户信息 -->
<div class="user_msg pannel">
<div class="location">
<span class="iconfont icon-location"></span>
</div>
<div class="user">
<div class="nametel">
<!-- 方便后期的交互使用行内标签分别框住 -->
<h5>林丽</h5>
<span>18500667882</span></div>
<div class="dizhi">北京市 海淀区 中关村软件园 信息科技大厦1号
楼410# </div>
</div>
<div class="more">
<span class="iconfont icon-more"></span>
</div>
</div>
</div>
<!-- 主体内容：上下滑动 -->
CSS代码块
.user_msg{
display:flex;
/* width: 354px; */
height: 85px;
align-items: center;
padding: 15px 0 15px 11px;
display:flex;
}
/* flex伸缩比布局 */
.user_msg user{
flex: 1;
}
.user_msg .location{
width: 30px;
height: 30px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border-radius: 50%;
line-height: 30px;
/* iconfont与字体类似，可以用字体的格式编辑 */
text-align: center;
color: white;
/* 图标与右边字的间距 */
margin-right:10px;
}
.user_msg .user .nametel{
display: flex;
width: 137px;
height: 14px;
font-size: 15px;
color: #262626;
}
.user_msg .user .nametel h5{
/* 是为了名字比较长的考虑 */
width: 55px;
}
.user_msg .user .dizhi{
margin-top:13px;
width: 260px;
height: 30px;
font-size: 12px;
line-height: 18px;
letter-spacing: 0px;
color: #333333;
}
.user_msg .more{
width: 44px;
height: 44px;
background-color: #2ad1ff;
border: solid 1px #3a9cff;
text-align: center;
line-height: 44px;
color:#808080;
}
三.其他信息栏
注意：部分样式使用了通用样式，可以去上面查看
H5代码块
<!-- 其他 -->
<!-- web端对标签没有册数要求，可以用div，也可以用其他的 -->
<section class="pannel rest">
<div class="div">
<h5>配送方式</h5>
<p>顺丰快递</p>
</div>
<div class="div">
<h5>买家备注</h5>
<p>希望可以尽快发货，谢谢~</p>
</div>
<div class="div">
<h5>支付方式</h5>
<!-- 小箭头使用的阿里额度图标 -->
<p>支付宝<i class="iconfont icon-more"></i></p>
</div>
</section>
<!-- 其他 -->
CSS代码块
/* 其他信息 */
.rest{
/* 上下左右都设置padding */
padding: 15px;
}
.rest .div{
display: flex;
margin-bottom: 30px;
}
.rest div:last-child{
margin-bottom: 0px;
}
.rest div:last-child p i{
font-size: 11px;
margin-left: 9px;
}
/* 找到第一个第三个设置主轴对齐方式，奇数对齐法 */
.rest div:nth-child(2n+1){
justify-content: space-between;
}
.rest .div h5{
font-size: 13px;
/* 不加粗 font-weight设置为400; */
font-weight: 400;
color: #262626;
}
.rest .div p{
font-size: 13px;
color: #262626;
}
.rest .div:nth-child(2) p{
margin-left: 22px;
font-size: 12px;
line-height: 21px;
color: #989898;
}
四.所有代码，最后一栏没做。
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/order1.css">
</head>
<body>
<!-- 主体内容：上下滑动 -->
<div class="main ">
<!-- 用户信息 -->
<div class="user_msg pannel">
<div class="location">
<span class="iconfont icon-location"></span>
</div>
<div class="user">
<div class="nametel">
<!-- 方便后期的交互使用行内标签分别框住 -->
<h5>林丽</h5>
<span>18500667882</span></div>
<div class="dizhi">北京市 海淀区 中关村软件园 信息科技大厦1号
楼410# </div>
</div>
<div class="more">
<span class="iconfont icon-more"></span>
</div>
</div>
<!-- 商品信息 -->
<div class="goods pannel">
<div class="pic">
<a href="#" ><img src="./uploads/pic.png"></a>
</div>
<!-- 各种套标签,是为了后期企业级换数据，可学习 -->
<div class="info">
<h5>康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温…</h5>
<p><span>粉色</span> <span>红外体温计</span></p>
<div class="price">
<span>¥<i>266</i></span>
<span>¥<i>299</i></span>
</div>
</div>
<div class="count">
<span class="iconfont icon-x"></span>
<span>1</span>
</div>
</div>
<!-- 商品信息 -->
<!-- 其他 -->
<!-- web端对标签没有册数要求，可以用div，也可以用其他的 -->
<section class="pannel rest">
<div class="div">
<h5>配送方式</h5>
<p>顺丰快递</p>
</div>
<div class="div">
<h5>买家备注</h5>
<p>希望可以尽快发货，谢谢~</p>
</div>
<div class="div">
<h5>支付方式</h5>
<!-- 小箭头使用的阿里额度图标 -->
<p>支付宝<i class="iconfont icon-more"></i></p>
</div>
</section>
<!-- 其他 -->
</div>
<!-- 主体内容：上下滑动 -->
<!-- 底部支付：固定定位 -->
<div class="pay">
<div class="left">
<!-- 价格是要变动的，另写一个i标签 -->
合计：<span>￥<i>266.00</i></span>
</div>
<div class="right pannel">
<a href="#" alt="">去支付</a>
</div>
</div>
<!-- 底部支付：固定定位 -->
</body>
</html>
CSS代码块
body{
background-color:#f7f7f8;
}
/* 主体内容：上下滑动 */
.main{
/* 此处给底部的边距是为了防止滑到底下被脱标的菜单栏
压住，底部边距距离是底部菜单栏的高度高一点点 */
margin: 12px 11px 80px 11px;
/* background-color:red; */
}
/* 设置基本都有的样式 */
.pannel{
margin-bottom: 10px;
background-color:#fff;
border-radius: 5px;
}
/* 头部信息 */
.user_msg{
display:flex;
/* width: 354px; */
height: 85px;
align-items: center;
padding: 15px 0 15px 11px;
display:flex;
}
/* flex伸缩比布局 */
.user_msg user{
flex: 1;
}
.user_msg .location{
width: 30px;
height: 30px;
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
border-radius: 50%;
line-height: 30px;
/* iconfont与字体类似，可以用字体的格式编辑 */
text-align: center;
color: white;
/* 图标与右边字的间距 */
margin-right:10px;
}
.user_msg .user .nametel{
display: flex;
width: 137px;
height: 14px;
font-size: 15px;
color: #262626;
}
.user_msg .user .nametel h5{
/* 是为了名字比较长的考虑 */
width: 55px;
}
.user_msg .user .dizhi{
margin-top:13px;
width: 260px;
height: 30px;
font-size: 12px;
line-height: 18px;
letter-spacing: 0px;
color: #333333;
}
.user_msg .more{
width: 44px;
height: 44px;
background-color: #2ad1ff;
border: solid 1px #3a9cff;
text-align: center;
line-height: 44px;
color:#808080;
}
/* 头部信息 */
/* 商品信息 */
.goods{
padding: 11px 0 11px 11px;
display: flex;
}
/* 商品图片 */
.goods .pic{
width:85px;
height: 85px;
border-radius: 5px;
margin-right: 10px;
}
/* 商品信息 */
.goods .info{
flex: 1;
}
.goods .info h5{
font-size: 13px;
color: #262626;
font-weight: 400;
}
.goods .info p{
width: 95px;
height: 20px;
margin: 5px 0;
background-color:#f7f7f8;
font-size:12px;
color: #888;
}
.goods .info p span:first-child{
margin-right: 5px;
}
.goods .info .price{
font-size:12px;
}
.goods .info .price i{
font-size:16px;
}
.goods .info .price span:last-child{
color:#999;
margin-left: 5px;
text-decoration: line-through;
}
/* 商品数量 */
.goods .count{
width: 44px;
height: 44px;
/* background-color:red; */
text-align: center;
line-height: 44px;
}
/* 其他信息 */
.rest{
/* 上下左右都设置padding */
padding: 15px;
}
.rest .div{
display: flex;
margin-bottom: 30px;
}
.rest div:last-child{
margin-bottom: 0px;
}
.rest div:last-child p i{
font-size: 11px;
margin-left: 9px;
}
/* 找到第一个第三个设置主轴对齐方式，奇数对齐法 */
.rest div:nth-child(2n+1){
justify-content: space-between;
}
.rest .div h5{
font-size: 13px;
/* 不加粗 font-weight设置为400; */
font-weight: 400;
color: #262626;
}
.rest .div p{
font-size: 13px;
color: #262626;
}
.rest .div:nth-child(2) p{
margin-left: 22px;
font-size: 12px;
line-height: 21px;
color: #989898;
}
/* 底部支付：固定定位 */
.pay{
position: fixed;
left: 0px;
bottom: 0px;
/* 前三行代码 此时用fixed定位是脱标的，不显示宽度了 */
width: 100%;
/* 加上100%的宽度，就可以显示出来了 */
height: 80px;
border-top: 1px solid #ededed;
display:flex;
padding: 0 11px;
/* 主轴对齐方式，将剩余的空间放到两个元素中间 */
justify-content: space-between;
/* 侧轴对齐方式 */
align-items: center;
}
.pay .left{
font-size: 12px;
color: #1e1e1e;
}
.pay .left span{
font-size: 11px;
color: #cf4444;
}
.pay .left i{
font-size: 20px;
color: #cf4444;
}
.pay .right a{
/* a标签不能展示高度，需要用block转换为块元素 */
display: block;
width: 91px;
height: 35px;
border-radius: 3px;
/* 渐变色 */
background-image: linear-gradient(90deg,
#6fc2aa 5%,
#54b196 100%);
font-size: 13px;
text-align: center;
line-height: 35px;
letter-spacing: 0px;
color: #ffffff;
}
+base.css开头写了
边栏推荐
- IT这个岗位，人才缺口百万，薪资水涨船高，上不封顶
- 云原生爱好者周刊：Prometheus 架构演进之路
- ros2 launch文件常用模块
- Open source flight control (Px4, ardupilot)
- 机器学习如何做到疫情可视化——疫情数据分析与预测实战
- 你所不知道的WMS
- Netease cloud copywriting
- In the era of great changes in material enterprises, SRM supplier procurement system helps enterprises build a digital benchmark for property procurement
- 忘记root密码
- Graph theory analysis of white matter brain function network: neural markers for classification and prediction of depression
猜你喜欢
Packet capturing wizard netcapture app packet capturing tutorial "complete"
53：第五章：开发admin管理服务：6：开发【admin管理员退出登录，接口】；（一个点：我们想要修改一个采用了某种编码方式的值时，新的值最好也按照这种编码方式编码后，再去修改；）
BGP federal experiment
Starfish Os X MetaBell战略合作，元宇宙商业生态更进一步
BGP联邦实验
Fluorite network, difficult to be a "lone brave"
UE4 unreal ndisplay plug-in easy to use three fold screen details
Unreal ue4.27 switchboard porting engine process
Five basic data structures of redis
After learning the loop, I came across the problem of writing factorial of N, which caused a series of problems, including some common pitfalls for beginners, and how to simplify the code
随机推荐
＃＃ELK日志分析系统搭建＃＃
每条你收藏的资讯背后，都离不开TA
Redis设计规范
云原生爱好者周刊：Prometheus 架构演进之路
软件测试面试题：你认为做好测试用例设计工作的关键是什么?
A Tiger's Tale
The story of the third uncle
GBase 8c 通用文件访问函数
[Taichi] draw a regular grid in Tai Chi
GBase 8c 事务ID和快照（三）
Open source flight control (Px4, ardupilot)
QGIS制图：矢量数据制图流程及导出
GBase 8c 备份控制函数（四）
Embedded classic communication protocol
Collection / container
UE4 unreal ndisplay plug-in easy to use three fold screen details
Software test interview question: please introduce the meaning of various test types in detail?
Unreal ue4.27 switchboard porting engine process
Gbase 8C transaction ID and snapshot
软件测试面试题：你所熟悉的软件测试类型有哪些?