3、css3 手写nav导航条(互相学习)

效果例图:

1、首先呈现的是html代码:

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./3.css"><title>Document</title>
</head>
<body><nav class="navbar"><ul class="nav-list"><li class="nav-item"><a href="#" class="nav-link">home</a></li><li class="nav-item"><a href="#" class="nav-link">about</a><ul class="dropdown"><li class="dropdown-item"><a href="#" class="dropdown-link">Our Team</a></li><li class="dropdown-item"><a href="#" class="dropdown-link">Our Story</a></li><li class="dropdown-item"><a href="#" class="dropdown-link">Careers</a></li></ul></li><li class="nav-item"><a href="#" class="nav-link">Services</a><ul class="dropdown"><li class="dropdown-item"><a href="#" class="dropdown-link">web</a></li><li class="dropdown-item"><a href="#" class="dropdown-link">html</a></li><li class="dropdown-item"><a href="#" class="dropdown-link">dockewr</a></li><li class="dropdown-item"><a href="#" class="dropdown-link">nginx</a></li><li class="dropdown-item"><a href="#" class="dropdown-link">hahah</a></li></ul></li><li class="nav-item"><a href="#" class="nav-link">Contact</a></li></ul></nav>
</body>
</html>

 2、其次最关键的css3样式代码:

body{margin: 0;font-family: Arial, Helvetica, sans-serif;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;min-height: 100vh;
}
.navbar{background-color: #333;width: 100%;position: fixed;top: 0;left: 0;
}
.nav-list{list-style: none;margin: 0;padding: 0;display: flex;justify-content: center;
}
.nav-item{position: relative;
}
.nav-link{display: block;padding: 15px 20px;color: white;text-decoration: none;font-size: 18px;transition: background-color 0.3s,transform 0.3s;position: relative;z-index: 1;
}
.nav-link:hover{background-color: #008c8c;transform: scale(1.1);
}
.nav-link::after{content: "";position: absolute;left: 50%;width: 0;height: 3px;background-color: #f8f400;transition: all 0.4s;bottom: 0;z-index: 1;
}
.nav-link:hover::after{left: 0;width: 100%;
}.dropdown{display: none;/* height: 0px; */position: absolute;top: calc(100% + 2px);left: -5px;background-color: #444;list-style: none;margin: 0;padding: 0;overflow: hidden;border-radius: 3px;min-width: 150px;z-index: 1000;opacity: 0;transform: translateY(-10px);transition: background-color 0.6s ease-in-out;
}
.dropdown-item{position: relative;
}
.dropdown-link{display: block;padding: 15px 20px;color: white;text-decoration: none;font-size: 18px;transition: background-color 0.3s;
}
.dropdown-link::after{content: "";position: absolute;bottom: 0;left: 50%;width: 0px;height: 2px;transition: all 0.4s ease-in-out;
}
.dropdown-link:hover{background-color: #008c8c;
}
.dropdown-link:hover::after{left: 0;width: 100%;background-color: #f8f400;
}.nav-item:hover .dropdown{display: block;/* height: 300px; */opacity: 1;transform: translateY(0);
}

总结:CSS太强大了,只是我们现在的学习知识不够,不能够很好的驾驭它,

活到老学到老

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

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

相关文章

Keras深度学习框架基础第三讲:层接口(layers API)“层权重正则化器”

1、绪论 在Keras中&#xff0c;层权重正则化器是用于防止模型过拟合的一种技术&#xff0c;它通过向模型的损失函数中添加一个与权重相关的惩罚项来实现。 1.1 Keras正则化器概述 正则化器的概念&#xff1a; 正则化器允许在优化过程中对层的参数或层的激活情况进行惩罚。网络…

ARM32开发——库与包

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 嵌入式软件通用架构库SPL库HAL库MSP 嵌入式软件通用架构 库 标准外设库&#xff08;Standard Peripheral Library&#xff09;和H…

【c#跨线程操作界面方法】

我们知道,在winform中进行跨线程操作,如果处理不好则会出现界面卡顿、“线程间操作无效: 从不是创建控件的线程访问它“等问题,在此提供跨线程操作界面方法,可以很好解决相关问题。 一、 通过设置UI控件的Invoke和BeginInvoke方法实现更新,在子线程中调用如下函数更改主界…

Kafka重平衡导致无限循环消费问题

1. 问题描述 Kafka消费者消费消息超过了5分钟&#xff0c;不停的触发重平衡&#xff0c;消费者的offset因为重平衡提交失败&#xff0c;重复拉取消费&#xff0c;重复消费。 2. 问题原因 kafka默认的消息消费超时时间max.poll.interval.ms 300000, 也就是5分钟&#xff0c;…

Python魔法之旅-魔法方法(03)

目录 一、概述 1、定义 2、作用 二、主要应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类…

【Linux】初识信号及信号的产生

初始信号 初始信号什么是信号站在应用角度的信号查看Linux系统定义的信号列表 信号的常见处理方式信号的产生通过终端按键产生信号什么是core dump?如何开启core dump?core dump有什么用&#xff1f;为什么默认关闭core dump&#xff1f;设置了core文件大小但是没有产生core文…

【SQL学习进阶】从入门到高级应用(八)

文章目录 ✨连接查询✨什么是连接查询✨连接查询的分类✨笛卡尔积现象✨内连接✨什么叫内连接✨内连接之等值连接✨内连接之非等值连接✨内连接之自连接 ✨外连接✨什么叫外连接✨外连接之左外连接&#xff08;左连接&#xff09;✨外连接之右外连接&#xff08;右连接&#xf…

