CSS--导航栏案例

利用CSS制作北大官网导航栏

 

详细代码如下: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
			margin: 0;
			padding: 0;
		
			}
			#menu{
			background-color: darkred;
				width: 100%;
				height: 50px;
				
			}
			.item{
				
				/* 浮动属性可以让块标签,处于同一行 */
				float:left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				/* border: 1px solid red; */
			    text-align: center;
				color:white;
				position: relative;
			}
			.item:hover{
				background-color: red;
				
			}
			#container{
				width:720px;
				margin: auto;
			}
			.down_menu>div{
				color:black;
			}
			.down_menu{
				background-color: #cccccc;
				position: absolute;
				display: none;
				
			}
			.item:hover>.down_menu{
				display: block;
				width:100px;
				/* left:100px; */
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div id="container">
			<div class="item">北大概况
			    <div class="down_menu">
					<div>北大简介</div>
					<div>组织机构</div>
					<div>现任领导</div>
					<div>历任领导</div>
					<div>历史名人</div>
					<div>信息公开</div>
					<div>标识系统</div>
				</div>
			</div>
			<div class="item">招生
			<div class="down_menu">
				<div>本科生</div>
				<div>研究生</div>
				<div>留学生</div>
				<div>继续教育</div>
				<div>学生奖助信息</div>
				<div>暑期学校</div>
			</div>
			</div>
			<div class="item">学院与院系
			<div class="down_menu">
				<div>理学部</div>
				<div>信息与工程科学部</div>
				<div>人文学部</div>
				<div>社会科学学部</div>
				<div>经济与管理学部</div>
				<div>医学部</div>
				<div>跨学科类</div>
				<div>深圳研究生院</div>
			</div>
			</div>
            <div class="item">教育教学
			<div class="down_menu">
				<div>师资队伍</div>
				<div>部门管理</div>
				<div>课程设置</div>
				<div>海外学习</div>
				<div>课表查询</div>
				<div>华文慕课</div>
				<div>教学网</div>
				<div>证书验证</div>
				<div>燕云直播</div>
			</div>
			</div>	
			<div class="item">科学研究
			<div class="down_menu">
				<div>科研成果</div>
				<div>研究机构</div>
				<div>学术期刊</div>
				<div>游管理部门</div>
			</div>
			</div>	
			<div class="item">交流合作
			<div class="down_menu">
				<div>国际交流</div>
				<div>国内合作</div>
				<div>教育基金会</div>
				<div>港澳台交流</div>
				<div>北京论坛</div>
				<div>孔子学院</div>
			</div>
			</div>	
			<div class="item">校园生活
			<div class="down_menu">
				<div>菁菁校园</div>
				<div>讲座演出</div>
				<div>艺术生活</div>
				<div>体育健康</div>
				<div>社团活动</div>
				<div>档案馆藏</div>
				<div>管理服务</div>
				<div>校历</div>
			</div>
			</div>
		</div>
	</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

详细分析Pytorch中的transpose基本知识(附Demo)| 对比 permute

目录 前言1. 基本知识2. Demo 前言 原先的permute推荐阅读&#xff1a;详细分析Pytorch中的permute基本知识&#xff08;附Demo&#xff09; 1. 基本知识 transpose 是 PyTorch 中用于交换张量维度的函数&#xff0c;特别是用于二维张量&#xff08;矩阵&#xff09;的转置操…

2024年11月1日Day2第一部分(最详细简单有趣味的介绍2

1.CRC编解码练习 要计算CRC&#xff08;循环冗余校验&#xff09;码并验证及纠正接收到的数据&#xff0c;我们需要按照以下步骤进行&#xff1a; 步骤 1: 计算CRC校验码 信息字段代码: x1001生成多项式: G(x)x3x21&#xff0c;即 G(x)1101&#xff08;注意&#xff1a;这里…

【Kaggle | Pandas】练习5:数据类型和缺失值

文章目录 1. 获取列数据类型.dtype / .dypes2. 转换数据类型.astype()3. 获取数据为空的列 .isnull()4. 将缺少值替换并且排序.fillna()&#xff0c;.sort_values() 1. 获取列数据类型.dtype / .dypes 数据集中points列的数据类型是什么&#xff1f; # Your code here dtype …

使用Docker Swarm进行集群管理

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Docker Swarm进行集群管理 Docker Swarm简介 安装Docker 在Ubuntu上安装Docker 在CentOS上安装Docker 初始化Docker Swarm …

前端获取csv或者excel 静态数据并使用

这里我将空格全部替换成了 || 好让我变成数组&#xff0c;从而拿到每一条数据中的第一项&#xff0c;相当于excel或者csv文件的第一列的东西 axios.get("/csv/zhongxiang").then((res) > {let rows res.data.split("\n");for (let row of rows) {let c…

JavaWeb——Web入门(3/9)-HTTP协议:概述(概念、特点,HTTP协议定义,基于 TCP 协议,基于请求-响应模型)

目录 概念 特点 内容预告 概念 HTTP 协议定义&#xff1a;全称 Hyper Text Transfer Protocol&#xff0c;即超文本传输协议&#xff0c;规定了浏览器与服务器之间数据传输的规则&#xff0c;具体指客户端浏览器与服务器之间进行数据交互的数据格式。 在互联网的世界中&…

导致线上项目宕机的原因和排查手段

目录 导致线上项目宕机的原因cpu过载cpu过载怎么排查?内存溢出内存溢出怎么排查?磁盘空间不足磁盘空间不足怎么排查?网络问题网络问题怎么排查?垃圾回收(GC)问题垃圾回收(GC)问题怎么排查JVM参数配置不当JVM参数配置不当怎么排查?JVM内部错误JVM内部错误怎么排查?线程…

strace 调试追踪案例:对程序打开文件进行追踪

声明 本文版权属于笔者朋友 YangHui &#xff0c;所有资料内容均由 YangHui 提供&#xff0c;笔者只是一个转述者。 文章目录 声明1. 前言2. 问题的发生、跟踪、解决3. 小结 1. 前言 限于作者能力水平&#xff0c;本文可能存在谬误&#xff0c;因此而给读者带来的损失&#x…

(九)JavaWeb后端开发3——Servlet

目录 1.Servlet由来 2.Servlet快速入门 3.Servlet执行原理 4.Servlet生命周期 1.Servlet由来 在JaveEE API文档中对Servlet的描述是&#xff1a;可以运行在服务器端的微小程序&#xff0c;但是实际上&#xff0c;Servlet就是一个接口&#xff0c;定义了Java类被浏览器访问…

ZooKeeper 客户端API操作

文章目录 一、节点信息1、创建节点2、获取子节点并监听节点变化3、判断节点是否存在4、客户端向服务端写入数据写入请求直接发给 Leader 节点写入请求直接发给 follow 节点 二、服务器动态上下线监听1、监听过程2、代码 三、分布式锁1、什么是分布式锁?2、Curator 框架实现分布…

网关如何传递信息给微服务

前情回顾 上篇我们已经完成了网关对所有微服务请求的拦截以及JWT的登录校验。 客户端和微服务之间的桥梁--网关&#xff08;身份校验&#xff09;https://mp.csdn.net/mp_blog/creation/editor/143425484 问题引入 现在的问题是在一些微服务业务中&#xff0c;需要用到用户…

vue3学习记录-nextTick

vue3学习记录-nextTick 1. 案例场景2. 使用方法2.1 回调方式2.2 async&#xff0c;await 3.原理 1. 案例场景 聊天框实现输入内容&#xff0c;滚动条默认滚到最底部。 <template><div class"chat_box"><div class"chat_list" ref"chat…

Nature Medicine病理AI汇总|TORCH:预测未知原发部位癌症的肿瘤起源|顶刊精析·24-11-01

小罗碎碎念 今天分析Nature Medicine病理AI系列的第三篇文章——《Prediction of tumor origin in cancers of unknown primary origin with cytology-based deep learning》 这篇文章报道了一种基于细胞学图像的深度学习方法TORCH&#xff0c;用于预测未知原发部位癌症的肿瘤…

关于SQLServer在局域网内无法连接的问题的解决思路

针对SQL Server 2008在局域网内无法连接的问题&#xff0c;以下是一些详细的解决办法。我们在过程中需要用到Microsoft SQL Server 2008和Microsoft SQL Server tools 2008数据库软件中的配置管理器以及SQL Server Management Studio工具&#xff0c;入下截图所示。 一、检查网…

Ubuntu22.04 安装图形界面以及XRDP教程

一、准备环境 1.一台服务器安装系统ubuntu&#xff08;这里大部分ubuntu系统可以同用&#xff09; 2.安装的ubuntu系统未安装图形界面 二、操作步骤 1.远程ssh或者直接登录服务器命令行界面 ssh -p 远程端口 rootIP 2.更新系统软件包 sudo apt update # 更新本地的软件包…

【运动的&足球】足球运动员球守门员裁判检测系统源码&数据集全套:改进yolo11-DBBNCSPELAN

改进yolo11-FocalModulation等200全套创新点大全&#xff1a;足球运动员球守门员裁判检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.28 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示…

【特征值处理】

【特征值处理】 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 在处理机器学习的相关数据时&#xff0c;需要把特征值与目标组成二组&#xff0c;请您输出处理后的结果。 输入 第一行输入特征值向量&#xff0c;第二行输入目标向量。 输…

异步电机转差率和工作原理,异步电机和同步电机的区别

一、异步电机 异步电机的工作原理基于转差率&#xff08; s s s&#xff09;&#xff0c;而转差率的大小决定了电机是作为电动机还是发电机运行。为了深入理解其中的原理&#xff0c;我们可以从电磁感应和转速关系来分析&#xff1a; 1. 电动机工作原理 异步电机工作时&…

《双指针篇》---移动零

题目传送门 这道题可以归类为 数组划分/数组分块 。 题目制定了一个规则&#xff0c;我们可以在这个规则下&#xff0c;将数组划分为若干个区间。 这道题让我们把所有非零元素移动到左边。所有零元素移动到右边。 将数组划分为&#xff1a; 左区间非0&#xff1b; 右区间&…

龙迅#LT6211适用于HDMI转4PORT LVDS,分辨率高达4K60HZ,可提供技术支持!

1.特点HDMI1.4接收器 符合HDMI 1.4规范&#xff0c;TMDS数据速率每通道高达3.4Gbps 支持HDCP 1.4 自适应接收器均衡的PCB、电缆和连接器损耗 单/双端口/四端口LVDS发射机 兼容VESA和JEIDA标准 1/2/4可配置端口 1时钟通道和每个端口有4个可配置的数据通道 数据通道…