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

[CSS3]属性增强1

news 来源：原创 2025/6/21 18:33:02

字体图标

使用字体图标可以实现简洁的图标效果, 字体图标展示的是图标, 本质是字体, 适合简单, 颜色单一的图标

优势

  1. 灵活性: 灵活的修改样式, 比如尺寸, 颜色等
  2. 轻量级: 体积小, 渲染快, 降低服务器请求次数
  3. 兼容性: 几乎兼容所有主流浏览器
  4. 使用方便:
  • 下载字体包
  • 使用字体图标

使用字体图标:

下载字体包

  1. 阿里字体图标库: https://www.iconfont.cn/
  2. 我的账户 167****0001
  3. 建议使用官方的图标, 免费还好用, 效果复杂的图标还是使用精灵图实现

  1. 登录后→选择图标库, 点进去查看图标→选择合适的图标，加入购物车→点击购物车→把购物车添加至项目中 → 没有项目就建一个 →下载至本地

使用字体图标

  1. 打开demo_index.html页面, 里面会教我们如何集成到项目中

  1. 先把iconfont.css文件引入到项目
  2. 使用一个标签(一般是span或者i), 添加 iconfont 和 icon-xihuan 两个类名
<!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><link rel="stylesheet" href="./iconfont/iconfont.css"><style>i {font-size: 60px;}</style>
</head>
<body><i class="iconfont icon-favorites-fill"></i>
</body>
</html>
  1. 可以通过css的方式, 调整字体图标的尺寸和颜色

扩展一下, 了解 iconfont 这个类名的作用

  1. iconfont类名 定义在 iconfont.css文件中

  1. iconfont类名最重要的事情是引用字体

  1. 字体定义中引用了字体文件

上传矢量图

如果图标库中找不到需要的图标. iconFont网站支持上传矢量图生成字体图标

  1. 与设计师沟通, 得到SVG矢量图
  2. 在iconFont网站上传图标, 然后下载使用

  1. 上传时建议去除颜色提交

  1. 提交完成后, 查看我的资源, 一样加入购物车→下载使用

平面转换

使用transform属性实现元素的位移、旋转、缩放等效果

平面转换需要拆开理解

  1. 平面就是2D的概念, 只关注元素的X轴和Y轴
  2. 转换就是改变元素在平面内的状态, 比如位置, 旋转, 缩放

位移效果

语法: transform: translate(水平移动距离,垂直移动距离)

取值说明:

  1. 正负均可
  2. 像素单位值
  3. 半分比值 (参考物是盒子自身尺寸)
  4. x轴正向为右, y轴正向为下

使用技巧:

  1. translate()如果只给一个值, 表示x轴方向的移动距离
  2. 可以单独设置某个方向的移动距离: 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(100px, 50px); *//* 百分比: 盒子自身尺寸的百分比 *//* transform: translate(100%, 50%); *//* transform: translate(-100%, 50%); *//* 只给出一个值表示x轴移动距离 *//* transform: translate(100px); *//* 单独设置一个方向的位移 */transform: translateY(100px);}</style>
</head><body><div class="father"><div class="son"></div></div>
</body></html>

示例: 使用translate快速实现绝对定位的元素居中效果

<!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 {position: relative;width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {position: absolute;left: 50%;top: 50%;// 使用margin实现元素居中/* margin-left: -100px;margin-top: -50px; */// 使用位移实现元素居中// 原理: 位移取值为百分比时, 参照的是盒子自身尺寸计算移动距离transform: translate(-50%, -50%);width: 203px;height: 100px;background-color: pink;          }</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>Document</title><style>* {margin: 0;padding: 0;}.box {width: 1366px;height: 600px;margin: 0 auto;background: url('./images/bg.jpg');overflow: hidden;}/** 左右伪元素相同的样式 */.box::before,.box::after {float: left;content: '';width: 50%;height: 600px;background-image: url(./images/fm.jpg);transition: all .5s;}// 单独控制右边伪元素的背景位置.box::after {background-position: right 0;}/* 鼠标移入的时候, 改变元素的位置 */.box:hover::before {transform: translate(-100%);}.box:hover::after {transform: translateX(100%);}</style>
</head><body><div class="box"></div>
</body></html>

旋转效果

使用rotate实现元素旋转效果

  1. 语法: transform: rotate(角度);
  2. 注意: 角度单位是deg
  3. 技巧: 取值正负均可
  • 取值为正，则顺时针旋转
  • 取值为负，则逆时针旋转
<!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: 250px;transition: all 2s;}img:hover {/* 顺时针方向 */transform: rotate(360deg);/* 逆时针方向 *//* transform: rotate(-360deg); */}</style>
</head><body><img src="./images/rotate.png" alt="">
</body></html>

使用transform-origin属性改变转换原点

语法

  1. 默认原点是盒子中心点
  2. transform-origin: 原点水平位置 原点垂直位置;

取值

  1. 方位名词(left、top、right、bottom、center)
  2. 像素单位数值
  3. 百分比(参照盒子自身尺寸计算)

图例

  1. 时钟的秒针旋转, 原点是在bottom/center
  2. 风车的旋转原点是在 center/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: 250px;border: 1px solid #000;transition: all 2s;transform-origin: right bottom;transform-origin: left bottom;}img:hover {transform: rotate(360deg);}</style>
</head>
<body><img src="./images/rotate.png" alt="">
</body>
</html>

使用transform复合属性实现多形态转换

语法: 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 8s;}.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>

