23 导航栏
效果演示
实现了一个响应式的导航栏,当鼠标悬停在导航栏上的某个选项上时,对应的横条会从左到右地移动,从而实现了导航栏的动态效果。
Code
<div class="flex"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><div class="bar"></div></ul>
</div>
body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #e8e8e8;
}.flex {width: 50vw;height: 80px;line-height: 80px;background-color: white;position: absolute;top: 50%;left: 50%;margin: -25px 0 0 -25vw;
}.flex ul {display: flex;padding: 0;margin: 0;box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
}.flex ul li {flex: 1;list-style: none;text-align: center;position: relative;font-size: 20px;font-weight: bold;transition: 0.5s ease;cursor: pointer;user-select: none;
}.flex ul li:hover {background-color: rgba(255, 255, 255, 0.25);color: #f564a9;
}.flex ul li:hover:nth-of-type(2)~.bar {left: 20%;
}.flex ul li:hover:nth-of-type(3)~.bar {left: 40%;
}.flex ul li:hover:nth-of-type(4)~.bar {left: 60%;
}.flex ul li:hover:nth-of-type(5)~.bar {left: 80%;
}.flex ul .bar {width: 20%;background-color: #f564a9;height: 5px;position: absolute;left: 0;bottom: 0;transition: 0.5s ease;
}
实现思路拆分
cbody {height: 100vh; /* 设置整个页面的高度为视口的高度 */display: flex; /* 设置整个页面为弹性盒子 */justify-content: center; /* 设置弹性盒子内部元素水平居中对齐 */align-items: center; /* 设置弹性盒子内部元素垂直居中对齐 */background-color: #e8e8e8; /* 设置页面的背景颜色 */
}
这段代码设置了整个页面的样式,包括高度、对齐方式、背景颜色等。
.flex {width: 50vw; /* 设置导航栏的宽度为视口宽度的50% */height: 80px; /* 设置导航栏的高度为80px */line-height: 80px; /* 设置导航栏内部元素的垂直居中对齐 */background-color: white; /* 设置导航栏的背景颜色 */position: absolute; /* 设置导航栏的定位方式为绝对定位 */top: 50%; /* 设置导航栏距离顶部的距离为视口高度的一半 */left: 50%; /* 设置导航栏距离左侧的距离为视口宽度的一半 */margin: -25px 0 0 -25vw; /* 设置导航栏与视口的距离,使导航栏在视口中水平和垂直居中 */
}
这段代码设置了导航栏的样式,包括宽度、高度、对齐方式、背景颜色、定位方式、距离顶部和左侧的距离等。
.flex ul {display: flex; /* 设置导航栏内部元素为弹性盒子 */padding: 0; /* 设置导航栏内部元素的内边距为0 */margin: 0; /* 设置导航栏内部元素的外边距为0 */box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25); /* 设置导航栏内部元素的阴影效果 */
}
这段代码设置了导航栏内部元素的样式,包括内部元素为弹性盒子、内边距、外边距和阴影效果等。
.flex ul li {flex: 1; /* 设置导航栏内部元素的宽度为剩余空间的100% */list-style: none; /* 去掉导航栏内部元素的点号 */text-align: center; /* 设置导航栏内部元素的文本居中对齐 */position: relative; /* 设置导航栏内部元素为相对定位 */font-size: 20px; /* 设置导航栏内部元素的字体大小为20px */font-weight: bold; /* 设置导航栏内部元素的字体粗细为bold */transition: 0.5s ease; /* 设置导航栏内部元素的过渡效果 */cursor: pointer; /* 设置导航栏内部元素的鼠标指针为手型 */user-select: none; /* 设置导航栏内部元素的用户选中状态为不可用 */
}
这段代码设置了导航栏内部元素的样式,包括宽度、对齐方式、定位方式、字体大小、字体粗细、过渡效果、鼠标指针和用户选中状态等。
.flex ul li:hover {background-color: rgba(255, 255, 255, 0.25); /* 设置导航栏内部元素悬停时的背景颜色为半透明的白色 */color: #f564a9; /* 设置导航栏内部元素悬停时的文本颜色为淡粉红色 */
}
这段代码设置了导航栏内部元素悬停时的样式,包括背景颜色和文本颜色等。
.flex ul li:hover:nth-of-type(2)~.bar {left: 20%; /* 设置第二个导航栏内部元素悬停时的横条移动到距离左侧20% */
}.flex ul li:hover:nth-of-type(3)~.bar {left: 40%; /* 设置第三个导航栏内部元素悬停时的横条移动到距离左侧40% */
}
.flex ul li:hover:nth-of-type(3)~.bar {left: 40%; /* 这段代码设置了第三个导航栏内部元素悬停时的横条移动到距离左侧40%。 */
}
.flex ul li:hover:nth-of-type(4)~.bar {left: 60%; /* 这段代码设置了第四个导航栏内部元素悬停时的横条移动到距离左侧60%。 */
}
.flex ul li:hover:nth-of-type(5)~.bar {left: 80%; /* 这段代码设置了第五个导航栏内部元素悬停时的横条移动到距离左侧80%。 */
}
这段代码设置了导航栏内部元素悬停时的横条移动的距离
.flex ul.bar {width: 20%; /* 设置横条的宽度为20% */background-color: #f564a9; /* 设置横条的背景颜色为淡粉红色 */height: 5px; /* 设置横条的高度为5px */position: absolute; /* 设置横条的定位方式为绝对定位 */left: 0; /* 设置横条距离左侧的距离为0 */bottom: 0; /* 设置横条距离底部的距离为0 */transition: 0.5s ease; /* 设置横条的过渡效果 */
}
这段代码设置了横条的样式,包括宽度、背景颜色、高度、定位方式、距离左侧和底部的距离、过渡效果等。当导航栏内部元素悬停时,对应的横条会向右移动,表示当前选项被选中。这个效果可以通过修改代码中的样式和交互来实现。
相关文章:
23 导航栏
效果演示 实现了一个响应式的导航栏,当鼠标悬停在导航栏上的某个选项上时,对应的横条会从左到右地移动,从而实现了导航栏的动态效果。 Code <div class"flex"><ul><li>1</li><li>2</li><l…...
express框架搭建后台服务
express 1. 使用express创建web服务器:2. 中间件中间件分类: 3.解决跨域问题:1. CORS2.JSONP 1. 使用express创建web服务器: 1. 导入express2. 创建web服务器3. 启动web服务器// 1. 导入express const express require(express)/…...
信息学奥赛一本通2067详解+代码
题目:http://ybt.ssoier.cn:8088/show_source.php?runid24484837 2067:【例2.5】圆 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 98334 通过数: 53637 【题目描述】 输入半径r,输出圆的直径、周长、面积,数与数…...
Java大数据hadoop2.9.2搭建伪分布式yarn资源管理器
1、修改配置文件 cd /usr/local/hadoop/etc/hadoop cp ./mapred-site.xml.template ./mapred-site.xml vi mapred-site.xml <configuration><property><name>mapreduce.framework.name</name><value>yarn</value></property> &l…...
3D Gaussian Splatting复现
最近3D Gaussian Splatting很火,网上有很多复现过程,大部分都是在Windows上的。Linux上配置环境会方便简单一点,这里记录一下我在Linux上复现的过程。 Windows下的环境配置和编译,建议看这个up主的视频配置,讲解的很细…...
tf-idf +逻辑回归来识别垃圾文本
引入相关包 from sklearn.feature_extraction.text import TfidfVectorizer from sklearn.linear_model import LogisticRegression from sklearn.metrics import accuracy_score, auc, roc_auc_score import joblib import os import pandas as pd from sklearn.model_select…...
Oracle - 数据库的实例、表空间、用户、表之间关系
Oracle是一种广泛使用的关系型数据库管理系统,它具有高性能、高可靠性、高安全性等特点。1Oracle数据库的结构和组成是一个复杂而又有趣的话题,本文将介绍Oracle数据库的四个基本概念:数据库、实例、表空间和用户,以及它们之间的关…...
Java面试项目推荐,异构数据源数据流转服务DatalinkX
前言 作为一个年迈的夹娃练习生,每次到了春招秋招面试实习生时都能看到一批简历,十个简历里得有七八个是写商城或者外卖项目。 不由得想到了我大四那会,由于没有啥项目经验,又想借一个质量高点的项目通过简历初筛,就…...
一、Vue3组合式基础[ref、reactive]
一、ref 解释:ref是Vue3通过ES6的Proxy实现的响应式数据,其与基本的js类型不同,其为响应式数据,值得注意的是,reactive可以算是ref的子集,ref一般用来处理js的基本数据类型如整型、字符型等等(也可以用来处…...
unity网页远程手机游戏Inspector面板proxima
https://www.unityproxima.com/docs...
聊聊spring事务12种场景,太坑了
前言 对于从事java开发工作的同学来说,spring的事务肯定再熟悉不过了。 在某些业务场景下,如果一个请求中,需要同时写入多张表的数据。为了保证操作的原子性(要么同时成功,要么同时失败),避免数…...
mysql 数据查重与查重分页
起因是公司的crm录入不规范,有重复数据。 之后考虑到需要手动处理,首先需要自动找出重复的数据 查重要求: 存在多个不允许重复的字段,任一字段重复,则判断为同一个客户。划分到同一重复组中。 查重sql如下 SELECT C…...
微服务(12)
目录 56.k8s是怎么进行服务注册的? 57.k8s集群外流量怎么访问Pod? 58.k8s数据持久化的方式有哪些? 59.Relica Set和Replication Controller之间有什么区别? 60.什么是Service Mesh(服务网格)&#x…...
iOS实时查看App运行日志
目录 一、设备连接 二、使用克魔助手查看日志 三、过滤我们自己App的日志 📝 摘要: 本文介绍了如何在iOS iPhone设备上实时查看输出在console控制台的日志。通过克魔助手工具,我们可以连接手机并方便地筛选我们自己App的日志。 Ǵ…...
【计算机毕业设计】SSM健身房管理系统
项目介绍 本项目为后台管理系统,主要分为管理员与用户两种角色; 登录页面,管理员首页,会员增删改查,教练增删改查,运动器材管理等功能。 用户角色包含以下功能: 用户登录页面,用户首页,选择课程,选择教练等功能。 环境需要 1.运行环境&a…...
嵌入式Linux之MX6ULL裸机开发学习笔记(IMX启动方式-启动设备的选择)
一,硬件启动方式选择 1.启动方式的选择 6ull支持多种启动方式。 比如可以从 SD/EMMC、 NAND Flash、 QSPI Flash等启动。 6ull是怎么支持多种外置flash启动程序的。 1.启动方式选择: BOOT_MODE0 and BOOT_MODE1,这两个是两个IO来控制的,…...
K8S Ingress-Nginx导出TCP端口
ingress-nginx导出TCP端口 Exposing TCP and UDP services - Ingress-Nginx Controllerhttps://github.com/kubernetes/ingress-nginx/blob/main/docs/user-guide/exposing-tcp-udp-services.md helm upgrade ingress-nginx导出redis 6379端口(这种方式最简单&…...
索引类型-哈希索引
一. 前言 前面我们简单介绍了数据库的B-Tree索引,下面我们介绍另一种索引类型-哈希索引。 二. 哈希索引的简介 哈希索引(hash index) 基于哈希表实现,只有精确匹配索引所有列的查询才有效。对于每一行数据,存储引擎都会对所有索引列计算一个…...
uniapp中组件库的Textarea 文本域的丰富使用方法
目录 #平台差异说明 #基本使用 #字数统计 #自动增高 #禁用状态 #下划线模式 #格式化处理 API #List Props #Methods #List Events 文本域此组件满足了可能出现的表单信息补充,编辑等实际逻辑的功能,内置了字数校验等 注意: 由于…...
LLM、AGI、多模态AI 篇三:微调模型
文章目录 系列LLM的几个应用层次Lora技术其他微调技术FreezeP-TuningQLoRA指令设计构建高质量的数据微调步骤系列 LLM、AGI、多模态AI 篇一:开源大语言模型简记 LLM、AGI、多模态AI 篇二:Prompt编写技巧 LLM、AGI、多模态AI 篇三...
IPC之十二:使用libdbus在D-Bus上异步发送/接收信号的实例
IPC 是 Linux 编程中一个重要的概念,IPC 有多种方式,本 IPC 系列文章的前十篇介绍了几乎所有的常用的 IPC 方法,每种方法都给出了具体实例,前面的文章里介绍了 D-Bus 的基本概念以及调用远程方法的实例,本文介绍 D-Bus…...
ES6之生成器(Generator)
✨ 专栏介绍 在现代Web开发中,JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性,还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言,JavaScript具有广泛的应用场景&#x…...
Matlab技巧[绘画逻辑分析仪产生的数据]
绘画逻辑分析仪产生的数据 逻分上抓到了ADC数字信号,一共是10Bit,12MHZ的波形: 这里用并口协议已经解析出数据: 导出csv表格数据(这个数据为补码,所以要做数据转换): 现在要把这个数据绘制成波形,用Python和表格直接绘制速度太慢了,转了一圈发现MATLAB很好用,操作方法如下:…...
Go面试题学习
1.并发安全性 Go语言中的并发安全性是什么?如何确保并发安全性? 并发安全性是指在并发编程中,多个goroutine对共享资源的访问不会导致数据竞争和不确定的结果。 使用互斥锁(Mutex):通过使用互斥锁来保护…...
SQL效率-查询条件需避免使用函数处理索引字段
一个sql效率的问题 问题 假设created_at 是date类型、是索引,那么以下2种方式有没效率差异: WHERE TO_CHAR(created_at, ‘YYYY-MM-DD’) ‘2020-02-01’WHERE created_at TO_DATE(‘2020-02-01’ , ‘YYYY-MM-DD’) DBA回复 有的,第一…...
【Spring 篇】Spring:轻松驾驭 Java 世界的利器
在 Java 开发领域,Spring 框架无疑是一颗璀璨的明星,它不仅提供了全面的企业级特性,还为开发者提供了简便而强大的开发方式。本文将深入探讨 Spring 框架的简介、配置和快速入门,带你轻松驾驭 Java 世界的利器。 Spring 简介 Sp…...
八个LOGO素材网站推荐分享
即时设计资源广场 在UI界面设计中,为了找到合适的图标icon,你有没有尝试过翻遍整个网络,找到自己想要的,却无法下载或收费使用?最后,只收集图标icon材料需要半天时间。专业设计师使用的图标icon设计材料“…...
React格式化规范
React并没有特定的格式要求,它允许开发者根据自己的喜好和项目需求来选择代码的格式化风格。然而,在React社区中有一些常见的约定和最佳实践,以下是一些常用的格式化规范和建议: 缩进:使用2个或4个空格来进行缩进&…...
如何利用Conda管理多种虚拟环境与Jupyter Notebook内核切换
写在开头 在数据科学与机器学习领域,项目之间可能存在不同的依赖关系和版本要求。为了有效管理这些差异,使用虚拟环境成为一种标准实践。本文将介绍如何利用Conda这一强大的环境管理工具,结合Jupyter Notebook,使得在不同项目之间灵活切换变得轻而易举。 2. Conda简介 2…...
博客摘录「 什么是QPS、TPS、吞吐量?- 高并发名词概念」2024年1月5日
1.什么是高并发? 高并发(High Concurrency)。通常是指系统在短时间内的大量操作。 高并发相关的常见指标有:QPS、TPS、吞吐量、并发数等。 2.QPS(Query Per Second) QPS每秒查询率,是指系统…...
万网怎么创建网站/腾讯企业邮箱登录入口
首先我们看下where的方法,直接查看定义(定义如下),其实一种是对IEnumerable的扩展,一种是对IQueryable的扩展,直接看最常用的,其实区别就在IEnumerable的扩展的参数是系统定义的委托Func<TSo…...
深圳科技网站建设/建网站公司
液晶显示屏液晶显示屏(LCD)分类:按产品用途,可分为通信工具、家用电器、掌上电脑、交通工具、计量器械、仪器仪表、文教器具、游艺设施等类别; 按显示方式,可分为正性、负性两类; 正性显示时为白底黑字…...
wordpress关闭手机访问/seo视频教程
shell脚本启停项目进程shell脚本强制停止指定名称进程shell脚本启动logstashshell脚本强制停止指定名称进程 关闭logstash 方式一 #!/bin/bash#注意事项 logstash_pid 和 之间不能有空格,否则会将logstash_pid当成单独的命令执行报错.logstash_pidps aux|grep …...
信丰网站制作/网站统计工具有哪些
AQTime和MemProof都是AutomatedQA旗下的产品,AQTime比MemProof提供了更丰富强大的功能。该产品含有完整的性能和调试工具集,能够收集程序运行时关键的性能信息和内存/资源分配信息,并提交概要报告和详细报告,还提供所有的程序优化…...
宁波易企网做的网站/想要网站导航推广
首先登陆到Cisco 3640路由器上: ghq #config terminal (进入配置模式) ghq config # ip dhcp pool global(配置一个根地址池,global是地址池的名称,你可以采用有意义的字符串来表示) ghq dhcp-config #networ…...
视频 播放网站怎么做的/潍坊网站建设公司
1 . 使用方式 :ln [option] source_file dist_file-f 建立时,将同档案名删除.-i 删除前进行询问.ln -s abc cde 建立abc 的软连接ln abc cde 建立abc的硬连接,2. 软链接与硬链接的区别(通俗):硬链接可认为是…...