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

WEBSTORM前端 —— 第3章：移动 Web —— 第1节：平面转换、渐变

news 来源：原创 2025/7/18 8:58:09

一.平面转换

二.平面转换 – 平移

①属性

②取值

③技巧

三.平移实现居中效果

四.案例——双开门效果

五.平面转换 – 旋转

①属性

②技巧

六.平面转换 – 改变转换原点

①属性

②取值

七.案例-时钟

八.平面转换 – 多重转换

九.平面转换 – 缩放

①属性

②技巧

十.平面转换 – 倾斜

①属性

②取值

十一.渐变

1.线性渐变

①属性

②取值

2.径向渐变

一.平面转换

平面转换 transform

作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换又叫 2D 转换

<!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"><title>体验平面转换</title><style>div {margin: 100px 0;width: 100px;height: 100px;background-color: pink;transition: all 1s;}/* 鼠标滑过：添加动态效果 */div:hover {transform: translate(800px) rotate(360deg) scale(2) skew(180deg);}</style>
</head>
<body><div></div>
</body>
</html>

效果图：

体验平面转换

二.平面转换 – 平移

①属性

transform: translate(X轴移动距离, Y轴移动距离);

②取值

◆ 像素单位数值

◆ 百分比（参照盒子自身尺寸计算结果）

◆ 正负均可

③技巧

◆ translate() 只写一个值，表示沿着 X 轴移动

◆ 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

<!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"><title>平移效果</title><style>.father {width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {width: 200px;height: 100px;background-color: pink;transition: all 0.5s;}/* 鼠标移入到父盒子，son改变位置 */.father:hover .son {transform: translate(200px, 100px);/* 百分比：参照盒子自身尺寸计算结果 */transform: translate(50%, 100%);transform: translate(-50%, 100%);/* 只写一个数表示水平方向 */transform: translate(100px);transform: translateY(100px);transform: translateX(100px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</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"><title>绝对定位元素居中效果</title><style>.box {position: absolute;left: 50%;top: 50%;/* 向左向上移动自身尺寸的一半 */transform: translate(-50%, -50%);width: 200px;height: 100px;background-color: pink;          }</style>
</head>
<body><div class="box"></div>
</body>
</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"><title>双开门</title><style>* {margin: 0;padding: 0;}/* 1. 布局：父子结构，父级是大图，子级是左右小图 */.father {display: flex;margin: 0 auto;width: 1366px;height: 600px;background-image: url(./images/bg.jpg);overflow: hidden;}.father .left,.father .right {width: 50%;height: 600px;background-image: url(./images/fm.jpg);transition: all .5s;}.father .right {/* right 表示的取到精灵图右面的图片 */background-position: right 0;}/* 2. 鼠标悬停的效果：左右移动 */.father:hover .left {transform: translate(-100%);}.father:hover .right {transform: translateX(100%);}</style>
</head>
<body><div class="father"><div class="left"></div><div class="right"></div></div>
</body>
</html>

五.平面转换 – 旋转

①属性

transform: rotate(旋转角度);

◆ 角度单位是 deg

②技巧

◆ 取值正负均可

◆ 取值为正，顺时针旋转

◆ 取值为负，逆时针旋转

<!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"><title>旋转效果</title><style>img {width: 200px;transition: all 2s;}/* 鼠标悬停到图片上面，添加旋转效果 */img:hover {/* 正数：顺时针旋转；负数：逆时针旋转 */transform: rotate(360deg);transform: rotate(-360deg);}</style>
</head>
<body><img src="./images/rotate.png" alt="">
</body>
</html>

效果图：

平面转换 – 旋转

六.平面转换 – 改变转换原点

默认情况下，转换原点是盒子中心点

①属性

transform-origin: 水平原点位置垂直原点位置;

②取值

方位名词（left、top、right、bottom、center）

像素单位数值

百分比

<!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"><title>转换原点</title><style>img {width: 200px;border: 1px solid #000;transition: all 1s;transform-origin: right bottom;}img:hover {transform: rotate(360deg);}</style>
</head>
<body><img src="./images/rotate.png" alt="">
</body>
</html>

效果图：

平面转换 – 改变转换原点

七.案例-时钟

