前端小案例——动态导航栏文字（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…...
解锁iOS设备：applera1n工具的安全绕过指南
解锁iOS设备：applera1n工具的安全绕过指南 【免费下载链接】applera1n icloud bypass for ios 15-16 项目地址: https://gitcode.com/gh_mirrors/ap/applera1n applera1n是一款开源工具，专门为A9-A11芯片的iOS 15.0-16.6.1设备提供激活锁绕过方案…...
SDXL-Turbo创作分享：用实时绘画工具生成的精美作品案例
SDXL-Turbo创作分享：用实时绘画工具生成的精美作品案例 1. 引言：实时AI绘画的新纪元 想象一下这样的场景：你正在构思一个赛博朋克风格的城市景观，随着键盘的每一次敲击，眼前的画面实时变化，就像魔术师挥动…...
OpenModScan：工业总线测试与协议调试的开源解决方案
OpenModScan：工业总线测试与协议调试的开源解决方案 【免费下载链接】OpenModScan Open ModScan is a Free Modbus Master (Client) Utility 项目地址: https://gitcode.com/gh_mirrors/op/OpenModScan 在工业自动化领域，设备间的通讯可靠性直接决…...
盘点 | 2026顶会顶刊机器人触觉：聚焦五条技术主线
2026年顶会顶刊释放的五大「触觉」关键信号 ——从静态识别到动态闭环 目录 01 元学习赋能机器人触觉识别，精度与泛化性俱佳 ICRA2026 | Tactile Recognition of Both Shapes and Materials with Automatic Feature Optimization-Enabled Meta Learning 研究方…...
QCS6490实战解码：从参数到场景的性能跃迁指南
1. QCS6490硬件性能的实战价值解码 第一次拿到QCS6490开发板时，我对着参数表发呆了半小时——12TOPS算力、5路ISP、Wi-Fi 6E这些参数看起来很厉害，但到底能解决哪些实际问题？经过三个月的项目实战，我发现这款芯片的真正价值在于将…...
C++ 编译器优化参数解析
C编译器优化参数解析：提升性能的关键 在C开发中，编译器优化是提升程序性能的重要手段。通过调整编译器的优化参数，开发者可以在不修改代码的情况下显著提高程序的运行效率、减少内存占用或缩短启动时间。不同的优化选项适用于不同的场景&…...
CC 开源版完整安装部署指南
CC（Claude-Code-Compiled）开源版完整安装部署指南 前言 CC（Claude-Code-Compiled）是一款基于 Claude 生态的轻量化命令行代码助手工具，基于 Bun 运行时实现高效编译与执行。本文将手把手带你完成环境依赖安装 → 项目构…...
OpenClaw 控制面板侧边栏工具说明书
这份说明书基于 OpenClaw 官方文档整理，帮助你理解控制面板各个功能模块。版本：2026.3.31 📋 侧边栏工具概览 工具对应功能用途代理Agents（多代理）管理多个独立 AI 代理技能Skills安装和管理自定义技能节点Nodes配对的…...
别再乱改注册表了！详解Windows桌面路径修改与explorer进程重启的底层逻辑
Windows桌面路径修改与explorer进程重启的底层逻辑解析 每次修改Windows注册表时，你是否真正理解背后的运行机制？当我们将桌面路径从默认位置迁移到D盘后，简单的"还原默认值"操作有时并不能完全解决问题。这背后涉及Windows Shell …...
Mem Reduct多语言界面配置指南：从基础设置到高级应用
Mem Reduct多语言界面配置指南：从基础设置到高级应用 【免费下载链接】memreduct Lightweight real-time memory management application to monitor and clean system memory on your computer. 项目地址: https://gitcode.com/gh_mirrors/me/memreduct 功能…...