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

滚动条样式

news 来源：原创 2025/8/14 6:23:18

title: 滚动条样式
date: 2025-05-07 19:59:31
tags:css

滚动条样式完整定义 HTML 示例

以下是一个包含所有主流浏览器滚动条样式属性的完整HTML文件，涵盖了WebKit内核浏览器和Firefox的滚动条定制：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动条样式完整定义</title><style>/* 基础样式 */body {font-family: Arial, sans-serif;line-height: 1.6;padding: 20px;background-color: #f5f5f5;}h1 {color: #333;margin-bottom: 30px;text-align: center;}.container {max-width: 800px;margin: 0 auto;}.scroll-section {background: white;border-radius: 8px;padding: 20px;margin-bottom: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}/* 1. WebKit浏览器滚动条样式 (Chrome, Safari, Edge) */.webkit-scrollbar {height: 300px;overflow-y: scroll;padding: 15px;border: 1px solid #ddd;}/* 整个滚动条 */.webkit-scrollbar::-webkit-scrollbar {width: 16px;               /* 垂直滚动条宽度 */height: 16px;              /* 水平滚动条高度 */}/* 滚动条轨道 */.webkit-scrollbar::-webkit-scrollbar-track {background-color: #f1f1f1; /* 轨道背景色 */border-radius: 8px;border: 3px solid white;   /* 轨道边框 */}/* 滚动条滑块 */.webkit-scrollbar::-webkit-scrollbar-thumb {background-color: #a0a0a0; /* 滑块颜色 */border-radius: 8px;border: 3px solid #f1f1f1; /* 滑块边框 */background-clip: padding-box; /* 防止背景色溢出到边框 */}/* 滑块悬停状态 */.webkit-scrollbar::-webkit-scrollbar-thumb:hover {background-color: #808080; /* 悬停时滑块颜色 */}/* 滚动条按钮（上下箭头） */.webkit-scrollbar::-webkit-scrollbar-button {display: block;             /* 显示按钮 */height: 4px;background-color: #d1d1d1;background-repeat: no-repeat;background-position: center;}/* 垂直滚动条向上按钮 */.webkit-scrollbar::-webkit-scrollbar-button:vertical:decrement {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E");}/* 垂直滚动条向下按钮 */.webkit-scrollbar::-webkit-scrollbar-button:vertical:increment {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");}/* 滚动条角落（水平和垂直滚动条交汇处） */.webkit-scrollbar::-webkit-scrollbar-corner {background-color: #f1f1f1;}/* 2. Firefox浏览器滚动条样式 */.firefox-scrollbar {height: 300px;overflow-y: scroll;padding: 15px;border: 1px solid #ddd;scrollbar-width: auto;      /* auto | thin | none */scrollbar-color: #a0a0a0 #f1f1f1; /* 滑块颜色 轨道颜色 */}/* 3. 全局滚动条样式 */body::-webkit-scrollbar {width: 12px;}body::-webkit-scrollbar-track {background: #f8f8f8;}body::-webkit-scrollbar-thumb {background: #c1c1c1;border-radius: 6px;border: 2px solid #f8f8f8;}body {scrollbar-width: thin;scrollbar-color: #c1c1c1 #f8f8f8;}/* 4. 水平滚动条样式示例 */.horizontal-scroll {width: 100%;overflow-x: auto;white-space: nowrap;padding: 15px;border: 1px solid #ddd;}.horizontal-scroll::-webkit-scrollbar {height: 12px;}.horizontal-scroll::-webkit-scrollbar-thumb {background: linear-gradient(90deg, #ff8a00, #da1b60);}/* 5. 高级滚动条效果 */.advanced-scrollbar {height: 300px;overflow-y: scroll;padding: 15px;border: 1px solid #ddd;}.advanced-scrollbar::-webkit-scrollbar {width: 14px;}.advanced-scrollbar::-webkit-scrollbar-track {background: linear-gradient(to bottom, #f5f5f5, #e5e5e5);border-radius: 7px;}.advanced-scrollbar::-webkit-scrollbar-thumb {background: linear-gradient(to bottom, #6e48aa, #9d50bb);border-radius: 7px;box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}/* 滚动条内容样式 */.scroll-content {height: 800px;padding: 10px;background: linear-gradient(to bottom, #ffffff, #f9f9f9);}.scroll-item {padding: 15px;margin-bottom: 10px;background: #e9f7fe;border-radius: 4px;}</style>
</head>
<body><div class="container"><h1>滚动条样式完整定义</h1><div class="scroll-section"><h2>1. WebKit浏览器滚动条样式</h2><div class="webkit-scrollbar"><div class="scroll-content"><div class="scroll-item">项目 1</div><div class="scroll-item">项目 2</div><div class="scroll-item">项目 3</div><div class="scroll-item">项目 4</div><div class="scroll-item">项目 5</div><div class="scroll-item">项目 6</div><div class="scroll-item">项目 7</div><div class="scroll-item">项目 8</div><div class="scroll-item">项目 9</div><div class="scroll-item">项目 10</div></div></div></div><div class="scroll-section"><h2>2. Firefox浏览器滚动条样式</h2><div class="firefox-scrollbar"><div class="scroll-content"><div class="scroll-item">项目 A</div><div class="scroll-item">项目 B</div><div class="scroll-item">项目 C</div><div class="scroll-item">项目 D</div><div class="scroll-item">项目 E</div><div class="scroll-item">项目 F</div><div class="scroll-item">项目 G</div><div class="scroll-item">项目 H</div><div class="scroll-item">项目 I</div><div class="scroll-item">项目 J</div></div></div></div><div class="scroll-section"><h2>3. 水平滚动条样式</h2><div class="horizontal-scroll"><div style="display: inline-block; width: 1200px; padding: 10px; background: #f0f0f0;"><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 1</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 2</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 3</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 4</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 5</div><div style="display: inline-block; width: 200px; height: 100px; margin-right: 10px; background: #d1e7ff; padding: 10px;">水平项目 6</div></div></div></div><div class="scroll-section"><h2>4. 高级滚动条效果</h2><div class="advanced-scrollbar"><div class="scroll-content"><div class="scroll-item">高级项目 一</div><div class="scroll-item">高级项目 二</div><div class="scroll-item">高级项目 三</div><div class="scroll-item">高级项目 四</div><div class="scroll-item">高级项目 五</div><div class="scroll-item">高级项目 六</div><div class="scroll-item">高级项目 七</div><div class="scroll-item">高级项目 八</div><div class="scroll-item">高级项目 九</div><div class="scroll-item">高级项目 十</div></div></div></div></div>
</body>
</html>

包含的所有滚动条样式属性

WebKit浏览器 (Chrome, Safari, Edge等)

  1. ::-webkit-scrollbar - 整个滚动条

    • width - 垂直滚动条宽度
    • height - 水平滚动条高度

  2. ::-webkit-scrollbar-track - 滚动条轨道

    • background-color - 轨道背景色
    • border-radius - 轨道圆角
    • border - 轨道边框

  3. ::-webkit-scrollbar-thumb - 滚动条滑块

    • background-color - 滑块颜色
    • border-radius - 滑块圆角
    • border - 滑块边框
    • background-clip - 背景裁剪方式
    • :hover 状态样式

  4. ::-webkit-scrollbar-button - 滚动条按钮(箭头)

    • :vertical:decrement - 垂直向上按钮
    • :vertical:increment - 垂直向下按钮

  5. ::-webkit-scrollbar-corner - 滚动条角落

Firefox浏览器

  1. scrollbar-width - 滚动条宽度

    • auto - 默认宽度
    • thin - 较窄的滚动条
    • none - 隐藏滚动条

  2. scrollbar-color - 滚动条颜色

    • 第一个值: 滑块颜色
    • 第二个值: 轨道颜色

通用属性

  1. overflow - 控制溢出行为

    • auto - 自动显示滚动条
    • scroll - 总是显示滚动条

  2. 滚动条美化技巧

    • 渐变背景
    • 阴影效果
    • 动态宽度变化
    • 自定义箭头图标

这个示例涵盖了所有主流浏览器中可用的滚动条样式属性，您可以直接使用或根据需要修改其中的样式定义。

相关文章：

滚动条样式

title: 滚动条样式 date: 2025-05-07 19:59:31 tags:css 滚动条样式完整定义 HTML 示例 以下是一个包含所有主流浏览器滚动条样式属性的完整HTML文件&#xff0c;涵盖了WebKit内核浏览器和Firefox的滚动条定制&#xff1a; <!DOCTYPE html> <html lang"zh-CN&…...

编程日记 2025/8/14 6:23:18

Prompt（提示词）工程师，“跟AI聊天”

提示词工程师这活儿早就不只是“跟AI聊天”那么简单了&#xff0c;特别是现在MetaGPT、LangChain这些框架出来后&#xff0c;整个赛道都升级成“AI指挥官”的较量了。 第一层&#xff1a;基础能力得打牢 AI语言学家的功底 别笑&#xff0c;真得像学外语一样研究大模型。比如GP…...

编程日记 2025/8/14 6:19:49

Java版ERP管理系统源码（springboot+VUE+Uniapp）

ERP系统是企业资源计划&#xff08;Enterprise Resource Planning&#xff09;系统的缩写&#xff0c;它是一种集成的软件解决方案&#xff0c;用于协调和管理企业内各种关键业务流程和功能&#xff0c;如财务、供应链、生产、人力资源等。它的目标是帮助企业实现资源的高效利用…...

编程日记 2025/8/14 6:18:10

金融小知识

&#x1f4c9; 一、“做空”是啥&#xff1f; 通俗说法&#xff1a;押“它会跌”&#xff0c;赚钱&#xff01; ✅ 举个例子&#xff1a; 有一天老王的包子涨价到 10 块一个&#xff0c;张三觉得这价格肯定撑不住&#xff0c;未来会跌到 5 块。于是他&#xff1a; 向朋友借了…...

编程日记 2025/8/14 6:22:39

高组装导轨的特点

高组装导轨通常是四列式单圆弧齿形接触直线导轨&#xff0c;具有整合化的结构设计&#xff0c;适用于重负荷和精密应用。与其它直线导轨高组装导轨提升了负荷与刚性能力&#xff0c;具备四方向等负载特色和自动调心功能&#xff0c;能够吸收安装面的装配误差&#xff0c;达到高…...

编程日记 2025/8/14 4:28:54

PE文件结构（导入表）

导入表 什么是导入表&#xff1f; 导入表就是pe文件需要依赖哪些模块以及依赖这些模块中的哪些函数 回想我们导出表的内容&#xff0c;导出表的位置和大小是保存在扩展pe头最后一个结构体数组当中的 IMAGE_DATA_DIRECTORY DataDirectory[IMAGE_NUMBEROF_DIRECTORY_ENTRIES]第…...

编程日记 2025/8/10 9:44:27

AI 实践探索：辅助生成测试用例

背景 目前我们的测试用例主要依赖人工生成和维护&#xff0c;AI时代的来临&#xff0c;我们也在思考“AI如何赋能业务”&#xff0c;提出了如下命题&#xff1a; “探索通过AI辅助生成测试用例&#xff0c;完成从需求到测试用例生成的穿刺”。 目标 找全测试路径辅助生成测…...

编程日记 2025/8/10 23:33:08

2025年链游行业DDoS与CC攻击防御全解析：高带宽时代的攻防博弈

2025年&#xff0c;链游行业在元宇宙与Web3.0技术的推动下迎来爆发式增长&#xff0c;但随之而来的DDoS与CC攻击也愈发猖獗。攻击者瞄准链游的高频交易接口、NFT拍卖系统及区块链节点&#xff0c;通过混合型攻击&#xff08;如HTTP FloodUDP反射&#xff09;瘫痪服务&#xff0…...

编程日记 2025/8/11 19:16:30

LeetCode热题100--73.矩阵置零--中等

1. 题目 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]] 示例 2&#xff…...

