【html+css（大作业）】二级菜单导航栏
目录
实现效果
代码及其解释
html部分
CSS部分
hello，hello好久不见！
今天我们来写二级导航栏，所谓二级导航栏，简单来说就是鼠标放上去就有菜单拉出：
实现效果
代码及其解释
html部分
<!DOCTYPE html>
<html><head><link rel=" shortcut icon" type="image/x-icon" href="./img/图标1.jpg"><link rel="stylesheet" type="text/css" href="./css/首页.css"/><meta charset="utf-8" /><title>数博会官网</title></head><body><div class="navbar"><div class="nav"><ul><li></li><li></li><li></li><li><a href="#">首页</a><ol><li><a href="#">数博会介绍</a></li><li><a href="#">往届回顾</a></li><li><a href="#">精彩瞬间</a></li></ol></li><li><a href="#">新闻中心</a><ol><li><a href="#">头条新闻</a></li><li><a href="#">展会新闻</a></li><li><a href="#">行业新闻</a></li><li><a href="#">展商新闻</a></li></ol></li><li><a href="#">峰会论坛</a><ol><li><a href="#">大会日程</a></li><li><a href="#">高端对话</a></li><li><a href="#">专业论坛</a></li></ol></li><li><a href="#">展览会</a><ol> <li><a href="#">展会介绍</a></li><li><a href="#">展商名录</a></li><li><a href="#">展品列表</a></li><li><a href="#">展区分布</a></li></ol></li><li><a href="#">数博发布</a></li><li><a href="#">大赛</a></li><li><a href="#">观摩活动</a><ol> <li><a href="#">观摩活动介绍</a></li></ol></li><li class="aaa"><a href="#">数博电讯</a><ol> <li><a href="#">【数博2023】第十二期</a></li><li><a href="#">【数博2023】第十一期</a></li><li><a href="#">【数博2023】第十期</a></li><li><a href="#">【数博2023】第九期</a></li><li><a href="#">【数博2023】第八期</a></li><li><a href="#">【数博2023】第七期</a></li><li><a href="#">【数博2023】第六期</a></li><li><a href="#">【数博2023】第五期</a></li><li><a href="#">【数博2023】第四期</a></li><li><a href="#">【数博2023】第三期</a></li><li><a href="#">【数博2023】第二期</a></li><li><a href="#">【数博2023】第一期</a></li></ol></li><li><a href="#">资料下载</a></li><li><a href="#">联系我们</a><ol> <li><a href="#">联系方式</a></li><li><a href="#">组织机构</a></li><li><a href="#">隐私保护协议</a></li></ol></li><li></li><li class="underline"><!-- 这个元素用来定义滑动的线条 --></li></ul> </div></div><div class="bigimg"><img src="img/大作业/首页大一.jpg" ></div></body>
</html>
CSS部分
*{padding: 0;margin: 0;
}
body{width: 100%;}
li{list-style: none;
}
a{
text-decoration: none;color:#FFFFFF;
}
li ol a{color: darkblue;font-size: 12.5px;line-height: 70px;
}
li ol{text-align: center;
}
.aaa ol li a{font-size: 10px;
}
.navbar{float: left;width: 100%;height: 70px;background-color: #0D2654;background-color: rgba(0,0,0,0.3);/* 怎么感觉没用啊？ */box-shadow: 0px 0px 5px ;
}
/* 后代选择器 */
.navbar .nav{width: 100%;height: 100%;/* 让元素水平居中 */margin: 0 auto;
}
.navbar .nav ul{/* 相对定位 */position: relative;/* 弹性布局 */display: flex;/* 让子元素平均分配宽度 */justify-content: space-around;width: 100%;height: 100%;
}
/* 只对ul里的li起作用？ */
.navbar .nav ul>li{background-color: #0D2654;background: rgba(0,0,0,0.3);width: 100%;height: 100%;
}
/* 只对ul里的li里的a起作用 */
.navbar .nav ul>li>a{/* ? */display: block;width: 100%;height: 100%;line-height: 70px;text-align: center;
}
.navbar .nav ul>li ol{width: 100%;background-color: #FFFFFF;/* box-shadow: 1px 1px 3px; *//* 让盒子先沿着y轴缩放到0，也就是隐藏了 */transform: scaleY(0);/* 我们需要将盒子从上面滑动下来 设置一下缩放中心点即可 */transform-origin: 50% 0;/* 设置过渡 *//* transition: all 0.6s; */
}
.navbar .nav ul >li ol li{height: 70px;border-bottom: 1px solid rgb(245,245,245);
}
.navbar .nav ul>li ol li:hover{background-color: rgba(0,180,245,0.3);
}
.navbar .nav ul>li:hover ol{transform: scaleY(1);
}
.navbar .nav ul .underline{top: 50px;/* 绝对定位 */position: absolute;bottom: 0;/* 第一个条条距离最左边的距离 */left: 315px;width: 100px;/* 条高 */height: 2px;/* 设置圆角 */border-radius: 2px;background-color: white;/* 加上过渡 *//* transition: all 0.5s; *//* 不加了 */pointer-events: none;}.navbar .nav ul>li:nth-child(2):hover~ .underline{left: 315px;background-color:white;}.navbar .nav ul>li:nth-child(3):hover~ .underline{left: 315px;background-color: white;}.navbar .nav ul>li:nth-child(4):hover~ .underline{left: 315px;background-color: white;}.navbar .nav ul>li:nth-child(5):hover~ .underline{left: 425px;background-color:white;}.navbar .nav ul>li:nth-child(6):hover~ .underline{left: 525px;background-color: white;}.navbar .nav ul>li:nth-child(7):hover~ .underline{left: 635px;background-color:white;}.navbar .nav ul>li:nth-child(8):hover~ .underline{left: 735px;background-color: white;}.navbar .nav ul>li:nth-child(9):hover~ .underline{left: 840px;background-color:white;}.navbar .nav ul>li:nth-child(10):hover~ .underline{left: 945px;background-color: white;}.navbar .nav ul>li:nth-child(11):hover~ .underline{left: 1045px;background-color: white;}.navbar .nav ul>li:nth-child(12):hover~ .underline{left: 1150px;background-color:white;}.navbar .nav ul>li:nth-child(13):hover~ .underline{left: 1260px;background-color:white;}.navbar .nav ul>li:nth-child(14):hover~ .underline{left: 1260px;background-color:white;}.bigimg{float: left;margin-top: -70px;}img{width: 100%;}希望能帮到您！！，
我们下次见啦~~
相关文章：
【html+css（大作业）】二级菜单导航栏
目录 实现效果 代码及其解释 html部分 CSS部分 hello，hello好久不见！ 今天我们来写二级导航栏，所谓二级导航栏，简单来说就是鼠标放上去就有菜单拉出： 实现效果 代码及其解释 html部分 <!DOCTYPE html> &l…...
算法基础之集合-Nim游戏
集合-Nim游戏 核心思想： 博弈论 sg函数：在有向图游戏中,对于每个节点x,设从x出发共有k条有向边,分别到达节点y1,y2,yk,定义SG(x)的后记节点y1,y2,,yk的SG函数值构成的集合在执行mex运算的结果,即:SG(x)mex({SG(y1),SG(y2)SG(yk)}) **特别地,**整个有向图…...
Diffusion Model, Stable Diffusion, Stable Diffusion XL 详解
文章目录 Diffusion Model生成模型DDPM概述向前扩散过程前向扩散的逐步过程前向扩散的整体过程 反向去噪过程网络结构训练和推理过程训练过程推理过程优化目标 详细数学推导数学基础向前扩散过程反向去噪过程 Stable Diffusion组成结构运行流程网络结构变分自编码器 (VAE)文本编…...
智能奶柜：重塑牛奶零售新篇章
智能奶柜：重塑牛奶零售新篇章 回忆往昔，孩童时代对送奶员每日拜访的期待，那熟悉的一幕——新鲜牛奶被细心放置于家门口的奶箱中，成为了许多人温馨的童年记忆。如今，尽管直接投递袋装牛奶的情景已不多见，但…...
源代码防泄密--沙盒技术安全风险分析
将原本用于防护病毒木马的沙盒（沙箱）技术，运用于源代码防泄密领域，形成沙盒防泄密系统，是否安全可行？依据沙盒防泄密基本工作原理，可从安全模型、沙箱逃逸以及与进程相关性等多个角度࿰…...
韭菜收割项目
最近在玩股票，被人当成韭菜收割了一顿。高点追涨，第二天直接跌停。以为是低点，想抄底，结果别人直接抄家，血亏!!! 作为一个程序员，还是好好敲代码赚钱好了，一步一步。想不劳而获是不可能的。 我写…...
Unity3D输入事件
文章目录 前言一、全局事件二、射线三、点选3D模型四、点击地面控制人物移动总结 前言 Unity输入事件分为两类，全局触发和监听式触发。全局触发通常是运行在update在每帧进行检测，而监听式触发是被动的输入事件。 一、全局事件 在最新的unity中有新和旧…...
c++ thread detach
#include <thread> #include <iostream>using namespace std;void func() {cout << "子线程func开始执行！" << endl;//do somethingcout << "子线程func执行结束！" << endl; }int main() {cout…...
入门四认识HTML
目录 一、HTML介绍 1、Web前端三大核心技术 2、什么是HTML 3、Html标签 4、标签属性 二、HTML骨架标签 三、编写HTML工具 四、常用标签 1、注释 2、标题标签 3、段落标签 4、超链接标签 5、图片标签 6、换行与空格 7、布局标签 8、列表标签 9、表单…...
js怎么生成验证码？js生成指定长度的随机字符串
在项目中经常有生成随机字符串的需求，比如验证接口签名、验证码(Node.js发送短信或邮箱验证码、生成图片验证码)，我们可以使用Javascript生成随机字符。 使用随机数从给出的可能字符中抽取合并字符串 优点是可以自定义结果中字符的取值，比如…...
Python魔法之旅-魔法方法(01)
目录 一、概述 1、定义 2、作用 二、主要应用场景 1、构造和析构 2、操作符重载 3、字符串和表示 4、容器管理 5、可调用对象 6、上下文管理 7、属性访问和描述符 8、迭代器和生成器 9、数值类型 10、复制和序列化 11、自定义元类行为 12、自定义类行为 13、类…...
介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块
npm（Node Package Manager）模块安装机制是Node.js生态系统中非常重要的一部分，它允许开发者轻松管理和安装Node.js项目的依赖项。下面我将详细介绍npm模块的安装机制，以及为什么输入npm install就可以自动安装对应的模块。 npm模…...
vue2如何父组件 对象 双向绑定子组件
对于Vue 2，你不能直接用v-model绑定对象，但可以通过在子组件内部处理value prop的变化并触发input事件来模拟这一行为。 父组件A 1<template> 2 <ComponentB v-model"item" prop-names"addressId,date,startTime,endTime&quo…...
[Android]在后台线程执行耗时操作，然后在主线程更新UI
1.Coroutines（官方推荐） Coroutines 提供了一种轻量级的线程管理方式，使得在后台线程执行任务和在主线程更新 UI 变得简单。以下是如何在 Kotlin 中使用 Coroutines 来处理耗时逻辑并更新 UI 的步骤： 添加 Coroutines 依赖: 首…...
平方回文数-第13届蓝桥杯选拔赛Python真题精选
[导读]：超平老师的Scratch蓝桥杯真题解读系列在推出之后，受到了广大老师和家长的好评，非常感谢各位的认可和厚爱。作为回馈，超平老师计划推出《Python蓝桥杯真题解析100讲》，这是解读系列的第73讲。 平方回文数&#…...
 2D旋转位置编码)
