前端小案例——动态导航栏文字（HTML + CSS, 附源码）
一、前言
实现功能:
这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景，并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素，包含一个文本和一个横向的下划线。
当鼠标悬停在选项上时，选项的文本颜色会变为粉红色，并且下划线会从中间向两边展开，呈现出一种动态的效果。
这种导航栏可以用于网页或应用程序中，提供简洁且有吸引力的导航选项。
实现逻辑：
- 创建一个导航栏容器div，并设置其类名设置为.nav。
- 在导航栏容器中创建四个选项，即li元素，每个选项包含一个文本和一个下划线。
- 为每个选项设置样式，包括设置宽度、高度、文本对齐方式、行高和相对定位。
- 为每个选项的下划线i元素设置样式，包括设置宽度为0%（初始状态下不可见）、高度为3px、背景色、绝对定位和过渡效果。
- 当鼠标悬停在选项上时，为选项设置:hover伪类样式，改变文本颜色为粉红色。
- 当鼠标悬停在选项上时，为选项下划线i元素设置:hover伪类样式，将下划线从中间向两边展开，即将left属性设置为0，将宽度设置为100%。
- 设置过渡效果，使下划线的展开效果具有动画效果。
二、项目运行效果
三、全部代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态导航栏文字</title><style>*{padding: 0;margin: 0;list-style: none;}.nav{display: flex;width: 500px;height: 100px;margin: 100px auto;justify-content: space-around;align-items: center;background-color: rgb(205, 223, 248);border-radius: 10px;}.nav li{position: relative;width: 100px;height: 50px;text-align: center;line-height: 50px;transition:.5s all;cursor: pointer;}.nav li i{display:block; width: 0%;height: 3px;background-color: rgb(255, 0, 119);position: absolute;bottom: 0px;left: 50%;transition:.5s all;}.nav li:hover {color: rgb(255, 0, 119);letter-spacing: 4px;}.nav :hover i{left:0; width:100%;}</style>
</head>
<body><div class="nav"><li>1111<i></i></li><li>2222<i></i></li><li>3333<i></i></li><li>4444<i></i></li></div>
</body>
</html>四、答疑解惑
这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。
还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。
博主QQ：1196094293
谢谢各位的支持~~
相关文章：
前端小案例——动态导航栏文字（HTML + CSS, 附源码）
一、前言 实现功能: 这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景，并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素，包含一个文本和一个横向的下划线。 当鼠标悬停在选项上时，选项的文本颜色…...
前置机、堡垒机（跳板机）【2024-02-04】
文章目录 0、前言1、前置机1.1、概念1.2、功能1.3、使用场景1.4、总结 2、堡垒机2.1、概念2.2、功能2.3、使用场景2.4、总结 3、前置机和堡垒机3.1、设计理念与目的3.2、功能3.3、使用场景 0、前言 文章借鉴： https://blog.csdn.net/weixin_45565886/article/detai…...
从编程中理解：大脑的短期记忆和长期记忆
在编程中，我们可以将大脑的短期记忆和长期记忆类比为程序中的变量作用域和持久化存储。在Unity C#编程环境下，可以这样解释： 假设金庸武侠世界中的人物张无忌正在修炼九阳真经。我们用C#代码来模拟他学习武功的过程，其中涉及的“…...
Rust 本地文档的使用：rustup doc
Rust 是一种系统级编程语言，以其安全性、速度和内存控制能力而闻名。为了方便开发者更好地了解并利用 Rust 标准库和工具链中的功能，Rust 提供了一种内置的文档浏览方式——通过 rustup doc 命令。 安装 rustup 在查阅 Rust 文档之前，确保你…...
uni-app切换页面刷新，返回上一页刷新（onShow钩子函数的使用）
切换页面刷新：通过onShow()便可实现 返回上一页通过uni.navigateBack({delta: 1});实现 以返回上一页刷新为例 从B页面返回上一页到A页面，在A页面写入方法refreshHandler() //a.vue methods: { // 执行刷新逻辑refreshHandler() {uni.request({ur…...
adb 无线连接 操作Android设备
最近集五福活动比较热门 可以用这个工具 用自己擅长的语言写一个循环程序 运行起来就可以 自动帮我们 看视频得福卡了 很方便 while (true) {sleep(mt_rand(15, 25));system(adb shell input swipe 500 2000 500 1000 100); } 1. 首先下载 安卓开发工具 adb adb网盘链接 链接…...
春节运维不打烊：一体化运维高效保障企业IT与机房环境
随着技术的不断发展和企业数字化转型的深入，IT运维已经成为企业运营不可或缺的一部分。尤其在春节期间，一体化运维管理系统以其独特的技术特性和卓越的功能，为企业的稳定运行提供了坚实保障，确保了节日的祥和与工作的连续高效。 一…...
类银河恶魔城学习记录1-5 CollisionCheck源代码 P32
Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释，可供学习Alex教程的人参考 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Player.cs using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; u…...
spring boot 使用 Kafka
一、Kafka作为消息队列的好处 高吞吐量：Kafka能够处理大规模的数据流，并支持高吞吐量的消息传输。 持久性：Kafka将消息持久化到磁盘上，保证了消息不会因为系统故障而丢失。 分布式：Kafka是一个分布式系统，…...
LFU缓存（Leetcode460）
例题： 分析： 这道题可以用两个哈希表来实现，一个hash表（kvMap）用来存储节点，另一个hash表（freqMap）用来存储双向链表，链表的头节点代表最近使用的元素，离头节…...
Vue学习笔记：计算属性
计算属性 入门进阶二次进阶三次进阶四次进阶结界五次进阶六次进阶七次进阶八次进阶九次进阶终章彩蛋 入门 Vue.js中，计算属性示例： export default {data() {return {firstName: John,lastName: Doe};},computed: {// 计算属性：全名fullNam…...
深度学习本科课程 实验2 前馈神经网络
任务 3.3 课程实验要求 （1）手动实现前馈神经网络解决上述回归、二分类、多分类任务 l 从训练时间、预测精度、Loss变化等角度分析实验结果（最好使用图表展示） （2）利用torch.nn实现前馈神经网络解决上述回归…...
【python】python爱心代码【附源码】
一、实现效果： 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 二、完整代码： import math import random import threading import time from math import sin, cos, pi, log from tkinter import * import re# 烟花相关设置 Fireworks [] m…...
Linux---信号
前言 到饭点了，我点了一份外卖，然后又开了一把网游，这个时候，我在打游戏的过程中，我始终记得外卖小哥会随时给我打电话，通知我我去取外卖，这个时候游戏还没有结束。我在打游戏的过程中需要把外…...
-Java版)
24种设计模式之行为型模式(下)-Java版
软件设计模式是前辈们代码设计经验的总结，可以反复使用。设计模式共分为3大类，创建者模式(6种)、结构型模式(7种)、行为型模式(11种)，一共24种设计模式，软件设计一般需要满足7大基本原则。下面通过5章的学习一起来看看设计模式的魅…...
基于微信小程序的校园水电费管理小程序的研究与实现
博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...
python二维高斯热力图绘制简单的思路代码
import numpy as np import matplotlib.pyplot as plt from scipy.ndimage import gaussian_filter import cv2# 生成一个示例图像 image_size 100 image np.zeros((image_size, image_size))# 在图像中心创建一个高亮区域 center_x, center_y image_size // 2, image_size …...
k8s 部署 nocas 同时部署mysql
使用 ygqygq2 的 helm 模板部署 官方地址：https://artifacthub.io/packages/helm/ygqygq2/nacos 添加 helm 仓库 helm repo add ygqygq2 https://ygqygq2.github.io/charts/下载 helm 安装文件 helm pull ygqygq2/nacos解压 tar -zxvf nacos-2.1.6.tgz执行 hel…...
GolangCI-Lint配置变更实践
GolangCI-Lint配置变更实践 Golang编程中，为了便于调试和代码质量和安全性检查。利用该方法可以在开发周期的早期捕获错误，并且检查团队编程风格，提高一致性。这对团队协作开发特别有用，可以提高开发的效率，保持代码质…...
UE中对象创建方法示例和类的理解
对象创建方法示例集 创建Actor示例 //创建一个护甲道具 AProp* armor GetWorld()->SpawnActor<AProp>(pos, rotator); 创建Component示例 UCapsuleComponent* CapsuleComponent CreateDefaultSubobject<UCapsuleComponent>(TEXT("CapsuleComponent&qu…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
解锁数据库简洁之道：FastAPI与SQLModel实战指南
在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...
服务器硬防的应用场景都有哪些？
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。 如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外，还提供了基于网页版的 ESP LA…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...