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

Tailwind CSS实战技巧：从核心类到高效开发

news 来源：原创 2025/7/4 20:21:49

使用 Kooboo平台 训练实战技巧，无需配置安装，直接引入CDN就可以在线练习了！具体操作流程：进入Kooboo后，选择创建空白站点 -> 站点开发 -> 控制面板 -> 页面 ->新建普通页面 -> 编写代码

一、核心布局类

1. 容器与布局模式

  • container容器：作为响应式布局的基础，container类会根据不同屏幕尺寸自动调整宽度，并保持水平居中。在实际项目中，常见于页面主体内容的包裹，确保内容在不同设备上都有合适的显示空间。例如：
<main class="container mx-auto p-4"><h1 class="text-3xl font-bold mb-4">欢迎来到我的网站</h1><p class="text-gray-700">这里是详细的内容介绍...</p>
</main>
  • Flex 布局
    • flex与inline-flex：flex将元素设置为块级 Flex 容器，inline - flex则设置为行内 Flex 容器。在导航栏、按钮组等组件中应用广泛。比如，创建一个水平排列且居中的按钮组：
<div class="flex space-x-4 justify-center"><button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">按钮1</button><button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">按钮2</button>
</div>
  • Grid 布局
    • grid与grid-cols-{n}：grid创建网格容器，grid-cols-{n}定义列数。以博客文章列表为例，可轻松实现多列布局：
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><div class="bg-white p-4 rounded shadow">文章1</div><div class="bg-white p-4 rounded shadow">文章2</div><div class="bg-white p-4 rounded shadow">文章3</div>
</div>
  • 显示控制
    • block、inline-block与hidden：block使元素独占一行；inline-block元素在一行内排列且可设置宽高；hidden用于隐藏元素。在制作响应式菜单时，可通过 JavaScript 结合hidden类控制菜单显示与隐藏：
<button id="menu-toggle" class="block md:hidden">菜单</button>
<ul id="main-menu" class="hidden md:block"><li><a href="#" class="px-4 py-2 hover:bg-gray-100">首页</a></li><li><a href="#" class="px-4 py-2 hover:bg-gray-100">关于</a></li>
</ul>

2. 间距控制

  • 内边距与外边距
    • p-{n}与m-{n}：p-{n}设置内边距，m-{n}设置外边距。数值从0到96，以rem为单位递增。在卡片组件中，可这样使用：
<div class="bg-white p-6 m-4 rounded shadow"><h2 class="text-2xl font-bold mb-2">卡片标题</h2><p class="text-gray-600">卡片具体内容...</p>
</div>
  • mx-auto：常用于水平居中元素，如上述container示例中，mx-auto确保容器在父元素中水平居中。
  • 子元素间距
    • space-{x/y}-{n}：space-x-{n}控制子元素水平间距，space-y-{n}控制垂直间距。在列表项中，可快速设置间距：
<ul class="space-y-4"><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>
  • gap-{n}：用于 Grid 或 Flex 布局中设置子项间距。在 Grid 布局中：
<div class="grid grid-cols-3 gap-4"><div>单元格1</div><div>单元格2</div><div>单元格3</div>
</div>

3. 尺寸与定位

  • 宽高设置
    • w-{n}与h-{n}：w-{n}设置宽度，h-{n}设置高度。常见值有w-full（100% 宽度）、h-screen（100 视口高度）。制作全屏背景图时：
<div class="bg-cover bg-center h-screen w-full" style="background-image: url('your-image.jpg')"></div>
  • 定位模式
    • absolute、relative与fixed：relative为元素提供相对定位基准；absolute使元素相对于最近的非静态定位祖先元素定位；fixed则相对于视口定位。在制作固定悬浮按钮时：
<div class="fixed bottom-4 right-4"><button class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-3 shadow-lg"><i class="fas fa-plus"></i></button>
</div>
  • 定位偏移
    • top-{n}与left-{n}：配合定位模式使用，设置元素的垂直和水平偏移量。例如，将绝对定位的元素精确放置在特定位置：
<div class="relative"><div class="absolute top-4 left-8 bg-yellow-500 text-white p-2 rounded">偏移元素</div>
</div>

二、样式核心类

1. 文本与字体

  • 字号设置
    • text-{size}：从text-xs（超小字体）到text-9xl（超大字体），满足各种文本显示需求。在标题和正文区分上：