位置编码(三) 2D旋转位置编码
Rotary Position Embedding for Vision Transformer https://arxiv.org/abs/2403.13298 Transformer升级之路：4、二维位置的旋转式位置编码 https://kexue.fm/archives/8397 Transformer升级之路：17、多模态位置编码的简单思考 https://kexue.fm/archive…...
1、pikachu靶场之xss钓鱼复现
一、复现过程 1、payload <script src"http://127.0.0.1/pkxss/xfish/fish.php"></script> 将这段代码插入到含有储存xss的网页上，如下留言板 2、此时恶意代码已经存入数据库，并存在网页中，当另一个用户打开这个网页…...
弘君资本炒股技巧：股票定向增发是什么意思？是好是坏？
股票定向增发是指已上市的公司向指定的组织或者个人投资者额外发行股份募集资金的融资方法，发行价格为发行前某一阶段的平均价的必定比例，增发的价格不得低于前二十个买卖日股票均价的80％。 例如，个股定增前二十个买卖股票平均价为…...
vue3项目使用pinia状态管理器----通俗易懂
1、首先安装pinia yarn add pinia # 或使用npm npm install pinia 2、在项目的src目录下新建store文件夹，然后store目录下新建index.js / index.ts ： 我这里是index,js import { createPinia } from "pinia"// 创建 Pinia 实例 const pinia …...
零基础学Java第二十五天之Lambda表达式
Lambda表达式 简介 Lambda是一个匿名函数(方法)， 允许把函数作为一个方法的参数 。利用Lambda表达式可以写出更简洁、更灵活的代码。作为一种更紧凑的代码风格，使Java的语言表达能力得到了提升。一般都是优化匿名内部类 基础语法 无参数、无返回值的抽…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
MySQL账号权限管理指南：安全创建账户与精细授权技巧
在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号？ 最小权限原则…...