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

前端小案例——动态导航栏文字（HTML + CSS, 附源码）

news 2026/2/10 11:20:16

一、前言

实现功能:

        这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景，并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素，包含一个文本和一个横向的下划线。

        当鼠标悬停在选项上时，选项的文本颜色会变为粉红色，并且下划线会从中间向两边展开，呈现出一种动态的效果。

        这种导航栏可以用于网页或应用程序中，提供简洁且有吸引力的导航选项。

实现逻辑：

  1. 创建一个导航栏容器div，并设置其类名设置为.nav。
  2. 在导航栏容器中创建四个选项，即li元素，每个选项包含一个文本和一个下划线。
  3. 为每个选项设置样式，包括设置宽度、高度、文本对齐方式、行高和相对定位。
  4. 为每个选项的下划线i元素设置样式，包括设置宽度为0%（初始状态下不可见）、高度为3px、背景色、绝对定位和过渡效果。
  5. 当鼠标悬停在选项上时，为选项设置:hover伪类样式，改变文本颜色为粉红色。
  6. 当鼠标悬停在选项上时，为选项下划线i元素设置:hover伪类样式，将下划线从中间向两边展开，即将left属性设置为0，将宽度设置为100%。
  7. 设置过渡效果，使下划线的展开效果具有动画效果。

二、项目运行效果

三、全部代码

<!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, 附源码）

一、前言 实现功能: 这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景&#xff0c;并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素&#xff0c;包含一个文本和一个横向的下划线。 当鼠标悬停在选项上时&#xff0c;选项的文本颜色…...

编程日记 2024/2/5 7:08:14

前置机、堡垒机（跳板机）【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、前言 文章借鉴&#xff1a; https://blog.csdn.net/weixin_45565886/article/detai…...

编程日记 2024/2/5 7:06:13

从编程中理解：大脑的短期记忆和长期记忆

在编程中&#xff0c;我们可以将大脑的短期记忆和长期记忆类比为程序中的变量作用域和持久化存储。在Unity C#编程环境下&#xff0c;可以这样解释&#xff1a; 假设金庸武侠世界中的人物张无忌正在修炼九阳真经。我们用C#代码来模拟他学习武功的过程&#xff0c;其中涉及的“…...

编程日记 2024/2/5 7:04:10

Rust 本地文档的使用：rustup doc

Rust 是一种系统级编程语言&#xff0c;以其安全性、速度和内存控制能力而闻名。为了方便开发者更好地了解并利用 Rust 标准库和工具链中的功能&#xff0c;Rust 提供了一种内置的文档浏览方式——通过 rustup doc 命令。 安装 rustup 在查阅 Rust 文档之前&#xff0c;确保你…...

编程日记 2024/2/5 7:02:08

uni-app切换页面刷新，返回上一页刷新（onShow钩子函数的使用）

切换页面刷新&#xff1a;通过onShow()便可实现 返回上一页通过uni.navigateBack({delta: 1});实现 以返回上一页刷新为例 从B页面返回上一页到A页面&#xff0c;在A页面写入方法refreshHandler() //a.vue methods: { // 执行刷新逻辑refreshHandler() {uni.request({ur…...

编程日记 2024/2/5 7:01:07

adb 无线连接 操作Android设备

最近集五福活动比较热门 可以用这个工具 用自己擅长的语言写一个循环程序 运行起来就可以 自动帮我们 看视频得福卡了 很方便 while (true) {sleep(mt_rand(15, 25));system(adb shell input swipe 500 2000 500 1000 100); } 1. 首先下载 安卓开发工具 adb adb网盘链接 链接…...

编程日记 2024/2/5 6:58:03

春节运维不打烊：一体化运维高效保障企业IT与机房环境

随着技术的不断发展和企业数字化转型的深入&#xff0c;IT运维已经成为企业运营不可或缺的一部分。尤其在春节期间&#xff0c;一体化运维管理系统以其独特的技术特性和卓越的功能&#xff0c;为企业的稳定运行提供了坚实保障&#xff0c;确保了节日的祥和与工作的连续高效。 一…...

编程日记 2024/2/5 6:56:02

类银河恶魔城学习记录1-5 CollisionCheck源代码 P32

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Player.cs using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; u…...

编程日记 2024/2/5 6:54:00

