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

一、前言

实现功能:

        这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景,并使用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

谢谢各位的支持~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/668694.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IntelliJ IDEA - 5 个相见恨晚的 IDEA 使用技巧,能让你的代码飞起来!

日常开发中&#xff0c;相信广大 Java 开发者都使用过 IntelliJ IDEA 作为开发工具&#xff0c;IntelliJ IDEA 是一款优秀的 Java 集成开发环境&#xff0c;它提供了许多强大的功能和快捷键&#xff0c;可以帮助开发者提高编码效率和质量。除了一些常见的技巧&#xff0c;如自动…

LLM - Qwen-72B LoRA 训练与推理实战

目录 一.引言 二.模型简介 1.Qwen-Model 总览 2.Qwen-Chat-72B - PreTrain - Tokenizer - Base Line - SFT / RLHF 3.Qwen-72 模型架构 - Config.json - c_attn/c_proj - Attention Forward - ROPE - Qwen MLP - Qwen Block 三.QLoRA 与 Infer 实战 1.SFT 指…

神经网络激活函数到底是什么?

激活函数 其实不是很难啦&#xff0c;归结一下就是大概这样几个分类&#xff0c;详情请参考【神经网络】大白话直观理解&#xff01;_哔哩哔哩_bilibili神经网络就是干这个事的~ 如果队伍不长&#xff0c;一个ykxb就可以了&#xff0c;如果 如果 队伍太长 就加一个激活函数也…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Radio组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Radio组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Radio组件 单选框&#xff0c;提供相应的用户交互选择项。 子组件 无。 接口 …

SpringBoot 过滤器Filter 拦截请求 生命周期

介绍 当用户请求接口时&#xff0c;请求会先到过滤器&#xff0c;在到处理逻辑的接口&#xff0c;在过滤器中可以可以判断用户权限&#xff0c;如&#xff1a;是否登录&#xff0c;或请求前的一些操作&#xff0c;完成一下比较通用的操作&#xff0c;如&#xff1a;前端的AXIO…

vue项目文件夹介绍

目录 Vue项目目录结构 项目介绍: node_modules 文件及子目录 src目录 assets 文件夹 components 文件夹 实例:简单的注册并使用组件 Vue项目目录结构 项目介绍: node_modules 文件及子目录 这个文件夹里面全部都是node的一些基础的依赖包&#xff0c;当我们拓展的安…

[Python图像处理] 使用OpenCV创建色调图

使用OpenCV创建色调图 色调映射和高动态范围成像应用色调映射相关链接 色调映射和高动态范围成像 高动态范围 (High Dynamic Range, HDR) 技术用于摄影成像&#xff0c;以再现比标准数字成像或摄影技术更大的动态范围的亮度。标准成像技术仅允许在一定范围内区分亮度&#xff…

SAP SHDB VLPOD 录屏带序列号的

考虑到交货单有多种情况 1个行项目 多个数量,需要对应多个序列号 多个行项目,多个数量,需要多个序列号 最终形成的FM如下 FUNCTION ZIF_BDC_VLPOD_RE_S. *"---------------------------------------------------------------------- *"*"本地接口: *…

C++病毒【永久性】

我最近发现&#xff0c;我2024年后就再也没有更新过 C#沙雕程序了。 今天我想通了&#xff0c;我要再更几期关于C#沙雕程序的文章。 开始做&#xff01; 这一次就直接上代码蚌&#xff01; 不用任何特定头文件。 #include <bits/stdc.h> #include <iostream> #…

探索设计模式的魅力:精准解读桥接模式-用桥接模式构建可扩展的软件系统

设计模式专栏&#xff1a;http://t.csdnimg.cn/nolNS 目录 一、了解桥接模式&#xff1a;探索抽象和实现的分离 1.1 开-闭原则 1.2 组合/聚合复用原则 1.3 定义 1.4 用意 1.5 基本思想 1.6 组成部分 1.7 桥梁模式的示意性系统的结构图 二、桥接模式的优势&#xff1a…

