当前位置： 首页 > news >正文

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

news 2025/11/5 2:00:26

突然安排让速写这样的一个布局，重点就是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

突然安排让速写这样的一个布局&#xff0c;重点就是CSS画一条虚线,并且还要灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。 注&#xff1a;订单里面的金额都是随意写的 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8&…...

编程日记 2024/7/4 2:48:28

居然这么简单就能实现扫雷游戏！

目录 一.思路 1.成果展示 2.思路 二.具体操作 1.创建"棋盘" 2.初始化雷 3.布置雷 4.打印 5.排除雷 三.代码实现 1.test.c文件 2.thunder.h文件 3.thunder.c文件 Hello&#xff0c;大家好&#xff0c;今天我们来实现扫雷游戏&#xff0c;希望这一篇博客能给带给大家一…...

编程日记 2024/7/4 2:47:27

安装Gitlab+Jenkins

GItlab概述 GitLab概述&#xff1a; 是一个利用 Ruby on Rails 开发的开源应用程序&#xff0c;实现一个自托管的Git项目仓库&#xff0c;可通过Web界面进行访问公开的或者私人项目。 Ruby on Rails 是一个可以使你开发、部署、维护 web 应用程序变得简单的框架。 GitLab拥有与…...

编程日记 2024/7/4 2:45:25

php 命令行模式详解

PHP 的命令行模式&#xff08;Command Line Interface, CLI&#xff09;是 PHP 的一个特定版本或运行时配置&#xff0c;它允许 PHP 脚本在没有 Web 服务器的情况下直接在命令行环境中执行。CLI 版本的 PHP 通常不包含 CGI 或者其他 web server 接口&#xff0c;因此更轻量级&a…...

编程日记 2024/7/4 2:44:24

Git 基础-创建版本库 git init、添加到暂存区git add、查看状态git status、查看改动git diff

目录 1.创建版本库 git init 1.创建版本库 git init 在目录中创建新的 Git 仓库。 你可以在任何时候、任何目录中这么做&#xff0c;完全是本地化的。 在目录中执行 git init&#xff0c;就可以创建一个 Git 仓库了。 注意: 没事不要手动修改 .git 目录里面的文件&#xff0c;不…...

编程日记 2024/7/4 2:42:22

Python实现无头浏览器采集应用的反爬虫与反检测功能解析与应对策略

Python实现无头浏览器采集应用的反爬虫与反检测功能解析与应对策略 随着网络数据的快速增长&#xff0c;爬虫技术在数据采集、信息分析和业务发展中扮演着重要的角色。然而&#xff0c;随之而来的反爬虫技术也在不断升级&#xff0c;给爬虫应用的开发和维护带来了挑战。为了应…...

编程日记 2024/7/4 2:41:21

法国工程师IMT联盟 密码学及其应用 2023年期末考试题

1 在 Unix 下的安全性 (30 分钟) 1.1 问题 1 1.1.1 问题 我们注意constat到通过 SMTP 服务器发送“假”电子邮件&#xff08;垃圾邮件&#xff09;相对容易。越来越常见的做法是在 SMTP 连接之上部署dployer TLS 协议protocole&#xff08;即 SMTPS&#xff09;。这解决了垃圾…...

编程日记 2024/7/4 2:40:20

魔行观察-AI数据分析-蜜雪冰城

摘要 本报告旨在评估蜜雪冰城品牌作为投资对象的潜力和价值&#xff0c;基于其经营模式、门店分布、人均消费、覆盖省份等关键指标进行分析。 数据数据源&#xff1a;魔行观察&#xff1a;http://www.wmomo.com/#/brand/brandDetails?code10013603 品牌概览 蜜雪冰城是中国…...

编程日记 2024/7/4 2:39:19

如何在CSS中设置px值

在CSS中设置px&#xff08;像素&#xff09;值非常简单。px是CSS中最常用的长度单位之一&#xff0c;用于指定元素的大小、位置、间距等。 以下是一些示例&#xff0c;展示如何在CSS中使用px值&#xff1a; 设置元素宽度和高度 css复制代码 .box { width: 200px; /* 设置元素…...

编程日记 2024/7/4 2:38:18

【linux】find命令详解