spring boot 使用 Kafka

一、Kafka作为消息队列的好处 高吞吐量&#xff1a;Kafka能够处理大规模的数据流&#xff0c;并支持高吞吐量的消息传输。 持久性&#xff1a;Kafka将消息持久化到磁盘上&#xff0c;保证了消息不会因为系统故障而丢失。 分布式&#xff1a;Kafka是一个分布式系统&#xff0c…...

编程日记 2024/2/5 6:52:59

LFU缓存（Leetcode460）

例题&#xff1a; 分析&#xff1a; 这道题可以用两个哈希表来实现&#xff0c;一个hash表&#xff08;kvMap&#xff09;用来存储节点&#xff0c;另一个hash表&#xff08;freqMap&#xff09;用来存储双向链表&#xff0c;链表的头节点代表最近使用的元素&#xff0c;离头节…...

编程日记 2024/2/5 6:51:58

Vue学习笔记：计算属性

计算属性 入门进阶二次进阶三次进阶四次进阶结界五次进阶六次进阶七次进阶八次进阶九次进阶终章彩蛋 入门 Vue.js中&#xff0c;计算属性示例&#xff1a; export default {data() {return {firstName: John,lastName: Doe};},computed: {// 计算属性&#xff1a;全名fullNam…...

编程日记 2024/2/5 6:49:55

深度学习本科课程 实验2 前馈神经网络

任务 3.3 课程实验要求 &#xff08;1&#xff09;手动实现前馈神经网络解决上述回归、二分类、多分类任务 l 从训练时间、预测精度、Loss变化等角度分析实验结果&#xff08;最好使用图表展示&#xff09; &#xff08;2&#xff09;利用torch.nn实现前馈神经网络解决上述回归…...

编程日记 2024/2/5 6:48:54

【python】python爱心代码【附源码】

一、实现效果&#xff1a; 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 二、完整代码&#xff1a; import math import random import threading import time from math import sin, cos, pi, log from tkinter import * import re# 烟花相关设置 Fireworks [] m…...

编程日记 2024/2/5 6:47:53

Linux---信号

前言 到饭点了&#xff0c;我点了一份外卖&#xff0c;然后又开了一把网游&#xff0c;这个时候&#xff0c;我在打游戏的过程中&#xff0c;我始终记得外卖小哥会随时给我打电话&#xff0c;通知我我去取外卖&#xff0c;这个时候游戏还没有结束。我在打游戏的过程中需要把外…...

编程日记 2024/2/5 6:46:52

24种设计模式之行为型模式(下)-Java版

软件设计模式是前辈们代码设计经验的总结&#xff0c;可以反复使用。设计模式共分为3大类&#xff0c;创建者模式(6种)、结构型模式(7种)、行为型模式(11种)&#xff0c;一共24种设计模式&#xff0c;软件设计一般需要满足7大基本原则。下面通过5章的学习一起来看看设计模式的魅…...

编程日记 2024/2/5 6:45:52

基于微信小程序的校园水电费管理小程序的研究与实现

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

编程日记 2024/2/5 6:42:49

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 …...

编程日记 2024/2/5 6:41:47

k8s 部署 nocas 同时部署mysql

使用 ygqygq2 的 helm 模板部署 官方地址&#xff1a;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…...

编程日记 2024/2/5 6:39:45

GolangCI-Lint配置变更实践

GolangCI-Lint配置变更实践 Golang编程中&#xff0c;为了便于调试和代码质量和安全性检查。利用该方法可以在开发周期的早期捕获错误&#xff0c;并且检查团队编程风格&#xff0c;提高一致性。这对团队协作开发特别有用&#xff0c;可以提高开发的效率&#xff0c;保持代码质…...

编程日记 2024/2/5 6:38:44

UE中对象创建方法示例和类的理解

对象创建方法示例集 创建Actor示例 //创建一个护甲道具 AProp* armor GetWorld()->SpawnActor<AProp>(pos, rotator); 创建Component示例 UCapsuleComponent* CapsuleComponent CreateDefaultSubobject<UCapsuleComponent>(TEXT("CapsuleComponent&qu…...

编程日记 2024/2/5 6:37:43

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/8 5:22:04

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2026/2/5 4:17:42

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/2/9 6:48:42

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2026/1/26 12:37:40