<h1 class="text-4xl font-bold mb-4">主标题</h1>
<p class="text-base text-gray-700">正文内容...</p>
  • 字重调整
    • font-{weight}：font-bold（加粗）、font-medium（中等粗细）等。在强调文本重点时：
<p class="text-gray-700">这段内容中有 <span class="font-bold">重要信息</span> 需注意。</p>
  • 文字颜色
    • text-{color}：结合颜色系统，如text-gray-800（深灰色文字）、text-green-500（绿色文字）。用于提示信息：
<p class="text-green-500">操作成功！</p>
  • 文本对齐
    • text-{align}：text-center（居中对齐）、text-right（右对齐）等。在版权信息展示时：
<footer class="text-center p-4 text-gray-600">&copy; 2024 版权所有
</footer>

2. 背景与边框

  • 背景颜色
    • bg-{color}：bg-blue-500（蓝色背景）、bg-yellow-100（浅黄色背景）。用于按钮背景：
<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded">删除按钮</button>
  • 边框设置
    • border与border-{width}：border添加默认边框，border-2等指定边框宽度。在表单输入框中：
<input type="text" class="border border-gray-300 rounded px-3 py-2 w-full">
  • 圆角处理
    • rounded-{size}：rounded-lg（大圆角）、rounded-full（圆形）。在头像展示时：
<img src="avatar.jpg" alt="头像" class="rounded-full w-16 h-16">
  • 阴影效果
    • shadow-{size}：shadow-md（中等阴影）、shadow-lg（大阴影）。增强卡片立体感：
<div class="bg-white p-6 rounded shadow-lg"><h2 class="text-2xl font-bold mb-2">卡片标题</h2><p class="text-gray-600">卡片具体内容...</p>
</div>

3. 交互状态

  • 悬停与聚焦
    • hover:{} 与focus:{} ：在按钮、链接等元素上添加交互反馈。如链接悬停变色：
<a href="#" class="text-blue-500 hover:text-blue-700">查看详情</a>
  • 在输入框聚焦时添加边框效果：
<input type="text" class="border border-gray-300 rounded px-3 py-2 w-full focus:border-blue-500">
  • 激活与禁用
    • active:{} 与disabled:{} ：active处理元素点击激活状态，disabled用于禁用元素。在按钮上：
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded disabled:bg-gray-400 disabled:cursor-not-allowed" disabled>禁用按钮</button>
  • 过渡动画
    • transition与duration-{n}：transition-all过渡所有属性，duration-300设置过渡时长为 300 毫秒。使按钮点击时背景色渐变：
<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded transition-all duration-300">提交按钮</button>

三、响应式设计

1. 断点前缀

Tailwind CSS 提供了多个响应式断点前缀：

  • sm:（小屏幕，≥640px）：适用于手机横屏等场景。
  • md:（中等屏幕，≥768px）：常用于平板设备。
  • lg:（大屏幕，≥1024px）：桌面显示器常用。
  • xl:（超大屏幕，≥1280px）：适用于大尺寸显示器。
  • 2xl:（更大屏幕，≥1536px）：针对超宽屏幕。

例如，在制作响应式导航菜单时：

<nav class="flex items-center justify-between p-4 bg-white shadow-md"><div class="text-xl font-bold">Logo</div><ul class="flex space-x-6 md:hidden"><li><a href="#" class="hover:text-blue-500">Home</a></li></ul><button class="md:hidden">菜单图标</button><ul class="hidden md:flex space-x-6"><li><a href="#" class="hover:text-blue-500">Home</a></li></ul>
</nav>

2. 移动优先原则

采用移动优先的开发策略，先编写小屏幕样式，再通过断点类覆盖大屏样式。比如，设计一个图片与文字的组合模块：

<div class="flex flex-col items-center p-4"><img src="image.jpg" alt="图片" class="w-full h-auto mb-4"><p class="text-center text-gray-700">图片描述文字...</p><button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded mt-4">了解更多</button>
</div>

在中等屏幕及以上，改为水平排列：

<div class="flex flex-col items-center p-4 md:flex-row md:justify-between"><img src="image.jpg" alt="图片" class="w-1/2 h-auto mb-4 md:mb-0"><div class="md:w-1/2"><p class="text-gray-700">图片描述文字...</p><button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded mt-4">了解更多</button></div>
</div>

四、高频实用类