效果图：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.clock {width: 250px;height: 250px;border: 8px solid #000;border-radius: 50%;margin: 100px auto;position: relative;}.line {/* 1.定位 */position: absolute;width: 4px;height: 250px;background-color: #999;left: 50%;transform: translate(-50%);}/* 线2: 旋转, 每条线旋转角度不同, 单独选中不同的line, 写rotate代码 *//* 一圈是360度, 等分成  xx 份 */.line:nth-child(2) {transform: translate(-50%) rotate(30deg);}.line:nth-child(3) {transform: translate(-50%) rotate(60deg);}.line:nth-child(4) {transform: translate(-50%) rotate(90deg);}.line:nth-child(5) {transform: translate(-50%) rotate(120deg);}.line:nth-child(6) {transform: translate(-50%) rotate(150deg);}/* 第一根和第四跟宽度大一些 */.line:nth-child(1),.line:nth-child(4) {width: 5px;}/* 遮罩圆形 */.cover {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;background-color: #fff;border-radius: 50%;}/* 表针 *//* 并集选择器放在单独选择器的上面, 避免transform属性的层叠 */.hour,.minute,.second {position: absolute;left: 50%;/* 盒子底部在盒子中间 */bottom: 50%;}.hour {width: 6px;height: 50px;background-color: #333;margin-left: -3px;transform: rotate(15deg);transform-origin: center bottom;}.minute {width: 5px;height: 65px;background-color: #333;margin-left: -3px;transform: rotate(90deg);transform-origin: center bottom;}.second {width: 4px;height: 80px;background-color: red;margin-left: -2px;transform: rotate(240deg);transform-origin: center bottom;}/* 螺丝 */.dotted {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 18px;height: 18px;background-color: #333;border-radius: 50%;}</style></head><body><div class="clock"><!-- 刻度线 --><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><!-- 遮罩圆形 --><div class="cover"></div><!-- 表针 --><div class="hour"></div><div class="minute"></div><div class="second"></div><!-- 螺丝 --><div class="dotted"></div></div></body>
</html>

八.平面转换 – 多重转换

①多重转换技巧：先平移再旋转

transform: translate() rotate();

②多重转换原理：以第一种转换方式坐标轴为准转换形态

➢ 旋转会改变网页元素的坐标轴向

➢ 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

<!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" /><title>多重转换</title><style>.box {width: 800px;height: 200px;border: 1px solid #000;}img {width: 200px;transition: all 5s;}/* 鼠标移入box，图片边走边转 */.box:hover img {/* 先平移再旋转 */transform: translate(600px) rotate(360deg);/* 旋转会改变坐标轴向 */ /* 多重转换：以第一种转换形态的坐标轴为准 *//* transform: rotate(360deg) translate(600px); *//* 层叠性 *//* transform: translate(600px);transform: rotate(360deg); */}</style></head><body><div class="box"><img src="./images/tyre1.png" alt="" /></div></body>
</html>

效果图：

平面转换 – 多重转换

九.平面转换 – 缩放

①属性

transform: scale(缩放倍数);

transform: scale(X轴缩放倍数, Y轴缩放倍数);

②技巧

通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
取值大于1表示放大，取值小于1表示缩小

<!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" /><title>缩放效果</title><style>.box {width: 300px;height: 210px;margin: 100px auto;background-color: pink;}.box img {width: 100%;transition: all 0.5s;}.box:hover img {/* 修改宽高尺寸，从左上角开始缩放 *//* width: 500px;height: 400px; *//* 大于1，表示放大 */transform: scale(2);/* 小于1，表示缩小 */transform: scale(0.5);/* 等于1，不变 */transform: scale(1);}</style></head><body><div class="box"><img src="./images/product.jpeg" alt="" /></div></body>
</html>

效果图：

十.平面转换 – 倾斜

①属性

transform: skew();

②取值

角度度数 deg

<!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" /><title>倾斜效果</title><style>div {margin: 100px auto;width: 100px;height: 200px;background-color: pink;transition: all 0.5s;}div:hover {transform: skew(30deg);transform: skew(-30deg);}</style></head><body><div></div></body>
</html>

效果图：

平面转换 – 倾斜

十一.渐变

①渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景

②分类

线性渐变
径向渐变

1.线性渐变

①属性

background-image : linear-gradient (

渐变方向 ,

颜色 1 终点位置 ,

颜色 2 终点位置 ,

......

);

②取值

◆ 渐变方向：可选

to 方位名词
角度度数

◆ 终点位置：可选

百分比

<!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" /><title>Document</title><style>div {width: 200px;height: 200px;background-color: green;background-image: linear-gradient(red, green);background-image: linear-gradient(to right, red, green);background-image: linear-gradient(45deg, red, green);background-image: linear-gradient(red 80%, green);}</style></head><body><div></div></body>
</html>

效果图：

2.径向渐变

①作用：给按钮添加高光效果

②属性

background-image : radial-gradient (

半径 at 圆心位置 ,

颜色 1 终点位置 ,

颜色 2 终点位置 ,

......

);

③取值

半径可以是2条，则为椭圆
圆心位置取值：像素单位数值 / 百分比 / 方位名词

<!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"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;border-radius: 50%;background-image: radial-gradient(50px at center center, red, pink);background-image: radial-gradient(50px 20px at center center, red, pink);background-image: radial-gradient(50px at 50px 30px, red, pink 50%);}button {width: 100px;height: 40px;background-color: green;border: 0;border-radius: 5px;color: #fff;background-image: radial-gradient(30px at 30px 20px,rgba(255, 255, 255, 0.2), transparent);}</style>
</head>
<body><div></div><button>按钮</button>
</body>
</html>

效果图：

WEBSTORM前端 —— 第3章：移动 Web —— 第1节：平面转换、渐变

目录一.平面转换二.平面转换 – 平移 ①属性 ②取值 ③技巧三.平移实现居中效果四.案例——双开门效果五.平面转换 – 旋转 ①属性 ②技巧六.平面转换 – 改变转换原点 ①属性 ②取值七.案例-时钟八.平面转换 – 多重转换九.平面转换 – 缩放 ①属性 …...

编程日记 2025/7/18 8:58:09

1.10-数据传输格式

1.10-数据传输格式在对网站进行渗透测试时，使用目标服务器规定的数据传输格式来进行 payload 测试非常关键如果不按规定格式发送数据，服务器可能直接拒绝请求或返回错误响应，比如： 接口要求 JSON 格式，而你用的是…...

编程日记 2025/7/18 19:48:05

Python制作Dashboard【待续】

运行环境：jupyter notebook (python 3.12.7)...

编程日记 2025/6/29 4:59:04

物理：海市蜃楼是宇宙背景辐射吗？

宇宙背景辐射（特别是宇宙微波背景辐射，CMB）与海市蜃楼是两种完全不同的现象，它们的物理机制、来源和科学意义截然不同。以下是详细的解释： 1. 宇宙微波背景辐射（CMB）的本质起源：CMB是大爆炸理论的关键证据之一。它形成于宇宙诞生后约38万年（即“最后散射时期”），当…...

编程日记 2025/7/17 13:29:14

联想 SR550 服务器，配置 RAID 5教程！

今天的任务，是帮客户的一台联想Lenovo thinksystem x SR550 服务器，配置RAID 5，并安装windows server 2019操作系统。那么依然是按照我的个人传统，顺便做一个教程，分享给有需要的粉丝们。第一步，服务器开机…...

编程日记 2025/7/16 21:53:23

Docker-配置私有仓库（Harbor）

配置私有仓库（Harbor） 一、环境准备安装 Docker 三、安装docker-compose四、准备Harbor五、配置证书六、部署配置Harbor七、配置启动服务八、定制本地仓库九、测试本地仓库 Harbor(港湾)，是一个用于存储和分发 Docker 镜像的企业级 Regi…...

编程日记 2025/7/14 17:11:40

1.5 连续性与导数

一、连续性的底层逻辑（前因） 为什么需要研究连续性？ 数学家在研究函数图像时发现两类现象：有些函数能用一笔画完不断开（如抛物线），有些则会出现"断崖"“跳跃"或"无底洞”&a…...

编程日记 2025/7/14 19:19:32

Day22打卡-复习

复习日仔细回顾一下之前21天的内容，没跟上进度的同学补一下进度。作业： 自行学习参考如何使用kaggle平台，写下使用注意点，并对下述比赛提交代码泰坦尼克号人员生还预测https://www.kaggle.com/competitions/titanic/overview K…...

编程日记 2025/7/14 8:08:52

配置Hadoop集群环境准备

（一）Hadoop的运行模式一共有三种： 本地运行。伪分布式完全分布式 （二）Hadoop的完全分布式运行要模拟这个功能，我们需要做好如下的准备。 1）准备3台客户机（关闭防火墙、静态IP、…...

编程日记 2025/7/17 22:42:46

HTTPS全解析：从证书签发到TLS握手优化

HTTPS（超文本传输安全协议本质上是HTTP的安全版本。标准的HTTP协议仅规范了客户端与服务器之间的通信格式，但所有数据传输都是明文的，容易被中间人窃听和篡改。HTTPS通过加密传输数据解决了这一安全问题。 HTTPS可以理解为"HTTPTLS/SS…...

编程日记 2025/7/14 8:00:34

#将一个 .c 文件转变为可直接运行的文件过程及原理

将一个 .c 文件（C语言源代码）转变为可直接运行的可执行文件，涉及从源代码到机器码的编译和链接过程。以下是详细的过程与原理，分为步骤说明： 一、总体流程 .c 文件到可执行文件的过程通常包括以下几个阶段&#xff1a…...

编程日记 2025/7/18 8:01:57

【软件学习】GeneMiner 2：系统发育基因组学的一体化全流程分析工具

【软件学习】GeneMiner 2—— 系统发育基因组学的一体化全流程分析工具文章目录【软件学习】GeneMiner 2—— 系统发育基因组学的一体化全流程分析工具前言一、软件了解二、软件安装三、软件使用示例演示3.1 快速掌握使用方法3.2 获取质体基因组和质体基因3.3 单拷贝基因建树…...

编程日记 2025/7/14 4:55:55

聊一聊AI对接口测试的潜在影响有哪些？

目录一、自动化测试用例生成二、缺陷预测与根因分析三、自适应测试维护四、实时监控与自适应优化五、性能与安全测试增强六、测试结果分析与报告七、持续测试与DevOps集成八、挑战与局限性九、未来趋势使用AI可以自动化测试用例生成、异常检测、结果分析…...

编程日记 2025/7/18 1:31:30

1.启动集群 2.创建项目项目结构为： 3.pom.xml文件为 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://mave…...

编程日记 2025/7/17 19:58:15

CSS3 遮罩

在网页设计中，我们经常需要实现一些特殊的视觉效果来增强用户体验。CSS3 遮罩（mask）允许我们通过控制元素的可见区域来创建各种精美的视觉效果。本文将带你全面了解 CSS3 遮罩的功能和应用。什么是 CSS3 遮罩？ CSS3 遮罩是一种…...

编程日记 2025/7/17 23:47:57

HTTP协议解析：Session/Cookie机制与HTTPS加密体系的技术演进(一)

一.HTTP协议我们上篇文章已经提到了对于自定义协议的序列化与反序列化。那么有没有什么比较成熟的，大佬们写的应用层协议，供我们参考使用呢?HTTP(超文本传输协议)就是其中之一。在互联网世界中， HTTP（HyperText Transfer Prot…...

编程日记 2025/7/18 18:38:31

Matlab 234-锂电池充放电仿真

1、内容简介 Matlab 234-锂电池充放电仿真可以交流、咨询、答疑 2、内容说明略锂离子电池已经广泛应用于我国目前电子产品市场，当下手机市场和新能源市场对于锂离子电池的大量需求，推动了锂离子电池的发展，我国已经成为世界上锂离子电池…...

编程日记 2025/7/14 23:20:51

std::move 和 std::forward

关联点都是执行转换(cast)的函数（函数模板），不产生任何可执行代码。且都可以把实参转换成右值。 std::move无条件将实参（const除外 ）转换成右值引用，std::forward 条件返回右值引用 _EXPORT_STD template…...

编程日记 2025/7/16 16:37:26

工业协议跨界实录：零基础玩转PROFINET转EtherCAT主站智能网关

工业自动化领域的金字塔就是工业通信行业，用的最多的便是协议转换模块，通俗来说，网关就像一个“语言翻译器”，能把一种通信语言转换成另一种，满足实际通信需求，还能保护投资。PROFINET 转EtherCAT 网关WL-P…...

编程日记 2025/7/18 9:12:48

开源链动2+1模式AI智能名片S2B2C商城小程序赋能新微商服务能力升级研究

摘要：本文聚焦新微商服务能力升级路径，探讨开源链动21模式、AI智能名片与S2B2C商城小程序在重构培训体系、激励机制及用户服务中的协同作用。研究显示，新微商通过“技术赋能-机制创新-服务深化”三维变革，将传统微商的“产品压货”…...

编程日记 2025/7/17 4:14:35

vue3配置element-ui的使用

今天阐述一下如何在vue中进行配置使用element-ui； 一，配置下载Element 1.首页在电脑上下载好vue，以及npm，可以去相关的官方进行下载。 2.进行配置命令 npm install element-plus --save如报错： npm error code ERE…...

编程日记 2025/7/18 13:13:00

39-绘制渐变的文字

39-绘制渐变的文字_哔哩哔哩_bilibili39-绘制渐变的文字是一次性学会 Canvas 动画绘图（核心精讲50个案例）2023最新教程的第40集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibi…...

编程日记 2025/7/17 21:41:00

HBase进阶之路：从原理到实战的深度探索

目录一、HBase 核心概念再梳理 1.1 RowKey 1.2 Column Family 1.3 Region 二、架构与运行机制剖析 2.1 架构组件详解 2.1.1 Client 2.1.2 Zookeeper 2.1.3 Master 2.1.4 RegionServer 2.1.5 HDFS 2.2 数据读写流程深度解析 2.2.1 数据写入流程 2.2.2 数据读取流…...

编程日记 2025/7/16 12:24:41

使用 AddressSanitizer 检测栈内存越界错误

一、概述在 C/C 编程中，栈内存越界是一种常见而危险的内存错误，通常发生在局部变量数组被访问时索引越界。由于栈空间的结构特点，越界写入可能覆盖返回地址或其他局部变量，导致不可预测的行为甚至程序崩溃。传统的调试手段难以定…...

编程日记 2025/7/18 12:32:21

【技巧】离线安装docker镜像的方法

回到目录【技巧】离线安装docker镜像的方法 0. 为什么需要离线安装？ 第一、由于docker hub被墙，所以拉取镜像需要配置国内镜像源第二、有一些特殊行业服务器无法接入互联网，需要手工安装镜像 1. 可以正常拉取镜像服务器操作服务器…...

编程日记 2025/7/13 8:53:10

vue实现与后台springboot传递数据【传值/取值 Axios 】

vue实现与后台springboot传递数据【传值/取值】提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每…...

编程日记 2025/7/14 1:36:39

Git日志信息

Git日志信息 1. log log 命令用于查看 git 的各种日志信息，在使用 log 后，git 会进入 vim 模式，此时退出日志模式需要按下 q 键。可以通过小箭头来浏览未显示出来的内容。 1.1 查看日志信息 git log git log --prettyoneline #美观输出日…...

编程日记 2025/7/13 20:17:52

Linux操作系统从入门到实战（六）Linux开发工具（上）详细介绍什么是软件包管理器，Linux下如何进行软件和软件包的安装、升级与卸载

Linux操作系统从入门到实战（六）Linux开发工具（上）详细介绍什么是软件包管理器，Linux下如何进行软件和软件包的安装、升级与卸载前言一、软件包管理器1.1 传统安装方式的麻烦：从源代码说起1.2 软件包&…...

编程日记 2025/7/12 20:57:06

Java中的策略模式和模板方法模式

文章目录 1. 策略模式（Strategy Pattern）案例：支付方式选择 2. 模板方法模式（Template Method Pattern）案例：制作饮料流程 3. 策略模式 vs 模板方法模式4.总结在Java中，策略模式和模板方法模式…...

编程日记 2025/7/16 12:24:42

C#里WPF使用触发器实现鼠标点击响应

在WPF里创建了一个自定义的用户控件，要想在这个控件里实现鼠标的点击事件响应，就需要添加事件触发器交互定义，如下代码： <ListView x:Name="ListViewMenu" ItemsSource="{Binding Path=SubItems}" Foreground="White" ScrollViewer.Ho…...

编程日记 2025/7/17 22:52:20

tensorflow-cpu

python3.8~3.12安装tensorflow-cpu 准备创建并进入目录 mkdir tf-cpu cd tf-cpu编写测试代码 test_tensorflow.py import tensorflow as tf# 检查TensorFlow版本 print("\nTensorFlow version:", tf.__version__,end\n\n)# 创建一个简单的计算图并运行它 tensor …...

编程日记 2025/7/15 1:15:52

【AI提示词】PEST分析

提示说明市场分析师专注于为企业、产品或国家提供PEST分析支持，以制定精准的市场战略。提示词 # Role: PEST分析## Profile - language: 中文 - description: 市场分析师专注于为企业、产品或国家提供PEST分析支持，以制定精准的市场战略 - backgrou…...

编程日记 2025/7/15 1:37:32

42、在.NET 中能够将⾮静态的⽅法覆写成静态⽅法吗？

在.NET中，不能将非静态方法（实例方法）直接覆写（Override）为静态方法（Static Method）。以下是关键原因和解释： 1. 方法绑定的本质区别实例方法：属于对象的实例&#xf…...

编程日记 2025/7/17 12:59:47

【嵌入式系统设计师（软考中级）】第三章：嵌入式系统软件基础知识——①软件及操作系统基础

文章目录 1. 嵌入式系统软件基础知识1.1 嵌入式软件分类1.2 嵌入式系统初始化1.3 无操作系统支持的嵌入式软件体系结构1.4 有操作系统支持的嵌入式软件体系结构1.5 嵌入式支撑软件 2. 嵌入式操作系统基础知识2.1 嵌入式操作系统基本概念2.2 处理器管理2.2.1 多道程序2.2.2 分区…...

编程日记 2025/7/15 19:20:29

cs224w课程学习笔记-第11课

cs224w课程学习笔记-第11课知识图谱嵌入前言一、知识图谱1、知识图谱特点2、关系类型二、知识图谱嵌入1、嵌入核心思想2、嵌入模型2.1 嵌入模型transE1)、核心思想2)、训练步骤3)、模型表征能力 2.2 嵌入模型TransR2.3 DistMult嵌入模型1)、核心思想2)、表征能力 2.4 complE…...

