前端小案例——动态导航栏文字(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;提供相应的用户交互选择项。 子组件 无。 接口 …

【数据结构 10】位图

一、位图 在海量数据的标记的时候&#xff0c;比如数十亿上百亿上千亿的数据&#xff0c;我们要统计数据是否出现&#xff0c;直接存储数据的话对内存的消耗太大了&#xff0c;这时我们可以通过位图来标记出现过的数据&#xff0c;位图可以标记0~42亿之间的整型数据&#xff0…

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

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

threejs之常用贴图

在三维图形和游戏开发中&#xff0c;高光贴图、凹凸贴图、法线贴图和环境光遮蔽贴图是常用的技术&#xff0c;用于增加虚拟物体表面的细节和真实感&#xff0c;而无需增加更多的几何体。这些技术可以帮助开发者和艺术家创造出既详细又性能高效的场景。 高光贴图&#xff08;Sp…

console.log导致内存泄露 打包时自动去掉console.log方法

webpack通过工具&#xff1a;terser 使用前需要先安装一下 vue.config.js const { defineConfig } require(vue/cli-servise); module.exports defineConfig({transpileDependencies:true,terser:{terserOptions:{compress:{drop_console:true,drop_debugger:true,},},},}…

vue3中ts的基本用法

定义类型&#xff08;src/types/index.ts&#xff09; &#xff1f;代表可有可无 export interface Persons {id: number,name: string,age?: number }定义Person子组件&#xff08;src/components/Person.vue&#xff09; <template><ul><li v-for"item …

js中原始类型和对象引用

在 JavaScript 中&#xff0c;除了原始类型&#xff08;例如字符串、数字、布尔值、null 和 undefined&#xff09;外&#xff0c;其他所有值都是对象。当我们在 Set 中添加一个元素时&#xff0c;该元素可以是原始类型或对象引用。 对象引用是指变量中存储的指向对象内存地址…

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. *"---------------------------------------------------------------------- *"*"本地接口: *…

洛谷p6771太空电梯

完全背包变形&#xff0c;外加排序&#xff0c;要学会变通&#xff0c;本题特殊之处&#xff1a;背包容量就是背包价值&#xff0c;要求的就是最大的背包容量&#xff0c;这需要我们找到真正的限制条件—物品数量和物品放置的限高 题目链接 AC code #include<bits/stdc.h&…

C++病毒【永久性】

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

JAVA基础整理(11)swagger

添加依赖 <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><dependency><groupId>io.springfox</groupId><artifactId&…

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

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

SQL布尔盲注、延迟注入和堆叠注入

什么是盲注 盲注的本质是猜解(所谓“盲”就是在你看不到返回数据的情况下能通过 “感觉” 来判断)&#xff0c;那能感觉到什么?答案是 : 差异(包括运行时间的差异和页面返回结果的差异 ) 原理 在页面中&#xff0c;如果正确执行了SQL语句&#xff0c;则返回一种页面&#x…

Linux防火墙相关命令(开启防火墙、关闭防火墙、添加ip白名单等)

查看防火状态systemctl status firewalld service iptables status暂时关闭防火墙systemctl stop firewalld service iptables stop永久关闭防火墙systemctl disable firewalld chkconfig iptables off启动防火墙systemctl start firewalld重启防火墙systemctl enable firewa…