编程日记 2025/8/11 19:32:36

51camera将参加第九届沥青路面论坛暨新技术新成果展示会

51camera志强视觉 51camera即将参加第九届沥青路面论坛暨新技术新成果展示会&#xff0c;届时会有相关动态应用展示&#xff0c;欢迎广大客户朋友莅临参观。 会议时间&#xff1a;2025 年5月16日-18日 会议地点&#xff1a;长沙国际会议中心一层多功能厅1-6厅&#xff08;长…...

编程日记 2025/8/12 16:48:21

python 闭包获取循环数据经典 bug

问题代码 def create_functions():functions []for i in range(3):# 创建一个函数,期望捕获当前循环的i值functions.append(lambda: print(f"My value is: {i}"))return functions# 创建三个函数 f0, f1, f2 create_functions()# 调用这些函数 f0() # 期望输出 &…...

编程日记 2025/8/11 2:48:19

Java的HashMap面试题

目录 1. 说一下HashMap的工作原理&#xff1f;&#xff08;1.7和1.8都是&#xff09; 2. 了解的哈希冲突解决方法有哪些 3. JAVA8的 HashMap做了哪些优化 4. HashMap的数组长度必须是 2 的 n 次方 5. HashMap什么时候引发扩容 5.1 数组容量小于64的情况&#xff1a; 5.2…...