多重转换原理

  1. 旋转会改变网页元素的坐标轴向
  2. 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放效果

使用scale改变元素的尺寸

语法

  1. transform: scale(x轴缩放倍数, y轴缩放倍数)

技巧

  1. 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
  2. transform: scale(缩放倍数);
  3. scale值大于1表示放大, scale值小于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: 150%; */// 缩小/* transform: scale(0.8); */// 放大transform: scale(1.2);}</style>
</head><body><div class="box"><img src="./images/product.jpeg" alt=""></div>
</body></html>

倾斜效果

使用skew实现元素倾斜效果

  1. 语法: transform:skew();
  2. 取值: 角度度数, 单位deg

  1. 示例
<!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>div {margin: 100px auto;width: 100px;height: 200px;background-color: red;transform: all 0.5s;}div:hover {transform: skew(30deg);}</style>
</head><body><div></div>
</body></html>

渐变背景

使用background-image属性实现渐变背景效果

语法:

取值:

  1. 渐变方向: 可选
  • to 方位名词
  • 角度度数
  1. 终点位置: 可选
  • 半分比

作用:

  1. 渐变是多个颜色逐渐变化的视觉效果
  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></title><style>.box {width: 300px;height: 200px;/* 纯色线性渐变 *//* background-image: linear-gradient(pink, green); *//* 透明渐变: 从透明到某色半透明 *//* background-image: linear-gradient(transparent, rgba(255, 0, 0, 0.6)); *//* 纯色线性渐变: 改变渐变方向 *//* background-image: linear-gradient(to right, green, hotpink); *//* 纯色线性渐变: 改变渐变角度 *//* background-image: linear-gradient(45deg, green, hotpink); *//* 纯色线性渐变: 改变颜色位置(比例)  */background-image: linear-gradient(green 70%, hotpink);}</style>
</head><body><div class="box"></div></body></html>

径向渐变: 给按钮添加高光效果

语法:

取值:

  • 半径可以是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>渐变背景</title><style>div {width: 100px;height: 100px;background-color: palegoldenrod;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); *//* 改变颜色终点: */background-image: radial-gradient(50px at center center,red,pink 90%);}button {width: 100px;height: 40px;color: #fff;background-color: green;border: none;/* 给按钮增加高光效果 */background-image: radial-gradient(30px at 30px 30px,rgba(255, 255, 255, 0.5), transparent);}</style>
</head><body><div></div><button>按钮</button></body></html>

相关文章：

[CSS3]属性增强1

字体图标 使用字体图标可以实现简洁的图标效果, 字体图标展示的是图标, 本质是字体, 适合简单, 颜色单一的图标 优势 灵活性: 灵活的修改样式, 比如尺寸, 颜色等轻量级: 体积小, 渲染快, 降低服务器请求次数兼容性: 几乎兼容所有主流浏览器使用方便: 下载字体包使用字体图标…...

编程日记 2025/6/21 18:33:02

【Python+flask+mysql】网易云数据可视化分析(全网首发)

网易云数据可视化分析 项目概述 网易云数据可视化分析系统是一个基于Flask框架开发的Web应用&#xff0c;旨在对网易云音乐平台的用户、歌曲、专辑、歌单等数据进行全面的可视化分析。该系统通过直观的图表、表格和词云等形式&#xff0c;展示网易云音乐的数据分布特征&#…...

