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

news2024/11/17 23:30:46

目录

实现效果

 代码及其解释

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%;
	}

希望能帮到您！！，

我们下次见啦~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1712260.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

白酒：新兴产区的发展与市场前景展望

白酒：新兴产区的发展与市场前景展望

云仓酒庄豪迈白酒作为新兴产区的重要代表&#xff0c;其发展与市场前景备受关注。随着消费者对白酒品质和口感的不断追求&#xff0c;新兴产区在继承传统酿造工艺的基础上&#xff0c;不断创新和发展&#xff0c;逐渐在市场上崭露头角。 首先&#xff0c;新兴产区在酿造工艺方面…
阅读更多...
[源码+搭建教程]西游伏妖篇手游_GM_单机+和朋友玩

[源码+搭建教程]西游伏妖篇手游_GM_单机+和朋友玩

为了学习和研究软件内含的设计思想和原理&#xff0c;本人花心血和汗水带来了搭建教程&#xff01;&#xff01;&#xff01; 教程不适于服架设&#xff0c;严禁服架设&#xff01;&#xff01;&#xff01;请牢记&#xff01;&#xff01;&#xff01; 教程仅限学习使用&…
阅读更多...
卧式混料机：混合设备的智慧之选

卧式混料机：混合设备的智慧之选

卧式混料机&#xff0c;顾名思义&#xff0c;是一种采用卧式结构的混合设备。它的设计精巧&#xff0c;结构紧凑&#xff0c;不仅占用空间小&#xff0c;而且操作简便&#xff0c;维护方便。与传统的立式混料机相比&#xff0c;卧式混料机在混合效率、混合均匀度以及物料适应性…
阅读更多...
Suno进阶手册 | 创作歌曲玩法全攻略！

Suno进阶手册 | 创作歌曲玩法全攻略！

Suno进阶手册：创作歌曲玩法全攻略！ 前言1. 基础模式2. 高级模式总结前言 前段时间，Suno V3 横空出世，与此前的V2相比，V3生成的作品质量明显提升！ 该说不说，对比同类型工具，Suno的体验“遥遥领先”，没有AI生成常有的机械感，歌词押韵，甚至还附带有和声、分段。 虽然…
阅读更多...
【一步一步了解Java系列】：类与对象的联系

【一步一步了解Java系列】：类与对象的联系

看到这句话的时候证明&#xff1a;此刻你我都在努力加油陌生人个人主页&#xff1a;Gu Gu Study专栏&#xff1a;一步一步了解Java 喜欢的一句话&#xff1a; 常常会回顾努力的自己&#xff0c;所以要为自己的努力留下足迹 喜欢的话可以点个赞谢谢了。 作者&#xff1a;小闭 对…
阅读更多...
6.1 Go 数组

6.1 Go 数组

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…
阅读更多...
【双层模型】分布式光伏储能系统的优化配置方法

【双层模型】分布式光伏储能系统的优化配置方法

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 程序模型参考《分布式光伏储能系统的优化配置方法》&#xff0c;分为上下层求解方式&#xff0c;上层采用粒子群算法确定储能的选址和容量方案&#xff0c;以全年购电成本、网络损耗、光伏运行成本、储能充放…
阅读更多...
2024年618网购节各大电商超级红包二维码集合

2024年618网购节各大电商超级红包二维码集合

一年一度的电商618网购节又要来了&#xff0c;下面收集了淘宝/京东/拼多多的618红包二维码&#xff0c;手机扫描或识别即可每天领红包&#xff0c;可参考好物分享中的商品下单&#xff1a; 淘宝618超级红包&#xff1a;即日起至2024.6.10&#xff0c;每天可领一次 京东618无门…
阅读更多...
idea项目一直在build

idea项目一直在build

IDEA项目一直在build的原因可能包括构建进程堆大小过小、缓存问题、依赖包下载缓慢或网络问题。12 构建进程堆大小过小&#xff1a;如果IDEA的构建进程堆大小设置得不够大&#xff0c;可能会导致构建过程缓慢或卡顿。解决方法是将构建进程堆大小参数扩大&#xff0c;例如将700…
阅读更多...
web前端框架设计第十一课-常用插件

web前端框架设计第十一课-常用插件

web前端框架设计第十一课-常用插件 一.预习笔记 1.路由的基础使用 2.动态路由 3.嵌套路由 二.课堂笔记 三.课后回顾 –行动是治愈恐惧的良药&#xff0c;犹豫拖延将不断滋养恐惧
阅读更多...
再次疾呼：一稿多投是作者的合法权利！