编程日记 2025/8/10 15:44:14

spring4.x详解介绍

一、核心特性与架构改进 全面支持Java 8与Java EE 7 Spring 4.x首次实现对Java 8的完整支持&#xff0c;包括&#xff1a; Lambda表达式与Stream API&#xff1a;简化代码编写&#xff0c;提升函数式编程能力&#xff1b; 新的时间日期API&#xff08;如LocalDate、LocalTime&…...

编程日记 2025/8/11 12:34:51

从图灵机到量子计算：逻辑可视化的终极进化

一、图灵机&#xff1a;离散符号系统的奠基者 1.1 计算理论的数学根基 1936 年&#xff0c;艾伦・图灵在《论可计算数及其在判定问题中的应用》中提出的图灵机模型&#xff0c;本质上是一个由七元组\( M (Q, \Sigma, \Gamma, \delta, q_0, q_{accept}, q_{reject}) \)构成的…...

编程日记 2025/8/9 1:37:37

Python初学者笔记第九期 -- （列表相关操作及列表编程练习题）

第17节课 列表相关操作 无论是内置函数、对象函数&#xff0c;用起来确实很方便&#xff0c;但是作为初学者&#xff0c;你必须懂得它们背后的运行逻辑&#xff01; 1 常规操作 &#xff08;1&#xff09;遍历 arr [1,2,3,4] # 以索引遍历:可以在遍历期间修改元素 for ind…...