编程日记 2025/5/29 14:04:58

项目版本管理和Git分支管理方案

文章目录 一、团队协作1.项目团队与职责2.项目时间线与里程碑3.风险评估与应对措施4.跨团队同步会议&#xff08;定期&#xff09;跨团队同步会议&#xff08;双周) 5.版本升级决策树6.边界明确与路标制定a.功能边界划分b.项目路标制定b1、项目路标制定核心要素b2. 路标表格模板…...

编程日记 2025/6/1 18:15:08

Java 21 + Spring Boot 3.5：AI驱动的高性能框架实战

简介 在微服务架构日益普及的今天，如何构建一个既高性能又具备AI驱动能力的后端系统成为开发者关注的焦点。本篇文章将深入探讨Java 21与Spring Boot 3.5的结合，展示如何通过Vector API和JIT优化实现单线程性能提升30%，并利用飞算JavaAI生成智能重试机制和超时控制代码，解…...

编程日记 2025/5/27 6:56:50

【MySQL】索引太多会怎样？

在 MySQL 中&#xff0c;虽然索引可以显著提高查询效率&#xff0c;但过多的索引&#xff08;如超过 5-6 个&#xff09;会带来以下弊端&#xff1a; 1. 存储空间占用增加 每个索引都需要额外的磁盘空间存储索引树&#xff08;BTree&#xff09;。对于大表来说&#xff0c;多个…...

编程日记 2025/5/29 15:20:24

Flask 是否使用类似 Spring Boot 的核心注解机制

Flask 和 Spring Boot 架构风格不同：Spring Boot 是“注解驱动的全家桶框架”，而 Flask 是“微核心 + 显式扩展的 Python 微框架”。因此： ❌ Flask 没有类似 Spring Boot 的“核心注解机制”（如 @SpringBootApplication），而是使用函数装饰器（decorator）作为核心语法特…...

编程日记 2025/6/21 18:27:57

学习threejs，使用Physijs物理引擎，各种constraint约束限制

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️Physijs 物理引擎1.1.1 ☘️…...

编程日记 2025/5/26 6:19:49

城市排水管网流量监测系统解决方案

一、方案背景 随着工业的不断发展和城市人口的急剧增加&#xff0c;工业废水和城市污水的排放量也大量增加。目前&#xff0c;我国已成为世界上污水排放量大、增加速度快的国家之一。然而&#xff0c;总体而言污水处理能力较低&#xff0c;有相当部分未经处理的污水直接或间接排…...

编程日记 2025/6/1 12:37:18

redis数据结构-11（了解 Redis 持久性选项：RDB 和 AOF）

了解 Redis 持久性选项&#xff1a;RDB 和 AOF Redis 提供了多个持久性选项&#xff0c;以确保数据持久性并防止在服务器发生故障或重启时丢失数据。了解这些选项对于为您的特定使用案例选择正确的策略、平衡性能和数据安全至关重要。本章节将深入探讨 Redis 中的两种主要持久…...

编程日记 2025/6/21 17:52:45

掌握 Kotlin Android 单元测试：MockK 框架深度实践指南

掌握 Kotlin Android 单元测试&#xff1a;MockK 框架深度实践指南 在 Android 开发中&#xff0c;单元测试是保障代码质量的核心手段。但面对复杂的依赖关系和 Kotlin 语言特性&#xff0c;传统 Mock 框架常显得力不从心。本文将带你深入 MockK —— 一款专为 Kotlin 设计的 …...

编程日记 2025/6/1 18:21:27

2025/5/16

第一题 A. 例题4.1.2 潜水 题目描述 在马其顿王国的ohide湖里举行了一次潜水比赛。 其中一个项目是从高山上跳下水&#xff0c;再潜水达到终点。 这是一个团体项目&#xff0c;一支队伍由n人组成。在潜水时必须使用氧气瓶&#xff0c;但是每只队伍只有一个氧气瓶。 最多两…...

编程日记 2025/6/21 18:30:33

Detected for tasks ‘compileDebugJavaWithJavac‘ (17) and ‘kspDebugKotlin‘ (21).

1.报错 在导入Android源码的时候出现以下错误&#xff1a;Inconsistent JVM-target compatibility detected for tasks compileDebugJavaWithJavac (17) and kspDebugKotlin (21).。 Execution failed for task :feature-repository:kspDebugKotlin. > Inconsistent JVM-ta…...

