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

前端css实例

news 来源：原创 2025/5/15 7:58:50

前端css实例

一、带条纹的表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>条纹样式的表格</title><style>table {widh: 50%;border-collapse: collapse;}th, td {text-align: left;padding: 8px;}.tab tr:nth-child(odd) {background-color: #f2f2f2;}.tab tr:nth-child(even) {background-color: slategray;}</style>
</head>
<body><table class="tab"><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>数据1</td><td>数据2</td><td>数据3</td></tr><tr><td>数据4</td><td>数据5</td><td>数据6</td></tr><tr><td>数据7</td><td>数据8</td><td>数据9</td></tr></table>
</body>
</html>

在这里插入图片描述

在 CSS 中，tr:nth-child(odd) 是一个伪类选择器，用于选择所有在其父元素（比如 <table>）中的奇数位置的 <tr> 元素。

解释：

nth-child() 是 CSS 中的一个伪类，用来根据元素在父元素中的位置来选择子元素
odd 是 nth-child() 中的一个关键字，表示选择奇数位置的元素（例如：1、3、5、7…），even 表示偶数位置的元素（例如：2、4、6、8…）
由于在 CSS 中，元素的计数是从 1 开始的，所以 tr:nth-child(odd) 会选择所有在父元素中处于奇数位置的 <tr> 元素

核心思路：

使用表格中的行的伪类选择器，改变奇数行或偶数行表格的背景颜色即可

tr:nth-child(odd)表示奇数行
tr:nth-child(even)表示偶数行

二、带下拉菜单的水平导航栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>带下拉菜单的水平导航栏</title><style>ul {list-style-type: none;margin: 0px;padding: 0px;background-color: yellowgreen;display: flex;justify-content: center;height: 75px;}li {display: inline;}a {display: block;height: 100%;text-decoration: none;padding: 0 20px;line-height: 75px;font-weight: 600;font-size: large;}a:hover {background-color: aliceblue;color: black;}.bar {position: relative;}.mean {position: absolute;list-style-type: none;margin: 0px;padding: 0px;background-color: skyblue;display: none;width: 120px;z-index: 1;}.mean a {text-align: center;background-color: skyblue;}.bar:hover .mean{display: block;}.mean a:hover {background-color: lightyellow;}</style>
</head>
<body><ul><li><a href="#">关于</a></li><li><a href="#">新闻</a></li><li class="bar"><a href="#">练习</a><ul class="mean"><li><a href="#">css</a></li><li><a href="#">html</a></li><li><a href="#">js</a></li><li><a href="#">vue</a></li></ul></li><li><a href="#">我们</a></li><li><a href="#">合作</a></li></ul>
</body>
</html>

在这里插入图片描述

核心思路：

先使用无序列表实现水平导航栏：

水平导航栏中的元素要想居中，可以先将ul标签设置为弹性盒子模型，在通过justify-content: center;居中即可
将块级标签li改变为行内标签display: inline;
设置a标签为块级标签display: block;，在通过height: 100%从而来撑满标签
最后在设置a标签的:hover中（鼠标聚焦即实现）改变背景颜色和字体颜色

再在要添加下拉菜单的li标签中添加另一个无序列表：

先给指定的li标签设置为相对位置，以便先拉菜单出现在正确位置position: relative;
设置下拉菜单的列表标签ul设置为绝对位置，接收最近已定位的父元素li的相对位置；再将显示关闭display: none;并设置下拉菜单框的宽度；最后确保下拉菜单显示在其他元素之上定义z-index: 1;
mean下的a标签设置为文本居中text-align: center;
设置指定li标签的:hover并改变.mean中的显示状态display: block;
设置在mean的a标签的:hover，改变鼠标聚焦时的背景颜色

三、带悬浮动漫的按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>带悬浮动漫的按钮</title><style>.btn {background-color: skyblue;padding: 15px;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s, transform 0.3s;position: absolute;top: 50px;left: 50px;font-size: large;}.btn:hover {background-color: aqua;transform: scale(1.2);}</style>
</head>
<body><button class="btn">悬浮按钮</button>
</body>
</html>

在这里插入图片描述

核心思路：

直接设置按钮的样式：

设置鼠标光标聚焦按钮变为手指cursor: pointer;
设置变化效果，使用transition属性（用于指定元素在状态变化时的过渡效果）transition: background-color 0.3s, transform 0.3s;，改变背景颜色和大小，时间均为0.3s（transform可以scale(比例)——缩放、translate(x,y)——平移、rotate(度数deg)——旋转，……）
给按钮设置:hover，使得光标聚焦时，设置改变后的背景颜色background-color和transform缩放属性

四、带阴影的卡片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>带阴影的卡片</title><style>.card {box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);padding: 14px 16px;}.card1 {box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.3);padding: 14px 16px;}</style>
</head>
<body><div class="card"><h2>带阴影的卡片</h2><p>这是卡片的内容</p></div><br><br><div class="card1"><h2>内阴影</h2><p>这是卡片的内容</p></div>
</body>
</html>