编程日记 2025/8/12 5:09:15

设备指纹破解企业面临的隐私与安全双重危机

在数字经济高速发展的今天&#xff0c;黑灰产攻击如影随形&#xff0c;个人隐私泄露、金融欺诈、电商刷单等风险事件频发。芯盾时代 “觅迹” 设备指纹全新升级&#xff0c;以跨渠道识别能力打破行业壁垒&#xff0c;为金融、电商、游戏等多场景构筑安全屏障。 黑灰产肆虐隐私…...

编程日记 2025/8/13 2:36:19

多功能气体检测报警系统，精准监测，守护安全

在化学品生产、石油化工、矿山、消防、环保、实验室等领域&#xff0c;有毒有害气体泄漏风险严重威胁工作人员和环境安全。化工企业生产中易产生大量可燃有毒气体&#xff0c;泄漏达一定浓度易引发爆炸、中毒等重大事故&#xff1b;矿井下瓦斯、一氧化碳等有害气体的浓度实时监…...

编程日记 2025/8/10 19:10:18

【HarmonyOS 5】鸿蒙中常见的标题栏布局方案

【HarmonyOS 5】鸿蒙中常见的标题栏布局方案 一、问题背景&#xff1a; 鸿蒙中常见的标题栏&#xff1a;矩形区域&#xff0c;左边是返回按钮&#xff0c;右边是问号帮助按钮&#xff0c;中间是标题文字。 那有几种布局方式&#xff0c;分别怎么布局呢&#xff1f;常见的思维…...

编程日记 2025/8/11 9:16:30

登顶中国：基于 Trae AI与 EdgeOne MCP 的全国各省最高峰攀登攻略博客构建实践

一、背景与目标 ​ 随着户外运动和登山活动的日益流行&#xff0c;越来越多的人希望挑战自然&#xff0c;体验登顶的乐趣。中国幅员辽阔&#xff0c;34个省级行政区&#xff08;包括23个省、5个自治区、4个直辖市和2个特别行政区&#xff09;拥有众多壮丽的山峰&#xff0c;其…...

编程日记 2025/8/9 10:17:48

iOS蓝牙技术实现及优化

以下是针对2025年iOS蓝牙技术实现的核心技术要点的深度解析&#xff0c;结合当前iOS 18&#xff08;推测版本&#xff09;的最新特性与开发实践&#xff0c;分模块结构化呈现&#xff1a; 一、硬件与协议层适配 BLE 5.3 支持 iOS 18默认支持蓝牙5.3协议&#xff0c;需注意&…...