编程日记 2025/5/28 7:25:58

嵌入式单片机中STM32F1演示寄存器控制方法

该文以STM32F103C8T6为示例，演示如何使用操作寄存器的方法点亮（关闭LED灯），并讲解了如何调试，以及使用宏定义。 第一：操作寄存器点亮LED灯。 （1）首先我们的目的是操作板子上的LED2灯，对其实现点亮和关闭操作。打开STM32F103C8T6的原理图，找到LED2的位置。 可以看到…...

编程日记 2025/5/28 16:45:39

【带文档】网上点餐系统 springboot + vue 全栈项目实战（源码+数据库+万字说明文档）

&#x1f4cc; 一、项目概括 本系统共包含三个角色&#xff1a; 管理员&#xff1a;系统运营管理者 用户&#xff1a;点餐消费用户 美食店&#xff1a;上传菜品与处理订单的店铺账号 通过对这三类角色的权限与业务分工设计&#xff0c;系统实现了点餐流程的全链路数字化&a…...

编程日记 2025/6/21 18:16:52

Spring Cloud：Gateway（统一服务入口）

Api 网关 也是一种服务&#xff0c;就是通往后端的唯一入口&#xff0c;类似于整个微服务架构的门面&#xff0c;所有的外部客户端进行访问&#xff0c;都需要经过它来进行过滤和调度&#xff0c;类似于公司的前台 而Spring Cloud Gateway就是Api网关的一种具体实现 网关的核心…...

编程日记 2025/6/3 7:19:57

Perl测试起步：从零到精通的完整指南

阅读原文 5.2 为什么你的Perl代码总是出问题&#xff1f;因为你还没开始测试&#xff01; "我的代码昨天还能运行&#xff0c;今天就莫名其妙报错了&#xff01;"、"我只是改了一个小功能&#xff0c;结果整个系统都崩溃了"、"这段代码不是我写的&am…...

编程日记 2025/6/21 17:56:57

【前端优化】vue2 webpack4项目升级webpack5，大大提升运行速度

记录一下过程 手里有个老项目&#xff0c;vue2webpack4 项目很大&#xff0c;每次运行、运行都要将近10分钟 现在又要往里面写很多东西&#xff0c;再不优化&#xff0c;开发着会更难受&#xff0c;所以决定先将它升级至webpack5 最初失败的尝试 直接在项目里安装了webpack5 但…...

编程日记 2025/5/30 7:51:33

【蓝桥杯省赛真题50】python字母比较 第十五届蓝桥杯青少组Python编程省赛真题解析

python字母比较 第十五届蓝桥杯青少年组python比赛省赛真题详细解析 博主推荐 所有考级比赛学习相关资料合集【推荐收藏】1、Python比赛 信息素养大赛Python编程挑战赛 蓝桥杯python选拔赛真题详解...

编程日记 2025/5/27 6:57:54

学习以任务为中心的潜动作，随地采取行动

25年5月来自香港大学、OpenDriveLab 和智元机器人的论文“Learning to Act Anywhere with Task-centric Latent Actions”。 通用机器人应该在各种环境中高效运行。然而&#xff0c;大多数现有方法严重依赖于扩展动作标注数据来增强其能力。因此&#xff0c;它们通常局限于单一…...

编程日记 2025/5/28 16:10:51

《数据结构初阶》【二叉树 精选9道OJ练习】

【二叉树 精选9道OJ练习】目录 前言&#xff1a;二叉树的OJ练习[144. 二叉树的前序遍历](https://leetcode.cn/problems/binary-tree-preorder-traversal/)题目介绍方法一&#xff1a;[104. 二叉树的最大深度](https://leetcode.cn/problems/maximum-depth-of-binary-tree/)题目…...

编程日记 2025/5/27 6:07:35

协议不兼容？Profinet转Modbus TCP网关让恒压供水系统通信0障碍

在现代工业自动化领域中&#xff0c;通信协议扮演着至关重要的角色。ModbusTCP和Profinet是两种广泛使用的工业通信协议&#xff0c;它们各自在不同的应用场合中展现出独特的优势。本文将探讨如何通过开疆智能Profinet转Modbus TCP的网关&#xff0c;在恒压供水系统中实现高效的…...

编程日记 2025/5/27 7:42:51

基于大模型预测的脑出血全流程诊疗技术方案