在这里插入图片描述

核心思路：

直接设置卡片的样式即可：

使用box-shadow属性，box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3)，第一个属性是水平偏移量，第二个属性是垂直偏移量，第三个属性是模糊半径，第四个是阴影颜色rgba(0,0,0,0.3)其中的0.3是透明度
*如果要使用内阴影，即在box-shadow属性前面加inset*即可

五、图片的提示文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片的提示文本</title><style>.img-container {position: relative;display: inline-block;}.img-container img {width: 250px;height: auto;border-radius: 8px;}.tip {position: absolute;background-color: rgba(0, 0, 0, 2);color: white;padding: 10px;border-radius: 5px;opacity: 0;transition: opacity 0.3s ease;font-size: large;/* 禁用鼠标事件 */pointer-events: none;}.img-container:hover .tip{opacity: 1;}</style>
</head>
<body><div class="img-container"><img src="image\pexels-nascimento-vieira-455892312-19295658.jpg" alt="图片加载失败"><div class="tip">这是这个图片的提示文本</div></div>
</body>
</html>

在这里插入图片描述

核心思路：

先设置整个容器：

将父容器的位置改为相对定位postion: relative;，以便后面的提示文本内容位置的接收
再将整个容器设置为行内块级元素，以便后面仅将光标移动到图片位置，而不是整行

再设置提示文本：

先设置提示文本的定位为，绝对定位postion: absolute;
将元素的透明度设置为0，即不可见opacity: 0;
设置平滑的过渡效果，transition: opacity 0.3s ease; 其中ease是一个过渡时间函数，表示过渡会以一种平滑的速度变化，开始和结束时较慢，中间较快
最后禁用鼠标事件pointer-events: none;

最后设置光标聚焦时，提示文本的展示：

设置整个容器的:hover（但在文本位置时不会展示，因为文本位置已经禁用了鼠标事件），此时设置tip标签的opacity: 1透明度设置为1，元素展示

六、折叠面板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>折叠面板</title><style>.accordion {background-color: white;margin: 0 10px;}.accordion-header {background-color: aquamarine;border: none;border-radius: 5px;padding: 10px;cursor: pointer;font-size: large;font-weight: 500;}.accordion-content {padding: 10px 16px;display: none;background-color: aliceblue;border-radius: 5px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}.active .accordion-content {display: block;}</style>
</head>
<body><h2>折叠面板</h2><div class="accordion"><button class="accordion-header">折叠面板</button><div class="accordion-content"><p>这是折叠面板的内容</p></div></div>
</body>
<script>const accord = document.querySelector('.accordion-header');accord.addEventListener('click', function() {const parent = this.parentElement;parent.classList.toggle('active');});
</script>
</html>

在这里插入图片描述

核心思路：

先设置整个容器：

定义div容器，并将背景定义为白色

再设置容器中的按钮：

设置按钮的基本属性，并设置光标聚焦时，改变鼠标样式cursor:pointer;

设置折叠面板的内容：

设置不展示display: none;，也可以设置成带阴影的卡片box-shadow

使用JS的DOM给添加按钮添加事件：

定义一个常量使用类名接收按钮属性const accord = document.querySelector('.accordion-header');
给这个常量添加点击事件监听.addEventListener('click', 函数)，并定义点击后的函数
在这个函数中再定义一个常量来获取该点击元素的父元素const parent = this.parentElement;
给父容器添加.active类（有这个类则删除，没有这个类则添加），parent.classList.toggle('active');

设置事件控制的css样式：

给要展示折叠面板的css加上父容器的前缀.active,如果有则执行这段css，.active .accordion-content {}
在这个css样式里面添加展示display: block;

