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

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

news 文章来源：https://blog.csdn.net/weixin_45046532/article/details/140143584 2024/7/6 18:45:52

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

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

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

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

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

安装Gitlab+Jenkins

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

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

php 命令行模式详解

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何在CSS中设置px值

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

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

【linux】find命令详解

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

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

Android音频管理器探索与应用

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

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

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

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

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

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

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

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

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

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

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

C语言两个较大数字相加

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

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

大数据面试题之Flume

目录介绍下Flume Flume架构 Flume有哪些Source 说下Flume事务机制介绍下Flume采集数据的原理？底层实现？ Flume如何保证数据的可靠性 Flume传输数据时如何保证数据一致性（可靠性） 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

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

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

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

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

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

Protocol Buffer 基础（c++）

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

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

目录一设计原型二后台源码一设计原型二后台源码 using System; using System.Net.Sockets; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;namespace 上位机网络通讯 {public partial class Form1 : Form{public Form1(){Initializ…...

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

转让5000万无区域能源公司要求和流程

国家局的公司，也就是无地域无区域性的公司名称。这样的公司是还可以继续注册的，但是想要拥有国家局无区域的名称就不是那么容易的了。总局的企业要求高，也是实力的体现。对字号有保护。所以有很多人都对无地域的名称一直情有独钟。现有一家名…...

编程日记 2024/7/4 2:12:51

WordPress Quiz Maker插件 SQL注入漏洞复现(CVE-2024-6028)

0x01 产品简介 WordPress Quiz Maker插件是一款功能强大的测验生成工具，旨在帮助用户轻松、快速地构建复杂的测验和考试。插件支持多种问题类型，包括单选框（MCQ）、复选框（MCQ）、下拉列表（MCQ）、文本、短文本、数字、日期等。还支持横幅（HTML）显示信息性消息、填空题…...

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

Swift中的二分查找：全面指南

Swift中的二分查找：全面指南简介二分查找是计算机科学中的经典算法，被广泛用于在已排序的数组中高效地搜索目标值。与线性查找逐个检查每个元素不同，二分查找不断将搜索区间减半，因此在处理大数据集时要快得多。在这篇博客中…...

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

BUG TypeError: GPT2Model.forward() got an unexpected keyword argument ‘past’

TypeError: GPT2Model.forward() got an unexpected keyword argument past’ 环境 transformers 4.38.1详情这是由于新版的transformers 对GPT2Model.forward() 参数进行了改变导致的错误。具体是past名称改为了 past_key_values 。解决方法找到错误语…...

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

解析Kotlin中的Lambda【笔记摘要】

先看实例： fun b(param: Int): String {return param.toString() }fun a(funParam: (Int) -> String): String {return funParam(1) }a(::b) val d ::b1.双冒号 ::method 到底是什么？答：一个指向和该函数具有相同功能的对象的引用因为…...

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

rust单元测试顺序执行

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。存在的问题有时候，不同单元测试之间可能会竞争相同的资源，比如读写相同的文件。在这种情况下，如果…...

编程日记 2024/7/4 2:04:43

力扣-744. 寻找比目标字母大的最小字母

文章目录力扣题目代码工程力扣题目给你一个字符数组 letters，该数组按非递减顺序排序，以及一个字符 target。letters 里至少有两个不同的字符。返回 letters 中大于 target 的最小的字符。如果不存在这样的字符，则返回 letters 的第一个…...

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

一篇文章搞懂弹性云服务器和轻量云服务器的区别

前言在众多的云服务器类型中，弹性云服务器和轻量云服务器因其各自的特点和优势，受到了广大用户的青睐。那么，这两者之间到底有哪些区别呢？本文将为您详细解析。弹性云服务器：灵活多变的计算资源池弹性云服务器&…...

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

横穿自动驾驶

如果有一条线，可以穿起来所有自动驾驶的核心模块，那么我感觉它就是最优化，选择优化变量、构造优化问题、求解优化问题，这几个步骤贯穿了自动驾驶的始终。先从我的自身接触顺序写起。最开始做个一点深度学习，那还是20…...

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

为什么网上商店需要翻译成其他语言

网上商店不仅仅是一个可以买到商品的网站。它是一个完整的电子商务平台，为来自世界各地的用户提供购买所需物品的机会。但是，为了让这些用户舒适地使用网站，需要高质量的翻译和本地化。本地化是指产品或服务适应特定文化或市场的过程。它包…...

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

【高考志愿】交通运输工程

目录一、专业概述二、课程设置三、就业前景四、报考注意五、未来发展六、交通运输工程专业排名高考志愿选择交通运输工程专业，无疑是一个既具远见又富有挑战性的决定。这个专业以其综合性强、实用性高的特点，吸引了大批有志于投身交通事业的…...

编程日记 2024/7/4 1:59:37

【深度学习】【Lora训练3】StabelDiffusion，Lora训练过程，秋叶包，Linux，SDXL Lora训练

为了便于使用，构建一个docker镜像来使用秋叶包。2024年6月26日。 docker run -it --gpus all -v /ssd/xiedong:/datax --net host kevinchina/deeplearning:pytorch2.3.0-cuda12.1-cudnn8-devel-xformers bashgit clone --recurse-submodules https://github.com/A…...

编程日记 2024/7/4 1:57:36

ubuntu系统下如何安装python

在Ubuntu系统下安装Python，有多种方法可供选择。以下是两种常见的方法： 一、使用apt包管理器安装安装步骤如下： 首先更新软件包列表 sudo apt update安装Python 3： 输入以下命令以安装Python 3（Ubuntu的默认Pyth…...

编程日记 2024/7/4 1:56:35

邦芒攻略：职场中学会这五种管好情绪的方法

我们在公司里面在跟同事的一些往来，或者说是工作的一些合作当中。相信很多人都会有与周围的一些人发生过一些各种的争执，或者说是一些分歧。当然作为每一个职场的人来说，每天都是工作很累的，也是都很辛苦的，所以说…...

编程日记 2024/7/4 1:54:32

Linux各种命令——tac命令，more 命令， less命令，head命令，tail命令，file 命令， stat 命令

注意：tac命令是倒置输出文件内容 #### tac - **作用：倒叙访问文件内容** - 格式：tac 参数文件名 - **例如：** **tac /etc/passwd** #### more 命令 - 作用：翻页查看文件内容，适合内容较多的文件查看…...

编程日记 2024/7/4 1:53:31

【Rust入门教程】hello world程序

文章目录前言Hello World程序运行总结前言对于学习任何一种新的编程语言，我们都会从编写一个简单的Hello World程序开始。这是一个传统，也是一个开始。在这篇文章中，我们将一起学习如何在Rust中编写你的第一个程序：Hello Worl…...

编程日记 2024/7/4 1:50:29

激活函数、向前传播、损失函数、梯度下降

激活函数作用：主要引入了非线性。从而能解决很复杂的非线性关系。能更好地处理现实世界的数据和任务。向前传播向前传播描述了，神经网络中，输入层到输出层的信号传播和处理过程。输入层将特征数据输入，加权求和，…...

编程日记 2024/7/4 1:48:27

three.js - MeshStandardMaterial（标准网格材质）- 金属贴图、粗糙贴图

金属贴图、粗糙贴图金属贴图：metalnessMap 和粗糙贴图：roughnessMap，是用于模拟物体表面属性的两种重要贴图技术，这两种贴图，通常与基于物理的渲染（PBR）材质（如：MeshSt…...

编程日记 2024/7/4 1:47:26

算法-位图与底层运算逻辑

文章目录 1. 位图的理论基础2. 完整版位图实现3. 底层的运算逻辑-位运算 1. 位图的理论基础首先我们要理解什么是位图, 位图的一些作用是什么位图法就是bitmap的缩写。所谓bitmap，就是用每一位来存放某种状态，适用于大规模数据，但数据状态又…...

编程日记 2024/7/4 1:46:25

黑马点评-Redis的缓存击穿，缓存雪崩，缓存穿透，互斥锁，逻辑过期

文章目录 1.缓存穿透2.缓存雪崩3.缓存击穿3.1 互斥锁3.2 基于逻辑过期 1.缓存穿透解决办法写入NULL值到Redis缓存，以后就会命中Redis的控制缓存而不会出现请求直接打到数据库的问题！ 代码 2.缓存雪崩这个概念很好理解，雪崩就是无数的…...

编程日记 2024/7/4 1:45:24

8624 多项式系数累加和

这个问题可以通过使用数学的导数规则来解决。对于一个多项式，它的导数可以通过将每一项的系数乘以它的指数，然后降低该项的指数来得到。这个过程可以重复M次来得到多项式的M阶导数。然后，我们可以简单地将所有项的系数相加来得到结果。以下…...

编程日记 2024/7/4 1:43:22

使用 C# 和 OpenXML 读取大型 Excel 文件

介绍高效读取大型 Excel 文件可能具有挑战性，尤其是在处理需要高性能和可扩展性的应用程序时。Microsoft 的 OpenXML SDK 提供了一套强大的工具来处理 Office 文档（包括 Excel 文件），而无需在服务器上安装 Excel。本文将指导您使…...

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

【基于R语言群体遗传学】-5-扩展到两个以上等位基因及多基因位点

我们现在继续对于群体遗传学进行统计建模，书接上回，我们讨论了孤雌生殖的物种违反哈代温伯格遗传比例的例子，那我们现在来看多于两个等位基因的情况的计算。如果没有看过之前文章的同学，可以先去看一下之前的文章： …...

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

重采样（上采样或下采样）是什么？

重采样（Resampling）是在数据处理中常用的一种技术，主要用于处理数据集中的不平衡问题。具体来说，重采样可以分为上采样（Oversampling）和下采样（Undersampling），它们分别是…...

编程日记 2024/7/4 1:37:17

AI与Python共舞：如何利用深度学习优化推荐系统？（2）

推荐系统的前世今生推荐系统的历史可以追溯到20世纪90年代，从最初的基于内容过滤和协同过滤，到现在融合了机器学习甚至是深度学习的混合型推荐，其目标始终如一：更精准、更个性化地为用户推荐内容。随着Python的普及，…...

编程日记 2024/7/4 1:36:16

ChatGPT：Java中的对象引用实现方式

ChatGPT：Java中的对象引用实现方式如果使用句柄的话，那么 Java 堆中将会划分出一块内存来作为句柄池，reference 中存储的就是对象的句柄地址，而句柄中包含了对象实例数据与对象类型数据各自的具体地址信息。你提到的句柄机制是…...

编程日记 2024/7/4 1:35:15

云渗透实战手册：云API攻防之云服务端点侦查

在云计算环境中的渗透，与传统渗透相比，新增加了许多新的攻击面，同时也因为云计算的特点我们需要转变渗透的思维，用云计算的方式去思考云渗透。基础知识在云渗透开始之前，我们需要首先阐述标题中提到的云服务端点概…...

编程日记 2024/7/4 1:34:14

PHP 爬虫之使用 Curl库抓取淘宝商品列表数据网页的方法

使用 PHP 的 cURL 库来抓取淘宝商品列表数据网页需要谨慎，因为淘宝等电商平台通常会有反爬虫机制，以防止数据被滥用。然而，如果你只是出于学习目的，并且了解并遵守了淘宝的robots.txt文件和相关的使用条款，你可以尝试使…...

编程日记 2024/7/4 1:32:13

Python基础小知识问答系列-可迭代型变量赋值

1. 问题： 怎样简洁的把列表中的元素赋值给单个变量？ 当需要列表中指定几个值时，剩余的变量都收集在一起，该怎么进行变量赋值？ 当只需要列表中指定某几个值，其他值都忽略时，该怎么…...

编程日记 2024/7/4 1:31:12

WACV2023论文速览域迁移Domain相关

Paper1 CellTranspose: Few-Shot Domain Adaptation for Cellular Instance Segmentation 摘要原文: Automated cellular instance segmentation is a process utilized for accelerating biological research for the past two decades, and recent advancements have produc…...

编程日记 2024/7/6 16:28:19

相关文章：