Linux中的find命令用于在文件系统中搜索符合条件的文件或目录。 一.基本语法 find [path] [expression] #path:搜索的起始目录&#xff0c;如果不指定&#xff0c;默认为当前目录 #expression&#xff1a;定义搜索条件的表达式 命令选项 -name 按文件名搜索 -size …...

编程日记 2024/7/4 2:37:16

Android音频管理器探索与应用

在Android应用开发中&#xff0c;音频管理器是一个至关重要的组件&#xff0c;它负责处理设备的音频功能&#xff0c;包括音量控制、音频路由、音效处理以及与其他应用的音频交互。本文将深入探讨Android音频管理器的功能和应用&#xff0c;帮助开发者更好地理解和利用这一关键…...

编程日记 2024/7/4 2:36:15

qt QTreeWidget文件管理器拖入应用，从应用拖入文件管理器拷贝

我用QT实现了一个文件管理的软件&#xff0c;能够实现从桌面或其他路径拖拽文件到软件&#xff0c;软件获取拖拽文件的路径。但是当我想实现反向操作时遇到了问题。在网上搜索和阅读文档一天多都未能解决该问题。 下面给出我的实现&#xff1a; Qt开发中经常会用QTreeWidget去…...

编程日记 2024/7/4 2:33:13

Qt中使用MySQL数据库详解，好用的模块类封装

本文将详细介绍如何在Qt应用程序中集成MySQL数据库&#xff0c;并封装实现好用的mysql数据库操作类。包括环境准备、连接数据库、执行查询及异常处理等关键步骤&#xff0c;同时包含mysql驱动的编译。分享给有需要的小伙伴&#xff0c;喜欢的可以点击收藏。 目录 环境准备 项…...

编程日记 2024/7/4 2:31:10

C语言实现 人生重生模拟器游戏

目录 实现一个简化版的人生重开模拟器 1.菜单函数 2.game函数 3.幼年时期&#xff08;even函数&#xff09; 4.壮年时期&#xff08;Juvenile函数&#xff09; 课余时间实现的小游戏 实现一个简化版的人生重开模拟器 1.菜单函数 void menu() {printf("---------------…...

编程日记 2024/7/4 2:30:09

C语言两个较大数字相加

C语言两个较大数字相加 思路分析 由于C语言中的基本数据类型&#xff08;如int、long等&#xff09;有固定的大小&#xff0c;无法直接处理非常大的数字&#xff08;如数百位的数字&#xff09;。因此&#xff0c;我们需要采用字符串或数组来表示大数字&#xff0c;并逐位进行…...

编程日记 2024/7/4 2:29:08

大数据面试题之Flume

目录 介绍下Flume Flume架构 Flume有哪些Source 说下Flume事务机制 介绍下Flume采集数据的原理&#xff1f;底层实现&#xff1f; Flume如何保证数据的可靠性 Flume传输数据时如何保证数据一致性&#xff08;可靠性&#xff09; Flume拦截器 如何监控消费型Flu…...

编程日记 2024/7/4 2:28:07

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…...

编程日记 2024/7/4 2:24:03

无法定位程序输入点Z9 qt assertPKcS0i于动态链接库F:\code\projects\06_algorithm\main.exe

解决方法&#xff1a; 这个报错&#xff0c;是因为程序在运行时没要找到所需的dll库&#xff0c;如果把这个程序方法中对应库的目录下执行&#xff0c;则可正常执行。即使将图中mingw_64\bin 环境变量上移到msvc2022_64\bin 之前也不可以。 最终的解决方法是在makefile中设置环…...

编程日记 2024/7/4 2:23:02

GoLand 2024 for Mac GO语言集成开发工具环境

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…...

编程日记 2024/7/4 2:19:59

Protocol Buffer 基础（c++）

本教程提供了使用协议缓冲区的基本介绍。通过逐步创建一个简单的示例应用程序&#xff0c;介绍以下内容&#xff1a; 1.在.proto文件中定义消息格式。 2.使用 protocol buffer 编译器。 3.使用c protocol buffer API来写入和读取消息。 一、问题描述 将要使用的示例是…...

编程日记 2024/7/4 2:18:57

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/11/4 22:19:41

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/10/24 16:29:44

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/10/25 19:33:15

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/11/1 2:50:59

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/10/27 13:41:34

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/10/27 13:40:36

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/10/8 5:48:25