再次疾呼：一稿多投是作者的合法权利！

近日&#xff0c;有作者反应在收到拒稿邮件之后另投他刊&#xff0c;竟然被判定一稿多投。 出版社解释说现在大多数期刊都是使用投稿系统收稿&#xff0c;如果被退稿后马上又投稿其他期刊&#xff0c;由于时间距离太近&#xff0c;仍然会被系统判定为一稿多投的。核心期刊编辑…
阅读更多...
pikachu—exec“eval“

pikachu—exec“eval“

这是原画面 然后呢&#xff1f; 我们知道会传入到后台rce_eval.php来处理然后通过 eval()是啥? 在eval括号里面可以执行外来机器的命令 然后我们通过php的一个内置的命令 我们通过phpinfo()&#xff1b; 这是输入后的结果
阅读更多...
Figma 文件批量导出到本地的方法

Figma 文件批量导出到本地的方法

作为新一代UX设计师&#xff0c;我们应该熟练地使用市场上的许多设计软件&#xff0c;并更熟悉它们的软件功能。现在市场上的即时设计&#xff0c;作为一种在线合作设计工具&#xff0c;值得成为许多设计师的常用工具。最近&#xff0c;我了解到即时设计进行了新的功能更新&…
阅读更多...
第二十五章CSS中的技巧（导航栏、下拉列表）

第二十五章CSS中的技巧（导航栏、下拉列表）

1.CSS精灵 1.什么是CSS精灵 英文叫法 CSS sprites&#xff0c;通常被解释为“CSS图像拼合”或“CSS贴图定位”;其实就是把网页中一些背景图片整合到一张图片文件中&#xff0c;再利用css“background-image”&#xff0c; “background-repeat”,“background-position”的组…
阅读更多...
【Unity Shader入门精要 第11章】让画面动起来（二）

【Unity Shader入门精要 第11章】让画面动起来（二）

1. 顶点动画的原理 顶点动画的原理是&#xff0c;在顶点着色器中按照一定的规则或函数计算得到一段偏移量对顶点进行移动&#xff0c;最后将改变位置后的顶点变换到裁剪空间进行后续的渲染工作。 可见&#xff0c;与纹理动画只是改变从纹理中哪一部分开始显示图案不同&#x…
阅读更多...
水质预测模型精度评估实例

水质预测模型精度评估实例

研究背景 随着水资源管理需求的日益增长&#xff0c;水质预测模型的精准度成为了评估其有效性的关键因素。本文旨在通过实证研究&#xff0c;探讨自建水质预测模型的实际应用效能&#xff0c;通过与真实监测数据的比对&#xff0c;揭示模型预测精度的真实情况。 数据基础情况…
阅读更多...
【任务调度】Apache DolphinScheduler中关于全局参数设置、自定义参数、补数的介绍

【任务调度】Apache DolphinScheduler中关于全局参数设置、自定义参数、补数的介绍

Apache DolphinScheduler是一个分布式和可扩展的开源工作流协调平台&#xff0c;具有强大的DAG可视化界面。 今天在海豚调度的一个接口中想入参一个当前时间(要求格式为yyyyMMddhhmmss),找了找发现如下几种方法,给记录一下&#xff1a; 1.全局参数设置 在设置DAG图名称这一位…
阅读更多...
CTF实战分享 | RWZIP

CTF实战分享 | RWZIP

前言 首先我们要了解&#xff0c;压缩包本身并不具备隐藏信息的功能&#xff0c;但由于在CTF竞赛中&#xff0c;经常出现压缩包与隐写术结合在一起的题目&#xff0c;所以我们需要掌握在CTF竞赛中有关 ZIP 压缩包题目的常见题型及分析手段。 读者福利 | CSDN大礼包&#xff1a…
阅读更多...
css设置文字在固定宽度中等距分开（仅限于单行文本）

css设置文字在固定宽度中等距分开（仅限于单行文本）

一、要实现的效果&#xff1a; 二、代码 要在CSS中设置文本在一个固定宽度的容器中等距分开&#xff0c; 可以使用text-align: justify;属性&#xff0c;它可以让文本两端对齐&#xff0c;看起来就像是等距分开的。 但是要注意&#xff0c;单独使用text-align:justify;只能对单…
阅读更多...
Midjourney如何控制光照？提示词灵感来了！

Midjourney如何控制光照？提示词灵感来了！

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 Midjourney如何控制光照&#xff1f;提示词灵感来了&#xff01;文章目录 前言总结 前言 Midjourney v6 已经更新好久了&#xff0c;你知道有哪些可以控制光照效果的关键词吗…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023