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

CSS笔记（二）类名复用

news 文章来源：https://blog.csdn.net/qq_36492090/article/details/144086570 2025/1/14 1:09:58

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

  • 代码
<!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

如何利用 Qt 的模块化架构组织大型项目

目录 1. 大型项目的架构设计 1.1 分层架构 1.2 事件驱动与异步架构 2. 模块划分与职责分离 2.1 功能模块划分 2.2 模块之间的依赖管理 3. 跨平台开发与模块复用 在大型软件项目中&#xff0c;随着代码量的增加和功能的扩展&#xff0c;项目的复杂度会显著提升。没有良好…...

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

探索Python词云库WordCloud的奥秘

文章目录 探索Python词云库WordCloud的奥秘1. 背景介绍&#xff1a;为何选择WordCloud&#xff1f;2. WordCloud库简介3. 安装WordCloud库4. 简单函数使用方法5. 应用场景示例6. 常见Bug及解决方案7. 总结 探索Python词云库WordCloud的奥秘 1. 背景介绍&#xff1a;为何选择Wo…...

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

MySQL根据idb文件恢复数据

首先得有对应表的idb文件以及建表语句 1.首先在新数据库建表 CREATE TABLE sys_menu (id bigint(20) NOT NULL,parent_id bigint(20) NULL DEFAULT NULL,name varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,type int(11) NULL DEFAULT …...

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

hadoop-mapreduce词频统计

一、Map Reduce主要阶段 二、词频统计示例 0.MapReduce 词频统计(Word Count)示例图 1. Input 阶段&#xff08;输入阶段&#xff09; 输入数据是一段文本&#xff0c;如下&#xff1a; Hadoop is a big data framework. Hadoop can store vast data. Hadoop processes big …...

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

精心修炼Java并发编程（JUC）-volatile与synchronized关键字

volatile volatile 是 JVM 提供的 最轻量级的同步机制&#xff0c;中文意思是不稳定的&#xff0c;易变的&#xff0c;用 volatile 修饰变量是为了保证变量在多线程中的可见性&#xff0c;它表达的含义是&#xff1a;告诉编译器&#xff0c;对这个变量的读写&#xff0c;需要基…...

编程日记 2024/11/28 12:10:54

【ROS2】ROS2 与 ROS1 编码方式对比（Python实现）

目录 一、初始化和关闭节点二、发布者三、订阅者四、服务端五、客户端六、参数管理七、日志记录八、生命周期管理 ROS2 在 Python 编程中引入了一些新的概念和 API&#xff0c;这些变化使得代码更加模块化和易于维护。特别是 rclpy 库提供了更丰富的功能和更好的错误处理机制&a…...

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

ElasticSearch的下载和基本使用（通过apifox）

1.概述 一个开源的高扩展的分布式全文检索引擎&#xff0c;近乎实时的存储&#xff0c;检索数据 2.安装路径 Elasticsearch 7.8.0 | Elastic 安装后启动elasticsearch-7.8.0\bin里的elasticsearch.bat文件&#xff0c; 启动后就可以访问本地的es库http://localhost:9200/ …...

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

城市轨道交通运营控制指挥中心设计方案

为某城市轨道交通运营控制指挥中心（OCC）的设计提供方案时，我们需要考虑到多个方面的需求，包括系统架构、设备选择、功能实现、数据流与监控、通信管理等。以下是一个综合性的设计方案，涉及系统硬件和软件的选择、布局规划、安全性等方面，以确保指挥中心的高效运作、实时监…...

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

多目标优化算法：多目标河马优化算法（MOHOA）求解ZDT1、ZDT2、ZDT3、ZDT4、ZDT6，提供完整MATLAB代码

一、河马优化算法 河马优化算法&#xff08;Hippopotamus optimization algorithm&#xff0c;HO&#xff09;由Amiri等人于2024年提出的一种模拟自然界中河马觅食行为的新型群体智能优化算法。该算法由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientifi…...

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

线程与进程的个人理解

进程&#xff08;Process&#xff09;&#xff1a; 一个程序在执行时&#xff0c;操作系统为其分配的资源&#xff08;如内存、CPU 时间等&#xff09;构成了一个进程。每个进程都有自己的独立的地址空间、堆栈和局部变量&#xff0c;它们之间不共享内存&#xff08;除非通过特…...

编程日记 2024/11/28 11:58:35

wordpress 数据表结构/网络舆情管理

redux redux也是一个架构思维&#xff0c; 在这个架构思维中 React 充当是 视图 V redux使用流程 ( todolist – 增加一条数据 ) redux是一个架构思维&#xff0c;我们实现需要一个工具&#xff0c;这个工具叫做redux安装redux $ yarn add redux在src下新建一个store,store中…...

编程日记 2025/1/14 0:11:49

吧网站做软件的软件下载/网推app怎么推广

安装证书文件说明&#xff1a;1. 证书文件214032361520874.pem&#xff0c;包含两段内容&#xff0c;请不要删除任何一段内容。2. 如果是证书系统创建的CSR&#xff0c;还包含&#xff1a;证书私钥文件214032361520874.key。( 1 ) 在Nginx的安装目录下创建cert目录&#xff0c;…...

编程日记 2025/1/13 22:45:58

天安节能科技园公司做网站/荥阳网站优化公司

系统为LINUX REDHAT 5这台机器创建了一个oracle 用户&#xff0c;没有安装ORACLE 软件只是为了将另一台数据库服务器 的备份包晚上1点的时候SCP到这台机器上 复制工作在1&#xff1a;30就结束了。但是白天看这台机器的进程有很多的 /usr/sbin/sshd 进程 我查了ps 的命令 &#…...

编程日记 2025/1/13 22:09:40

淄博营销网站建设公司/如何进行网站性能优化

Nginx 配置高可用的集群 配置高可用的准备工作 &#xff08;1&#xff09;需要两台服务器 192.168.56.10 和 192.168.56.11&#xff08;VirtulBox搭建虚拟机集群环境&#xff08;Vagrant &#xff09;&#xff09; &#xff08;2&#xff09;在两台服务器安装 nginx&#xff0…...

编程日记 2025/1/13 21:51:32

花都企业网站建设/sem竞价是什么意思

匿名的定义 在讨论比特币是否具备匿名性之前&#xff0c;我们需要对匿名做一个定义。我们需要准确地理解到底什么是匿名&#xff0c;以及它与其他一些相似术语的关系&#xff0c;比如隐私。匿名和化名&#xff08;pseudonymity&#xff09;在其他你可能更熟悉的情形下&#xff…...

编程日记 2025/1/13 20:30:42

济南做网站价格/知乎软文推广

1.指针通过 new 或 new[] &#xff0c;向系统“申请”得到一段内存空间&#xff0c;这段 内存空间必须在不需要将它释放 了。int*p newint[100]; intgirl[100]; p girl; delete [] p;灾难在 delete [] p 时发生。我们原意是要释放p最初通过new int[100]而得到的内存空间&…...

编程日记 2025/1/13 18:57:26