CSS：横向导航栏
横向导航栏（盗版导航栏，B站仿写。）
原视频链接
<html><head><title>demo</title><style>*{margin: 0;padding: 0;list-style: none;text-decoration: none;}body{display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;}.nav{width: 1200px;height: 70px;top: 0;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);border-radius: 10px;position: relative;}.nav ul{width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-around;}.nav ul .nav-box{position: absolute;bottom: 0;left: 0;/* 导航栏个数 */width: calc((100%/6)*1);height: 10px;border-radius: 2px;transition: 0.5s;}.nav ul li a{color: rgb(70,100,180);font-size: 30px;}.nav ul li:nth-child(1):hover~.nav-box{left: calc(100% / 6 * 0);background-color: aqua;}.nav ul li:nth-child(2):hover~.nav-box{left: calc(100% / 6 * 1);background-color: rgb(16, 212, 91);}.nav ul li:nth-child(3):hover~.nav-box{left: calc(100% / 6 * 2);background-color: rgb(92, 11, 221);}.nav ul li:nth-child(4):hover~.nav-box{left: calc(100% / 6 * 3);background-color: rgb(255, 0, 255);}.nav ul li:nth-child(5):hover~.nav-box{left: calc(100% / 6 * 4);background-color: rgb(255, 0, 13);}.nav ul li:nth-child(6):hover~.nav-box{left: calc(100% / 6 * 5);background-color: rgb(255, 208, 0);}</style></head><body><div class="nav"><ul><li><a href="#">HTML</a></li><li><a href="#">CSS</a></li><li><a href="#">JS</a></li><li><a href="#">Jquery</a></li><li><a href="#">VUE</a></li><li><a href="#">PHP</a></li><div class="nav-box"></div></ul></div></body>
</html>
相关文章：
CSS：横向导航栏
横向导航栏（盗版导航栏，B站仿写。） 原视频链接 <html><head><title>demo</title><style>*{margin: 0;padding: 0;list-style: none;text-decoration: none;}body{display: flex;justify-content: center;a…...
视频动态库测试及心得
视频动态库测试及心得 这几天一直在弄动态库测试，h给的写好的动态库--预处理模块的库。视频处理项目一部分，需要连接实际情况测试。 需求： 1.把实际相机连接到，并读取实时数据流，保存到双循环链表里面; 2.测试背景建模…...
陶泓达：4.18午间欧盘黄金原油最新精准操作建议！
黄金方面： 黄金消息面解析：周一（4月17日）美市盘中，美国公布的4月纽约联储制造业指数和4月NAHB房产市场指数均超出预期，提振了美联储在5月继续加息的预期。数据公布之后，美元指数加速上扬&#x…...
环境变量相关知识
目录 目录 谢谢你的阅读，这是对我最大的鼓舞 先说结论： 开始论述： 让我们举个例子 相关指令 创建本地变量 创建环境变量 方法一： 方法二： 删除环境变量 子进程中也有环境变量 第一种： 第二种 …...
如何快速入门ChatGPT
作为一个AI模型，ChatGPT并不需要像人一样“学习”，它已经通过大量的训练数据和算法进行了预训练，可以回答广泛的问题。 然而，如果你想学习如何使用ChatGPT来进行对话或者问答，以下是一些建议： 一、了解Ch…...
方法)
Akka定时任务schedule()方法
Akka定时任务schedule()方法 文章目录Akka定时任务schedule()方法什么是Akka定时任务schedule()方法？如何使用Akka定时任务schedule()方法？如何在actor外部获取Scheduler对象为什么需要提供一个隐式的ExecutionContext对象，用于执行定时任务&…...
Python实现处理和分析大规模文本数据集，包括数据清洗、标注和预处理
处理和分析大规模文本数据集，包括数据清洗、标注和预处理，是自然语言处理（NLP）中非常重要的一步。Python 是一种非常流行的编程语言，拥有丰富的 NLP 库和工具，可以帮助我们完成这些任务。以下是一个简单的实现示例，包括数据清洗、标注和预处理： import re import nltk…...
灌区量测水系统
1)灌区量测水 灌区量测水是水资源管理的基础，是推进节水农业和水价改革的重要手段。常规在主要水闸处，监测闸前和闸后水位及闸门开启状态(闸位)，通过实时监测数据，计算过闸流量。要实现全灌区水资源动态配置、精准灌溉࿰…...
3.3 泰勒公式
学习目标： 复习微积分基础知识。泰勒公式是微积分的一个重要应用，因此在学习泰勒公式之前，需要复习微积分的基本概念和技能，包括函数的导数和微分、极限、定积分等。可以参考MIT的微积分课程进行复习和加强。 学习泰勒级数和泰勒…...
ubuntu中通过vscode编译调试ORB-SLAM3
为了在orb-slam3的基础上进行二次开发，这几天花了不少精力，终于搞懂怎么在ubuntu系统中像windows里visual studio中一样方便的打断点调试了，在这里把整个过程再重新梳理一下。 1 首先从安装ubuntu 22.04开始 因为是从实验室毕业先辈那里继承…...
阿里版 ChatGPT 突然上线!
转自:纯洁的微笑 其实早本月初，就传出过不少阿里要推出类ChatGPT的消息。 前几天率先流出的天猫精灵“鸟鸟分鸟”脱口秀版GPT，就是基于大模型的“压缩版”，已经以其惊艳表现吸引了众目光。 如今“原版大菜”上桌，自然一点即着&a…...
《Kubernetes部署篇：Ubuntu20.04基于containerd部署kubernetes1.24.12单master集群》
一、架构图 如下图所示： 二、环境信息 主机名K8S版本系统版本内核版本IP地址备注k8s-master-621.24.12Ubuntu 20.04.5 LTS5.15.0-69-generic192.168.1.62master节点k8s-worker-631.24.12Ubuntu 20.04.5 LTS5.15.0-69-generic192.168.1.63worker节点k8s-worker-641…...
MAZDA CX-50没现车怎么办？赶紧去VR看车啊！
爱车一族往往都有过这样的经历：听说某家品牌出了一款心仪的新车，于是一直心心念念想要先睹为快。然而这时候问题就来了：新车从发布到量产上市往往要经历一段过程。没有现车的日子里，就算每天去4S店蹲守也看不到新车。那种心里痒痒…...
结构体全解，适合初学者的一条龙深度讲解（附手绘图详解）
我们知道，C语言是允许我们自己来创造类型的，这些类型就叫做——自定义类型。 自定义类型又包括结构体类型，联合体类型还有枚举类型。 今天的文章，我们就着重讲解这其中的结构体类型。 目录 结构体的声明 1.1结构的基础知识 …...
什么是SD-WAN技术？企业网络优化的利器！
现今，企业网络架构已成为其发展不可或缺的组成部分。针对网络性能优化方面，SD-WAN是一种值得深思熟虑的选择，在企业网络中应用SD-WAN技术能够带来多重好处。 什么是SD-WAN技术以及它是如何工作的？ SD-WAN是软件定义的广域网&…...
JAVA练习106- 生命游戏
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 目录 前言 一、题目-生命游戏 1.题目描述 2.思路与代码 2.1 思路 2.2 代码 总结 前言 提示：这里可以添加本文要记录的大概内容： 4 月12日练习…...
【案例教程】基于R语言、MaxEnt模型融合技术的物种分布模拟、参数优化方法、结果分析制图与论文写作实践技术
【原文链接】: 基于R语言、MaxEnt模型融合技术的物种分布模拟、参数优化方法、结果分析制图与论文写作实践技术https://mp.weixin.qq.com/s?__bizMzU5NTkyMzcxNw&mid2247537049&idx3&sn31ef342c4808aed6fee6ac108b899a33&chksmfe6897f3c91f1ee5c4fa8e4eeea34…...
php7类型约束，严格模式
在PHP7之前，函数和类方法不需要声明变量类型 ，任何数据都可以被传递和返回，导致几乎大部分的调用操作都要判断返回的数据类型是否合格。 为了解决这个问题，PHP7引入了类型声明。 目前有两类变量可以声明类型： 形参&a…...
2023-04-11 无向图的匹配问题
无向图的匹配问题 之所以把无向图的这个匹配问题放到最后讲是因为匹配问题借鉴了有向图中一些算法的思想 1 最大匹配和完美匹配 二分图回顾 二分图：把一个图中的所有顶点分成两部分，如果每条边的两端分别属于不同部分，则这个图是二分图。更多…...
国家出手管人工智能AI了
我是卢松松，点点上面的头像，欢迎关注我哦！ 全球都在封杀AI，国家也出手了，人工智能AI的强监管来了!这次反应速度算是很快了。国家出手，AI必须管。 国家网信办拟针对生成式人工智能服务出台管理办法&#…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...
代码规范和架构【立芯理论一】（2025.06.08）
1、代码规范的目标 代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库，提供了高效、安全的文本格式化功能，是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全：…...
DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天，深度学习与大模型技术已成为推动行业变革的核心驱动力，而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心，系统性地呈现了两部深度技术著作的精华：…...