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

CSS：横向导航栏

news 2026/3/27 16:14:38

横向导航栏（盗版导航栏，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：横向导航栏

横向导航栏&#xff08;盗版导航栏&#xff0c;B站仿写。&#xff09; 原视频链接 <html><head><title>demo</title><style>*{margin: 0;padding: 0;list-style: none;text-decoration: none;}body{display: flex;justify-content: center;a…...

编程日记 2023/5/30 6:38:23

视频动态库测试及心得

视频动态库测试及心得 这几天一直在弄动态库测试&#xff0c;h给的写好的动态库--预处理模块的库。视频处理项目一部分&#xff0c;需要连接实际情况测试。 需求&#xff1a; 1.把实际相机连接到&#xff0c;并读取实时数据流&#xff0c;保存到双循环链表里面; 2.测试背景建模…...

编程日记 2023/4/18 20:30:53

陶泓达：4.18午间欧盘黄金原油最新精准操作建议！

黄金方面&#xff1a; 黄金消息面解析&#xff1a;周一&#xff08;4月17日&#xff09;美市盘中&#xff0c;美国公布的4月纽约联储制造业指数和4月NAHB房产市场指数均超出预期&#xff0c;提振了美联储在5月继续加息的预期。数据公布之后&#xff0c;美元指数加速上扬&#x…...

编程日记 2023/4/18 20:25:52

环境变量相关知识

目录 目录 谢谢你的阅读&#xff0c;这是对我最大的鼓舞 先说结论&#xff1a; 开始论述&#xff1a; 让我们举个例子 相关指令 创建本地变量 创建环境变量 方法一&#xff1a; 方法二&#xff1a; 删除环境变量 子进程中也有环境变量 第一种&#xff1a; 第二种 …...

编程日记 2023/4/18 20:20:51

如何快速入门ChatGPT

作为一个AI模型&#xff0c;ChatGPT并不需要像人一样“学习”&#xff0c;它已经通过大量的训练数据和算法进行了预训练&#xff0c;可以回答广泛的问题。 然而&#xff0c;如果你想学习如何使用ChatGPT来进行对话或者问答&#xff0c;以下是一些建议&#xff1a; 一、了解Ch…...

编程日记 2023/4/18 20:15:50

Akka定时任务schedule()方法

Akka定时任务schedule()方法 文章目录Akka定时任务schedule()方法什么是Akka定时任务schedule()方法&#xff1f;如何使用Akka定时任务schedule()方法&#xff1f;如何在actor外部获取Scheduler对象为什么需要提供一个隐式的ExecutionContext对象&#xff0c;用于执行定时任务&…...

编程日记 2023/4/18 20:10:49

Python实现处理和分析大规模文本数据集，包括数据清洗、标注和预处理

处理和分析大规模文本数据集，包括数据清洗、标注和预处理，是自然语言处理（NLP）中非常重要的一步。Python 是一种非常流行的编程语言，拥有丰富的 NLP 库和工具，可以帮助我们完成这些任务。以下是一个简单的实现示例，包括数据清洗、标注和预处理： import re import nltk…...

编程日记 2023/4/18 20:05:47

灌区量测水系统

1)灌区量测水 灌区量测水是水资源管理的基础&#xff0c;是推进节水农业和水价改革的重要手段。常规在主要水闸处&#xff0c;监测闸前和闸后水位及闸门开启状态(闸位)&#xff0c;通过实时监测数据&#xff0c;计算过闸流量。要实现全灌区水资源动态配置、精准灌溉&#xff0…...

编程日记 2023/5/30 6:39:37

3.3 泰勒公式

学习目标&#xff1a; 复习微积分基础知识。泰勒公式是微积分的一个重要应用&#xff0c;因此在学习泰勒公式之前&#xff0c;需要复习微积分的基本概念和技能&#xff0c;包括函数的导数和微分、极限、定积分等。可以参考MIT的微积分课程进行复习和加强。 学习泰勒级数和泰勒…...

编程日记 2023/5/29 21:20:14

ubuntu中通过vscode编译调试ORB-SLAM3

为了在orb-slam3的基础上进行二次开发&#xff0c;这几天花了不少精力&#xff0c;终于搞懂怎么在ubuntu系统中像windows里visual studio中一样方便的打断点调试了&#xff0c;在这里把整个过程再重新梳理一下。 1 首先从安装ubuntu 22.04开始 因为是从实验室毕业先辈那里继承…...

编程日记 2023/4/18 19:50:44

