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

CSS 美化页面（五）

news 来源：原创 2025/8/17 23:03:41

一、position属性

属性值‌	‌描述‌	‌应用场景‌
`static`	默认定位方式，元素遵循文档流正常排列，`top`/`right`/`bottom`/`left` 属性无效‌。	普通文档流布局，默认布局，无需特殊定位。
`relative`	相对定位，相对于元素原本位置进行偏移，但仍保留原空间‌。	微调元素位置，或作为子元素绝对定位的基准（父元素设为 `relative`）‌。
`absolute`	绝对定位，相对于最近的非 `static` 祖先元素定位，脱离文档流‌。	创建浮动菜单、对话框，或重构页面布局（需配合父级 `relative` 使用）‌。
`fixed`	固定定位，相对于视口定位，不随页面滚动改变位置‌。	固定导航栏、回到顶部按钮等需要始终可见的元素‌。
`sticky`	粘性定位，在特定滚动阈值前表现为 `relative`，超过后变为 `fixed`‌。	实现滚动时固定表头、侧边导航栏等效果‌。

二、定位的应用

1、static 默认定位

<!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>/* 父容器样式 */.container {width: 300px;height: auto;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;padding: 10px; /* 内边距 */}/* 第一个盒子：默认定位 */.box1 {width: 100px;height: 100px;background-color: #4CAF50; /* 绿色背景 */margin-bottom: 10px; /* 下方间距 */}/* 第二个盒子：默认定位 */.box2 {width: 100px;height: 100px;background-color: #FF5722; /* 橙色背景 */margin-bottom: 10px; /* 下方间距 */}/* 第三个盒子：默认定位 */.box3 {width: 100px;height: 100px;background-color: #2196F3; /* 蓝色背景 */}</style>
</head>
<body><div class="container"><div class="box1">默认定位1</div><div class="box2">默认定位2</div><div class="box3">默认定位3</div></div>
</body>
</html>

排列方式：

三个盒子按照正常的文档流从上到下排列。
每个盒子之间有一定的间距（通过 margin-bottom 设置）。

布局特点：

没有使用任何定位属性，盒子不会发生重叠，也不会偏移。

2、relative相对定位

<!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>/* 父容器样式 */.container {position: relative; /* 父容器设置为相对定位 */width: 300px;height: auto;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;padding: 10px; /* 内边距 */}/* 第一个盒子：相对定位 */.box1 {position: relative;width: 100px;height: 100px;background-color: #4CAF50; /* 绿色背景 */top: 10px; /* 向下偏移 10px */left: 10px; /* 向右偏移 10px */}/* 第二个盒子：相对定位 */.box2 {position: relative;width: 100px;height: 100px;background-color: #FF5722; /* 橙色背景 */top: 20px; /* 向下偏移 20px */left: 20px; /* 向右偏移 20px */}/* 第三个盒子：相对定位 */.box3 {position: relative;width: 100px;height: 100px;background-color: #2196F3; /* 蓝色背景 */top: 30px; /* 向下偏移 30px */left: 30px; /* 向右偏移 30px */}</style>
</head>
<body><div class="container"><div class="box1">相对定位1</div><div class="box2">相对定位2</div><div class="box3">相对定位3</div></div>
</body>
</html>

第一个盒子（绿色）：
相对于自身默认位置向下偏移 10px，向右偏移 10px。

第二个盒子（橙色）：
相对于自身默认位置向下偏移 20px，向右偏移 20px。

第三个盒子（蓝色）：
相对于自身默认位置向下偏移 30px，向右偏移 30px。

注意事项

相对定位的特点：

元素仍然保留在文档流中，偏移后不会影响其他元素的布局。
偏移的效果仅影响元素的视觉位置。

重叠问题：

如果偏移量较大，可能会导致元素之间发生重叠。

3、absolute绝对定位

<!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>/* 父容器样式 */.container {position: relative; /* 父容器设置为相对定位，作为子元素的定位参考点 */width: 300px;height: 300px;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;}/* 第一个盒子：绝对定位 */.box1 {position: absolute;width: 100px;height: 100px;background-color: #4CAF50; /* 绿色背景 */top: 10px; /* 距离父容器顶部 10px */left: 10px; /* 距离父容器左侧 10px */}/* 第二个盒子：绝对定位 */.box2 {position: absolute;width: 100px;height: 100px;background-color: #FF5722; /* 橙色背景 */top: 50px; /* 距离父容器顶部 50px */right: 10px; /* 距离父容器右侧 10px */}/* 第三个盒子：绝对定位 */.box3 {position: absolute;width: 100px;height: 100px;background-color: #2196F3; /* 蓝色背景 */bottom: 10px; /* 距离父容器底部 10px */left: 50px; /* 距离父容器左侧 50px */}</style>
</head>
<body><div class="container"><div class="box1">绝对定位1</div><div class="box2">绝对定位2</div><div class="box3">绝对定位3</div></div>
</body>
</html>

第一个盒子（绿色）：
位于父容器的左上角，距离顶部 10px，左侧 10px。

第二个盒子（橙色）：
位于父容器的右上角，距离顶部 50px，右侧 10px。

第三个盒子（蓝色）：
位于父容器的左下角，距离底部 10px，左侧 50px。

注意事项

定位参考点：

绝对定位的元素会相对于最近的定位祖先（position: relative、absolute 或 fixed 的父级元素）进行定位。
如果没有定位祖先，则相对于 html（视口）进行定位。

脱离文档流：
绝对定位的元素不会占据文档流中的空间，因此可能会与其他元素重叠。

灵活布局：
绝对定位适合用于弹窗、工具提示、精确布局等场景。

4、fix固定定位

<!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>/* 父容器样式 */.container {width: 300px;height: 300px;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;text-align: center;}/* 第一个盒子：固定定位 */.box1 {position: fixed;width: 100px;height: 100px;background-color: #4CAF50; /* 绿色背景 */top: 10px; /* 距离视口顶部 10px */left: 10px; /* 距离视口左侧 10px */}/* 第二个盒子：固定定位 */.box2 {position: fixed;width: 100px;height: 100px;background-color: #FF5722; /* 橙色背景 */top: 10px; /* 距离视口顶部 10px */right: 10px; /* 距离视口右侧 10px */}/* 第三个盒子：固定定位 */.box3 {position: fixed;width: 100px;height: 100px;background-color: #2196F3; /* 蓝色背景 */bottom: 10px; /* 距离视口底部 10px */left: 10px; /* 距离视口左侧 10px */}</style>
</head>
<body><div class="container"><p>滚动页面，观察固定定位效果。</p></div><div class="box1">固定定位</div><div class="box2">固定定位</div><div class="box3">固定定位</div>
</body>
</html>

第一个盒子（绿色）：
固定在视口的左上角，距离顶部 10px，左侧 10px。

第二个盒子（橙色）：
固定在视口的右上角，距离顶部 10px，右侧 10px。

第三个盒子（蓝色）：
固定在视口的左下角，距离底部 10px，左侧 10px。

注意事项

固定定位的特点：

元素相对于视口定位，不受父容器的影响。
页面滚动时，固定定位的元素始终保持在指定位置。

适用场景：

固定导航栏。
返回顶部按钮。
固定广告或提示框。

重叠问题：

如果多个固定定位的元素位置重叠，可以通过 z-index 属性控制它们的层级。

5、sticky粘性定位

<!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>/* 父容器样式 */.container {width: 300px;height: auto;background-color: #f0f8ff; /* 浅蓝色背景 */border: 2px solid #ddd;margin: 20px auto;padding: 10px; /* 内边距 */}/* 通用盒子样式 */.box {width: 100%;height: 100px;background-color: #4CAF50; /* 默认绿色背景 */margin-bottom: 20px; /* 下方间距 */text-align: center;line-height: 100px; /* 垂直居中 */color: #fff;font-size: 16px;}/* 第一个盒子：粘性定位 */.box1 {position: sticky;top: 0; /* 滚动到视口顶部时固定 */background-color: #4CAF50; /* 绿色背景 */}/* 第二个盒子：粘性定位 */.box2 {position: sticky;top: 50px; /* 滚动到距离视口顶部 50px 时固定 */background-color: #FF5722; /* 橙色背景 */}/* 第三个盒子：粘性定位 */.box3 {position: sticky;top: 100px; /* 滚动到距离视口顶部 100px 时固定 */background-color: #2196F3; /* 蓝色背景 */}</style>
</head>
<body><div class="container"><div class="box box1">粘性定位 - Box 1</div><div class="box box2">粘性定位 - Box 2</div><div class="box box3">粘性定位 - Box 3</div><p>滚动页面，观察粘性定位效果。</p><p style="height: 1000px;">这是一个长内容区域，用于测试粘性定位。</p></div>
</body>
</html>

第一个盒子（绿色）：
滚动到视口顶部时固定，直到父容器的内容滚动结束。

第二个盒子（橙色）：
滚动到距离视口顶部 50px 时固定，直到父容器的内容滚动结束。

第三个盒子（蓝色）：
滚动到距离视口顶部 100px 时固定，直到父容器的内容滚动结束。

注意事项

粘性定位的特点：

position: sticky; 是相对定位和固定定位的结合。
元素在滚动到指定位置时变为固定定位，但超出父容器范围后恢复正常流。

父容器的限制：

粘性定位的元素必须在一个有滚动内容的父容器中才能生效。
如果父容器没有足够的高度，粘性定位可能无法触发。

浏览器支持：

position: sticky; 在现代浏览器中支持良好，但在旧版 IE 中不支持。

三、综合应用

1、数字定位在图片上

<!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>/* 容器样式 */.image-container {position: relative; /* 设置父容器为相对定位 */width: 600px;height: 300px;margin: 20px auto;border:5px solid #69b8ec; /* 边框 */}/* 图片样式 */.image-container img {width: 100%;height: 100%;display: block;}/* 数字容器样式 */.number-container {position: absolute; /* 绝对定位 */bottom: 10px; /* 距离图片底部 10px */left: 50%; /* 水平居中 */transform: translateX(-50%); /* 水平居中对齐 */display: flex; /* 使用 flexbox 布局 */gap: 10px; /* 数字之间的间距 */}/* 数字样式 */.number {color: #fff; /* 白色字体 */font-size: 18px; /* 字体大小 */font-weight: bold; /* 加粗字体 */background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */border-radius: 50%; /* 圆形背景 */width: 30px;height: 30px;line-height: 30px; /* 垂直居中 */text-align: center; /* 水平居中 */text-decoration: none; /* 去掉超链接下划线 */}/* 数字悬停效果 */.number:hover {background-color: rgba(209, 231, 166, 0.8); /* 背景变为白色 */color: #000; /* 字体变为黑色 */}</style>
</head>
<body><div class="image-container"><img src="https://imgs.699pic.com/images/500/363/911.jpg!seo.v1" alt="图片"><div class="number-container"><a href="#link1" class="number">1</a><a href="#link2" class="number">2</a><a href="#link3" class="number">3</a><a href="#link4" class="number">4</a><a href="#link5" class="number">5</a></div></div>
</body>
</html>

2、窗口两侧固定广告

<!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>/* 左侧广告样式 */.ad-left {position: fixed; /* 固定定位 */top: 50%; /* 垂直居中 */left: 0; /* 靠左 */transform: translateY(-50%); /* 垂直居中对齐 */width: 120px; /* 广告宽度 */height: 300px; /* 广告高度 */background-color: #4CAF50; /* 绿色背景 */color: #fff; /* 白色文字 */text-align: center; /* 水平居中 */line-height: 300px; /* 垂直居中 */font-size: 16px; /* 字体大小 */box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */}/* 右侧广告样式 */.ad-right {position: fixed; /* 固定定位 */top: 50%; /* 垂直居中 */right: 0; /* 靠右 */transform: translateY(-50%); /* 垂直居中对齐 */width: 120px; /* 广告宽度 */height: 300px; /* 广告高度 */background-color: #FF5722; /* 橙色背景 */color: #fff; /* 白色文字 */text-align: center; /* 水平居中 */line-height: 300px; /* 垂直居中 */font-size: 16px; /* 字体大小 */box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */}/* 页面内容样式 */.content {width: 80%;margin: 50px auto;font-size: 18px;line-height: 1.6;text-align: justify;}</style>
</head>
<body><!-- 左侧广告 --><div class="ad-left">左侧广告</div><!-- 右侧广告 --><div class="ad-right">右侧广告</div><!-- 页面内容 --><div class="content"><h1>content内容</h1><p>这是一个页面，展示如何在窗口的左右两边添加固定广告。无论页面如何滚动，广告始终保持在视口的两侧。</p><p>通过使用 CSS 的固定定位（`position: fixed`），可以轻松实现这种效果。固定定位的元素相对于视口进行定位，不会随页面滚动而移动。</p><p>这种布局常用于广告、导航栏或其他需要始终可见的元素。</p><p style="height: 2000px;">滚动页面，观察广告始终固定在窗口两侧的效果。</p></div>
</body>
</html>

左侧广告始终固定在视口的左侧，垂直居中。
右侧广告始终固定在视口的右侧，垂直居中。
页面滚动时，广告不会移动，始终保持在窗口两侧。

四、总结

相对定位：一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量。

绝对定位：一般用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景。

固定定位：一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

CSS 美化页面（五）

一、position属性属性值‌‌描述‌‌应用场景‌static默认定位方式，元素遵循文档流正常排列，top/right/bottom/left 属性无效‌。普通文档流布局，默认布局，无需特殊定位。relative相对定位，相对于元素原本位置进行偏…...

编程日记 2025/8/17 23:03:41

互联网大厂Java面试：微服务与分布式系统挑战

互联网大厂Java面试：微服务与分布式系统挑战在互联网的大潮中，无数程序员怀揣着梦想，希望能在一线大厂找到自己的位置。今天的故事主角是马飞机，一位充满幽默感但技术略显水货的程序员。他来到了一家知名互联网公司参加Java开发…...

编程日记 2025/8/16 1:17:06

数据结构——顺序表(C语言实现)

1.顺序表的概述 1.1 顺序表的概念及结构在了解顺序表之前，我们要先知道线性表的概念，线性表，顾名思义，就是一个线性的且具有n个相同类型的数据元素的有限序列，常见的线性表有顺序表、链表、栈、队列、字符串等等。线…...

编程日记 2025/8/15 14:28:24

FastGPT安装前，系统环境准备工作？

1.启用适用于 Linux 的 Windows 子系统方法一：打开控制面板 -> 程序 -> 启用或关闭Windows功能->勾选 “适用于Linux的Vindows子系统” 方法二：以管理员身份打开 PowerShell（“开始”菜单 >“PowerShell” >单击右键 >“…...

编程日记 2025/8/17 21:41:57

【2】CICD持续集成-k8s集群中安装Jenkins

一、背景： Jenkins是一款开源 CI&CD 系统，用于自动化各种任务，包括构建、测试和部署。 Jenkins官方提供了镜像：https://hub.docker.com/r/jenkins/jenkins 使用Deployment来部署这个镜像，会暴露两个端口&#xff…...

编程日记 2025/8/7 13:34:26

相比其他缓存/内存数据库（如 Memcached, Ehcache 等），Redis 在微服务环境中的优势和劣势是什么？

我们来比较一下 Redis 与 Memcached、Hazelcast、Ehcache 等在微服务环境下的优势和劣势。 Redis 的优势 : 丰富的数据结构 (Rich Data Structures): 优势: 这是 Redis 最显著的优势之一。除了简单的 Key-Value (字符串) 外，Redis 还原生支持 Lists, Sets, Sorted …...

编程日记 2025/8/16 0:41:01

Day53 二叉树的层序遍历

给你二叉树的根节点 root ，返回其节点值的层序遍历。 （即逐层地，从左到右访问所有节点）。 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* T…...

编程日记 2025/8/13 3:48:08

mac上安装VMWare Fusion安装ubuntu系统问题

mac不能复制粘贴到虚拟机的ubuntu系统里，没有下载vmtools 在ubuntu系统执行命令 sudo apt update sudo apt install open-vm-tools open-vm-tools-desktop -y ubuntu 下载地址 https://cdimage.ubuntu.com/ubuntu/releases/20.04/release/...

编程日记 2025/8/16 1:15:36

JAVA Web_定义Servlet_处理POST请求【练习】

题目有一个登录页面（login.html），其登录表单的HTML代码如下： </form action"doLogin" method "post"> 用户名：<input type"text" name"userName"><br>…...

编程日记 2025/8/17 21:42:13

FreeRTOS任务通知

一、什么是任务通知 FreeRTOS从版本V8.2.0开始提供通知这个功能，每个任务都有一个32位的通知值。按照官方说法，使用消息通知比通过二进制信号量方式解除阻塞任务快45%，且更加省内存（无需创建队列）。 （也就…...

编程日记 2025/7/27 5:36:19

NO.97十六届蓝桥杯备战|数论板块-最大公约数和最小公倍数|欧几里得算法|秦九韶算法|小红的gcd(C++)

约数和倍数如果a 除以b 没有余数，那么a 就是b 的倍数，b 就是a 的约数，记作b ∣ a 。约数，也称因数。最⼤公约数和最⼩公倍数最⼤公约数Greatest Common Divisor，常缩写为gcd。⼀组整数的公约数，是…...

编程日记 2025/8/17 21:42:05

ESP32之本地HTTP服务器OTA固件升级流程，基于VSCode环境下的ESP-IDF开发（附源码）

背景知识： 本实验利用编译链内Python内置的 HTTP 服务器，将升级包通过http发送给设备，实现OTA固件升级。目录背景知识： 1.创建工程 1.1 创建OTA基础工程 3.编写、修改代码 3.1 修改menuconfig配置文件 3.1.1 配置WiFi账…...

编程日记 2025/8/17 23:02:14

Jenkins的使用及Pipeline语法讲解

Jenkins简介 Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件项目可以进行持续集成。什么是持续集成（CI）？ CI(…...

编程日记 2025/8/12 23:28:17

【MySQL】初识数据库

目录一.什么是数据库二.数据库和数据结构的关系三. 数据库服务器、数据库与表之间的关系四.关系型数据库五. SQL介绍 SQL分类六.MySQL架构（面试重点） 七. 库的基本操作 1.查看数据库 2.创建数据库字符集编码和校验（排序&…...

编程日记 2025/8/12 1:36:02

Android tinyalsa库函数剖析

1. PCM 流控制函数打开、关闭及状态检查 pcm_open(unsigned int card, unsigned int device, unsigned int flags, struct pcm_config *config) 打开指定声卡（card）和设备（device）的 PCM 流。 flags 参数确定流的方向&#xff1…...

编程日记 2025/8/9 22:49:11

DFS/BFS专练-搞定图论基础！（从海岛问题过渡至图论基础应用C++/C)

:: 图论基础理论 :: 紧接着，图论基础理论中，咱们讲到，图论的遍历主要由（dfs与bfs决定） 那咱们本篇博客就来聊聊dfs与bfs。 dfs（深度优先搜索）、bfs（广度优先搜索）的区别…...

编程日记 2025/8/17 23:02:16

2024年RIS SCI2区：自适应天鹰算法AAO，深度解析+性能实测

目录 1.摘要2.天鹰算法AO原理3.改进策略4.结果展示5.参考文献6.代码获取 1.摘要智能电网通过集成可再生能源并管理供需动态平衡来提高效率，本文提出了自适应天鹰算法（AAO），AAO使用Sigmoid因子来平衡探索和开发，根据迭…...

编程日记 2025/8/17 23:02:51

orcad csi 17.4 DRC规则设置及检查

rCAD绘制完原理图之后总是需要开启DRC检测，但是DRC一般都是英文版的，下面基于Cadence17.4 的orCAD16.6 对DRC的界面做简单的介绍首先，鼠标点击原理图，然后再点击右上方的小勾图标 desine rules check option选项的界面电气规…...

编程日记 2025/8/17 18:16:36

前端实战：基于 Vue 与 QRCode 库实现动态二维码合成与下载功能

在现代 Web 应用开发中，二维码的应用越来越广泛，从电子票务到信息传递，它都扮演着重要角色。本文将分享如何在 Vue 项目中，结合QRCode库实现动态二维码的生成、与背景图合成以及图片下载功能，打造一个完整且实用的二维…...

编程日记 2025/8/17 23:01:16

天梯赛DFS合集

1.DFS特殊输入：PTA | 程序设计类实验辅助教学平台这题其他还是蛮容易，直接用递归即可，问题在于怎么输入，其实可以在递归到底层时输入即可，也就是边递归边输入，另外提一嘴跟这个题没什么关系的点&#xff…...

编程日记 2025/8/17 23:02:50

Qt中读写结构体字节数据

在Qt中读写结构体字节数据通常涉及将结构体转换为字节数组(QByteArray)或直接从内存中读写。以下是几种常见方法： 方法1：使用QDataStream读写结构体 cpp #include <QFile> #include <QDataStream>// 定义结构体 #pragma pack(push, 1) //…...

编程日记 2025/8/17 20:21:24

关于yarn和hadoop

1.yarn的定义？ YARN（Yet Another Resource Negotiator）是 Apache Hadoop 的一个关键组件，它是一个资源管理平台，负责管理和调度计算资源。YARN 允许多个数据处理引擎（如 MapReduce、Spark、Flink 等&#…...

编程日记 2025/8/15 1:25:25

【全部更新】2025妈妈杯D题1-4问mathercupD题数学建模挑战赛D题数学建模思路代码文章教学短途运输货量预测及车辆调度问题

完整内容请看文章最下面的推广群先进行摘要和结果的展示、再给出完整的思路问题1：通过时间序列或机器学习模型预测货量，并按历史分布拆分到10分钟颗粒度。问题2：基于货量生成运输需求，用贪心算法或整数规划优化车辆调度。问…...

编程日记 2025/8/17 0:30:10

考研408第一章计算机系统概述——1.1-1.2操作系统的基本概念与发展历程

考研408计算机系统概述——操作系统的基本概念与发展历程一、操作系统的基本概念 1.1 操作系统的定义与功能 1.1.1 定义操作系统（Operating System, OS）是管理计算机硬件与软件资源的程序集合，为应用程序和用户提供接口与服务。其核心功能包括：资源管理者：处理机、…...

编程日记 2025/8/17 7:38:51

《从理论到实践：CRC校验的魔法之旅》

循环冗余校验（Cyclic Redundancy Check ,CRC ）是一种用于检测数据传输或存储过程中错误的算法。他通过计算数据的校验值（也称为CRC码），并在数据接收端验证校验值是饭否正确，从而检测数据是否在传输过程中被…...

编程日记 2025/8/17 21:40:34

【算法笔记】整除与最大公约数（GCD）专题整理

参考文章链接（已获得作者授权） 一、整除：数学中的"完美分割" 定义若整数 a a a能整除整数 b b b（记作 a ∣ b a\mid b a∣b），则存在整数 k k k使得 b a ⋅ k ba\cdot k ba⋅k。通俗理解&…...

编程日记 2025/8/17 21:40:54

JDBC 与 MyBatis 详解：从基础到实践

目录一、JDBC 介绍二、使用 JDBC 查询用户信息三、ResultSet 结果集四、预编译 SQL - SQL 注入问题五、预编译 SQL - 性能更高六、JDBC 增删改操作插入数据： 更新数据： 删除数据： 七、MyBatis 介绍八、MyBatis 入门程序引…...

编程日记 2025/8/17 21:26:53

虚拟机开发环境搭建与内网迁移

以下是关于在虚拟机中搭建开发环境并迁移至内网的详细步骤及注意事项，适用于需要在内网隔离环境中进行开发的场景（如企业安全要求、离线开发等）： ‌一、虚拟机开发环境搭建‌ ‌1. 选择虚拟机平台‌ ‌推荐工具‌： ‌V…...

编程日记 2025/8/17 21:08:22

【HFP】蓝牙HFP协议音频连接核心技术深度解析

目录一、音频连接建立的总体要求 1.1 发起主体与时机 1.2 前提条件 1.3 同步连接的建立 1.4 通知机制二、不同主体发起的音频连接建立流程 2.1 连接建立触发矩阵 2.2 AG 发起的音频连接建立 2.3 HF 发起的音频连接建立三、编解码器连接建立流程 3.1 发起条件 3.…...

编程日记 2025/8/17 18:16:37

PowerBI 表格显示无关联的表数据

假设有两张没有建立关联的数据表: 产品表库存表我们将他们放入表格里显示，数据会出问题。因为 [库存表] 里的数据有除 [产品表] 以外的产品的数据，所以PBI无法从两张表中找到一一对应的数据。解决方法:(不建立关联关系的情况下) 新建一个度量值&a…...

编程日记 2025/8/17 0:31:25

观察者模式详解与C++实现

1. 模式定义观察者模式（Observer Pattern）是一种行为型设计模式，定义了对象间的一对多依赖关系。当一个对象（被观察者/主题）状态改变时，所有依赖它的对象（观察者）都会自动收到通知…...

编程日记 2025/8/17 6:59:04

用ffmpeg 实现拉取h265的flv视频转存成264的mp4 实现方案

1.需要对ffmpeg进行源码修改这里使用 https://github.com/numberwolf/FFmpeg-QuQi-H265-FLV-RTMP 这位大神提供的源码需要 x265_3.2.1.tar.gz last_x264.tar.bz2 fdk-aac-2.0.1.tar.gz FFmpeg-QuQi-H265-FLV-RTMP-master.zip 这些包升级ubuntu18.04 apt update a…...

编程日记 2025/8/17 18:16:42

《AI赋能职场：大模型高效应用课》第8课 AI辅助职场沟通与协作

【本课目标】掌握AI辅助邮件、沟通话术的优化技巧。学习利用AI快速生成高效的会议纪要。通过实操演练，提升职场沟通效率与协作能力。【准备工具】 DeepSeek大模型（deepseek.com）百度文心一言（yiyan.baidu.com） 一…...

编程日记 2025/8/17 20:54:09

PowerBI下载安装教程

1、打开官方下载链接，或者Microsoft store里搜索下载（通过官网下载可以选择安装路径，应用商店直接会安装到默认路径里）。 2、等待下载成功后，直接点击【打开】即可。...

编程日记 2025/8/17 20:53:23

PowerBI如何钻取到明细

PowerBI如何钻取到明细最近做项目领导提到一需求，在查看账龄的时候，还想查看到它的一个明细情况。 PowerBI如何钻取到明细，以一个案例分享下： 第一步：我们先查看账龄的一个分布情况： 第二步：…...

编程日记 2025/8/17 21:40:58

常见算法题

import java.util.*;class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(int val, TreeNode left, TreeNode right) {this.val val;this.left left;this.right right;} }public class test_04_16 {//获取二叉…...

编程日记 2025/8/14 9:52:06

一、position属性

二、定位的应用

注意事项

注意事项

注意事项

注意事项

三、综合应用

1、数字定位在图片上

四、总结

相关文章：