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来写入和读取消息。 一、问题描述 将要使用的示例是…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？
在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。 一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...