CSS 中::after的妙用(实现在margin中显示内容)
效果图如下:

背景: 如上图,之前只是当纯的写一个参考货架平面图,用作物料系统的在库状态可视化,当完成页面body分成10等份时,货架之间需要有通道,为了实现实际的样式,我给每个等份都添加了margin-right: 4%,然后即将上线时用户说希望这些通道标注上‘通道’两个字,因为不想大改的原因我就找文心一言给我实现在margin-right中怎么添加文字,结果还真就可以,给我提供了after这个关键字,最终实现如下
#gudinghuojia2F .layui-col-xs10:not(:last-child)::after {content: '通道'; /* 在 div 右侧添加文字 */position: absolute;top: 40%;font-size: xxx-large;left: 110%;color: #c9750582;
}#gudinghuojia2F .layui-col-xs10 {margin-right: 4%;}/*以下是我的货架 效果图 , layui-row这个div分成了lay.zhong等份,
而我在这若干等份中添加了margin-right: 4%,实际是当作货架之间的通道,但是用户希望显示通道2个字,但页面都已经实现了,我就想着怎么在边框中显示文字也就是margin-right中,
最后发现使用after就能实现:layui-col-xs10:not(:last-child)::after{ content: '通道'; /* 在 div 右侧添加文字 */ position: absolute;}而因为最后一个货架之后是不需要添加通道的,因此我添加了not(:last-child),也就是排除了最后一个*/<div id="gudinghuojia2F" th:if="${cc == 'CP-2F' }" style="height: 100%;"><div class="layui-row" ><div style="font-size: xx-large; font-family: fantasy; color: #031cdd; z-index: 999;"><!--列号--><div style="height:10%;"></div><div th:styleappend="'height: calc(90% / '+ ${lay.lie}+')'" th:each="iii : ${#numbers.sequence(lay.lie, 1, -1)}" th:text="${iii}"></div></div><div class="layui-col-xs10" th:each="i : ${#numbers.sequence(lay.zhong, 1, -1)}" ><div class="inner-title" th:text="${lay.da + '-' + i}"></div><div class="inner-div" th:each="ii : ${#numbers.sequence(lay.lie, 1, -1)}" th:id="${lay.da + '-' + i + '-1-'+ ii}" th:styleappend="'height: calc(80% / '+ ${lay.lie}+')'"></div></div></div><div class="waitongdao"> 外通道</div>
</div>
相关文章:
CSS 中::after的妙用(实现在margin中显示内容)
效果图如下: 背景: 如上图,之前只是当纯的写一个参考货架平面图,用作物料系统的在库状态可视化,当完成页面body分成10等份时,货架之间需要有通道,为了实现实际的样式,我给每个等份都…...
SentenceTransformer使用多GPU加速向量化
文章目录 前言代码 前言 当我们需要对大规模的数据向量化以存到向量数据库中时,且服务器上有多个GPU可以支配,我们希望同时利用所有的GPU来并行这一过程,加速向量化。 代码 就几行代码,不废话了 from sentence_transformers i…...
架构师-软件工程习题选择题
架构师-软件工程习题选择题 真题案例题 真题 c 瀑布模型:针对软件需求明确的情况,将前一个阶段做完,才能开始下一个阶段 原型模型:针对需求不明确的情况,快速搭建出系统原型,然后根据系统原型和客户确认需求…...
springboot单独在指定地方输出sql
一般线上项目都是将日志进行关闭,因为mybatis日志打印,时间长了,会占用大量的内存,如果我想在我指定的地方进行打印sql情况,怎么玩呢! 下面这个场景: 某天线上的项目出bug了,日志打印…...
gpio内部结构(一)
一,GPIO内部结构 1,保护二极管 * 引脚内部加上这两个保护二级管可以防止引脚外部过高或过低的电压输入。 * 当引脚电压高于 VDD_FT 或 VDD 时,上方的二极管导通吸收这个高电压。 * 当引脚电压低于 VSS 时,下方的二极管导通&…...
【C++14保姆级教程】变量模板,Labmda泛型
文章目录 前言一、变量模板(Variable Templates)1.1 变量模板是什么1.2 泛型大概使用1.3 示例代码11.4 示例代码21.5 示例代码3 二、Lambda泛型(Lambda Generics)2.1 Lambda表达式泛型是什么?2.2 函数原型怎么写&#…...
LLM - 旋转位置编码 RoPE 代码详解
目录 一.引言 二.RoPE 理论 1.RoPE 矩阵形式 2.RoPE 图例形式 3.RoPE 实践分析 三.RoPE 代码分析 1.源码获取 2.源码分析 3.rotary_emb 3.1 __init__ 3.2 forward 4.apply_rotary_pos_emb 4.1 rotate_half 4.2 apply_rotary_pos_emb 四.RoPE 代码实现 1.Q/K/V …...
Vue之VueX知识探索(一起了解关于VueX的新世界)
目录 前言 一、VueX简介 1. 什么是VueX 2. VueX的作用及重要性 3. VueX的应用场景 二、VueX的使用准备工作 1. 下载安装VueX 2. vuex获取值以及改变值 2.1 创建所需示例 2.2 将创建好的.vue文件页面显示 2.3 创建VueX的相关文件 2.4 配置VueX四个js文件 2.5 加载到vue示…...
提升吃鸡战斗力,分享顶级作战干货!
大家好!作为一名吃鸡玩家,你是否也希望提高自己的游戏战斗力?在这里,我将为大家分享一些顶级游戏作战干货,以及方便吃鸡作图和查询装备皮肤库存的实用工具。 首先,让我们提到绝地求生作图工具推荐。通过使用…...
【rust】cargo的概念和使用方法
啥是cargo 包管理器 cargo 提供了一系列的工具,从项目的建立、构建到测试、运行直至部署,为 Rust 项目的管理提供尽可能完整的手段,与 Rust 语言及其编译器 rustc 紧密结合。 创建项目 使用cargo创建一个项目: $ cargo new wo…...
MySQL数据库——SQL优化(2)-order by 优化、group by 优化
目录 order by 优化 概述 测试 优化原则 group by 优化 测试 优化原则 order by 优化 概述 MySQL的排序,有两种方式: Using filesort : 通过表的索引或全表扫描,读取满足条件的数据行,然后在排序缓冲区sortbuffer中完成排…...
C++DAY43
#include <iostream>using namespace std;//封装 沙发 类 class Sofa { private:string living; public:Sofa(){cout << "沙发的无参构造函数" << endl;}Sofa(string l):living(l){cout << "沙发的有参构造函数" << endl;}v…...
大模型的超级“外脑”——向量数据库解决大模型的三大挑战
随着AI大模型产品及应用呈现爆发式增长,新的AI时代已经到来。向量数据库可与大语言模型配合使用,解决大模型落地过程中的痛点,已成为企业数据处理和应用大模型的必选项。在近日举行的华为全联接大会2023期间,华为云正式发布GaussDB向量数据库。GaussDB向量数据库基于GaussD…...
opencv读取摄像头并读取时间戳
下面这行代码是获取摄像头每帧的时间戳: double timestamp cap.get(cv::CAP_PROP_POS_MSEC); 改变帧率的方法是: cap.set(cv::CAP_PROP_FPS, 30); //帧率改为30 但是实际测试时发现帧率并未被改变,这个可能和VideoCapture cap(cv::CAP_V…...
WebRTC 系列(四、多人通话,H5、Android、iOS)
WebRTC 系列(三、点对点通话,H5、Android、iOS) 上一篇博客中,我们已经实现了点对点通话,即一对一通话,这一次就接着实现多人通话。多人通话的实现方式呢也有好几种方案,这里我简单介绍两种方案…...
uniapp 点击 富文本元素 图片 可以预览(非nvue)
我使用的是uniapp 官方推荐的组件 rich-text,一般我能用官方级用官方,更有保障一些。 一、整体逻辑 1. 定义一段html标签字符串,里面包含图片 2. 将字符串放入rich-text组件中,绑定点击事件itemclick 3. 通过点击事件获取到图片ur…...
【2023年11月第四版教材】第24章《法律法规与标准规范》(合集篇)
第24章《法律法规与标准规范》(合集篇) 1 民法典(合同编)2 招标投标法2.1 关于时间的总结2.2 内容 3 政府采购法4 专利法5 著作权法6 商标法7 网络安全法8 数据安全法 1 民法典(合同编) 1、要约是希望和他人订立合同的…...
提升战斗力!吃鸡行家分享顶级游戏干货,助你轻松拿下绝地求生
作为吃鸡行家,我们都知道,在绝地求生中提高战斗力至关重要。今天我来分享一些独特的干货,帮助你成为顶级的吃鸡玩家,并分享一些方便吃鸡作图、装备皮肤库存展示和查询的技巧。 首先,让我们来谈谈绝地求生作图工具推荐。…...
C语言练习百题之宏#define命令
宏(Macro)是C语言中的一种预处理指令,它使用#define命令定义符号常量、宏函数和代码片段。下面列举了各种宏的应用场景以及相关注意事项: 定义常量: #define PI 3.14159265注意事项:使用宏定义常量可以提高…...
阿里云存储I/O性能、IOPS和吞吐量是什么意思?
云盘的存储I/O性能是什么?存储I/O性能又称存储读写性能,指不同阿里云服务器ECS实例规格挂载云盘时,可以达到的性能表现,包括IOPS和吞吐量。阿里云百科网aliyunbaike.com分享阿里云服务器云盘(系统盘或数据盘࿰…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
pycharm 设置环境出错
pycharm 设置环境出错 pycharm 新建项目,设置虚拟环境,出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...
绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化
iOS 应用的发布流程一直是开发链路中最“苹果味”的环节:强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说,这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发(例如 Flutter、React Na…...
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
摘要:在消费市场竞争日益激烈的当下,传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序,探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式,分析沉浸式体验的优势与价值…...
