html + css 快速实现订单详情的布局demo
突然安排让速写这样的一个布局，重点就是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 虚线的间隔
如果这篇文章对你有所帮助，欢迎点赞、分享和留言，让更多的人受益。感谢你的细心阅读，如果你发现了任何错误或需要补充的地方，请随时告诉我，我会尽快处理。
相关文章：
html + css 快速实现订单详情的布局demo
突然安排让速写这样的一个布局，重点就是CSS画一条虚线,并且还要灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。 注：订单里面的金额都是随意写的 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8&…...
居然这么简单就能实现扫雷游戏！
目录 一.思路 1.成果展示 2.思路 二.具体操作 1.创建"棋盘" 2.初始化雷 3.布置雷 4.打印 5.排除雷 三.代码实现 1.test.c文件 2.thunder.h文件 3.thunder.c文件 Hello，大家好，今天我们来实现扫雷游戏，希望这一篇博客能给带给大家一…...
安装Gitlab+Jenkins
GItlab概述 GitLab概述： 是一个利用 Ruby on Rails 开发的开源应用程序，实现一个自托管的Git项目仓库，可通过Web界面进行访问公开的或者私人项目。 Ruby on Rails 是一个可以使你开发、部署、维护 web 应用程序变得简单的框架。 GitLab拥有与…...
php 命令行模式详解
PHP 的命令行模式（Command Line Interface, CLI）是 PHP 的一个特定版本或运行时配置，它允许 PHP 脚本在没有 Web 服务器的情况下直接在命令行环境中执行。CLI 版本的 PHP 通常不包含 CGI 或者其他 web server 接口，因此更轻量级&a…...
Git 基础-创建版本库 git init、添加到暂存区git add、查看状态git status、查看改动git diff
目录 1.创建版本库 git init 1.创建版本库 git init 在目录中创建新的 Git 仓库。 你可以在任何时候、任何目录中这么做，完全是本地化的。 在目录中执行 git init，就可以创建一个 Git 仓库了。 注意: 没事不要手动修改 .git 目录里面的文件，不…...
Python实现无头浏览器采集应用的反爬虫与反检测功能解析与应对策略
Python实现无头浏览器采集应用的反爬虫与反检测功能解析与应对策略 随着网络数据的快速增长，爬虫技术在数据采集、信息分析和业务发展中扮演着重要的角色。然而，随之而来的反爬虫技术也在不断升级，给爬虫应用的开发和维护带来了挑战。为了应…...
法国工程师IMT联盟 密码学及其应用 2023年期末考试题
1 在 Unix 下的安全性 (30 分钟) 1.1 问题 1 1.1.1 问题 我们注意constat到通过 SMTP 服务器发送“假”电子邮件（垃圾邮件）相对容易。越来越常见的做法是在 SMTP 连接之上部署dployer TLS 协议protocole（即 SMTPS）。这解决了垃圾…...
魔行观察-AI数据分析-蜜雪冰城
摘要 本报告旨在评估蜜雪冰城品牌作为投资对象的潜力和价值，基于其经营模式、门店分布、人均消费、覆盖省份等关键指标进行分析。 数据数据源：魔行观察：http://www.wmomo.com/#/brand/brandDetails?code10013603 品牌概览 蜜雪冰城是中国…...
如何在CSS中设置px值
在CSS中设置px（像素）值非常简单。px是CSS中最常用的长度单位之一，用于指定元素的大小、位置、间距等。 以下是一些示例，展示如何在CSS中使用px值： 设置元素宽度和高度 css复制代码 .box { width: 200px; /* 设置元素…...
【linux】find命令详解
Linux中的find命令用于在文件系统中搜索符合条件的文件或目录。 一.基本语法 find [path] [expression] #path:搜索的起始目录，如果不指定，默认为当前目录 #expression：定义搜索条件的表达式 命令选项 -name 按文件名搜索 -size …...
Android音频管理器探索与应用
在Android应用开发中，音频管理器是一个至关重要的组件，它负责处理设备的音频功能，包括音量控制、音频路由、音效处理以及与其他应用的音频交互。本文将深入探讨Android音频管理器的功能和应用，帮助开发者更好地理解和利用这一关键…...
qt QTreeWidget文件管理器拖入应用，从应用拖入文件管理器拷贝
我用QT实现了一个文件管理的软件，能够实现从桌面或其他路径拖拽文件到软件，软件获取拖拽文件的路径。但是当我想实现反向操作时遇到了问题。在网上搜索和阅读文档一天多都未能解决该问题。 下面给出我的实现： Qt开发中经常会用QTreeWidget去…...
Qt中使用MySQL数据库详解，好用的模块类封装
本文将详细介绍如何在Qt应用程序中集成MySQL数据库，并封装实现好用的mysql数据库操作类。包括环境准备、连接数据库、执行查询及异常处理等关键步骤，同时包含mysql驱动的编译。分享给有需要的小伙伴，喜欢的可以点击收藏。 目录 环境准备 项…...
C语言实现 人生重生模拟器游戏
目录 实现一个简化版的人生重开模拟器 1.菜单函数 2.game函数 3.幼年时期（even函数） 4.壮年时期（Juvenile函数） 课余时间实现的小游戏 实现一个简化版的人生重开模拟器 1.菜单函数 void menu() {printf("---------------…...
C语言两个较大数字相加
C语言两个较大数字相加 思路分析 由于C语言中的基本数据类型（如int、long等）有固定的大小，无法直接处理非常大的数字（如数百位的数字）。因此，我们需要采用字符串或数组来表示大数字，并逐位进行…...
大数据面试题之Flume
目录 介绍下Flume Flume架构 Flume有哪些Source 说下Flume事务机制 介绍下Flume采集数据的原理？底层实现？ Flume如何保证数据的可靠性 Flume传输数据时如何保证数据一致性（可靠性） Flume拦截器 如何监控消费型Flu…...
js文件的执行和变量初始化缓存
js文件和变量初始化 全局变量举例js文件加载 全局变量举例 import * as turf from "turf/turf"; import earcut from "earcut"; import * as THREE from "three"; import { TextGeometry } from "three/addons/geometries/TextGeometry.js…...
无法定位程序输入点Z9 qt assertPKcS0i于动态链接库F:\code\projects\06_algorithm\main.exe
解决方法： 这个报错，是因为程序在运行时没要找到所需的dll库，如果把这个程序方法中对应库的目录下执行，则可正常执行。即使将图中mingw_64\bin 环境变量上移到msvc2022_64\bin 之前也不可以。 最终的解决方法是在makefile中设置环…...
GoLand 2024 for Mac GO语言集成开发工具环境
Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件（适合自己的M芯片版或Intel芯片版），将其从左侧拖入右侧文件夹中，等待安装完毕2、应用程序显示软件图标，表示安装成功3、打开访达，点击【文…...
Protocol Buffer 基础（c++）
本教程提供了使用协议缓冲区的基本介绍。通过逐步创建一个简单的示例应用程序，介绍以下内容： 1.在.proto文件中定义消息格式。 2.使用 protocol buffer 编译器。 3.使用c protocol buffer API来写入和读取消息。 一、问题描述 将要使用的示例是…...
XML Group端口详解
在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
MPNet：旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作，无需更改相机配置。但是，一…...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解，“超级…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一） 论文解读：交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...