前端开发中不同语言【react-i18next】

目录 查看并设置语言 单页面&#xff1a;html lang ​编辑 浏览器 自定义翻译&#xff1a;react-i18next 设置 模块&#xff1a;staticData.ts 散(重复利用)&#xff1a;命名空间.json 应用 准备 html标签 查看并设置语言 单页面&#xff1a;html lang 英语: <…

移动端基础-vw适配

什么是vw 相对单位 相对视口的尺寸 vw:viewport width 换算 1vw1/100视口宽度 vw不需要向rem一样检查视口宽度 若视口宽为375px 1vw3.75px vw与vmin的区别 vmin更照顾横竖屏问题 1vw是视口宽度的100%&#xff0c;而vmin是找宽度和高度中最小的那个&#xff0c;这样横屏…

RFID快递物流包装仓储管理与追踪解决方案

RFID技术在快递物流、包装和仓储管理领域有着广泛的应用&#xff0c;通过为每个货物、托盘、周转箱、围板箱等物品添加RFID标签&#xff0c;为它们赋予独特的身份识别码&#xff0c;并通过RFID读写器在各个仓储业务节点进行管理和追踪&#xff0c;RFID技术具有远距离快速识别的…

CSS 闪电按钮效果

<template><view class="const"><div class="voltage-button"><button>闪电按钮</button><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox=&q…

python中的web框架介绍

目录 一&#xff1a;框架介绍 二&#xff1a;框架安装 Python中有许多流行的Web框架,以下是一些最受欢迎的框架&#xff1a; 一&#xff1a;框架介绍 1: Django Django是一个高级Python Web框架&#xff0c;它鼓励快速开发和干净的设计。Django的主要特点是其强大的ORM&am…

L1-037 A除以B-java

输入样例1&#xff1a; -1 2输出样例1&#xff1a; -1/2-0.50输入样例2&#xff1a; 1 -3输出样例2&#xff1a; 1/(-3)-0.33输入样例3&#xff1a; 5 0输出样例3&#xff1a; 5/0Error java import java.util.*; class Main{public static void main(String[] args){Sc…

马尔科夫链--基础知识

马尔可夫链&#xff08;Markov Chain&#xff09;是一种数学系统&#xff0c;它经过从一个状态到另一个状态的转换&#xff0c;这些转换遵循马尔可夫性质&#xff0c;即未来的状态只依赖于当前的状态&#xff0c;而与过去的状态&#xff08;即如何到达当前状态&#xff09;无关…

力扣 121. 买卖股票的最佳时机

题目来源&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock/description/ 好久没写代码了&#xff0c;啥啥都忘了 C题解1&#xff1a;贪心算法。&#xff08;来源代码随想录&#xff09; 因为股票就买卖一次&#xff0c;那么贪心的想法很自然就是取…

由亚马逊云科技 Graviton4 驱动的全新内存优化型实例 Amazon EC2 实例(R8g),现已开放预览

下一代 Amazon Elastic Compute CloudAmazon EC2) 实例的预览版现已公开 提供。全新的 R8g 实例 搭载新式 Graviton4 处理器&#xff0c;其性价比远超任何现有的内存优化实例。对于要求较高的内存密集型工作负载&#xff0c;R8g 实例是不二之选&#xff1a;大数据分析、高性能数…

第七届西湖论剑·中国杭州网络安全技能大赛 AI 回声海螺 WP

第七届西湖论剑中国杭州网络安全技能大赛-AI-回声海螺 开题&#xff0c;提示输入密码给FLAG。 这个回声海螺应该是个AI&#xff0c;就是复读机&#xff0c;应该是想办法从中骗出密码。 感觉这题不像是AI&#xff0c;也没用啥模型&#xff0c;应该是WEB。或者是说类似于AI的提示…