分类常用类示例说明实际应用场景
Flexitems-center justify-between使 Flex 容器内子元素垂直居中且水平两端对齐导航栏、底部工具栏
Gridgrid-cols-3 col-span-2创建 3 列 Grid 布局，指定元素跨 2 列商品展示网格、多栏内容布局
间距p-4 mb-2 space-x-4内边距为 4 单位，底部外边距 2 单位，子元素水平间距 4 单位卡片组件、列表项
颜色text-white bg-opacity-50白色文字，背景透明度 50%半透明遮罩层、提示框
定位sticky z-10粘性定位，层级为 10侧边栏、固定导航
溢出overflow-hidden truncate隐藏溢出内容，文本超出显示省略号标题过长处理、卡片内容显示控制

五、实战技巧

1. 组合常用样式

通过@apply指令在 CSS 中提取重复类，提升代码复用性。例如，创建一个通用的按钮样式：

.btn {@apply py-2 px-4 rounded-lg transition-all duration-300;
}
.btn-primary {@apply btn bg-blue-500 text-white hover:bg-blue-600;
}
.btn-secondary {@apply btn bg-gray-500 text-white hover:bg-gray-600;
}

在 HTML 中使用：

<button class="btn-primary">主要按钮</button>
<button class="btn-secondary">次要按钮</button>

2. 自定义配置

在tailwind.config.js文件中扩展主题，满足项目特定需求。例如，添加自定义颜色和字体：

