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

前端小案例——520表白信封

news 来源：原创 2025/5/14 2:16:16

前言：我们在学习完了HTML和CSS之后，就会想着使用这两个东西去做一些小案例，不过又没有什么好的案例让我们去练手，本篇文章就提供里一个案例——520表白信封

✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客

在开始讲解这个案例之前，先让我们了解一下本案例所需的前置知识：

HTML 布局：创建合适的 HTML 结构，使用标签如 <input>、<label>、<div>、<img> 和 <h1> 等。
CSS 布局与样式：设置卡片的外观、尺寸和基本样式，使用 Flexbox 居中布局。
CSS 动画与变换：学习如何使用 transform 创建旋转和位移效果，如何使用 transition 来平滑过渡。
HTML 与 CSS 交互：利用复选框和标签来控制动画效果，结合 :checked 伪类来触发动画。
背景和图片处理：使用 background-image 和 background-size 来处理卡片上的图像，给卡片正面和背面添加背景。
细节调整：学习如何通过阴影和字体样式提升视觉效果，让卡片看起来更生动。

——为了方便好奇的读者，我们在文章的最后，给出了实现这个案例的全部代码，读者可以直接复制后在自己的编译器上执行一下！！！（以下为所需的图片）

文件（读者如果想要进行练习可以先右键下载！！！）

那么现在正式开始我们的讲解：

1.HTML骨架的搭建

2.CSS加工

（1）基础布局与背景样式

解释：

（2）隐藏复选框

解释：

（4）卡片正面样式

解释：

（5）卡片正面装饰

解释：

（6）卡片内部样式

解释：

（7）卡片交互样式

解释：

（8）卡片翻转动画

解释：

1.HTML骨架的搭建

在实现一个案例的最开始，我们要对其骨架（即HTML）进行构建，以下我们几乎对每一个代码都进行了解释，希望读者可以根据注释进行理解一下（骨架的搭建比较简单）：

<!DOCTYPE html> 
<html lang="en"> <head><meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 导入 Google 字体 --><link href="https://fonts.googleapis.com/css?family=Lato:300|Sacramento" rel="stylesheet"> <!-- 导入 Lato 和 Sacramento 字体 --><link rel="stylesheet" href="./520.css"> <!-- 引入外部 CSS 文件 520.css --><title>秋刀鱼不做梦</title> 
</head><body><div class="card"> <!-- 创建一个包含卡片的 div 元素 --><input id="open" type="checkbox"> <!-- 创建一个复选框用于控制卡片的展开与折叠 --><label class="open" for="open"></label> <!-- 设置标签，点击标签时会控制复选框状态 --><div class="card-front"> <!-- 卡片的正面 --><img src="./love.png" alt="" class="love"> <!-- 显示一张图片，图片路径为 love.png --><div class="note">Open it! 💗💗💗 </div> <!-- 在卡片正面显示一条提示信息 --></div><div class="card-inside"> <!-- 卡片的内部 --><div class="text-one"> <!-- 包含文本内容的 div --><h1>💌520💌</h1> <!-- 显示标题 "💌520💌" --><h2> <!-- 显示副标题 -->Your eyes are really beautiful, there are rain, sun and moon, mountains,rivers, clouds, flowers and birds,but my eyes are better, because I have you in my eyes.</h2></div></div></div>
</body></html>

根据上述的代码执行之后，我们就可以得到以下的结果：

嗯~~~看起来并不是很好看，没关系，我们现在就对其进行“化妆打扮”。

2.CSS加工

（1）基础布局与背景样式

/* 设置整个页面的样式 */
body {height: 100vh; /* 设置页面的高度为视口高度 */display: flex; /* 使用 Flexbox 布局 */justify-content: center; /* 水平居中对齐 */align-items: center; /* 垂直居中对齐 */background-color: #f2acac; /* 设置页面背景色为浅粉色 */
}

解释：

body：这部分代码定义了页面的整体布局。
height: 100vh;：设置页面的高度为视口高度（即屏幕的可视区域），确保页面能够自适应屏幕大小。
display: flex;：使用 Flexbox 布局，方便实现元素的对齐。
justify-content: center; 和 align-items: center;：这两个属性实现了内容的水平和垂直居中，将页面的元素（比如卡片）居中显示。
background-color: #f2acac;：设置页面的背景颜色为浅粉色，作为页面的整体色调。