编程日记 2025/8/10 23:34:11

STC单片机--仿真调试

目录 一、仿真介绍二、仿真步骤 一、仿真介绍 通常单片机的仿真有ST-Link、JTAG等&#xff0c;连接好线路之后&#xff0c;在keil的debug选项设置好就可以仿真了。但是&#xff0c;STC需要在STC-ISP软件上的仿真界面进行配置&#xff0c;然后才能在keil里正常仿真 二、仿真步骤…...

编程日记 2025/8/8 13:43:50

SecureCRT SFTP命令详解与实战

在日常的开发工作中&#xff0c;安全地进行文件传输是一个常见的需求。无论是部署应用到远程服务器&#xff0c;还是从生产环境下载日志文件分析问题&#xff0c;一个可靠的工具可以大大提高工作效率。今天&#xff0c;我们就来详细介绍如何使用SecureCRT内置的SFTP功能&#x…...

编程日记 2025/8/6 7:08:01

Unity Gizmos

简介 Gizmos 是Unity编辑器中的一种可视化调试工具&#xff0c;用于在场景视图&#xff08;Scene View&#xff09;中绘制辅助图形、图标或文本&#xff0c;帮助开发者直观理解游戏对象的位置、范围、逻辑关系等信息 核心功能 1. 辅助可视化调试 在场景视图中显示碰撞体、触…...

编程日记 2025/8/10 5:50:26

EEG设备的「减法哲学」：Mentalab Explore如何用8通道重构高质量脑电信号？

在脑电图&#xff08;EEG&#xff09;研究领域&#xff0c;选择适配的工具是推动研究进展的重要步骤。Mentalab Explore 以其便捷性和高效性&#xff0c;成为该领域的一项创新性解决方案。研究者仅用较少的 EEG 通道即可完成实验&#xff0c;并且能够确保数据的高质量。其搭载的…...

编程日记 2025/8/8 16:51:40

PDF文档压缩攻略

前言&#xff1a;早上花了一点时间网上搜索了一下压缩pdf文档大小的方法&#xff0c;发现大部分是利用第三方在线网页&#xff0c;上传文件付费压缩&#xff0c;同时缺乏文件保密性。 经实践&#xff0c;利用浏览器或者wps&#xff08;不付费&#xff09;即可轻松处理。 一、…...

编程日记 2025/8/11 13:25:49

vllm命令行启动方式并发性能实测

设备V100双卡&#xff0c;测试模型qwen2.5-7b,并发度为100。 表现如下&#xff1a; 单卡959.48token/s 双卡 使用 --pipeline-parallel-size 2 939.78token/s双卡 使用 --tensor-parallel-size 21084.82token/s双卡&#xff0c;两张卡分别跑一个接口&#xff0c;形成两个接口…...

编程日记 2025/8/10 19:55:55

医疗AI存在 9 类系统性漏洞

医疗AI存在9类系统性漏洞 理解1. 从整体目的入手2. 关键术语&#xff1a;什么是“红队测试”(Red Teaming)&#xff1f;3. 红队测试的对象&#xff1a;LLM&#xff08;大模型&#xff09;4. 红队测试的切入点&#xff1a;为什么要让“临床专家”来做&#xff1f;5. 什么叫做“脆…...

编程日记 2025/8/12 2:26:04

怎么有效管理项目路径（避免使用绝对路径）

怎么有效管理项目路径&#xff08;避免使用绝对路径&#xff09; import os 使用 os.path 方法会自动处理不同操作系统的路径分隔符&#xff08;如 \ 和 /&#xff09; 1.**current_dir os.path.dirname(os.path.abspath(\__file__)) ** __file__ 获取当前脚本的文件路径&…...

编程日记 2025/8/10 22:32:45

MySQL的行级锁锁的到底是什么?

大家好&#xff0c;我是锋哥。今天分享关于【MySQL的行级锁锁的到底是什么?】面试题。希望对大家有帮助&#xff1b; MySQL的行级锁锁的到底是什么? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 MySQL的行级锁是数据库管理系统&#xff08;DBMS&#xff09;的一…...

编程日记 2025/8/12 23:35:15

多账号管理、反追踪与自动化测试：我的浏览器实战笔记