ubuntu 18.04 ros1学习

总结了一下&#xff0c;学习内容主要有&#xff1a; 1.ubuntu的基础命令 pwd: 获得当前路径 cd: 进入或者退出一个目录 ls:列举该文件夹下的所有文件名称 mv 移动一个文件到另一个目录中 cp 拷贝一个文件到另一个目录中 rm -r 删除文件 gedit sudo 给予管理员权限 sudo apt-…

php反序列化学习(2)

1、魔术方法触发规则&#xff1a; 魔术方法触发的前提是&#xff1a;魔法方法所在类&#xff08;或对象&#xff09;被调用 分析代码&#xff0c;_wakeup()的触发条件是进行反序列化&#xff0c;_tostrinng()触发的条件是把对象当成字符串调用&#xff0c;但是魔术方法触发的前…

安全测试用例及解析(Word原件,直接套用检测)

5 信息安全性测试用例 5.1 安全功能测试 5.1.1 标识和鉴别 5.1.2 访问控制 5.1.3 安全审计 5.1.4 数据完整性 5.1.5 数据保密性 5.1.6 软件容错 5.1.7 会话管理 5.1.8 安全漏洞 5.1.9 外部接口 5.1.10 抗抵赖 5.1.11 资源控制 5.2 应用安全漏洞扫描 5.2.1 应用安全漏洞扫描 5.3…

redis笔记2(key\value的设计)

1-redis的key-value设计 选择value &#xff08;1&#xff09;是否需要排序&#xff0c;需要&#xff0c;用sortset &#xff08;2&#xff09;缓存的值是单个还是多个 &#xff08;3&#xff09;单个&#xff1a;简单String&#xff0c;对象值的用Hash &#xff08;4&#xff…

Java 多态与接口设计:深入理解Java的多态特性,并探讨在实际编程中如何设计和使用接口

深入理解Java的多态特性 多态的基本概念 在Java中,多态是面向对象的三大特性(封装、继承、多态)之一。它指的是,一个对象可以有多种形态。具体来说,多态让我们在设计代码时可以使用父类型占位符的方式来引用子类型的对象,而具体执行哪个子类的方法,将在运行时动…

方差和标准差的区别

标准差和方差都是用来衡量随机变量的离散程度的统计量&#xff0c;它们之间有以下区别&#xff1a; 方差&#xff08;Variance&#xff09;&#xff1a; 方差是衡量随机变量离其均值的离散程度的度量。它是各个数据与其平均值之差的平方和的平均值。方差的公式为&#xff1a;…

手写节流和防抖

一、什么是防抖 定义&#xff1a; 用于限制某个函数在短时间内被频繁调用的情况 特点&#xff1a; 延迟执行&#xff1a;防抖会延迟执行目标函数&#xff0c;直到一定的空闲时间过去后才执行&#xff0c;如果在这段时间内再次触发&#xff0c;则会重新计时。 合并触发&#…

WHAT - 常见的前端工具库

前端开发有许多工具库&#xff0c;可以帮助开发者提高效率、简化代码和增强功能。以下是一些常见的前端工具库&#xff1a; 一、常见工具库 函数库 1. Lodash&#xff08;推荐&#xff09; Lodash 是一个 JavaScript 实用程序库&#xff0c;提供了一系列方便的函数&#xf…

鹤城杯 2021 流量分析

看分组也知道考http流量 是布尔盲注 过滤器筛选http流量 将流量包过滤分离 http tshark -r timu.pcapng -Y "http" -T json > 1.json这个时候取 http.request.uri 进一步分离 http.request.uri字段是我们需要的数据 tshark -r timu.pcapng -Y "http&quo…

【全开源】Java情侣飞行棋系统微信小程序+H5+APP源码+微信公众号

​让爱情与游戏并行 一、引言&#xff1a;飞行棋与情侣时光的交融 在快节奏的现代生活中&#xff0c;情侣们常常寻找一种既能增进感情又能共同娱乐的方式。飞行棋&#xff0c;这款经典的家庭游戏&#xff0c;因其简单易上手、策略性强而深受大众喜爱。而现在&#xff0c;我们…

Vue2中的计算属性(computed)和监听属性(watch)

1、说明 在Vue中我们经常会使用到多个参数计算出来的结果&#xff0c;在这种情况下我们可以定义参数和方法&#xff0c;将处理结果赋值给自定义参数&#xff0c;这种方式较为复杂&#xff0c;由此vue提供了计算属性方法。面对响应式页面&#xff0c;我们为了做到实时响应页面参…

[个人笔记] 记录docker-compose的部署过程

容器技术 第二章 记录docker-compose的部署过程 容器技术记录docker-compose的部署过程(可选)新建docker用户(可选)迁移docker-ce目录docker-compose官方插件形式安装官方二进制形式独立安装(可选) 使用docker-compose二进制包的 bash_completion 命令补齐 参考来源 记录docker…

Android8.1高通平台修改默认输入法

需求 安卓8.1 SDK原生的输入法只能打英文, 需要替换成中文输入法. 以高通平台为例, 其它平台也适用. 查看设备当前默认输入法 adb shell settings list secure | grep input 可以看到当前默认是LatinIME这个安卓原生输入法. default_input_methodcom.android.inputmethod.l…