（2）隐藏复选框

input#open {display: none; /* 隐藏复选框元素，不显示在页面上 */
}

解释：

input#open：这是一个隐藏的复选框（type="checkbox"）。
display: none;：通过 display: none; 隐藏复选框，使其不显示在页面上，但依然可以通过 JavaScript 或 CSS 控制它的状态（例如选中或未选中）。

（3）卡片容器样式

.card {position: relative; /* 使卡片容器具有定位属性 */width: 300px; /* 设置卡片的宽度 */height: 300px; /* 设置卡片的高度 */transform-style: preserve-3d; /* 允许卡片元素使用 3D 转换 */transform: perspective(2500px); /* 设置视距，使得3D效果更加明显 */transition: .3s; /* 设置卡片翻转时的过渡效果 */
}

解释：

.card：这是卡片容器的样式，包含卡片正面和内侧内容。

position: relative;：让卡片容器可以相对于自己定位。
width: 300px; height: 300px;：设置卡片容器的固定尺寸。
transform-style: preserve-3d;：允许子元素在 3D 空间中进行变换，使得卡片内部的子元素（如正面和背面）可以按照 3D 效果进行旋转。
transform: perspective(2500px);：为 3D 变换设置视距，使得卡片的旋转效果更加生动。
transition: .3s;：设置卡片的过渡时间，使得卡片翻转时的动画效果更加平滑，持续时间为 0.3 秒。

（4）卡片正面样式

.card-front {position: relative; /* 设置相对定位 */background-color: #fff0f3; /* 设置正面背景色为浅粉色 */width: 300px; /* 宽度与卡片相同 */height: 300px; /* 高度与卡片相同 */transform-origin: left; /* 设置旋转的原点为卡片的左侧 */box-shadow: 30px 0 50px rgba(0, 0, 0, 0.3); /* 给正面添加阴影效果 */transition: .3s; /* 添加过渡效果，使翻转更平滑 */
}

解释：

.card-front：这是卡片的正面部分，包含卡片的正面背景和阴影效果。
position: relative;：使正面相对于卡片容器进行定位。
background-color: #fff0f3;：设置正面的背景色为浅粉色。
width: 300px; height: 300px;：设置正面宽度和高度与卡片容器一致。
transform-origin: left;：设置旋转的原点在卡片的左侧，当进行 3D 旋转时，卡片会从左侧开始旋转。
box-shadow: 30px 0 50px rgba(0, 0, 0, 0.3);：为正面添加阴影效果，使得卡片看起来更立体。
transition: .3s;：为正面的翻转效果添加过渡，使得翻转动画更平滑。

（5）卡片正面装饰

.card-front:before {content: ""; /* 添加空内容 */position: absolute; /* 设置绝对定位 */width: 280px; /* 设置装饰元素的宽度 */height: 280px; /* 设置装饰元素的高度 */background-color: #f38e8e; /* 设置装饰的背景颜色 */top: 10px; /* 设置装饰相对正面的顶部位置 */left: 10px; /* 设置装饰相对正面的左侧位置 */
}

解释：

.card-front:before：使用伪元素 :before 在卡片正面上创建一个额外的装饰层。
content: "";：伪元素 before 必须有 content 属性，即使为空字符串。
position: absolute;：使该装饰元素相对于卡片正面进行定位。
width: 280px; height: 280px;：设置装饰元素的大小。
background-color: #f38e8e;：设置装饰元素的背景颜色。
top: 10px; left: 10px;：定位该装饰元素，使其位于卡片正面的 10px 内边距。

（6）卡片内部样式

.card-inside {position: absolute; /* 设置绝对定位 */background-color: #fff0f3; /* 背景色 */width: 300px; /* 宽度与卡片相同 */height: 300px; /* 高度与卡片相同 */z-index: -1; /* 让内侧元素处于背后 */left: 0; /* 设置左侧位置 */top: 0; /* 设置顶部位置 */background-color: #f5f5f5; /* 设置内侧背景色 */
}

解释：

.card-inside：这是卡片的内部部分，当卡片翻转时会显示内部内容。
position: absolute;：使得卡片内部内容绝对定位，确保其位于卡片容器内部。
z-index: -1;：将卡片内部的内容放在卡片的背面，使其不会遮挡正面或其他内容。
background-color: #f5f5f5;：设置卡片内侧的背景颜色。