阿里版 ChatGPT 突然上线!

转自:纯洁的微笑 其实早本月初&#xff0c;就传出过不少阿里要推出类ChatGPT的消息。 前几天率先流出的天猫精灵“鸟鸟分鸟”脱口秀版GPT&#xff0c;就是基于大模型的“压缩版”&#xff0c;已经以其惊艳表现吸引了众目光。 如今“原版大菜”上桌&#xff0c;自然一点即着&a…...

编程日记 2023/4/18 19:45:43

《Kubernetes部署篇：Ubuntu20.04基于containerd部署kubernetes1.24.12单master集群》

一、架构图 如下图所示&#xff1a; 二、环境信息 主机名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…...

编程日记 2023/5/31 2:50:29

MAZDA CX-50没现车怎么办？赶紧去VR看车啊！

爱车一族往往都有过这样的经历&#xff1a;听说某家品牌出了一款心仪的新车&#xff0c;于是一直心心念念想要先睹为快。然而这时候问题就来了&#xff1a;新车从发布到量产上市往往要经历一段过程。没有现车的日子里&#xff0c;就算每天去4S店蹲守也看不到新车。那种心里痒痒…...

编程日记 2023/5/31 2:51:47

结构体全解，适合初学者的一条龙深度讲解（附手绘图详解）

我们知道&#xff0c;C语言是允许我们自己来创造类型的&#xff0c;这些类型就叫做——自定义类型。 自定义类型又包括结构体类型&#xff0c;联合体类型还有枚举类型。 今天的文章&#xff0c;我们就着重讲解这其中的结构体类型。 目录 结构体的声明 1.1结构的基础知识 …...

编程日记 2023/6/1 5:10:22

什么是SD-WAN技术？企业网络优化的利器！

现今&#xff0c;企业网络架构已成为其发展不可或缺的组成部分。针对网络性能优化方面&#xff0c;SD-WAN是一种值得深思熟虑的选择&#xff0c;在企业网络中应用SD-WAN技术能够带来多重好处。 什么是SD-WAN技术以及它是如何工作的&#xff1f; SD-WAN是软件定义的广域网&…...

编程日记 2023/4/18 19:25:38

JAVA练习106- 生命游戏

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、题目-生命游戏 1.题目描述 2.思路与代码 2.1 思路 2.2 代码 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 4 月12日练习…...

编程日记 2023/4/18 19:20:37

【案例教程】基于R语言、MaxEnt模型融合技术的物种分布模拟、参数优化方法、结果分析制图与论文写作实践技术

【原文链接】: 基于R语言、MaxEnt模型融合技术的物种分布模拟、参数优化方法、结果分析制图与论文写作实践技术https://mp.weixin.qq.com/s?__bizMzU5NTkyMzcxNw&mid2247537049&idx3&sn31ef342c4808aed6fee6ac108b899a33&chksmfe6897f3c91f1ee5c4fa8e4eeea34…...

编程日记 2023/4/18 19:15:36

php7类型约束，严格模式

在PHP7之前&#xff0c;函数和类方法不需要声明变量类型 &#xff0c;任何数据都可以被传递和返回&#xff0c;导致几乎大部分的调用操作都要判断返回的数据类型是否合格。 为了解决这个问题&#xff0c;PHP7引入了类型声明。 目前有两类变量可以声明类型&#xff1a; 形参&a…...

编程日记 2023/4/18 19:10:31

2023-04-11 无向图的匹配问题

无向图的匹配问题 之所以把无向图的这个匹配问题放到最后讲是因为匹配问题借鉴了有向图中一些算法的思想 1 最大匹配和完美匹配 二分图回顾 二分图&#xff1a;把一个图中的所有顶点分成两部分&#xff0c;如果每条边的两端分别属于不同部分&#xff0c;则这个图是二分图。更多…...

编程日记 2023/5/29 21:21:27

国家出手管人工智能AI了

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 全球都在封杀AI&#xff0c;国家也出手了&#xff0c;人工智能AI的强监管来了!这次反应速度算是很快了。国家出手&#xff0c;AI必须管。 国家网信办拟针对生成式人工智能服务出台管理办法&#…...

编程日记 2023/4/18 19:00:29

YOLOv8环境搭好了，然后呢？5个实用脚本带你玩转目标检测（从预测到训练）

