当前位置：首页 > news >正文

【html+css（大作业）】二级菜单导航栏

news 2025/11/3 20:34:58

实现效果

代码及其解释

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…...

编程日记 2024/5/28 18:05:11

算法基础之集合-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)}) **特别地,**整个有向图…...

编程日记 2024/5/28 18:02:09

Diffusion Model, Stable Diffusion, Stable Diffusion XL 详解

文章目录 Diffusion Model生成模型DDPM概述向前扩散过程前向扩散的逐步过程前向扩散的整体过程反向去噪过程网络结构训练和推理过程训练过程推理过程优化目标详细数学推导数学基础向前扩散过程反向去噪过程 Stable Diffusion组成结构运行流程网络结构变分自编码器 (VAE)文本编…...

编程日记 2024/5/28 18:01:08

智能奶柜：重塑牛奶零售新篇章

智能奶柜：重塑牛奶零售新篇章回忆往昔，孩童时代对送奶员每日拜访的期待，那熟悉的一幕——新鲜牛奶被细心放置于家门口的奶箱中，成为了许多人温馨的童年记忆。如今，尽管直接投递袋装牛奶的情景已不多见，但…...

编程日记 2024/5/28 18:00:07

源代码防泄密--沙盒技术安全风险分析

将原本用于防护病毒木马的沙盒（沙箱）技术，运用于源代码防泄密领域，形成沙盒防泄密系统，是否安全可行？依据沙盒防泄密基本工作原理，可从安全模型、沙箱逃逸以及与进程相关性等多个角度&#xff0…...

编程日记 2024/5/28 17:58:05

韭菜收割项目

最近在玩股票，被人当成韭菜收割了一顿。高点追涨，第二天直接跌停。以为是低点，想抄底，结果别人直接抄家，血亏!!! 作为一个程序员，还是好好敲代码赚钱好了，一步一步。想不劳而获是不可能的。我写…...

编程日记 2024/5/28 17:57:03

Unity3D输入事件

文章目录前言一、全局事件二、射线三、点选3D模型四、点击地面控制人物移动总结前言 Unity输入事件分为两类，全局触发和监听式触发。全局触发通常是运行在update在每帧进行检测，而监听式触发是被动的输入事件。一、全局事件在最新的unity中有新和旧…...

编程日记 2024/5/28 17:56:01

c++ thread detach

#include <thread> #include <iostream>using namespace std;void func() {cout << "子线程func开始执行！" << endl;//do somethingcout << "子线程func执行结束！" << endl; }int main() {cout…...

编程日记 2024/5/28 17:53:59

入门四认识HTML

目录一、HTML介绍 1、Web前端三大核心技术 2、什么是HTML 3、Html标签 4、标签属性二、HTML骨架标签三、编写HTML工具四、常用标签 1、注释 2、标题标签 3、段落标签 4、超链接标签 5、图片标签 6、换行与空格 7、布局标签 8、列表标签 9、表单…...

编程日记 2024/5/28 17:51:57

js怎么生成验证码？js生成指定长度的随机字符串

在项目中经常有生成随机字符串的需求，比如验证接口签名、验证码(Node.js发送短信或邮箱验证码、生成图片验证码)，我们可以使用Javascript生成随机字符。使用随机数从给出的可能字符中抽取合并字符串优点是可以自定义结果中字符的取值，比如…...

编程日记 2024/5/28 17:50:54

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

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

编程日记 2024/5/28 17:49:52

介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块

npm（Node Package Manager）模块安装机制是Node.js生态系统中非常重要的一部分，它允许开发者轻松管理和安装Node.js项目的依赖项。下面我将详细介绍npm模块的安装机制，以及为什么输入npm install就可以自动安装对应的模块。 npm模…...

编程日记 2024/5/28 17:48:51

vue2如何父组件对象双向绑定子组件

对于Vue 2，你不能直接用v-model绑定对象，但可以通过在子组件内部处理value prop的变化并触发input事件来模拟这一行为。父组件A 1<template> 2 <ComponentB v-model"item" prop-names"addressId,date,startTime,endTime&quo…...

编程日记 2024/5/28 17:47:50

[Android]在后台线程执行耗时操作，然后在主线程更新UI

1.Coroutines（官方推荐） Coroutines 提供了一种轻量级的线程管理方式，使得在后台线程执行任务和在主线程更新 UI 变得简单。以下是如何在 Kotlin 中使用 Coroutines 来处理耗时逻辑并更新 UI 的步骤： 添加 Coroutines 依赖: 首…...

编程日记 2024/5/28 17:46:49

平方回文数-第13届蓝桥杯选拔赛Python真题精选

[导读]：超平老师的Scratch蓝桥杯真题解读系列在推出之后，受到了广大老师和家长的好评，非常感谢各位的认可和厚爱。作为回馈，超平老师计划推出《Python蓝桥杯真题解析100讲》，这是解读系列的第73讲。平方回文数&#…...

编程日记 2024/5/28 17:45:47

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…...

编程日记 2024/5/28 17:43:45

1、pikachu靶场之xss钓鱼复现

一、复现过程 1、payload <script src"http://127.0.0.1/pkxss/xfish/fish.php"></script> 将这段代码插入到含有储存xss的网页上，如下留言板 2、此时恶意代码已经存入数据库，并存在网页中，当另一个用户打开这个网页…...

编程日记 2024/5/28 17:42:44

弘君资本炒股技巧：股票定向增发是什么意思？是好是坏？

股票定向增发是指已上市的公司向指定的组织或者个人投资者额外发行股份募集资金的融资方法，发行价格为发行前某一阶段的平均价的必定比例，增发的价格不得低于前二十个买卖日股票均价的80％。例如，个股定增前二十个买卖股票平均价为…...

编程日记 2024/5/28 17:41:42

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 …...

编程日记 2024/5/28 17:40:41

零基础学Java第二十五天之Lambda表达式

Lambda表达式简介 Lambda是一个匿名函数(方法)， 允许把函数作为一个方法的参数。利用Lambda表达式可以写出更简洁、更灵活的代码。作为一种更紧凑的代码风格，使Java的语言表达能力得到了提升。一般都是优化匿名内部类基础语法无参数、无返回值的抽…...

编程日记 2024/5/28 17:39:40

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15