编程日记 2025/7/16 10:02:34

5.10-套接字通信 - C++

套接字通信 1.1 通信效率问题服务器端单线程 / 单进程无法使用，不支持多客户端多线程 / 多进程写程序优先考虑多线程：什么时候考虑多进程？ 启动了一个可执行程序 A ，要在 A 中启动一个可执行程序 B 支持多客户端连接 IO 多…...

编程日记 2025/7/13 11:53:14

【Linux】Linux内核的网络协议之socket理解

1. Socket（套接字） 的本质它是应用程序与网络协议栈之间的编程接口（API），用于实现网络通信。 Socket 并不是一个物理设备，而是一个抽象层为应用程序提供统一的网络操作接口（如 send()、recv()…...

编程日记 2025/7/16 18:06:03

仿函数和函数对象

1. 概念解读：什么是“函数”和“函数对象”？ 核心概念一句话总结仿函数（Functor） 函数对象（Function Object） 它们本质是一个对象（Object），但可以像函数（Fu…...

编程日记 2025/7/18 14:51:17

Kubernetes控制平面组件：Kubelet 之 Static 静态 Pod

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...

编程日记 2025/7/18 18:29:45

Django 项目的 models 目录中，init.py 文件的作用

在 Django 项目的models/init.py文件中，这些导入语句的主要作用是将各个模型类从不同的模块中导入到models包的命名空间中。这样做有以下几个目的： 简化导入路径当你需要在项目的其他地方使用这些模型时，可以直接从models包导入&#xff0c…...