YOLOv8环境搭好了&#xff0c;然后呢&#xff1f;5个实用脚本带你玩转目标检测&#xff08;从预测到训练&#xff09; 刚完成YOLOv8环境配置的开发者常会遇到这样的困境&#xff1a;跑通官方demo后&#xff0c;面对自己的实际需求却无从下手。本文将提供五个即用型Python脚本&a…...

编程新知 2026/3/27 16:13:20

手把手教你用Google Cloud VPC流量监控：快速定位高费用虚拟机

谷歌云VPC流量监控实战&#xff1a;精准定位高成本虚拟机的5种方法 当凌晨三点的告警邮件突然弹出"本月云服务账单已超预算30%"时&#xff0c;作为运维负责人的你首先会检查哪个环节&#xff1f;根据2023年FinOps基金会调查报告&#xff0c;意外流量费用已成为云成本…...

编程新知 2026/3/27 16:11:20

企业级流程引擎如何重塑低代码开发？基于Vite+Vue3的可视化建模实践

企业级流程引擎如何重塑低代码开发&#xff1f;基于ViteVue3的可视化建模实践 【免费下载链接】vite-vue-bpmn-process 基于 Vite TypeScript Vue3 NaiveUI Bpmn.js 的流程编辑器&#xff08;前端部分&#xff09;。支持高度自定义&#x1f680;&#x1f680;&#x1f680;。…...

编程新知 2026/3/27 15:37:02

全桥LLC变换器死区时间优化实战：从IGBT硬开通到完美ZVS的调试记录

全桥LLC变换器死区时间优化实战&#xff1a;从IGBT硬开通到完美ZVS的调试记录 在电力电子领域&#xff0c;LLC谐振变换器因其高效率、高功率密度和良好的EMI特性&#xff0c;已成为中高功率应用的理想选择。然而&#xff0c;实际调试过程中&#xff0c;死区时间与励磁电感的匹配…...

编程新知 2026/3/27 14:24:25

DeepSeek-R1-Distill-Qwen-7B创意写作展示：从诗歌到短篇小说

嗯&#xff0c;用户需要一篇关于DeepSeek-R1-Distill-Qwen-7B在创意写作方面效果展示的技术博客。根据标题和场景判断&#xff0c;这属于效果展示类文章&#xff0c;重点是通过实际案例展示模型在文学创作上的能力。 需要突出模型的创意写作效果&#xff0c;包括诗歌、微型小说…...

编程新知 2026/3/27 13:23:07

wan2.1-vae中英文双语支持实测：中文提示词准确率92%+英文prompt兼容性验证

wan2.1-vae中英文双语支持实测&#xff1a;中文提示词准确率92%英文prompt兼容性验证 1. 平台核心能力解析 wan2.1-vae是基于Qwen-Image-2512模型的AI图像生成平台&#xff0c;其最大特色在于原生支持中英文双语提示词。在实际测试中&#xff0c;中文提示词的理解准确率达到9…...

编程新知 2026/3/27 12:54:53

深度解析：Beyond Compare 5授权机制与密钥生成技术

深度解析&#xff1a;Beyond Compare 5授权机制与密钥生成技术 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 在软件授权领域&#xff0c;Beyond Compare 5的RSA加密授权系统展现了商业软件保护…...

编程新知 2026/3/27 11:34:02

Ryujinx开源项目：跨平台Switch游戏模拟解决方案

Ryujinx开源项目&#xff1a;跨平台Switch游戏模拟解决方案 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 在数字化娱乐日益普及的今天&#xff0c;如何让Nintendo Switch游戏突破硬件…...

编程新知 2026/3/27 11:31:59

M9A智能助手：为《重返未来：1999》玩家解放时间的自动化解决方案

M9A智能助手&#xff1a;为《重返未来&#xff1a;1999》玩家解放时间的自动化解决方案 【免费下载链接】M9A 1999 小助手 项目地址: https://gitcode.com/gh_mirrors/m9/M9A 在当今快节奏的游戏环境中&#xff0c;玩家常常需要在重复性日常任务上投入大量时间&#xff…...

编程新知 2026/3/27 10:13:30

AgentCPM深度研报助手10分钟快速部署教程：基于CSDN星图GPU平台

AgentCPM深度研报助手10分钟快速部署教程&#xff1a;基于CSDN星图GPU平台 你是不是也遇到过这种情况&#xff1f;面对海量的行业报告、公司财报&#xff0c;想快速提炼核心观点&#xff0c;却感觉无从下手&#xff0c;或者需要花费大量时间手动整理。现在&#xff0c;有了AI助…...

编程新知 2026/3/27 10:05:27