html + css 快速实现订单详情的布局demo

突然安排让速写这样的一个布局，重点就是CSS画一条虚线,并且还要灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。

注：订单里面的金额都是随意写的

html 复制代码

<!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代码

xml 复制代码

 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 虚线的间隔

如果这篇文章对你有所帮助，欢迎点赞、分享和留言，让更多的人受益。感谢你的细心阅读，如果你发现了任何错误或需要补充的地方，请随时告诉我，我会尽快处理。