编程日记 2025/7/13 20:44:41

学习日志04 java

PTA上的练习复盘 java01 编程题作业感悟： 可以用ai指导自己怎么调试，但是不要把调代码这过程里面的精华交给ai，就是自己去修正错误不能让ai代劳！~~~ 1 scanner.close() Scanner *** new Scanner(System.in); ***.close(); …...

编程日记 2025/7/14 5:08:36

vue-pdf-embed预览PDF

一、vue-pdf-embed 链接：Yarn 1、安装插件 npm install vue-pdf-embed 2、文件中引入（分页效果已实现，样式请自行修改） <template><div class"download-pdf-preview" style"height: 450px; border:1…...

编程日记 2025/7/14 8:37:29

C++GO语言微服务之Dockerfile docker-compose

目录 01 01-知识点概述 02 02-dockerfile复习 03 03-环境变量ENV的使用 04 04-WORKDIR的使用 05 05-USER和ARG的使用 06 06-ONBUILD的使用 07 07-dockerfile的缓存相关的参数 08 08-dockerfile的编写 09 09-测试-没成功-好像是网不行 01 10-docker-compose介绍 02 11…...

编程日记 2025/7/13 17:08:02

【漫话机器学习系列】255.独立同分布（Independent and Identically Distributed，简称 IID）