（7）卡片交互样式

.open {position: absolute; /* 设置绝对定位 */width: 300px; /* 宽度与卡片相同 */height: 300px; /* 高度与卡片相同 */left: 0; /* 设置左侧位置 */top: 0; /* 设置顶部位置 */background-color: transparent; /* 使透明层透明 */z-index: 6; /* 设置透明层的 z-index，使其处于最上层 */cursor: pointer; /* 鼠标悬停时显示为可点击状态 */
}

解释：

.open：这是用于触发卡片翻转的透明层。通过点击这个区域，卡片会翻转展示背面。
position: absolute;：确保 .open 元素定位在卡片上层。
background-color: transparent;：该区域是透明的，仅用于捕捉用户的点击事件。
z-index: 6;：设置 z-index 确保 .open 元素位于卡片的最上层，能够响应点击事件。
cursor: pointer;：设置鼠标悬停时显示为指针图标，表示该元素是可点击的。

（8）卡片翻转动画

#open:checked~.card-front {transform: rotateY(-145deg); /* 当复选框被选中时，卡片正面旋转 */
}#open:checked~.card-front:before {z-index: 5; /* 设置装饰层的层级 */background-color: #fff0f3; /* 修改背景颜色 */width: 330px; /* 设置装饰元素的宽度 */height: 300px; /* 设置装饰元素的高度 */top: 0; /* 设置装饰元素的顶部位置 */left: 0; /* 设置装饰元素的左侧位置 */background-image: url(./love.gif); /* 设置背景图片 */background-size: cover; /* 设置背景图片填充 */transform: rotateY(155deg) translateX(16px); /* 旋转并位移装饰元素 */
}

解释：

#open:checked~.card-front：当复选框被选中时，卡片正面会进行旋转。
- transform: rotateY(-145deg);：使卡片正面沿 Y 轴旋转 -145 度，表现为卡片翻转。
#open:checked~.card-front:before：当复选框被选中时，卡片正面装饰也会发生变化。
- background-image: url(./love.gif);：设置装饰元素的背景为动图，增强动态效果。
- transform: rotateY(155deg) translateX(16px);：旋转并位移装饰元素，创建卡片翻转的视觉效果。

——至此，我们就完成了对上述HTML骨架的"打扮"了，这里我们在整体的总结一下上述的流程：