作为一名在自动化测试和数据采集方面“踩坑”无数的开发者&#xff0c;我想聊聊自己在浏览器工具选择上的一些经验&#xff0c;也许能帮到同样在“账号风控”“浏览器指纹”“隐私追踪”这些问题上挣扎的朋友们。 一、从最初的Chrome开始&#xff1a;万能但不够隐蔽 起初做Se…...

编程日记 2025/8/12 0:07:58

如何应对客户在验收后提出新需求？

应对客户在验收后提出新需求的方法包括&#xff1a;明确新需求的范围与影响、与客户积极沟通、进行影响评估、合理协商费用与时间调整。其中&#xff0c;明确新需求的范围与影响最为关键。明确新需求的范围意味着迅速界定新需求的边界&#xff0c;分析它对现有项目进度、成本和…...

编程日记 2025/8/11 16:34:56

Android Studio根目录下创建多个可运行的模块

右键选中根目录&#xff0c;选择New -> Module 接着选中Phone & Tablet, 填写项目名和包名 选择一个模板&#xff0c;选择Next 然后可以看到app对应一开始创建的app模块&#xff0c;刚创建的customcomponent对应的&#xff0c;这样就可以在一个根目录下有多个可以安装运…...

编程日记 2025/6/29 2:36:33

【Linux】Linux环境基础开发工具

前言 本篇博客我们来了解Linux环境下一些基础开发工具 &#x1f493; 个人主页&#xff1a;zkf& ⏩ 文章专栏&#xff1a;Linux 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 目录 1.Linux 软件包管理器 yum 2.Linux开发工具 2.1…...

编程日记 2025/8/10 17:11:06

五子棋html

<!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8" /> <meta name"viewport" content"widthdevice-width, initial-scale1" /> <title>五子棋游戏</title> <style>bo…...

编程日记 2025/8/13 10:50:10

分布式-基于数据库排他锁

原理&#xff1a; 除了可以通过增删操作数据表中的记录以外&#xff0c;其实还可以借助数据库中自带的锁来实现分布式的锁。 我们还用刚刚创建的那张数据库表。可以通过数据库的排他锁来实现分布式锁。 基于MySql的InnoDB引 擎&#xff0c;可以使用以下方法来实现加锁操作&…...

编程日记 2025/8/11 13:32:39

docker host模式问题

为什么乌班图得docker 我装什么都必须要host 而-p映射不管用 在 Ubuntu 上使用 Docker 时&#xff0c;如果你发现只有 --network host 模式能正常工作&#xff0c;而端口映射&#xff08;-p&#xff09;不管用&#xff0c;可能有以下几种原因&#xff1a; 1. Docker 网络模式…...

编程日记 2025/8/11 14:56:07

分布式-Redis分布式锁

Redis实现分布式锁优点 &#xff08;1&#xff09;Redis有很高的性能&#xff1b; &#xff08;2&#xff09;Redis命令对此支持较好&#xff0c;实现起来比较方便 实现思路 &#xff08;1&#xff09;获取锁的时候&#xff0c;使用setnx加锁&#xff0c;并使用expire命令为锁…...

编程日记 2025/8/9 5:49:18

【Python爬虫电商数据采集+数据分析】采集电商平台数据信息，并做可视化演示

前言 随着电商平台的兴起&#xff0c;越来越多的人开始在网上购物。而对于电商平台来说&#xff0c;商品信息、价格、评论等数据是非常重要的。因此&#xff0c;抓取电商平台的商品信息、价格、评论等数据成为了一项非常有价值的工作。本文将介绍如何使用Python编写爬虫程序&a…...

编程日记 2025/8/11 13:22:50

大数据应用开发和项目实战-电商双11美妆数据分析2

数据可视化 使用seaborn库绘制复杂图表&#xff0c;展示各品牌和品类的销售情况。 绘制嵌套柱形图&#xff0c;分别按主类别和子类别进行对比。 通过饼图展示男士专用产品的销售偏好&#xff0c;发现男士主要关注清洁和补水类产品。 用seaborn包给出每个店铺各个大类以及各个…...

编程日记 2025/8/12 16:47:47

GSENSE2020BSI sCMOS科学级相机主要参数及应用场景

GSENSE2020BSI sCMOS科学级相机是一款面向宽光谱成像需求的高性能科学成像设备&#xff0c;结合了背照式&#xff08;Back-Side Illuminated, BSI&#xff09;CMOS技术与先进信号处理算法&#xff0c;适用于天文观测、生物医学成像、工业检测等领域。以下是其核心特点及技术细节…...