深入理解独立同分布（IID）：机器学习与统计学的基石在机器学习、深度学习、统计建模等领域，我们经常会遇到一个重要假设：独立同分布（Independent and Identically Distributed，简称 IID&#xf…...

编程日记 2025/7/14 9:32:43

树莓派4 yolo 11l.pt性能优化后的版本

树莓派4 使用 Picamera2 拍摄图像，然后通过 YOLO11l.pt 进行目标检测，并在实时视频流中显示结果。但当前的代码在运行时可能会比较卡顿，主要原因包括： picam2.capture_array() 是一个较慢的操作；YOLO 推理可能耗时较长…...

编程日记 2025/7/13 1:12:39

AD22 快速定义PCB板框与DXF导入定义

自行定义板框 1. 初步评估：选中所有的器件，选中‘在矩形区域排列’ 将元件放好后，可以再将元件紧凑一下 2. 设置原点，并在下方选中机械一层从原点出发，点击快捷键PL 画框线 3. 对线条长度取整，且最好是5…...

编程日记 2025/7/14 1:21:17

LInux系统文件与目录管理（二）

提示：第二部分对第一部分收尾文章目录常见的命令如下一、文件查看命令1. more命令2.less命令3.head命令4.tail命令5.nl命令（了解）6.创建目录命令7.创建文件命令>: 覆盖重定向>>: 追加重定向 8.touch命令9.echo命令10.文件或目录复…...