module.exports = {theme: {extend: {colors: {'brand': '#3B82F6', // 自定义品牌色'accent': '#FF6B6B' // 自定义强调色},fontFamily: {'custom': ['"Open Sans"', 'sans-serif'] // 自定义字体}}},variants: {},plugins: []
};

在 HTML 中使用自定义颜色和字体：

<p class="text-brand font-custom">使用自定义品牌色和字体的文本</p>

3. 使用 Arbitrary Values

当需要设置非标准尺寸时，可使用方括号语法。比如，创建一个自定义宽度和高度的容器：

<div class="w-[350px] h-[200px] bg-gray-200 p-4">自定义尺寸容器</div>

还可进行复杂的计算：

<div class="w-[calc(50%-20px)] h-[calc(100vh-100px)] bg-yellow-100 p-4">计算尺寸容器</div>

4. 工具推荐

  • VS Code 插件 - Tailwind CSS IntelliSense：提供强大的自动补全功能，输入类名时可快速提示相关类，提高开发效率。安装后，在编写 HTML 和 CSS 文件时，会自动识别 Tailwind 类并提供智能提示。
  • 浏览器开发者工具：利用浏览器自带的开发者工具审查样式，检查元素应用的 Tailwind 类及其效果，方便调试和优化样式。可查看元素的计算样式，对比实际效果与预期效果的差异，快速定位问题。

六、典型组件速建

1. 导航栏

<nav class="flex items-center justify-between p-4 bg-white shadow-md"><div class="text-xl font-bold">网站Logo</div><ul class="flex space-x-6"><li><a href="#" class="hover:text-blue-500">首页</a></li><li><a href="#" class="hover:text-blue-500">产品</a></li><li><a href="#" class="hover:text-blue-500">关于</a></li><li><a href="#" class="hover:text-blue-500">联系我们</a></li></ul><button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">登录</button>
</nav>

2. 卡片布局

<div class="max-w-sm rounded-lg shadow-lg bg-white p-6"><img src="product.jpg" alt="产品图片

掌握这些核心类后，配合官方文档（tailwindcss.com/docs）查阅细节，90% 的页面需求都能快速实现。关键是多实践，逐渐形成自己的常用类组合模式。

相关文章：

Tailwind CSS实战技巧：从核心类到高效开发

使用 Kooboo平台 训练实战技巧&#xff0c;无需配置安装&#xff0c;直接引入CDN就可以在线练习了&#xff01;具体操作流程&#xff1a;进入Kooboo后&#xff0c;选择创建空白站点 -> 站点开发 -> 控制面板 -> 页面 ->新建普通页面 -> 编写代码 一、核心布局类…...

编程日记 2025/7/4 20:21:49

C# 事件与委托

一、委托基础 1. 委托定义 委托是一种类型安全的函数指针&#xff0c;它允许将方法作为参数传递给其他方法。 // 声明一个委托类型 public delegate void MyDelegate(string message);// 使用委托 public class Program {public static void Main(){// 创建委托实例并指向方…...

编程日记 2025/7/3 12:07:47

django_rq

使用 Loguru 记录 Django-RQ 任务日志 要在 Django-RQ 处理的任务中使用 Loguru 记录日志&#xff0c;你需要做的就是按照标准的 Loguru 使用方法配置和使用日志记录器。下面是一个简单的示例&#xff0c;展示如何在 Django-RQ 的任务中集成 Loguru&#xff1a; 安装必要的包…...

编程日记 2025/7/4 20:19:06

Java List分页工具

PageUtil.java import com.google.common.collect.Lists; import com.jd.platform.hotkey.dashboard.common.domain.Page; import org.springframework.util.CollectionUtils;import java.util.ArrayList; import java.util.List;public class PageUtil {/*** 通用分页工具类*…...

编程日记 2025/7/4 20:15:09

【UE5】“对不起，您的客户端未能传递登录所需的参数”解决办法

想要进入Epic账户&#xff0c;正常登录后就会弹出这个&#xff1a; 官方提供了一个解决办法&#xff1a; 如果以上办法行不通&#xff0c;关闭单点登录&#xff1a; 成功解决...

编程日记 2025/7/3 12:07:42

Web开发-JavaEE应用SpringBoot栈模版注入ThymeleafFreemarkerVelocity

知识点&#xff1a; 1、安全开发-JavaEE-开发框架-SpringBoot&路由&传参 2、安全开发-JavaEE-模版引擎-Thymeleaf&Freemarker&Velocity 一、演示案例-WEB开发-JavaEE-开发框架-SpringBoot&路由&传参 类似于php语言中的thinkphp&#xff0c;不过要更加…...

编程日记 2025/7/4 1:23:00

出现Invalid bound statement (not found)问题的原因可能有哪些

1.全局配置文件没配好&#xff1f; 检查全局配置文件application.properties或application.yml是否配置扫描mapper包的文件路径 #mybatis配置mapper文件路径 #mybatis.mapper-locationsclasspath:/mapper/*.xml #mybatis-plus配置mapper文件路径 mybatis-plus.mapper-locatio…...

编程日记 2025/7/4 20:14:15

多类型文件集中查看系统

软件介绍 Universal Viewer 是一款具备多格式兼容能力的文件查看工具&#xff0c;旨在为用户提供统一化的文档处理方案。 核心功能优势 该工具采用全格式兼容架构&#xff0c;支持包括图片、音视频及办公文档在内的多种通用文件类型&#xff0c;实现单一软件完成多格式处…...

编程日记 2025/7/4 20:15:09

WebSocket与Socket、TCP、HTTP的关系及区别

1.什么是WebSocket及原理 WebSocket是HTML5中新协议、新API。 WebSocket从满足基于Web的日益增长的实时通信需求应运而生&#xff0c;解决了客户端发起多个Http请求到服务器资源浏览器必须要在经过长时间的轮询问题&#xff0c;实现里多路复用&#xff0c;是全双工、双向、单套…...

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

【25软考网工】第四章（4）无线局域网WLAN安全技术、无线个人网WPAN

目录 一、无线局域网安全技术 1. WLAN安全机制 ​编辑 1&#xff09;SSID访问控制 2&#xff09;物理地址过滤 3&#xff09;WEP认证和加密 4&#xff09;WPA&#xff08;认证、加密、数据完整性&#xff09; 5&#xff09;WPA2 6&#xff09;无线认证技术 2. WEP和W…...

编程日记 2025/7/2 19:57:39

Vue：el-table-tree懒加载数据

目录 一、出现场景二、具体使用三、修改时重新加载树节点四、新增、删除重新加载树节点 一、出现场景 在项目的开发过程中&#xff0c;我们经常会使用到表格树的格式&#xff0c;但是犹豫数据较多&#xff0c;使用分页又不符合项目需求时&#xff0c;就需要对树进行懒加载的操…...

编程日记 2025/7/3 12:07:32

JCRQ1河马算法+消融实验！HO-CNN-LSTM-Attention系列四模型多变量时序预测，作者：机器学习之心

JCRQ1河马算法消融实验&#xff01;HO-CNN-LSTM-Attention系列四模型多变量时序预测 目录 JCRQ1河马算法消融实验&#xff01;HO-CNN-LSTM-Attention系列四模型多变量时序预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于HO-CNN-LSTM-Attention、CNN-LSTM-Attent…...

编程日记 2025/7/3 9:47:30

vue elementui 去掉默认填充 密码input导致的默认填充

<el-form-item prop"code"><div style"display: flex; width: 100%; align-items: flex-end"><el-inputv-model"loginForm.code"size"small"auto-complete"off"placeholder"请输入验证码"keyup.en…...

编程日记 2025/7/2 20:05:07

Android学习总结之设计场景题

设计图片请求框架的缓存模块 核心目标是通过分层缓存策略&#xff08;内存缓存 磁盘缓存&#xff09;提升图片加载效率&#xff0c;同时兼顾内存占用和存储性能。以下是针对 Android 面试官的回答思路&#xff0c;结合代码注释说明关键设计点&#xff1a; 一、缓存架构设计&…...

编程日记 2025/7/3 12:07:27

【数学建模国奖速成系列】优秀论文绘图复现代码（四）

文章目录 引言三维图双轴图三维散点图完整复现代码 引言 数模比赛的绘图是非常重要得&#xff0c;这篇文章给大家分享我自己复现国奖优秀论文的代码&#xff0c;基于Matalab来实现&#xff0c;可以直接运行出图。之前的文章也有分享【折线图、柱状图、箱线图、热图】的绘制&am…...

编程日记 2025/7/3 12:07:25

哪些因素会影响远程视频监控的质量？浅述EasyCVR视频智能诊断技术

在安防领域&#xff0c;无线监控系统凭借其灵活部署、便捷扩展的特性得到广泛应用。然而&#xff0c;实时监控图像清晰度不足、回放调查受限等问题&#xff0c;严重制约了其应用效果。经分析&#xff0c;摄像机性能、线缆质量、无线网桥性能、交换机配置及供电电压等是影响图像…...

编程日记 2025/7/3 12:07:24

Android学习总结之算法篇六（数组和栈）

括号匹配 public static boolean isValid(String s) {// 创建一个栈用于存储左括号Stack<Character> stack new Stack<>();// 遍历字符串中的每个字符for (char c : s.toCharArray()) {if (c ( || c [ || c {) {// 如果是左括号&#xff0c;将其压入栈中stack…...

编程日记 2025/7/3 12:07:22

一套SaaS ERP管理系统源码，支持项目二开商用，SpringBoot+Vue+ElementUI+UniAPP

ERP管理系统源码&#xff0c;一款适用于小微企业的SaaS ERP管理系统源码, 采用最新的技术栈开发(SpringBootVueElementUIUniAPP)&#xff0c;让企业简单上云。 专注于小微企业的应用需求&#xff0c;如企业基本的进销存、询价&#xff0c;报价, 采购、销售、MRP生产制造、品质…...

编程日记 2025/7/2 14:44:29

【Agent】MCP协议 | 用高德MCP Server制作旅游攻略

note MCP (Model Context Protocol) 代表了 AI 与外部工具和数据交互的标准建立。MCP 的本质&#xff1a;它是一个统一的协议标准&#xff0c;使 AI 模型能够以一致的方式连接各种数据源和工具&#xff0c;类似于 AI 世界的"USB-C"接口。 它能够在 LLM/AI Agent 与外…...

编程日记 2025/7/3 12:07:18

ISO 26262认证步骤

一、企业需要做&#xff1f; 从 ISO 26262 标准导入到认证大概需要经历7 个主要的阶段&#xff0c; 分别是策划阶段、 流程建立阶段、 流程试运行阶段、 流程认证阶段、 流程推广阶段、 产品认证阶段和持续运行阶段。 策划阶段&#xff1a;精准布局差距分析&#xff1a;对照 I…...

编程日记 2025/7/3 12:07:17

php+mysql活动报名学生选课产品预定旅游报名系统网站源码

本系统是一个基于PHPMySQL的活动报名管理系统&#xff0c;支持多个活动的发布、报名、审核等功能。系统分为用户端和管理端两个部分&#xff0c;实现了活动报名的完整流程管理。 环境要求 ------- - PHP 7.1 - MySQL 5.6 - 支持mysqli扩展 - 支持session - 支持文件上传 默认账…...

编程日记 2025/7/3 12:07:15

Qt QWebEngine应用和网页的交互

一、QWebEngine简介 1、Qt WebEngine模块提供了一个Web浏览器引擎&#xff0c;可以轻松地将万维网上的内容嵌入到没有本机Web引擎的平台上的Qt应用程序中。 2、Qt WebEngine提供了用于渲染HTML&#xff0c;XHTML和SVG文档的C 类和QML类型&#xff0c;它们使用级联样式表&#…...

编程日记 2025/7/2 14:58:47

【爬虫】deepseek谈爬虫工具

2025 年&#xff0c;随着 Web 技术的演进和反爬机制的升级&#xff0c;工具生态也会进一步优化。以下是 2025 年爬虫 & 自动化测试的前沿工具预测&#xff0c;结合行业趋势和现有技术发展方向&#xff1a; &#x1f680; 2025 年推荐组合&#xff08;预测版&#xff09; 1…...

编程日记 2025/7/2 23:48:51

大数据治理自动化与智能化实践指南：架构、工具与实战方案（含代码）

📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言：从人治到机治，数据治理正在进化 随着数据体量持续膨胀、数据场景复杂化，传统依赖人工规则的大数据治理方式已难以为继。企业在治理过程中面临： 数据质量问题激增，人工检测成本高 元数…...

编程日记 2025/7/3 12:07:10

基于BM1684X+RK3588的智能工业视觉边缘计算盒子解决方案

智能工业视觉边缘计算终端技术方案书‌ ‌1. 产品概述‌ 1.1 产品定位 面向工业自动化场景的高性能AI视觉处理设备集成BM1684X&#xff08;8TOPS INT8&#xff09;AI加速芯片 RK3588&#xff08;6TOPS NPU&#xff09;异构计算支持工业级多相机接入、实时缺陷检测、高精度定…...

编程日记 2025/7/3 12:07:08

dubbo泛化调用时transient字段失效问题

工作中发现dubbo泛化调用时结果类中的某个字段即使已经用transient修饰了&#xff0c;但是前端还是会有该字段展示&#xff0c;探究了原因如下&#xff1a; 如果是走的泛化调用&#xff0c;会通过genericFilter和genericImplFilter两个类来处理序列化和反序列化&#xff0c;会…...

编程日记 2025/7/3 12:07:06

【C++】数据结构 九种排序算法的实现

本篇博客给大家带来的是直接插入、希尔、直接选择、堆、冒泡、快速、归并、计数、排序算法的实现&#xff01; &#x1f41f;&#x1f41f;文章专栏&#xff1a;数据结构 &#x1f680;&#x1f680;若有问题评论区下讨论&#xff0c;我会及时回答 ❤❤欢迎大家点赞、收藏、分享…...

编程日记 2025/7/3 12:07:05

【数据结构与算法】跳表实现详解

文章目录 Ⅰ. 前言Ⅱ. 跳表（skiplist）一、什么是跳表二、跳表的发明历程三、跳表的搜索方式Ⅲ. skiplist的算法性能分析一、理论准备二、性能分析（了解即可，主要记结论）Ⅳ. skiplist与平衡树、哈希表的比较Ⅴ. skiplist的实现[ 设计跳表](https://leetcode.cn/problems/de…...

编程日记 2025/7/4 18:42:40

2025年“深圳杯”数学建模挑战赛B题-LED显示屏颜色转换设计与校正

LED显示屏颜色转换设计与校正 小驴数模 问题的背景 走在晚风都市&#xff0c;或春日田野&#xff0c;我们都会看到一个色彩斑斓的世界。色彩是我们对世界一种重要感知。什么是色彩&#xff0c;或颜色&#xff1f;颜色是光作用于人眼引起的视觉感知现象&#xff0c;它与物体的…...

编程日记 2025/7/3 5:06:44

毕业论文 ｜ 基于C#开发的NMEA 0183协议上位机

以下是基于C#开发的NMEA 0183协议上位机完整实现方案，包含串口通信、数据解析与可视化功能： 基于C#开发的NMEA 0183协议上位机 一、项目结构二、核心代码实现1. 数据模型定义2. 串口通信管理3. NMEA协议解析核心4. 主界面实现（Windows Forms）三、界面设计关键元素（需在窗体…...

编程日记 2025/7/3 12:07:00

【Scrapy】简单项目实战--爬取dangdang图书信息

目录 一、基本步骤 1、新建项目 &#xff1a;新建一个新的爬虫项目 2、明确目标 &#xff08;items.py&#xff09;&#xff1a;明确你想要抓取的目标 3、制作爬虫 &#xff08;spiders/xxspider.py&#xff09;&#xff1a;制作爬虫开始爬取网页 4、存储内容 &#xff08;p…...

编程日记 2025/7/3 12:06:58

Linux架构篇、第1章_01架构的介绍HTTP HTTPS 协议全面解析

题目&#xff1a;HTTP/HTTPS 协议全面解析&#xff1a;原理、区别与状态码详解 版本号: 1.0,0 作者: 老王要学习 日期: 2025.04.30 适用环境: 服务器 文档说明 本文围绕 HTTP/HTTPS 协议展开&#xff0c;详细介绍了协议的基本概念、工作原理、两者之间的区别以及常见的状态码…...

编程日记 2025/7/2 17:33:48

Python 刷题记录（持续更新）

Python 刷题记录&#xff08;持续更新&#xff09; 主要是 PythonTip 里的题目 刷题网站 【PythonTip】1.分秒转换 def convert_to_seconds(minutes):second minutes * 60return second# 输入分钟 input_minutes int(input())# 调用函数 print(convert_to_seconds(input…...

编程日记 2025/7/3 13:49:41

核心技能：ArcGIS洪水灾害普查、风险评估及淹没制图

查看原文>>>ArcGIS 在洪水灾害普查、风险评估及淹没制图中的实践技术应用 【内容简述】&#xff1a; 水旱灾害风险普查是全国自然灾害综合风险普查的重要组成部分。其中&#xff0c;我国有超过 60%的国土面积、90%以上的人口均受到不同程度的洪水威胁&#xff0c;重…...

编程日记 2025/7/2 23:17:23

MySQL explain

1 EXPLAIN执行结果下各字段含义 (1) id 含义&#xff1a;标识查询中每个 SELECT 子句的唯一编号。规则&#xff1a;相同 id&#xff1a;按从上到下的顺序执行。不同 id&#xff1a;值越大&#xff0c;优先级越高&#xff08;先执行&#xff09;。NULL&#xff1a;表示该行是 …...

编程日记 2025/7/3 9:37:15

数据结构每日一题day14（链表）★★★★★

题目描述&#xff1a;试编写算法将带头结点的单链表就地逆置&#xff0c;所谓“就地”就是空间复杂度为O&#xff08;1)。 算法思想&#xff1a; 1.初始化&#xff1a; 定义三个指针 prev、curr、next&#xff0c;分别表示前驱节点、当前节点和后继节点。 prev 初始化为 NULL…...

编程日记 2025/7/3 9:31:34

Java继承中super的使用方法

super 关键字在 Java 中用于访问父类的成员&#xff08;包括字段、方法和构造函数&#xff09;。当你在子类中调用父类的方法或访问父类的成员变量时&#xff0c;super 是必不可少的工具。 &#x1f511; super 的基本用法 1. 调用父类的构造方法 在子类的构造方法中&#x…...

编程日记 2025/7/3 13:49:37

2025东三省B题深圳杯B题数学建模挑战赛数模思路代码文章教学

完整内容请看文章最下面的推广群 一、问题一的模型构建与优化&#xff08;RGB颜色空间转换模型&#xff09; 基础模型&#xff08;线性映射模型&#xff09;/高斯过程回归模型&#xff08;GPR&#xff09;&#xff1a; 针对高清视频源&#xff08;BT2020标准&#xff09;与普通…...

编程日记 2025/7/3 13:49:35

K8S - GitOps 入门实战 - 自动发布与秒级回滚

引言 传统运维依赖手动执行 kubectl apply或脚本推送应用&#xff0c;存在环境差异、操作记录缺失、回滚缓慢等痛点。 GitOps以 Git 为唯一可信源&#xff0c;通过声明式配置和版本化回滚&#xff0c;重构 Kubernetes 交付流程&#xff0c;带来以下优势&#xff1a; • 环境…...

编程日记 2025/7/3 12:39:30

第六章 流量特征分析-常见攻击事件 tomcat wp

1、在web服务器上发现的可疑活动,流量分析会显示很多请求,这表明存在恶意的扫描行为,通过分析扫描的行为后提交攻击者IP flag格式&#xff1a;flag{ip}&#xff0c;如&#xff1a;flag{127.0.0.1} 可看见有大量的IP为&#xff1a;14.0.0.120的ip攻击10.0.0.112。 2、找到攻击者…...

编程日记 2025/7/3 13:49:31

Axure RP 快速上手指南：安装配置与实战技巧

以下是Axure RP的中文安装与使用指南&#xff1a; 1. 下载Axure RP Axure RP提供下载地址&#xff1a;https://pan.quark.cn/s/cc957c429c1c 2. 安装Axure RP Windows系统&#xff1a; 双击下载的 .exe 文件。 按提示完成安装&#xff08;接受协议、选择安装路径等&#xff…...

编程日记 2025/7/3 13:49:29

【Dockerfile】Dockerfile打包Tomcat及TongWeb应用镜像（工作实践踩坑教学）

文章目录 前言准备工作目录结构准备基础镜像准备dockerfile开发&#xff08;TongWeb&#xff09;dockerfile开发&#xff08;Tomcat&#xff09;dockerfile镜像命令&#xff08;排查问题基本够用&#xff09; 更多相关内容可查看 前言 本文仅应用于完成此项工作&#xff0c;后…...

编程日记 2025/7/3 13:49:27

第16届蓝桥STEMA真题剖析-2025年1月12日Scratch初/中级组

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥真题解析系列教程第223讲。 第16届第4次蓝桥STEMA已于2025年1月12日正式落下帷幕&#xff0c;比赛仍然采取线上形式。这是Scratch…...

编程日记 2025/7/3 1:27:08

文件读取操作

如果需要从文件读入数据&#xff0c;并把输出数据保存为文件&#xff0c;需要使用文件读取。 freopen为file reopen&#xff0c;意为文件重新打开&#xff0c;实现重定向标准输入输出第一个参数为文件名可以修改&#xff0c;输入文件为.in&#xff0c;输出文件为.out第二个参数…...

编程日记 2025/7/3 13:49:22

服务容错治理框架resilience4jsentinel基础应用---微服务的限流/熔断/降级解决方案

写在前文&#xff1a;hystrix停止维护&#xff0c;不做总结&#xff1b; 本文主要总结sentinel和resilience4j这两个框架&#xff1b;另外额外补充面试可能会问到的限流算法&#xff1b; 目录 限流算法 漏桶算法 计数器算法 令牌桶算法 resilience4j与sentinel resilie…...

编程日记 2025/7/3 13:49:21

信创系统图形界面开发指南：技术选择与实践详解

信创系统图形界面开发指南&#xff1a;技术选择与实践详解 &#x1f9d1; 博主简介&#xff1a;CSDN博客专家、CSDN平台优质创作者&#xff0c;高级开发工程师&#xff0c;数学专业&#xff0c;10年以上C/C, C#, Java等多种编程语言开发经验&#xff0c;拥有高级工程师证书&…...

编程日记 2025/7/3 13:49:19

六、UI自动化测试06--PO设计模式

目录 一、PO 设计模式1. v1 版本1.1 v1.11.2 v1.2 2. v2 版本3. ⽅法封装套路4. v3 版本4.1 浏览器对象管理类的实现4.2 浏览器对象管理类的优化4.3 浏览器对象管理类的使⽤4.4 获取弹窗信息⽅法的封装 5. PO 设计模式6. v4 版本6.1 PO⻚⾯元素封装步骤6.2 测试⽤例的最终代码样…...

编程日记 2025/7/2 21:32:00

电子病历高质量语料库构建方法与架构项目（智能数据目录篇）

电子病历高质量语料库的构建是医疗人工智能发展的基础性工作，而智能数据目录作为数据治理的核心组件，能够有效管理这些语料资源。本文将系统阐述电子病历高质量语料库的构建方法与架构，特别聚焦于智能数据目录的设计与实现，包括数据目录的功能定位、元数据管理、构建步骤以…...

编程日记 2025/7/3 13:49:15

DeepSeek最新大模型发布-DeepSeek-Prover-V2-671B

2025 年 4 月 30 日&#xff0c;DeepSeek 开源了新模型 DeepSeek-Prover-V2-671B&#xff0c;该模型聚焦数学定理证明任务&#xff0c;基于混合专家架构&#xff0c;使用 Lean 4 框架进行形式化推理训练&#xff0c;参数规模达 6710 亿&#xff0c;结合强化学习与大规模合成数据…...

编程日记 2025/7/3 6:01:02

论文公式根据章节自动编号教程

目录 一、操作前提二、具体操作步骤 插入公式编号添加括号&#xff08;如需&#xff09; 问答 摘要&#xff1a; 在撰写论文等文档时&#xff0c;让公式根据章节自动编号能大幅提升排版效率。 一、操作前提 先将每一章标题设置为多级标题。可点击Word“多级列表” - “定义…...

编程日记 2025/7/3 13:49:11