目录 一、系统架构设计技术架构图二、核心算法实现1. 多模态数据融合算法伪代码2. 风险预测模型实现三、关键模块流程图1. 术前风险预测流程图2. 术中决策支持流程图3. 并发症预测防控流程图四、系统集成方案1. 数据接口规范五、性能优化策略1. 推理加速方案2. 分布式训练架构六…...

编程日记 2025/6/21 17:55:14

掌握 LangChain 文档处理核心：Document Loaders 与 Text Splitters 全解析

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《深度探秘&#xff1a;AI界的007》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、什么是LangChain 2、LangChain 在智能应用中的作用 …...

编程日记 2025/6/21 18:24:52

Oracle — 总结

Oracle 公司及产品概述 公司背景 Oracle&#xff08;甲骨文&#xff09;是全球领先的数据库软件和服务提供商&#xff0c;成立于1977年&#xff0c;核心产品包括&#xff1a; Oracle Database&#xff1a;关系型数据库管理系统&#xff08;RDBMS&#xff09;。Java&#xff1a…...

编程日记 2025/6/21 18:27:58

【Vue 3全栈实战】从响应式原理到企业级架构设计

目录 &#x1f31f; 前言&#x1f3d7;️ 技术背景与价值&#x1fa79; 当前技术痛点&#x1f6e0;️ 解决方案概述&#x1f465; 目标读者说明 &#x1f9e0; 一、技术原理剖析&#x1f4ca; 核心概念图解&#x1f4a1; 核心作用讲解&#x1f527; 关键技术模块说明⚖️ 技术选…...

编程日记 2025/5/29 19:38:08

升级kafka4.0.0，无ZK版本

设备规划&#xff1a; 172.20.192.47 kafka-0 172.20.192.48 kafka-1 172.20.192.49 kafka-2 单机块7TB Nvme磁盘一共9块 # 格式化成GPT分区 sudo parted /dev/nvme0n1 --script mklabel gpt sudo parted /dev/nvme1n1 --script mklabel gpt sudo parted /dev/nvme2n1 --s…...

编程日记 2025/5/27 8:42:05

