突然安排讓速寫這樣的一個布局，重點就是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 虛線的間隔
如果這篇文章對你有所幫助，歡迎點贊、分享和留言，讓更多的人受益。感謝你的細心閱讀，如果你發現了任何錯誤或需要補充的地方，請隨時告訴我，我會盡快處理。
——JDBC跟Mybatis、lombok)
