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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/38897.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

信息安全体系架构设计

对信息系统的安全需求是任何单一安全技术都无法解决的&#xff0c;要设计一个信息安全体系架构&#xff0c;应当选择合适的安全体系结构模型。信息系统安全设计重点考虑两个方面&#xff1b;其一是系统安全保障体系&#xff1b;其二是信息安全体系架构。 1.系统安全保障体系 安…

Hadoop集群部署【一】HDFS详细介绍以及HDFS集群环境部署【hadoop组件HDFS笔记】(图片均为学习时截取的)

HDFS详细介绍 HDFS是什么 HDFS是Hadoop三大组件(HDFS、MapReduce、YARN)之一 全称是&#xff1a;Hadoop Distributed File System&#xff08;Hadoop分布式文件系统&#xff09;&#xff1b;是Hadoop技术栈内提供的分布式数据存储解决方案 可以在多台服务器上构建存储集群&…

昇思25天学习打卡营第8天|DCGAN生成漫画头像

文章目录 昇思MindSpore应用实践基于MindSpore的DCGAN生成漫画头像1、DCGAN 概述零和博弈 vs 极大极小博弈GAN的生成对抗损失DCGAN原理 2、数据预处理3、DCGAN模型构建生成器部分判别器部分 4、模型训练 Reference 昇思MindSpore应用实践 本系列文章主要用于记录昇思25天学习打…

机器学习基础概念

1.机器学习定义 2.机器学习工作流程 &#xff08;1&#xff09;数据集 ①一行数据&#xff1a;一个样本 ②一列数据&#xff1a;一个特征 ③目标值&#xff08;标签值&#xff09;&#xff1a;有些数据集有目标值&#xff0c;有些数据集没有。因此数据类型由特征值目标值构成或…

Java实现图书管理系统

一、框架 1. 创建类 用户&#xff1a;管理员AdminUser 普通用户NormalUser 继承抽象类User 书&#xff1a;书Book 书架BookList 操作对象&#xff1a;书Book 2. 知识点 主要涉及的知识点&#xff1a;数据类型 变量 if for 数组 方法 类和对象 封装继承多态 抽象类和接口 …

Linux运维之需掌握的基本Linux命令

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、SHELL 二、执行命令 三、常用系统工作命令 四、系统状态检测命令 五、查找定位文件命令 六、文本文件编辑命令 七、文件目录管理命令…

【JavaWeb】登录校验-会话技术(一)Cookie与Session

登录校验 实现登陆后才能访问后端系统页面&#xff0c;不登陆则跳转登陆页面进行登陆。 首先我们在宏观上先有一个认知&#xff1a; HTTP协议是无状态协议。即每一次请求都是独立的&#xff0c;下一次请求并不会携带上一次请求的数据。 因此当我们通过浏览器访问登录后&#…

go语言怎么获取文件的大小并且转化为kb为单位呢?

在Go语言中&#xff0c;你可以使用os包中的IsExist和Stat函数来获取文件的信息&#xff0c;包括文件的大小。文件的大小通常是以字节为单位的&#xff0c;但你可以很容易地将其转换为KB&#xff08;千字节&#xff09;。 下面是一个简单的Go程序示例&#xff0c;该程序打开指定…

Simulink 模型生成 C 代码(一):使用 Embedded Coder 快速向导生成代码

以matlab自带的示例模型RollAxisAutopilot为例进行讲解。RollAxisAutopilot为飞机自动驾驶控制系统模型。 使用快速向导工具生成代码 通过键入以下命令打开模型 RollAxisAutopilot&#xff1a; openExample(RollAxisAutopilot); 如果 C 代码选项卡尚未打开&#xff0c;请在 …

【C++】宏定义

严格来说&#xff0c;这个题目起名为C是不合适的&#xff0c;因为宏定义是C语言的遗留特性。CleanCode并不推荐C中使用宏定义。我当时还在公司做过宏定义为什么应该被取代的报告。但是适当使用宏定义对代码是有好处的。坏处也有一些。 无参宏定义 最常见的一种宏定义&#xf…