编程日记 2025/8/11 2:48:14

基于深度学习的交通标志识别系统

基于深度学习的交通标志识别系统 项目简介 本项目实现了一个基于深度学习的交通标志识别系统&#xff0c;使用卷积神经网络(CNN)对交通标志图像进行分类识别。系统包含数据预处理、模型训练与评估、结果可视化和用户交互界面等模块。 数据集 项目使用德国交通标志识别基准数…...

编程日记 2025/8/10 15:36:33

Golang的linux运行环境的安装与配置

很多新手在学go时&#xff0c;linux下的配置环境一头雾水&#xff0c;总结下&#xff0c;可供参考&#xff01; --------------------------------------Golang的运行环境的安装与配置-------------------------------------- 将压缩包放在/home/tools/下 解压 tar -zxvf g…...

编程日记 2025/8/12 1:46:34

时间序列数据集增强构造方案（时空网络建模）

时间序列数据集增强构造方案&#xff08;时空网络建模&#xff09; 时间序列数据集TimeSeriesDataset 时间序列数据集增强EnhancedTimeSeriesDataset 一、方案背景与动机 1.1 背景分析 传统时间序列预测方法&#xff08;如ARIMA、Prophet等&#xff09;以及很多深度学习方法…...

编程日记 2025/8/10 13:42:43

实验六 基于Python的数字图像压缩算法

一、实验目的  掌握图像压缩的必要性&#xff1b;  掌握常见的图像压缩标准&#xff1b;  掌握常见的图像压缩方法分类&#xff1b;  掌握常见的图像压缩方法原理与实现&#xff08;包括哈夫曼编码、算术编码、行程编码方法等&#xff09;&#xff1b;  了解我国音视…...

编程日记 2025/8/9 13:00:53

Vue 3 中的 nextTick 使用详解与实战案例

Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中&#xff0c;我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时&#xff0c;nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法&#xff0c;并通过三个实战案例&#xff0c;展示…...

编程日记 2025/8/12 1:35:32

Docker + Watchtower 实现容器自动更新：高效运维的终极方案

文章目录 前言一、Watchtower 简介二、Watchtower 安装与基本使用1. 快速安装 Watchtower2. 监控特定容器 三、Watchtower 高级配置1. 设置检查间隔2. 配置更新策略3. 清理旧镜像4. 通知设置 四、生产环境最佳实践1. 使用标签控制更新2. 更新前执行健康检查3. 结合CI/CD流水线 …...

编程日记 2025/8/12 12:26:14

OpenCV 中用于背景分割（背景建模）的一个类cv::bgsegm::BackgroundSubtractorGSOC

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::bgsegm::BackgroundSubtractorGSOC 是 OpenCV 中用于背景分割&#xff08;背景建模&#xff09;的一个类&#xff0c;它是基于 GMM&#xff…...

编程日记 2025/8/8 20:45:13

AI恶魔之眼使用说明书

AI恶魔之眼使用说明书 产品简介 1.1 产品介绍 AI恶魔之眼是一款具备动态视觉效果与仿生眼睛模拟功能的智能显示产品&#xff0c;可实现以下特性&#xff1a; 真实人眼模拟&#xff1a;支持虹膜样式变换、眨眼动画、瞳孔缩放等动态特效&#xff0c;仿真度高自定义内容上传&am…...

编程日记 2025/8/13 22:03:49

PBR材质-Unity/Blender/UE

目录 前言&#xff1a; 一、Unity&#xff1a; 二、Blender&#xff1a; 三、UE&#xff1a; 四、全家福&#xff1a; 五、后记&#xff1a; 前言&#xff1a; PBR流程作为表达物理效果的经典方式&#xff0c;很值得一学。纹理贴图使用的是上一期的Textures | cgbookcas…...

编程日记 2025/8/10 1:32:02

C++复习

线程库(类&#xff09; 在C11之前&#xff0c;涉及到多线程问题&#xff0c;都是和平台相关的&#xff0c;比如Windows和Linux下各有自己的接口&#xff0c;这使得代码的可移植性比较差。C11中最重要的特性就是对线程进行了支持&#xff0c;使得C在并行编程时不需要依赖第三方…...

编程日记 2025/8/9 1:23:45