编程日记 2025/7/13 1:35:55

Redisson在业务处理中失败后的应对策略：保障分布式系统的可靠性

分布式系统中的数据一致性与高可用性一直是开发者面临的难题。作为Redis官方推荐的Java客户端，Redisson凭借其强大的分布式能力成为解决这些问题的利器。但在实际业务场景中，网络抖动、资源竞争、节点故障等问题可能导致操作失败，本文将深入探…...

编程日记 2025/7/16 23:55:46

windows下docker 运行 ros2humble arm64

目前要想运行arm版ros humble 目前最好的解决方案是使用qemu模拟。 1.拉取 ubuntu22.04 docker pull ubuntu:22.04 --platformarm642.安装小鱼ros2 humble wget http://fishros.com/install -O fishros && . fishros3.安装eqmu docker run --rm --privileged multia…...

编程日记 2025/7/13 6:26:38

表的增删改查 -- 2

目录 3、查询（R） 3.7、条件查询：where 3.8、分页查询：limit 3.9、查询总结 4、修改（U） 5、删除（D） 3、查询（R） 3.7、条件查询：where selec…...

编程日记 2025/7/18 12:02:48

一.平面转换

二.平面转换 – 平移

①属性

②取值

③技巧

三.平移实现居中效果

四.案例——双开门效果

五.平面转换 – 旋转

①属性

②技巧

六.平面转换 – 改变转换原点

①属性

②取值

七.案例-时钟

八.平面转换 – 多重转换

九.平面转换 – 缩放

①属性

②技巧

十.平面转换 – 倾斜

①属性

②取值

十一.渐变

1.线性渐变

①属性

②取值

2.径向渐变

相关文章：