makefile总结

1,Makefile规则介绍 一个简单的 Makefile 描述规则组成: TARGET... : PREREQUISITES... COMMAND 注意: 每一个命令行必须以[Tab]字符开始, [Tab]字符告诉 make 此行是一个命令行。 make 按照命令完成相应的动作。这也是书写 Makefile 中容易产生,而且比较隐蔽的错…

油烟净化器:餐饮业健康环保的守护者

我最近分析了餐饮市场的油烟净化器等产品报告&#xff0c;解决了餐饮业厨房油腻的难题&#xff0c;更加方便了在餐饮业和商业场所有需求的小伙伴们。 在现代餐饮业&#xff0c;油烟净化器已经成为不可或缺的重要设备。它不仅是保障餐饮环境清洁的利器&#xff0c;更是守护健康…

新声创新20年:无线技术给助听器插上“娱乐”的翅膀

听力损失并非现代人的专利&#xff0c;古代人也会有听力损失。助听器距今发展已经有二百多年了&#xff0c;从当初单纯的声音放大器到如今的全数字时代助听器&#xff0c;助听器发生了翻天覆地的变化&#xff0c;现代助听器除了助听功能&#xff0c;还具有看电视&#xff0c;听…

【LeetCode】368. 最大整除子集

虽然这题挺难写的&#xff0c;但是仍然提醒了我&#xff1a;解题要注意方法。在明确分析当一条道路走不通的时候&#xff0c;就不要再犹豫了&#xff0c;就要果断的换方法&#xff0c;尝试用其它方法解决。否则一味的消耗时间&#xff0c;得不偿失。换方法的前提是明确的分析&a…

C++ 和C#的差别

首先把眼睛瞪大&#xff0c;然后憋住一口气&#xff0c;读下去&#xff1a; 1、CPP 就是C plus plus的缩写&#xff0c;中国大陆的程序员圈子中通常被读做"C加加"&#xff0c;而西方的程序员通常读做"C plus plus"&#xff0c;它是一种使用非常广泛的计算…

Maya崩溃闪退常见原因及解决方案

Autodesk Maya 是一款功能强大的 3D 计算机图形程序&#xff0c;被电影、游戏和建筑等各个领域的设计师广泛使用。然而&#xff0c;Maya 就像任何其他软件一样可能会发生崩溃问题。在前文中&#xff0c;小编给大家介绍了3ds Max使用V-Ray渲染时的崩溃闪退解决方案&#xff1a; …

Neo4j 图数据库 高级操作

Neo4j 图数据库 高级操作 文章目录 Neo4j 图数据库 高级操作1 批量添加节点、关系1.1 直接使用 UNWIND 批量创建关系1.2 使用 CSV 文件批量创建关系1.3 选择方法 2 索引2.1 创建单一属性索引2.2 创建组合属性索引2.3 创建全文索引2.4 列出所有索引2.5 删除索引2.6 注意事项 3 清…

后端之路第三站(Mybatis)——JDBC跟Mybatis、lombok

一、什么是JDBC JDBC就是sun公司研发的一套通过java来操控数据库的工具&#xff0c;对应不同的数据库系统有不同的JDBC&#xff0c;而他们统称【驱动】&#xff0c;这就是上一篇我们提到创建Mybatis项目时要引入的依赖、以及连接数据库四要素里的第一要素。 JDBC有自己一套原始…

SerialportToTCP② 全

效果补全&#xff08;代码&#xff09;&#xff1a; namespace SerialportToTCP {public partial class Form1 : Form{IniHelper Ini;string[] botelvs new string[] { "1200", "4800", "9600", "13200" };public Form1(){Initializ…

Elasticsearch:Painless scripting 语言(一)

Painless 是一种高性能、安全的脚本语言&#xff0c;专为 Elasticsearch 设计。你可以使用 Painless 在 Elasticsearch 支持脚本的任何地方安全地编写内联和存储脚本。 Painless 提供众多功能&#xff0c;这些功能围绕以下核心原则&#xff1a; 安全性&#xff1a;确保集群的…