GESP2025年3月认证C++二级( 第三部分编程题（1）等差矩阵）

参考程序&#xff1a; #include <bits/stdc.h> using namespace std;int n, m; // 声明矩阵的行数 n 和列数 mint main() {// 输入两个正整数 n 和 mscanf("%d%d", &n, &m);// 遍历每一行for (int i 1; i < n; i)// 遍历每一列for (int j 1; j &…...

编程日记 2025/5/28 6:41:57

Linux系统启动相关：vmlinux、vmlinuz、zImage，和initrd 、 initramfs，以及SystemV 和 SystemD

目录 一、vmlinux、vmlinuz、zImage、bzImage、uImage 二、initrd 和 initramfs 1、initrd&#xff08;Initial RAM Disk&#xff09; 2、initramfs&#xff08;Initial RAM Filesystem&#xff09; 3、initrd vs. initramfs 对比 4. 如何查看和生成 initramfs 三、Syste…...

编程日记 2025/5/29 17:04:43

单序列双指针---初阶篇

目录 相向双指针 344. 反转字符串 125. 验证回文串 1750. 删除字符串两端相同字符后的最短长度 2105. 给植物浇水 II 977. 有序数组的平方 658. 找到 K 个最接近的元素 1471. 数组中的 k 个最强值 167. 两数之和 II - 输入有序数组 633. 平方数之和 2824. 统计和小于…...

编程日记 2025/5/29 13:41:13

K8s CoreDNS 核心知识点总结

文章目录 一、章节介绍背景与主旨核心知识点及面试频率 二、知识点详解1. CoreDNS 概述2. 工作原理&#xff08;高频考点&#xff09;服务发现流程 3. 配置与插件系统&#xff08;高频考点&#xff09;核心配置文件&#xff1a;Corefile常用插件 4. Pod DNS策略&#xff08;中频…...

编程日记 2025/5/31 6:44:04

Java视频流RTMP/RTSP协议解析与实战代码

在Java中实现视频直播的输入流处理&#xff0c;通常需要结合网络编程、多媒体处理库以及流媒体协议&#xff08;如RTMP、HLS、RTSP等&#xff09;。以下是实现视频直播输入流的关键步骤和技术要点&#xff1a; 1. 视频直播输入流的核心组件 网络输入流&#xff1a;通过Socket或…...

编程日记 2025/6/3 16:15:14

卓力达电铸镍网：精密制造与跨领域应用的创新典范

目录 引言 一、电铸镍网的技术原理与核心特性 二、电铸镍网的跨领域应用 三、南通卓力达电铸镍网的核心优势 四、未来技术展望 引言 电铸镍网作为一种兼具高精度与高性能的金属网状材料&#xff0c;通过电化学沉积工艺实现复杂结构的精密成型&#xff0c;已成为航空航天、电…...

编程日记 2025/5/31 8:09:18

label-studio功能常用英文翻译

Projects 项目 Settings 设置 Labeling Interface 标注界面 1、Computer Vision 计算机视觉 Semantic Segmentation with Polygons 多边形语义分割 Semantic Segmentation with Masks 掩码语义分割 Object Detection with Bounding Boxes 边界框目标检测 Keypoint Label…...

编程日记 2025/5/29 22:52:05

2025年PMP 学习十六 第11章 项目风险管理 （总章）

2025年PMP 学习十六 第11章 项目风险管理 &#xff08;总章&#xff09; 第11章 项目风险管理 序号过程过程组1规划风险管理规划2识别风险规划3实施定性风险分析规划4实施定量风险分析规划5规划风险应对执行6实施风险应对执行7监控风险监控 目标: 提高项目中积极事件的概率和…...

编程日记 2025/5/29 8:54:59

Jenkins 执行器（Executor）如何调整限制？

目录 现象原因解决 现象 Jenkins 构建时&#xff0c;提示如下&#xff1a; 此刻的心情正如上图中的小老头&#xff0c;火冒三丈&#xff0c;但是不要急&#xff0c;因为每一次错误&#xff0c;都是系统中某个环节在说‘我撑不住了’。 原因 其实是上图的提示表示 Jenkins 当…...

编程日记 2025/5/31 9:04:36

Jenkins 安装与配置指南

Jenkins 安装与配置指南&#xff08;MD 示例&#xff09; markdown Jenkins 安装与配置指南 ## 一、环境准备 1. **系统要求** - 操作系统&#xff1a;Linux/macOS/Windows - Java 版本&#xff1a;JDK 8 或更高&#xff08;建议 JDK 11&#xff09;2. **安装方式** - **L…...

编程日记 2025/5/29 15:54:09

使用unsloth对Qwen3在本地进行微调

Fine-tune Qwen3（100% locally） 使用unsloth进行微调，使用huggingface在本地运行model。 load model from unsloth import FastLanguageModel import torchMODEL = "unsloth/Qwen3-14B" model,tokenizer = FastLanguageModel.from_pretrained(model_name=MODE…...

编程日记 2025/6/2 15:45:41

GpuGeek 实操指南：So-VITS-SVC 语音合成与 Stable Diffusion 文生图双模型搭建，融合即梦 AI 的深度实践

GpuGeek 实操指南&#xff1a;So-VITS-SVC 语音合成与 Stable Diffusion 文生图双模型搭建&#xff0c;融合即梦 AI 的深度实践 前言 本文将详细讲解 So-VITS-SVC 语音合成与 Stable Diffusion 文生图的搭建方法&#xff0c;以及二者与即梦 AI 融合的实践技巧&#xff0c;无论你…...

编程日记 2025/5/29 20:13:28

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

本系列可作为前端学习系列的笔记&#xff0c;代码的运行环境是在HBuilder中&#xff0c;小编会将代码复制下来&#xff0c;大家复制下来就可以练习了&#xff0c;方便大家学习。 HTML系列文章 已经收录在前端专栏&#xff0c;有需要的宝宝们可以点击前端专栏查看&#xff01; 点…...

编程日记 2025/5/31 16:07:00

使用exceljs将excel文件转化为html预览最佳实践（完整源码）

前言 在企业应用中&#xff0c;我们时常会遇到需要上传并展示 Excel 文件的需求&#xff0c;以实现文件内容的在线预览。经过一番探索与尝试&#xff0c;笔者最终借助 exceljs 这一库成功实现了该功能。本文将以 Vue 3 为例&#xff0c;演示如何实现该功能&#xff0c;代码示例…...

编程日记 2025/5/29 10:01:30

7. 进程控制-进程替换

目录 1. 进程替换 1.1 单进程版&#xff1a; 1.2 进程替换的原理 1.3 多进程版-验证各种程序替换接口 2. 进程替换的各种接口 2.1 execl 2.2 execlp 2.3 execv 2.4 execvp 2.5 execle 1. 进程替换 上图为程序替换的接口&#xff0c;之后会详细介绍。 1.1 单进程版&am…...

编程日记 2025/5/27 5:24:05

关于计算机系统和数据原子性的联系

目录 1、计算机架构 1.1、处理器架构 1.2、内存寻址能力 1.3、性能差异 1.4、软件兼容性 1.5、指令集 1.6、开发和维护 2.、基本数据类型 3、原子类型 3.1、基本概念 3.2、基本数据类型的原子性 3.3、原子操作的解释 3.4、不保证原子性 3.5、解决方案 4、原子性…...

编程日记 2025/6/1 18:35:23

Armijo rule

非精线搜索步长规则Armijo规则&Goldstein规则&Wolfe规则_armijo rule-CSDN博客 [原创]用“人话”解释不精确线搜索中的Armijo-Goldstein准则及Wolfe-Powell准则 – 编码无悔 / Intent & Focused...

编程日记 2025/6/1 9:51:17

从数据包到可靠性：UDP/TCP协议的工作原理分析

之前我们已经使用udp/tcp的相关接口写了一些简单的客户端与服务端代码。也了解了协议是什么&#xff0c;包括自定义协议和知名协议比如http/https和ssh等。现在我们再回到传输层&#xff0c;对udp和tcp这两传输层巨头协议做更深一步的分析。 一.UDP UDP相关内容很简单&#xf…...

编程日记 2025/5/29 10:52:20

Prometheus实战教程：k8s平台-Mysql监控案例

配置文件优化后的 Prometheus 自动发现 MySQL 实例的完整 YAML 文件。该配置包括&#xff1a; MySQL Exporter 部署&#xff1a;使用 ConfigMap 提供 MySQL 连接信息。Prometheus 自动发现&#xff1a;通过 Kubernetes 服务发现自动抓取 MySQL 实例。 1、mysql 配置文件 &…...

编程日记 2025/6/1 16:59:58

执行apt-get update 报错ModuleNotFoundError: No module named ‘apt_pkg‘的解决方案汇总

Ubuntu版本ubuntu18.04 报错内容&#xff1a; //执行apt-get upgrade报错&#xff1a; Traceback :File “/usr/lib/cnf-update-db”, line 8, in <module>from CommandNotFound.db.creator import DbcreatorFile “/usr/lib/python3/dist-packages/CommandNotFound/db…...

编程日记 2025/5/17 5:16:52

QT6 源（101）篇一：阅读与注释 QPlainTextEdit，其继承于QAbstractScrollArea，属性学习与测试

&#xff08;1&#xff09; &#xff08;2&#xff09; &#xff08;3&#xff09;属性学习与测试 &#xff1a; &#xff08;4&#xff09; &#xff08;5&#xff09; 谢谢...

编程日记 2025/5/29 17:46:33

Redis（2）：Redis + Lua为什么可以实现原子性

Redis 作为一款高性能的键值对存储数据库&#xff0c;与 Lua 脚本相结合&#xff0c;为实现原子性操作提供了强大的解决方案&#xff0c;本文将深入探讨 Redis Lua 实现原子性的相关知识 原子性概念的厘清 在探讨 Redis Lua 的原子性之前&#xff0c;我们需要明确原子性的概念…...

编程日记 2025/5/18 3:10:31

ios打包ipa获取证书和打包创建经验分享

在云打包或本地打包ios应用&#xff0c;打包成ipa格式的app文件的过程中&#xff0c;私钥证书和profile文件是必须的。 其实打包的过程并不难&#xff0c;因为像hbuilderx这些打包工具&#xff0c;只要你输入的是正确的证书&#xff0c;打包就肯定会成功。因此&#xff0c;证书…...

编程日记 2025/5/29 21:06:14

Python生成器：高效处理大数据的秘密武器

生成器概述 生成器是 Python 中的一种特殊迭代器&#xff0c;通过普通函数的语法实现&#xff0c;但使用 yield 语句返回数据。生成器自动实现了 __iter__() 和 __next__() 方法&#xff0c;因此可以直接用于迭代。生成器的核心特点是延迟计算&#xff08;lazy evaluation&…...

编程日记 2025/5/19 9:05:24