七、网格布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网格布局</title><style>.grid-container {display: grid;/* grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, 1fr); */grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 10px;padding: 20px;}.grid {display: flex;justify-content: center;background-color: greenyellow;/* width: 200px; */aspect-ratio: 1;color: blueviolet;align-items: center;font-size: large;font-weight: 700;}</style>
</head>
<body><div class="grid-container"><div class="grid">内容1</div><div class="grid">内容2</div><div class="grid">内容3</div><div class="grid">内容4</div><div class="grid">内容5</div><div class="grid">内容6</div><div class="grid">内容7</div><div class="grid">内容8</div></div>
</body>
</html>

在这里插入图片描述

核心思路：

先定义整个容器的样式：

先将整个容器设置为二维布局系统display: grid;
再定义网格容器的列布局grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));使用repeat()函数创建列数，设置为auto-fill表示网格的列数会根据容器的宽度自动填充，使用minmax()函数定义每一列的最小宽度和最大宽度，1fr表示该列将分配容器可用空间的一部分
设置各个网格项行列之间的间距gap: 10px

再定义每个网格项的样式：

先将网格项的布局模式为Flexbox布局display: flex;（可以帮助更好的控制内容再元素内的对齐方式）
在Flexbox布局下，控制子元素的对齐方式，水平居中justify-content: center;
再设置元素的垂直居中align-items: center;（同样也适用于Flexbox布局）
将网格项设置为正方形，使用aspect-ratio: 1;，控制元素的宽高比。
-fill, minmax(200px, 1fr));使用repeat()函数创建列数，设置为auto-fill表示网格的列数会根据容器的宽度自动填充，使用minmax()函数定义每一列的最小宽度和最大宽度，1fr`表示该列将分配容器可用空间的一部分*
设置各个网格项行列之间的间距gap: 10px

再定义每个网格项的样式：

先将网格项的布局模式为Flexbox布局display: flex;（可以帮助更好的控制内容再元素内的对齐方式）
在Flexbox布局下，控制子元素的对齐方式，水平居中justify-content: center;
再设置元素的垂直居中align-items: center;（同样也适用于Flexbox布局）
将网格项设置为正方形，使用aspect-ratio: 1;，控制元素的宽高比。

前端css实例

前端css实例一、带条纹的表格 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>条纹样式的表格<…...

编程日记 2025/5/15 7:58:50

电阻改善信号完整性

1.为什么电路端接电阻能改善信号完整性由于电信号在PCB上传输，因此在PCB设计中可以把PCB走线认为是信号的通道，当该通道的物理结构（线宽，线到参考面的距离等）发生变化，特别是有一些突变时，都会…...

编程日记 2025/5/14 16:17:41

如何选择合适的主键id?

目录标题 MySQL主键一定是自增的吗？自增id、uuid、雪花算法谁更合适？详细聊聊 UUID详细聊聊雪花算法在数据库设计中，选择合适的主键对于数据表的性能和数据完整性都非常重要。接下来，让我们探讨一下自增id、uuid和雪花算法&…...

编程日记 2025/5/15 7:57:39

今天对着《OpenMP核心技术指南》练习OpenMP，其中一个案例: #include <stdio.h> #include <math.h> #include <omp.h>#define ITER 100000000void main() {int i;double A[ITER];for (i 0; i < ITER; i)A[i] 2.0 * i;#pragma omp parallel{/…...

编程日记 2025/5/15 4:23:13

vscode查找函数调用

在 VS Code 中，要查找 C 语言函数的调用列表，有以下几种方法可以使用，具体取决于项目的规模和你的需求： 方法 1: 使用全局查找功能步骤： 打开全局查找： 按 CtrlShiftF (Windows/Linux) 或 CmdShiftF (Ma…...

编程日记 2025/5/15 7:13:42

网络安全-网络安全审计

网络安全审计是为了确保网络系统的安全性和完整性，防范潜在的网络攻击和数据泄露风险。审计步骤： 1.确定审计目标：明确审计的目的和范围，例如审计网络设备、服务器、应用程序或数据库等。 2.收集信息：收集审计范围…...

编程日记 2025/5/14 13:55:45

刷LeetCode hot100--1.哈希表

哈希表--查找一个元素在不在数组/map/set中目前用到的数据结构： std::unordered_set哈希表无序否否O(1)O(1) std::unordered_map哈希表key无序key不可重复key不可修改O(1)O(1) 1. 两数之和 - 力扣（LeetCode） 30min 几个问题 1.原来想…...

编程日记 2025/5/11 21:03:23

鸿蒙生态崛起的机遇有什么

鸿蒙生态系统的崛起为各个领域带来了多个机遇，主要体现在以下几个方面： 智能设备的互联互通：鸿蒙系统旨在实现不同设备之间的无缝连接，为物联网（IoT）设备的发展提供了良好的基础。这将推动智能家居、智慧城…...

编程日记 2025/5/15 7:41:07

写入json和读取json文件

/// <summary> ///写入文件 /// </summary> /// <param name"Stns"></param> /// <returns></returns> public ActionResult WriteJsonFile(string Stns) { strin…...

编程日记 2025/5/15 4:45:37

【Java基础入门篇】前言

Java基础入门篇本系列内容主要针对Java基础知识，总共包含四大部分内容： 变量、数据类型和运算符控制语句和递归算法面向对象和JVM底层分析数组和排序学习需要具备： IDEA编译器 JDK1.8版本写在前面在Java入门的最开始，我们需…...

编程日记 2025/5/10 10:21:36

LangChain——管道提示词缓存

管道提示词管道提示词可以将多个提示组合在一起。当我们想要使用部分提示时，这会很有用。这里可以通过PipelinePrompt来完成。 PipelinePrompt由两部分组成： 最终提示：返回的最终提示；管道提示：元组列表&#xff0c…...

编程日记 2025/5/12 21:02:09

LangGPT社区创始人云中江树：用热爱与坚持点燃实战营课堂

书生大模型实战营第 4 期正在火热进行中，在这里，我们见证了众多同学的成长与进步。今天，让我们一起走进第 4 期导师、结构化提示词 LangGPT 社区创始人云中江树的故事。他的故事不仅是对知识改变命运的生动诠释，更是一段关于热爱与…...

编程日记 2025/5/11 13:18:18

Admin.NET框架使用宝塔面板部署步骤

文章目录 Admin.NET框架使用宝塔面板部署步骤🎁框架介绍部署步骤1.Centos7 部署宝塔面板2.部署Admin.NET后端3.部署前端Web4.访问前端页面 Admin.NET框架使用宝塔面板部署步骤 🎁框架介绍 Admin.NET 是基于 .NET6 (Furion/SqlSugar) 实现的通用权限开发…...

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

18：（标准库）DMA二：DMA+串口收发数据

DMA串口收发数据 1、DMA串口发送数据2、DMA中断串口接收定长数据包3、串口空闲中断DMA接收不定长数据包4、串口空闲中断DMA接收不定长数据包DMA发送数据包 1、DMA串口发送数据当串口的波特率大于115200时，可以通过DMA1进行数据搬运，以防止数据的丢失。如…...

编程日记 2025/5/13 17:36:52

Unity 导出 xcode 工程并给 Info.plist 文件添加字段

Unity 导出 xcode 工程并给 Info.plist 文件添加字段在 Editor 文件夹下新建 xxx.cs 脚本实现静态方法 [PostProcessBuild]public static void OnPostprocessBuild(BuildTarget target, string pathToBuiltProject){// Unity 导出 Xcode 工程自动调用这个方法 }例子一 us…...

编程日记 2025/5/15 0:49:22

打造高质量技术文档的关键要素（结合MATLAB）

在技术的浩瀚海洋中，一份优秀的技术文档宛如精准的航海图。它不仅是知识传承的载体，也是团队协作的桥梁，更是产品成功的幕后英雄。打造出色的技术文档并非易事，以下将从多个方向探讨如何做到这一点。文章目录方向一：…...

编程日记 2025/5/11 18:15:37

C语言-数组

数组的创建数组结构式数组类型数组名称数组大小内容列如 char Arr[3]{1,2,3} int Arr[3]{1,2,3} 注意：在C99之前，【】中需要一个常量才可以数组的初始化初始化就是给它赋值，初始化分为完全初始化和非完全初始化完全初始化…...

编程日记 2025/5/14 8:33:21

hhdb数据库介绍(10-19)

监控智能物理拓扑物理拓扑图主要以服务器为视角展示集群组件与服务器的所属关系，同时可查看服务器资源的使用情况以及各集群组件服务运行状态。使用前需保证为集群服务器配置了可用的SSH连接信息，否则只能查看当前服务器与集群组件的所属关系&#x…...

编程日记 2025/5/4 17:28:57

AI开发：生成式对抗网络入门模型训练和图像生成 -Python 机器学习

阶段1：GAN是个啥？ 生成式对抗网络（Generative Adversarial Networks, GAN），名字听着就有点“对抗”的意思，没错！它其实是两个神经网络互相斗智斗勇的游戏： 生成器（Gene…...

编程日记 2025/5/13 21:45:57

68 mysql 的临键锁

前言我们这里来说的就是我们在 mysql 这边常见的一种锁, 行临键锁虽然在平时我们用到的不是很多, 我们这里主要是讲一下它的主要的触发的场景行临键锁等价于行锁间隙锁, 行间隙锁是一个左开右开的区间, 行临键锁是一个左开右闭的区间但是它和行锁的差异…...

编程日记 2025/5/12 22:37:19

（十一）Python3 接口自动化测试，Pytest-Allure报告的使用

（十一）Python3 接口自动化测试，Pytest-Allure报告的使用 1、安装和使用 1、安装pytest和allure-pytest插件： pip install pytest allure-pytest 2、在你的pytest测试用例中使用allure装饰器或者上下文管理器来生成报告。例如，你可以使用@allure.feature装饰器来标记特性…...

编程日记 2025/5/9 13:14:12

【Rust 学习笔记】Rust 基础数据类型介绍（一）

博主未授权任何人或组织机构转载博主任何原创文章，感谢各位对原创的支持！ 博主链接博客内容主要围绕： 5G/6G协议讲解高级C语言讲解 Rust语言讲解文章目录 Rust 基础数据类型介绍（一）一、固定宽…...

编程日记 2025/5/12 3:18:55

深入理解Oracle DB的锁和闩

1. 引言本文深入介绍Oracle DB的锁和闩。 2. Oracle DB 锁的基本概念 2.1 定义与作用锁是 Oracle 数据库用于控制并发访问的一种机制。它用于防止多个事务同时对同一数据进行不一致的操作，确保数据的完整性和一致性。例如，当一个事务正在更新一行数…...

编程日记 2025/5/10 19:06:25

mcu上一种利用伪随机数防止mac地址冲突的方法

一前言前段时间开发的一个带tcp功能的项目，出现了mac地址冲突的问题，领导让随机生成一个mac地址，因此研究了下随机数。二预研 1.硬随机数硬随机数又叫真随机数，英文名称”true random number generator“,即通过硬件随机数…...

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

C# 索引器（Indexer）

文章目录前言一、索引器的语法规则二、索引器的用途及与属性的对比三、索引器的重载前言在 C# 编程中，索引器（Indexer）是一项极具特色且实用的语言特性，它赋予了对象一种独特的访问方式，使得对象能够如同数组一般&a…...

编程日记 2025/5/13 4:53:19

【大数据学习 | Spark-SQL】定义UDF和DUAF，UDTF函数

1. UDF函数（用户自定义函数） 一般指的是用户自己定义的单行函数。一进一出，函数接受的是一行中的一个或者多个字段值，返回一个值。比如MySQL中的，日期相关的dateDiff函数，字符串相关的substring函数。先…...

编程日记 2025/5/11 5:44:06

Springboot集成通义大模型

1.先到阿里云平台开头阿里云白炼账号，创建apiKey 2. 引入maven依赖 <dependency><groupId>com.alibaba</groupId><artifactId>dashscope-sdk-java</artifactId><version>2.8.3</version></dependency><!-- htt…...

编程日记 2025/5/13 17:37:46

Xilinx PCIe高速接口入门实战（一）

引言：本文对Xilinx 7 Series Intergrated Block for PCI Express PCIe硬核IP进行简要介绍，主要包括7系列FPGA PCIe硬核资源支持、三IP硬核差异、PCIe硬核资源利用等相关内容。 1. 概述 1.1 7系列FPGA PCIe硬件资源支持 7系列FPGA对PCIe接口最大支持如…...

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

区块链游戏的新观察：自治世界能否成为未来链游的突破口？

区块链游戏（链游）作为加密领域的创新方向，一直被寄予厚望。然而，尽管各类链游层出不穷，大多只是靠代币激励一时爆火，缺乏持久吸引力。这种现象让人对链游未来的发展充满疑虑：是否有一种全新的设…...

编程日记 2025/5/11 11:48:11

Linq中的投影运算 (C#)：Select、SelectMany、Zip

投影是指将对象转换为一种新形式的操作，该形式通常只包含那些将随后使用的属性。通过使用投影，您可以构造从每个对象生成的新类型。可以投影属性，并对该属性执行数学函数。还可以在不更改原始对象的情况下投影该对象。 1、Select 下面的…...

编程日记 2025/5/13 9:32:15

GPU 服务器厂家：怎样铸就卓越 AI 算力？

文章来源于百家号：GPU服务器厂家今天咱来聊聊 GPU 服务器厂家那些事儿，而这其中衡量 AI 算力的因素可是关键所在哦。先讲讲计算速度这一块。咱都知道 AI 那复杂的活儿，像训练超厉害的图像识别模型，得处理海量图像数据&#x…...

编程日记 2025/5/12 8:58:19

数据结构与算法——N叉树（自学笔记）

本文参考 N 叉树 - LeetBook - 力扣（LeetCode）全球极客挚爱的技术成长平台遍历前序遍历：A->B->C->E->F->D->G后序遍历：B->E->F->C->G->D->A层序遍历：A->B->C->D->…...

编程日记 2025/5/12 22:07:02

浏览器的数据六种存储方法比较：LocalStorage vs. IndexedDB vs. Cookies vs. OPFS vs. WASM-SQLite

在构建该 Web 应用程序，并且希望将数据存储在用户浏览器中。也许您只需要存储一些小标志，或者甚至需要一个成熟的数据库。我们构建的 Web 应用程序类型发生了显着变化。在网络发展的早期，我们提供静态 html 文件。然后我们提供动态渲染的 h…...

编程日记 2025/5/9 23:46:04

Rust个人认为将抢占C和C++市场，逐渐成为主流的开发语言

本人使用C开发8年、C#开发15年、中间使用JAVA开发过项目、后期在学习过程中发现了Rust语言说它是最安全的语言，能够解决C、C的痛点、于是抽出一部分时间网上买书，看网上资料进行学习，这一学习起来发现和其它语言比较起来，在编码的…...

编程日记 2025/5/10 17:09:44

electron-updater软件自动检测更新 +无服务器本地测试

大家好，我是小黄。今天分享一下如何0基础实现electron自动检测更新功能。一. 安装 electron-updater 实现自动更新安装依赖 electron-updater npm install electron-updater 二. 修改package.josn "publish": {"provider": "generi…...

编程日记 2025/5/13 22:35:16

Flink在Linux系统上的安装与入门

一、Flink的引入这几年大数据的飞速发展，出现了很多热门的开源社区，其中著名的有Hadoop、Storm，以及后来的Spark，他们都有着各自专注的应用场景。Spark 掀开了内存计算的先河，也以内存为赌注，赢得了内存计…...

编程日记 2025/5/6 10:59:26

鸿蒙面试---都用过哪些装饰器

必答的 State装饰器：组件内状态 State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就可以触发其直接绑定UI组件的刷新。当状态改变时，UI会发生对应的渲染改变。Prop装饰器：父子单向同步Prop装饰的变…...

编程日记 2025/5/8 12:20:52

微信小游戏/抖音小游戏SDK接入踩坑记录

文章目录前言问题记录1、用是否存在 wx 这个 API 来判断是微小平台还是抖小平台不生效2、微小支付的参数如何获取？3、iOS 平台不支持虚拟支付怎么办？微小 iOS 端支付时序图：抖小 iOS 端支付：4、展示广告时多次回调 onClose5、在使用单例时 this 引起的 bug6、使用 fetch 或…...

编程日记 2025/5/12 3:21:13

uniapp配置全局消息提醒

1.H5使用根标签插入dom的方式实现。 2.app端使用plus.nativeObj.View的方式绘制实现 H5端app端 H5端创建组件orderAlert.vue <template><div class"view"><div class"content" v-if"visible"><div class"message&q…...

编程日记 2025/5/14 0:06:50

Docker学习

🎉Docker 简介和安装 Docker 是什么 Docker 是一个应用打包、分发、部署的工具你也可以把它理解为一个轻量的虚拟机，它只虚拟你软件需要的运行环境，多余的一点都不要， 而普通虚拟机则是一个完整而庞大的系统，包含各…...

编程日记 2025/5/11 18:15:29

【Electron学习笔记（三）】Electron的主进程和渲染进程

Electron的主进程和渲染进程 Electron的主进程和渲染进程前言正文1、主进程2、渲染进程3、Preload 脚本3.1 在项目目录下创建 preload.js 文件3.2 在 main.js 文件下创建路径变量并将 preload.js 定义为桥梁3.3 在 preload.js 文件下使用 electron 提供的contextBridge 模块3.4…...

编程日记 2025/5/7 21:11:15

人工智能的微积分基础

目录编辑引言微积分的基本概念 1. 导数 2. 积分 3. 微分方程微积分在人工智能中的应用 1. 机器学习中的优化 2. 反向传播算法 3. 概率与统计 4. 控制理论 5. 自然语言处理中的梯度 6. 计算机视觉中的积分 7. 优化算法中的微积分 8. 微分几何在深度学习中的…...

编程日记 2025/5/8 6:01:54

关于BeanUtils.copyProperties是否能正常复制字段【详细版】

话不多说！先总结： 1、字段相同，类型不同（不复制，也不报错） 2、子类父类 (1)子类传给父类（可以正常复制） (2)父类传给子类（可以正常复制） 3、子类父类&#x…...

编程日记 2025/5/12 5:08:22

oracle将select作为字段查询

在Oracle中，如果你想将一个SELECT语句作为字段的值，你可以使用子查询或者使用WITH子句（也称为公用表表达式CTE）。以下是两种方法的示例： 方法1：使用子查询语法如下： SELECTcolumn1,(SELECT …...

编程日记 2025/5/12 3:18:55

FFmpeg 简介与编译

1. ffmpeg 简介： FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec，为了保证高可移…...

编程日记 2025/5/13 4:20:45

qt QLinearGradient详解

1、概述 QLinearGradient是Qt框架中QGradient的一个子类，用于创建线性渐变效果。线性渐变是一种颜色沿着一条直线平滑过渡到另一种颜色的效果。QLinearGradient允许你定义渐变的起点和终点，以及在这些点之间的颜色变化。你可以使用它来为图形、背景、边…...

编程日记 2025/5/10 2:35:54

点击A组件跳转到B页面的tab的某一列

1、使用vuex存储点击的数据； 点击A组件里面的button按钮： <div><button click"banli(first)">已办理</button><button click"banli(second)">未办理</button><button click"banli(third)&quo…...

编程日记 2025/5/10 17:41:59

图像小波去噪与总变分去噪详解与Python实现

目录图像小波去噪与总变分去噪详解与实现1. 基础概念1.1 噪声类型及去噪问题定义1.2 小波去噪算法基础1.3 总变分去噪算法基础2. 小波去噪算法2.1 理论介绍2.2 Python实现及代码详解2.3 案例分析3. 总变分去噪算法3.1 理论介绍3.2 Python实现及代码详解3.3 案例分析4. 两种算法…...

编程日记 2025/5/8 13:49:58

mvn-mac操作小记

1.安装brew 如果报错，Warning: /opt/homebrew/bin is not in your PATH. vim ~/.zshrc，最后一行追加 export PATH“/opt/homebrew/bin:$PATH” source ~/.zshrc 2.安装brew install maven mvn -version查看路径 Maven home: /opt/homebrew/Cellar/mav…...

编程日记 2025/5/13 11:44:46

【娱乐项目】基于批处理脚本与JavaScript渲染视频列表的Web页面

Demo介绍一个简单的视频播放器应用，其中包含了视频列表和一个视频播放区域。用户可以通过点击视频列表中的项来选择并播放相应的视频，播放器会自动播放每个视频并在播放完毕后切换到下一个视频。本项目旨在通过自动化脚本和动态网页渲染，帮助…...

编程日记 2025/5/10 15:32:37

前端css实例

一、带条纹的表格

核心思路：

二、带下拉菜单的水平导航栏

核心思路：

三、带悬浮动漫的按钮

核心思路：

四、带阴影的卡片

核心思路：

五、图片的提示文本

核心思路：

六、折叠面板

核心思路：

七、网格布局

核心思路：

相关文章：