突然安排让速写这样的一个布局，重点就是CSS画一条虚线,并且还要灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。
注：订单里面的金额都是随意写的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>机票订单详情</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.passenger-box {
display: flex;
width: 100%;
margin-top: 16px;
}
.passenger-info {
display: flex;
width: 100%;
}
.passenger-box .title {
width: 36px;
}
.passenger-box .dashed {
background: repeating-linear-gradient(
to right,
#000,
#000 3px,
transparent 7px
); /* 创建一条虚线背景 */
height: 1px; /* 设置元素的高度为1像素 */
flex: auto;
margin-top: 10px;
}
.passenger-box .price {
text-align: right;
}
.passenger-box .passenger {
text-align: right;
width: 56px;
}
.cate-box {
display: flex;
margin-top: 16px;
justify-content: space-between;
}
.cate-box .price{
margin-right: 50px;
}
.total-line {
background: repeating-linear-gradient(
to right,
#000,
#000 3px,
transparent 7px
); /* 创建一条虚线背景 */
height: 1px; /* 设置元素的高度为1像素 */
margin-top: 20px;
}
.total {
display: flex;
justify-content: space-between;
margin-top: 16px;
}
.total-price {
color: #ff6600;
}
</style>
</head>
<body>
<h1>订单详情</h1>
<div class="passenger-box">
<div class="passenger-info">
<div class="title">成人</div>
<div class="dashed"></div>
<div class="price">￥9999</div>
</div>
<div class="passenger">X1人</div>
</div>
<div class="cate-box">
<div class="title">机票</div>
<div class="price">￥899</div>
</div>
<div class="cate-box">
<div class="title">机建</div>
<div class="price">￥50</div>
</div>
<div class="cate-box">
<div class="title">燃油</div>
<div class="price">￥70</div>
</div>
<div class="passenger-box">
<div class="passenger-info">
<div class="title">儿童</div>
<div class="dashed"></div>
<div class="price">￥9999</div>
</div>
<div class="passenger">X1人</div>
</div>
<div class="cate-box">
<div class="title">机票</div>
<div class="price">￥8888</div>
</div>
<div class="cate-box">
<div class="title">机建</div>
<div class="price">￥50</div>
</div>
<div class="cate-box">
<div class="title">燃油</div>
<div class="price">￥70</div>
</div>
<div class="total-line"></div>
<div class="total">
<div>订单金额总计</div>
<div class="total-price">￥1050</div>
</div>
</body>
</html>
重点介绍一下虚线的实现的css代码
background: repeating-linear-gradient(to right, #000, #000 3px, transparent 7px); /*创建一条虚线背景 */
height: 1px; /* 设置元素的高度为1像素 */
主要是 background: repeating-linear-gradient(to right, #44928E, #44928E 15px, transparent 15px, transparent 20px);
属性说明：
to right 渐变色的方向
#44928E, #44928E 渐变色的颜色数值，
15px, transparent 15px 虚线的线条渐变的色值的宽度及虚线的宽度，不需要渐变的话这两个值设置成一样就行，就是虚线的宽度
transparent 20px 虚线的间隔
如果这篇文章对你有所帮助，欢迎点赞、分享和留言，让更多的人受益。感谢你的细心阅读，如果你发现了任何错误或需要补充的地方，请随时告诉我，我会尽快处理。
