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

CSS笔记（二）类名复用

news 2026/5/12 20:53:33

这里我通过两张不同位置的卡片来实现效果

  • 代码
<!DOCTYPE html>
<html><head><style>/*设置画布*/body{/* 方便排列与对齐*/display: flex; /*画布布满整个窗口*/height: 100vh;/*水平居中*/justify-content: center;/*垂直居中*/align-items: center;/* 设置比较暗的背景色*/background-color: rgba(47,48,49,0.9);}/*设置活动区域*/.container{display: flex;justify-content: center;align-items: center;/*给子元素提供相对描点*/position: relative;width: 500px;height: 500px;}.card{/*表示该元素会以相对锚点改变位置*/position: absolute;width: 150px;height: 200px;display: flex;justify-content: center;align-items: center;font-size: 30px;font-weight: bold;background-color: #00ff44;/*设置阴影，切记参数之间不要有逗号*/box-shadow: 0px 8px 8px rgba(0,0,0,0.8);}.card1{left: 0;top:0;}.card2{left:300;top:100p;}</style></head><body><div class="container"><div class="card card1">Card1</div><div class="card card2 ">Card2</div></div></body>
</html>
  • 效果：
  • 在这里插入图片描述
    显然这里我们让卡片元素具有了两个类card和card1，我们把相对锚点的位置信息放到card1中，这样我们相当于把两个类合成一个类在用，不过可以复用的类我们就摘出去用，需要对每个卡片设置的部分就放到对应的类里。这样给我们的开发带来了极大的便利。

相关文章：

CSS笔记（二）类名复用

这里我通过两张不同位置的卡片来实现效果 代码 <!DOCTYPE html> <html><head><style>/*设置画布*/body{/* 方便排列与对齐*/display: flex; /*画布布满整个窗口*/height: 100vh;/*水平居中*/justify-content: center;/*垂直居中*/align-items: cente…...

编程日记 2024/11/28 12:51:41

TCP三次握手与四次挥手（TCP重传机制，2MSL）超详细！！！计算机网络

本篇是关于3次握手和四次挥手的详细解释~ 如果对你有帮助&#xff0c;请点个免费的赞吧&#xff0c;谢谢汪。&#xff08;点个关注也可以&#xff01;&#xff09; 如果以下内容需要补充和修改&#xff0c;请大家在评论区多多交流~。 目录 1. TCP头部&#xff1a; 2. 三次握手…...

编程日记 2024/11/28 12:49:38

LCR 006. 两数之和 II - 输入有序数组

一.题目&#xff1a; LCR 006. 两数之和 II - 输入有序数组 - 力扣&#xff08;LeetCode&#xff09; 二.我的原始解法-暴力解法超时&#xff1a; class Solution: def twoSum(self, numbers: List[int], target: int) -> List[int]: # 暴力解法 result [] for i in rang…...

编程日记 2024/11/28 12:48:36

网络安全在现代企业中的重要作用

网络安全是这个数字时代最令人担忧的事情之一。对技术的依赖性越来越强&#xff0c;使其同时面临多种网络威胁。其声誉和法律后果的大幅下降可能归因于一次妥协。 这使得良好的网络安全成为所有企业的选择和必需品。本文介绍了网络安全的重要性、企业中常见的网络威胁以及公司…...

编程日记 2024/11/28 12:47:34

关于 EKS Bottlerocket AMI 版本与 Karpenter 配置的说明

问题1: Bottlerocket AMI 版本问题 之前,后端团队发现在使用 Bottlerocket v1.26.2 AMI 版本时,存在某些问题。经过 Bottlerocket 团队调查,此行为是罕见的 race condition 导致的结果。 我们在环境中重现了此状况,并且关注到由于 kubelet device manager 的启动时间晚于 NVI…...

编程日记 2024/11/28 12:46:34

Python实现人生重开模拟器

目录 人生重开模拟器介绍 代码实现 打印初始界面 设置初始属性 设置角色性别 设置角色出生点 针对每一岁&#xff0c;生成人生经历 完整代码 人生重开模拟器介绍 人生重开模拟器 是之前比较火的一个小游戏&#xff0c;我们这里使用 Python 实现一个简化版的 人生重开模…...

编程日记 2024/11/28 12:45:31

java——Spring Boot的配置加载顺序和优先级

Spring Boot的配置加载顺序和优先级是确定应用程序如何读取和应用配置的关键。以下是对Spring Boot配置加载顺序和优先级的详细解释&#xff1a; 一、配置加载顺序 命令行参数&#xff1a; Spring Boot会首先加载命令行中指定的参数。这些参数可以通过在命令行中使用--keyval…...

编程日记 2024/11/28 12:43:27

【21-30期】Java技术深度剖析：从分库分表到微服务的核心问题解析

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;Java &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 文章题目&#xff1a;Java技术深度剖析&#xff1a;从分库分表到微服务的核心问题解析 摘要&#xff1a; 本…...

编程日记 2024/11/28 12:42:25

CSS：怎么把网站都变成灰色

当大家看到全站的内容都变成了灰色&#xff0c;包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢&#xff1f; 有人会以为所有的内容都统一换了一个 CSS 样式&#xff0c;图片也全换成灰色的了&#xff0c;按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了…...

编程日记 2024/11/28 12:40:23

开发一个基于MACOS M1/2芯片的Android 12的模拟器

产品需求&#xff1a;MuMu模拟器Pro_率先适配Apple M系列芯片的安卓模拟器 苹果M芯片专属&#xff1a;产品专为苹果M系列芯片设计&#xff0c;意味着它需要能够充分利用M系列芯片的性能优势。 安卓模拟器&#xff1a;产品是一个安卓模拟器&#xff0c;允许用户在Mac设备上运行…...

编程日记 2024/11/28 12:39:22

Flink 中 JDBC Connector 使用详解

1. 背景 在实时计算或离线任务中&#xff0c;往往需要与关系型数据库交互&#xff0c;例如 MySQL、PostgreSQL 等。Apache Flink 提供了 JDBC Connector&#xff0c;可以方便地将流式数据写入或读取数据库。 本文将介绍 Flink JDBC Connector 的基础用法、配置方法以及注意事…...

编程日记 2024/11/28 12:38:19

【Linux打怪升级记 | 报错02】-bash: 警告:setlocale: LC_TIME: 无法改变区域选项 (zh_CN.UTF-8)

&#x1f5fa;️博客地图 &#x1f4cd;1、报错发现 &#x1f4cd;2、原因分析 &#x1f4cd;3、解决办法 &#x1f4cd;4、测试结果 1、报错发现 装好了CentOS操作系统&#xff0c;使用ssh远程登陆CentOS&#xff0c;出现如下告警信息&#xff1a; bash: 警告:setlocale…...

编程日记 2024/11/28 12:33:15

未来已来？AI技术革新改变我们的生活

在21世纪的今天&#xff0c;人工智能&#xff08;AI&#xff09;不再是一个遥远的概念&#xff0c;而是逐渐渗透到我们生活的方方面面。从智能家居到自动驾驶汽车&#xff0c;从个性化推荐系统到医疗诊断辅助&#xff0c;AI技术正在以惊人的速度发展&#xff0c;并深刻地影响着…...

编程日记 2024/11/28 12:32:14

【Linux】进程的生命之旅——诞生、消逝与守候（fork/exit/wait）

&#x1f3ac; 个人主页&#xff1a;谁在夜里看海. &#x1f4d6; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 一念既出&#xff0c;万山无阻 目录 &#x1f4d6;一、进程创建 1.fork函数 &#x1f4da;高层封装特性 &#x1f4da;fork返回值 2.写时拷…...

编程日记 2024/11/28 12:31:13

使用vcpkg自动链接tinyxml2时莫名链接其他库（例如boost）

使用vcpkg自动链接tinyxml2时莫名链接其他库&#xff08;例如boost&#xff09; vcpkg的自动链接功能非常方便&#xff0c;但在某些情况下会出现过度链接的问题。 链接错误症状 以tinyxml2为例&#xff0c;程序中调用tinyxml2的函数后&#xff0c;若vcpkg中同时存在opencv和…...

编程日记 2024/11/28 12:30:12

【去毛刺】OpenCV图像处理基础：腐蚀与膨胀操作入门

在数字图像处理中&#xff0c;形态学操作是一种常用的技术&#xff0c;用于提取图像中的特定形状或特征。其中&#xff0c;腐蚀&#xff08;Erosion&#xff09;和膨胀&#xff08;Dilation&#xff09;是两种基本的形态学运算。本文将通过一个简单的例子来演示如何使用Python中…...

编程日记 2024/11/28 12:26:08

道可云人工智能元宇宙每日资讯｜第三届京西地区发展论坛成功召开

道可云元宇宙每日简报&#xff08;2024年11月27日&#xff09;讯&#xff0c;今日元宇宙新鲜事有&#xff1a; 工信部等十二部门印发《5G规模化应用“扬帆”行动升级方案》 11月25日&#xff0c;工业和信息化部等十二部门印发《5G规模化应用“扬帆”行动升级方案》。《方案》…...

编程日记 2024/11/28 12:23:06

若依框架部署在网站一个子目录下（/admin）问题（

部署在子目录下首先修改vue.config.js文件&#xff1a; 问题一&#xff1a;登陆之后跳转到了404页面问题&#xff0c;解决办法如下&#xff1a; src/router/index.js 把404页面直接变成了首页&#xff08;大佬有啥优雅的解决办法求告知&#xff09; 问题二&#xff1a;退出登录…...

编程日记 2024/11/28 12:22:05

【ue5】UE5运行时下载视频/UE5 runtime download video（MP4）

插件还是老朋友。 节点的content type要打对。 &#xff08;参照表&#xff1a;MIME 类型&#xff08;MIME Type&#xff09;完整对照表 - 免费在线工具&#xff09; 结果展示&#xff1a;...

编程日记 2024/11/28 12:20:02

对比C++，Rust在内存安全上做的努力

简介 近年来&#xff0c;越来越多的组织表示&#xff0c;如果新项目在技术选型时需要使用系统级开发语言&#xff0c;那么不要选择使用C/C这种内存不安全的系统语言&#xff0c;推荐使用内存安全的Rust作为替代。 谷歌也声称&#xff0c;Android 的安全漏洞&#xff0c;从 20…...

编程日记 2024/11/28 12:18:00

【AI面试临阵磨枪-54】如何监控 AI 系统：成功率、延迟、Token 消耗、幻觉率、调用量

一、 面试题目面试官提问&#xff1a; “在大规模 Agent 系统中&#xff0c;你是如何建立监控体系的&#xff1f;请针对 成功率、延迟、Token 消耗、幻觉率、调用量 这五个核心指标&#xff0c;详细谈谈你的采集、分析与预警方案。”二、 知识储备1. 核心背景&#xff1a;AI 监…...

编程新知 2026/5/12 20:28:43

终极指南：如何使用Azure Quickstart Templates实现成本管理与预算警报

终极指南&#xff1a;如何使用Azure Quickstart Templates实现成本管理与预算警报 【免费下载链接】azure-quickstart-templates Azure Quickstart Templates 项目地址: https://gitcode.com/gh_mirrors/az/azure-quickstart-templates Azure Quickstart Templates是微软…...

编程新知 2026/5/12 18:46:14

Arduino Uno R3 bootloader烧写避坑大全：从USBasp驱动签名到熔丝位设置（Win10/11实测）

Arduino Uno R3 bootloader烧写全流程避坑指南&#xff08;Win10/11实战&#xff09; 当你终于完成Arduino Uno R3开发板的硬件制作&#xff0c;准备烧写bootloader时&#xff0c;可能会发现这最后一步才是真正的"魔鬼关卡"。从驱动签名问题到熔丝位设置&#xff0c;…...

编程新知 2026/5/12 17:43:23

3分钟搞定！Windows网络测速神器iperf3完整使用指南

3分钟搞定&#xff01;Windows网络测速神器iperf3完整使用指南 【免费下载链接】iperf3-win-builds iperf3 binaries for Windows. Benchmark your network limits. 项目地址: https://gitcode.com/gh_mirrors/ip/iperf3-win-builds 还在为网络速度不稳定而烦恼吗&#…...

编程新知 2026/5/12 17:12:50

微信消息自动转发：5分钟实现跨群智能消息同步

微信消息自动转发&#xff1a;5分钟实现跨群智能消息同步 【免费下载链接】wechat-forwarding 在微信群之间转发消息 项目地址: https://gitcode.com/gh_mirrors/we/wechat-forwarding 在微信群管理和团队协作中&#xff0c;你是否经常需要将重要消息手动转发到多个群聊…...

编程新知 2026/5/12 16:17:54

基于宏观通胀预测模型的利率预期重定价：华尔街降息路径为何出现系统性回撤？CPI成为关键校准变量

摘要&#xff1a;本文通过宏观通胀预测模型&#xff0c;结合利率预期曲线重定价算法与市场情绪迁移分析&#xff0c;对当前美通胀路径、CPI数据影响及华尔街降息预期变化进行系统性建模&#xff0c;分析利率政策预期从宽松交易向数据依赖模式切换的结构性原因。一、市场情绪迁移…...

编程新知 2026/5/12 14:55:55

别再死记硬背了！用一块74283芯片搞定所有BCD码转换（附实战练习题）

用74283芯片玩转BCD码转换&#xff1a;从原理到实战的终极指南 在数字电路设计与计算机组成原理的学习中&#xff0c;BCD码转换一直是让许多学生头疼的"拦路虎"。传统的死记硬背方法不仅效率低下&#xff0c;更无法应对考试中千变万化的题型。本文将彻底改变这一现状…...

编程新知 2026/5/12 14:21:35

Windows驱动存储管理终极指南：DriverStore Explorer技术深度解析

Windows驱动存储管理终极指南&#xff1a;DriverStore Explorer技术深度解析 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer DriverStore Explorer&#xff08;简称RAPR&#xff09;是一…...

编程新知 2026/5/12 13:41:53

免费开源！3分钟让Mac鼠标滚动告别卡顿的终极平滑方案

免费开源&#xff01;3分钟让Mac鼠标滚动告别卡顿的终极平滑方案 【免费下载链接】Mos 一个用于在 macOS 上平滑你的鼠标滚动效果或单独设置滚动方向的小工具, 让你的滚轮爽如触控板 | A lightweight tool used to smooth scrolling and set scroll direction independently fo…...

编程新知 2026/5/12 12:53:11

如何通过 Pretty TypeScript Errors 提升开发效率：下载量激增背后的成功秘诀 [特殊字符]

如何通过 Pretty TypeScript Errors 提升开发效率&#xff1a;下载量激增背后的成功秘诀 &#x1f525; 【免费下载链接】pretty-ts-errors &#x1f535; Make TypeScript errors prettier and human-readable in VSCode &#x1f380; 项目地址: https://gitcode.com/gh_mi…...

编程新知 2026/5/12 11:29:26