页面布局：
- 使用 flex 布局将页面的内容垂直和水平居中，设置背景颜色为浅粉色 (#f2acac)。
卡片的结构和基本样式：
- 创建了一个 .card 容器，其中包含卡片的正面 (.card-front) 和内部内容 (.card-inside)。
- 通过 transform 和 perspective 使卡片具备 3D 旋转效果，同时设置过渡时间为 0.3s，以便实现平滑的卡片翻转效果。
卡片翻转与动画：
- 通过隐藏的复选框 (input#open) 控制卡片的翻转。当复选框选中时，使用 rotateY(-145deg) 使卡片的正面旋转，暴露出卡片的内部。
- .card-front:before 元素用于装饰正面，翻转时会显示一个背景图（如 love.gif）和一些其他的视觉效果。
提示文本与图片：
- 在卡片正面展示一个提示文本 .note，并添加阴影效果。
- 图片被居中放置，位于卡片的顶部。
卡片内部内容：
- 卡片内部展示了一段文本，使用 Sacramento 字体，并进行了样式设计，使文本居中且具有柔和的粉色调。
交互与控制：
- 通过复选框的选中状态 (#open:checked) 来控制卡片的翻转效果。点击复选框后，卡片将翻转并展示背面的内容。

现在在让我们执行一下程序，就可以得到以下结果了：

在文章的结尾，我们给出所有的代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 导入 Google 字体 --><link href="https://fonts.googleapis.com/css?family=Lato:300|Sacramento" rel="stylesheet"><!-- 导入 Lato 和 Sacramento 字体 --><style>/* 设置整个页面的样式 */body {height: 100vh;/* 设置页面的高度为视口高度 */display: flex;/* 使用 Flexbox 布局 */justify-content: center;/* 水平居中对齐 */align-items: center;/* 垂直居中对齐 */background-color: #f2acac;/* 设置页面背景色为浅粉色 */}/* 隐藏复选框 */input#open {display: none;/* 隐藏复选框元素，不显示在页面上 */}/* 设置卡片容器的基本样式 */.card {position: relative;/* 让卡片具有定位属性 */width: 300px;/* 设置卡片的宽度 */height: 300px;/* 设置卡片的高度 */transform-style: preserve-3d;/* 允许 3D 变换 */transform: perspective(2500px);/* 设置视距，使得3D效果更加明显 */transition: .3s;/* 设置卡片翻转时的过渡效果 */}/* 卡片的正面样式 */.card-front {position: relative;/* 设置相对定位 */background-color: #fff0f3;/* 设置正面背景色为浅粉色 */width: 300px;/* 宽度与卡片相同 */height: 300px;/* 高度与卡片相同 */transform-origin: left;/* 设置旋转的原点为卡片的左侧 */box-shadow: 30px 0 50px rgba(0, 0, 0, 0.3);/* 给正面添加阴影效果 */transition: .3s;/* 添加过渡效果，使翻转更平滑 */}/* 在卡片正面添加装饰 */.card-front:before {content: "";/* 添加空内容 */position: absolute;/* 设置绝对定位 */width: 280px;/* 设置装饰元素的宽度 */height: 280px;/* 设置装饰元素的高度 */background-color: #f38e8e;/* 设置装饰的背景颜色 */top: 10px;/* 设置装饰相对正面的顶部位置 */left: 10px;/* 设置装饰相对正面的左侧位置 */}/* 卡片的内侧样式 */.card-inside {position: absolute;/* 设置绝对定位 */background-color: #fff0f3;/* 背景色 */width: 300px;/* 宽度与卡片相同 */height: 300px;/* 高度与卡片相同 */z-index: -1;/* 让内侧元素处于背后 */left: 0;/* 设置左侧位置 */top: 0;/* 设置顶部位置 */background-color: #f5f5f5;/* 设置内侧背景色 */}/* 设置用于点击翻转卡片的透明层 */.open {position: absolute;/* 设置绝对定位 */width: 300px;/* 宽度与卡片相同 */height: 300px;/* 高度与卡片相同 */left: 0;/* 设置左侧位置 */top: 0;/* 设置顶部位置 */background-color: transparent;/* 使透明层透明 */z-index: 6;/* 设置透明层的 z-index，使其处于最上层 */cursor: pointer;/* 鼠标悬停时显示为可点击状态 */}/* 当复选框被选中时，卡片正面进行翻转 */#open:checked~.card-front {transform: rotateY(-145deg);/* 通过旋转卡片正面实现翻转效果 */}/* 当复选框被选中时，卡片正面装饰的样式变化 */#open:checked~.card-front:before {z-index: 5;/* 设置装饰层的 z-index 使其高于卡片正面 */background-color: #fff0f3;/* 背景色 */width: 330px;/* 调整宽度 */height: 300px;/* 高度不变 */top: 0;/* 调整顶部位置 */left: 0;/* 调整左侧位置 */background-image: url(./love.gif);/* 使用 GIF 动画作为背景 */background-size: cover;/* 使背景图像覆盖整个区域 */transform: rotateY(155deg) translateX(16px);/* 3D 旋转和位移效果 */}/* 卡片正面的提示文本样式 */.note {position: relative;/* 设置相对定位 */width: 200px;/* 设置宽度 */height: 150px;/* 设置高度 */background-color: #fff0f3;/* 设置背景色 */top: 85px;/* 设置顶部位置 */left: 50px;/* 设置左侧位置 */color: #333;/* 设置文本颜色 */font: 900 35px '';/* 设置字体样式 */display: flex;/* 使用 flex 布局 */align-items: center;/* 垂直居中对齐文本 */text-align: center;/* 水平居中对齐文本 */filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));/* 添加阴影效果 */}/* 图片的样式 */img {position: absolute;/* 设置绝对定位 */width: 90px;/* 设置图片宽度 */left: 50%;/* 图片水平居中 */transform: translateX(-50%);/* 精确水平居中 */z-index: 2;/* 设置图片的 z-index */top: 25px;/* 设置图片距离顶部的距离 */}/* 卡片内部文本样式 */.text-one {position: absolute;/* 设置绝对定位 */color: #333;/* 设置文本颜色 */font-size: 15px;/* 设置字体大小 */top: 30px;/* 设置顶部位置 */width: 300px;/* 设置宽度与卡片相同 */text-align: center;/* 设置文本居中 */color: #ff9999;/* 设置字体颜色 */font-family: 'Sacramento';/* 设置字体为 Sacramento */}/* 卡片内部文本的额外样式 */.text-one:after {content: "";/* 添加空内容 */top: 80px;/* 设置位置 */}</style><title>秋刀鱼不做梦</title>
</head><body><div class="card"> <!-- 创建一个包含卡片的 div 元素 --><input id="open" type="checkbox"> <!-- 创建一个复选框用于控制卡片的展开与折叠 --><label class="open" for="open"></label> <!-- 设置标签，点击标签时会控制复选框状态 --><div class="card-front"> <!-- 卡片的正面 --><img src="./love.png" alt="" class="love"> <!-- 显示一张图片，图片路径为 love.png --><div class="note">Open it! 💗💗💗 </div> <!-- 在卡片正面显示一条提示信息 --></div><div class="card-inside"> <!-- 卡片的内部 --><div class="text-one"> <!-- 包含文本内容的 div --><h1>💌520💌</h1> <!-- 显示标题 "💌520💌" --><h2> <!-- 显示副标题 -->Your eyes are really beautiful, there are rain, sun and moon, mountains,rivers, clouds, flowers and birds,but my eyes are better, because I have you in my eyes.</h2></div></div></div>
</body></html>

以上就是本篇文章全部内容~~

前端小案例——520表白信封

前言：我们在学习完了HTML和CSS之后，就会想着使用这两个东西去做一些小案例，不过又没有什么好的案例让我们去练手，本篇文章就提供里一个案例——520表白信封 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主…...

编程日记 2025/5/14 2:16:16

《机器学习》——线性回归模型

文章目录线性回归模型简介一元线性回归模型多元线性回归模型误差项分析一元线性模型实例完整代码多元线性模型实例完整代码线性回归模型简介线性回归是利用数理统计中回归分析，来确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方法。相关关系&…...

编程日记 2025/5/13 3:05:28

测试用例颗粒度说明

当我们在编写测试用例时，总是会遇到一个问题：如何确定测试用例的颗粒度？测试用例过于粗糙，可能无法全面覆盖系统的细节；而颗粒度过细，又会导致测试重复、冗余。掌握合适的颗粒度，不仅可以提高测…...

编程日记 2025/5/8 23:11:55

Kali 离线安装 ipmitool 笔记

在Kali Linux上离线安装 ipmitool 的步骤如下： 一、获取 ipmitool 的安装包和依赖由于是离线安装，您需要先在一台可以联网的机器上下载 ipmitool 及其所有依赖包。方法一：使用 apt 下载包在联网的机器上，运行以下命令以准备…...

编程日记 2025/5/14 2:13:22

基于word2vec的文本大数据分析

基于word2vec的文本大数据分析效果：一、简介 Word2Vec是一种词向量表示方法，是在自然语言处理领域（NLP）的神经网络模型，是一种无监督学习，包含两种模型架构：CBOW模型与Skip-Gram模型。常用于：相似度计算、词类聚类、文本分类、句子和文档表示、搜索引擎优化、情…...

编程日记 2025/5/14 1:36:45

BGP基础配置实验

一、实验拓补二、实验要求及分析实验要求： 1，R1为AS 100区域；R2、R3、R4为AS 200区域且属于OSPF协议；R5为AS 300区域； 2，每个设备上都有环回，且通过环回可以使设备互通； 实验分…...

编程日记 2025/5/14 1:33:42

Maven核心与单元测试

目录一. Maven概述二. IDEA集成Maven2.1 创建Maven项目2.2 Maven坐标2.3 导入Maven项目三. 依赖管理四. Maven的生命周期五. 单元测试5.1 快速入门5.2 断言5.3 常见注解5.4 依赖范围六. Maven常见问题 \quad 一. Maven概述 \quad \quad 二. IDEA集成Maven \quad 2.1 创建Mav…...

编程日记 2025/5/12 1:58:51

Go语言的的继承（Inheritance）基础知识

Go语言的继承（Inheritance）基础知识引言在面向对象编程（OOP）中，继承是一个重要的概念，它允许一个类（子类）继承另一个类（父类）的属性和方法。这种机制在许…...

编程日记 2025/5/10 20:30:42

常见的框架漏洞复现

1.Thinkphp Thinkphp5x远程命令执行及getshell 搭建靶场 cd vulhub/thinkphp/5-rce docker-compose up -d 首页漏洞根本源于 thinkphp/library/think/Request.php 中method方法可以进行变量覆盖，通过覆盖类的核心属性filter导致rce，其攻击点较为多&…...

编程日记 2025/5/10 7:59:04

SLA 简介

SLA 是 Service Level Agreement（服务级别协议） 的缩写，广泛应用于企业服务管理、IT服务、云计算等领域。以下是对 SLA 的详细解释： SLA 的定义服务级别协议（SLA）是服务提供方（Service Provid…...

编程日记 2025/5/10 21:32:24

基于动力学的MPC控制器设计盲点解析

文章目录 Apollo MPC控制器的设计架构误差模型和离散化预测模型推导目标函数和约束设计优化求解优化OSQP求解器参考文献 Apollo MPC控制器的设计架构误差模型和离散化状态变量和控制变量 1、Apollo MPC控制器中状态变量主要有如下6个 matrix_state_ Matrix::Zero(basic_stat…...

编程日记 2025/5/13 4:40:36

leetcode 面试经典 150 题：轮转数组

链接轮转数组题序号189题型数组解法1. 额外数组法，2. 原数组翻转法（三次翻转法）难度中等熟练度✅✅✅✅ 题目给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。示例 1: 输入: nums [1,2,…...

编程日记 2025/5/14 0:08:35

Elasticsearch：探索 Elastic 向量数据库的深度应用

Elasticsearch：探索 Elastic 向量数据库的深度应用一、Elasticsearch 向量数据库简介 1. Elasticsearch 向量数据库的概念 Elasticsearch 本身是一个基于 Lucene 的搜索引擎，提供了全文搜索和分析的功能。随着技术的发展，Elasticsearch 也…...

编程日记 2025/5/5 12:13:54

From matplotl1b.path 1mport failed to import ImportError:numpy.core.multiarray

问题：From matplotl1b.path 1mport failed to import ImportError:numpy.core.multiarray 安装labelme的时候说numpy与环境不兼容，调不了labelme 解决1：安装虚拟环境 （这里安装labelmede 虚拟环境） #查看python版本 …...

编程日记 2025/5/10 0:34:39

Docker- Unable to find image “hello-world“locally

Docker- Unable to find image “hello-world“locally 文章目录 Docker- Unable to find image “hello-world“locally问题描述一. 切换镜像1. 编辑镜像源2. 切换镜像内容二、检查设置1、重启dockers2、检查配置是否生效3. Docker镜像源检查4. Dokcer执行测试三、自定义…...

编程日记 2025/5/14 1:42:02

linux定时执行脚本的方法

使用 cron 服务（推荐）简介： Cron 是一个基于时间的任务调度程序，它允许用户在指定的时间间隔自动运行命令或脚本。它使用crontab（cron table 的缩写）文件来存储定时任务的配置信息。操作步骤：编辑用户的 crontab 文件：在终端中输入crontab -e命令。这将打开一个文本编…...

编程日记 2025/5/12 17:29:32

Docker 中启动 Nacos

要在 Docker 中启动 Nacos，你可以使用以下步骤来启动 Nacos 服务。我已经有了 swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nacos/nacos-server:v2.4.2.1 这个镜像。 1. 创建并启动 MySQL 容器（Nacos 依赖 MySQL） Nacos 默认使用 …...

编程日记 2025/3/12 12:32:09

【计算机网络】课程实验三跨交换机实现 VLAN 间路由

实验 3 跨交换机实现 VLAN 间路由一、实验目的 1．理解跨交换机之间VLAN的特点。 2．掌握如何在交换机上划分基于端口的VLAN，给VLAN内添加端口。 3．利用三层交换机跨交换机实现 VLAN 间路由。二、实验分析与设计【背景描述…...

编程日记 2025/5/14 1:14:12

【74CH192D+4511减法30进制2022年7月7日】

缘由30秒定时器错误帮我看看-大数据-CSDN问答电路图用到S1倒计时信号控制，S2置数30。从演示可以看到置数，开始，暂停，继续，等于0时清零，并且灯亮，最后断开信号输入完成所有功能。看题主有自己动…...

编程日记 2025/5/14 1:56:31

基于ESP32的桌面小屏幕实战[5]：PCB下单

1. 焊接调试前准备 PCB下单点击“PCB下单” 检查一下DRC 确认无错误之后，确认下单然后就会跳转到下面的网页基本上保持默认选项即可。可以看到“焊盘喷镀”有3个选项。在选择表面处理工艺时，应综合考虑产品的具体需求、环保法规以及成本等因素。例…...

编程日记 2025/5/14 1:55:29

孤独症儿童寄宿：温馨寄宿，陪伴成长

在社会的各个角落，有一群特殊的孩子，他们生活在自己的世界里，对外界的感知和反应与众不同。他们，就是孤独症（自闭症）儿童。孤独症，这个看似遥远的名词，却真实地影响着无数家庭&#…...

编程日记 2025/5/14 1:55:29

云备份项目--服务端编写

文章目录 7. 数据管理模块7.1 如何设计7.2 完整的类 8. 热点管理8.1 如何设计8.2 完整的类 9. 业务处理模块9.1 如何设计9.2 完整的类9.3 测试9.3.1 测试展示功能完整的代码–gitee链接 7. 数据管理模块 TODO: 读写锁？普通锁？ 7.1 如何设计需要管理…...

编程日记 2025/5/13 7:43:08

CSS——2.书写格式一

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head><body><!--style"color: red;font-size: 20px;&quo…...

编程日记 2025/5/10 8:29:28

【保姆级】sql注入之堆叠注入

一、堆叠注入的原理 mysql数据库sql语句的默认结束符是以";"号结尾，在执行多条sql语句时就要使用结束符隔开,而堆叠注入其实就是通过结束符来执行多条sql语句比如我们在mysql的命令行界面执行一条查询语句,这时语句的结尾必须加上分号结束 select * fr…...

编程日记 2025/5/14 2:14:33

大模型推理加速调研（框架、方法）

大模型推理加速调研（框架、方法） 大模型推理框架调研总结推理框架TensorRT-LLMllama.cppmnn-llmfastllmmlc-llm 环境搭建&部署推理环境llama.cppfastllmmnn-llmvllm vllm_openai_completions.pylmdeployTensorRT-LLM 大模型加速技术总结模型压缩量化…...

编程日记 2025/5/14 2:03:08

js -音频变音（听不出说话的人是谁）

学习参考来源： https://zhuanlan.zhihu.com/p/634848804 https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API 实际效果： http://www.qingkong.zone/laboratory?typeaudio-confusion 前言本文内容可结合上面学习参考来源，结合…...

编程日记 2025/5/13 9:18:56

3D Object Detection和6D Pose Estimation有什么异同？

知乎讨论： (99 封私信 / 95 条消息) 3D Object Detection和6D Pose Estimation有什么异同？ - 知乎 GPT回答： 3D Object Detection 和 6D Pose Estimation 都是计算机视觉领域的重要任务，广泛应用于机器人、自动驾驶和增强现实…...

编程日记 2025/5/6 12:29:02

NRF24L01模块STM32通信-通信初始化

目录前言一、IO口初始化二、模拟SPI的基础代码 1.一些代码的宏定义 2.起始信号 3.CS,SCK,MOSI操作 4.MISO,IRQ操作三.中间层代码 1.字节的输入和读取 2.写操作 3.读操作四.应用层代码 1.24L01的检测 2.在main函数进行简单验证 3.24L01宏定义的代码总结前…...

编程日记 2025/5/11 21:34:01

vue Element Ui Upload 上传点击一个按钮，选择多个文件后直接上传，使用防抖解决多次上传的问题。

问题： 在使用Element Ui Upload 上传文件时，选择多个文件上传时，on-change事件会一个一个返回上传的文件，导致前端不知道什么时候可以拿到全部上传的文件，再一起调后台接口。解决方法： 上传文件后&…...

编程日记 2025/5/12 17:46:16

算法题（26）：最后一个单词的长度

审题： 需要我们返回最后一个单词的长度，并且字符串内只有空格来分割单词思路： 找到最后一个单词的方法就是从后开始遍历找到第一个非空格的元素，称为pos（第一个出现单词的位置） 然后再从pos位置开始反向寻…...

编程日记 2025/5/9 15:43:17

Ungoogled Chromium127 编译指南 MacOS 篇（二）- 项目要求

1. 引言在开始编译 Ungoogled Chromium 之前，我们需要确保系统满足所有必要的硬件和软件要求。由于浏览器编译是一个资源密集型的任务，合适的硬件配置和完整的软件环境至关重要。本文将详细介绍编译 Ungoogled Chromium 所需的各项要求。 2. 硬件要求…...

编程日记 2025/5/12 6:30:14

nginx配置-其他配置

nginx配置-其他配置 server_tokens server_tokens server_token on/off 是 Nginx 配置文件中的一个指令，用于控制 Nginx 服务器在响应 HTTP 请求时是否显示服务器的版本信息。默认情况下，Nginx 会在响应头中包含服务器的版本号，例如 Serve…...

编程日记 2025/5/14 1:11:58

Springboot使用RabbitMQ实现关闭超时订单的一个简单示例

1.maven中引入rabbitmq的依赖： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency> 2.application.yml中进行rabbitmq相关配置： # rabbit…...

编程日记 2025/5/11 4:21:11

QT-------------对话框和多窗口程序设计

一、标准对话框 1. QFileDialog 对话框功能：提供文件选择对话框，方便用户选择文件或目录。 #include <QApplication> #include <QFileDialog> #include <QMessageBox>int main(int argc, char *argv[]) {QApplication app(argc, a…...

编程日记 2025/5/6 12:57:50

信息科技伦理与道德2：研究方法

1 问题描述 1.1 讨论？ 请挑一项信息技术，谈一谈为什么认为他是道德的/不道德的，或者根据使用场景才能判断是否道德。判断的依据是什么（自身的道德准则）？为什么你觉得你的道德准则是合理的，其他…...

编程日记 2025/5/12 13:24:40

Linux(Centos 7.6)命令详解：ls

1.命令作用列出目录内容(list directory contents) 2.命令语法 Usage: ls [OPTION]... [FILE]... 3.参数详解 OPTION: -l，long list 使用长列表格式-a，all 不忽略.开头的条目（打印所有条目，包括.开头的隐藏条目&#xff09…...

编程日记 2025/5/4 22:17:56

深入理解 WebSocket：实时通信的基础

随着互联网技术的不断发展，实时通信逐渐成为现代应用程序中不可或缺的一部分。无论是即时通讯应用、在线游戏、社交平台还是股票交易系统，都需要能够在客户端与服务器之间快速、高效地传输数据。传统的 HTTP 协议虽然简单且广泛应用，但它并不…...

编程日记 2025/5/1 0:19:24

【网络协议】开放式最短路径优先协议OSPF详解（一）

OSPF 是为取代 RIP 而开发的一种无类别的链路状态路由协议，它通过使用区域划分以实现更好的可扩展性。文章目录链路状态路由协议OSPF 的工作原理OSPF 数据包类型Dijkstra算法、管理距离与度量值OSPF的管理距离OSPF的度量值链路状态路由协议的优势拓扑结构路由器O…...

编程日记 2025/5/12 17:51:55

2000-2020年各省地区生产总值数据/各省gdp数据

2000-2020年各省地区生产总值数据/各省gdp数据 1、时间：2000-2020年 2、来源：国家统计局 3、指标：行政区划代码、地区、年份、地区生产总值 4、范围：31省指标解释：地区生产总值（Regional GDP&#xf…...

编程日记 2025/5/11 5:12:52

消息转换器在SpringMVC执行流程

消息转换器的工作机制内部工作流程读取（Read）操作当接收到一个包含实体内容的HTTP请求时，Spring MVC会根据请求头中的Content-Type属性来确定应该使用哪个HttpMessageConverter来解析请求体。DispatcherServlet会遍历已注册的HttpMessage…...

编程日记 2025/5/11 14:03:16

7. C语言运算符详解

本章目录: 前言C语言运算符的分类1. 算术运算符2. 关系运算符3. 逻辑运算符4. 位运算符5. 赋值运算符6. 杂项运算符运算符优先级前言在C语言中，运算符是程序中执行各种操作的核心工具，涉及算术运算、逻辑判断、位操作等多个方面。掌握C语言中的各种运…...

编程日记 2025/5/11 5:10:27

一、准备工作（2）：部署TensorFlow和Keras

目录一、确保已安装 Python 和 pip 二、打开命令行界面并执行安装命令 Windows macOS 和 Linux 三、安装过程中的注意事项创建虚拟环境激活虚拟环境在虚拟环境中安装包四、验证安装五、常见问题排查六、下一步 pip install tensorflow keras 是一个用于在计算…...

编程日记 2025/5/7 12:32:44