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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【语义分割|代码解析】CMTFNet-2: CNN and Multiscale Transformer Fusion Network 用于遥感图像分割!

【语义分割|代码解析】CMTFNet-2: CNN and Multiscale Transformer Fusion Network 用于遥感图像分割&#xff01; 【语义分割|代码解析】CMTFNet-2: CNN and Multiscale Transformer Fusion Network 用于遥感图像分割&#xff01; 文章目录 【语义分割|代码解析】CMTFNet-2: …

基于 Python 的 Django 框架开发的电影推荐系统

项目简介&#xff1a;本项目是基于 Python 的 Django 框架开发的电影推荐系统&#xff0c;主要功能包括&#xff1a; 电影信息爬取&#xff1a;获取并更新电影数据。数据展示&#xff1a;提供电影数据的列表展示。推荐系统&#xff1a;基于协同过滤算法实现个性化推荐。用户系…

高并发场景下的性能测试方法!

在现代互联网应用中&#xff0c;高并发场景下的性能测试显得尤为重要。无论是电商平台的秒杀活动&#xff0c;还是社交应用的突发流量&#xff0c;都需要确保系统能够在高并发情况下稳定运行。本文将详细介绍高并发场景下的性能测试方法&#xff0c;并提供具体的方案和实战演练…

超萌!HTMLCSS:超萌卡通熊猫头

效果演示 创建了一个卡通风格的熊猫头 HTML <div class"box"><div class"head"><div class"head-copy"></div><div class"ears-left"></div><div class"ears-right"></di…

springboot高校运动会管理系统-计算机毕业设计源码33814

摘要 本文旨在介绍基于Spring Boot框架和HTML技术开发的高校运动会管理系统。通过该系统&#xff0c;学校能够更高效地组织和管理校园内的各项体育赛事&#xff0c;提升运动会的组织效率和参与体验。系统整合了Spring Boot的强大功能和HTML的灵活性&#xff0c;为高校运动会管理…

Linux特种文件系统--tmpfs文件系统

tmpfs类似于RamDisk&#xff08;只能使用物理内存&#xff09;&#xff0c;使用虚拟内存&#xff08;简称VM&#xff09;子系统的页面存储文件。tmpfs完全依赖VM&#xff0c;遵循子系统的整体调度策略。说白了tmpfs跟普通进程差不多&#xff0c;使用的都是某种形式的虚拟内存&a…

森利威尔SL2516D 耐压60V内置5V功率MOS 支持PWM LED恒流驱动器芯片

一、基本特性 型号&#xff1a;SL2516D封装&#xff1a;ESOP8工作频率&#xff1a;140kHz驱动MOS管&#xff1a;内置 二、电气特性 输入电压范围&#xff1a;8V~100V&#xff08;注意&#xff0c;虽然问题中提到耐压60V&#xff0c;但根据官方信息&#xff0c;其实际耐压范围…

力扣287.寻找重复数

1.哈希表法 #include<stdio.h> #include<stdlib.h> int func(int *arr,int len) {int *hash(int *)malloc(sizeof(int)*len);for(int i0;i<len;i){if(hash[arr[i]]1){free(hash);return arr[i];}hash[arr[i]]1;}free(hash);return -1; }int main() {int arr[5]{…

服务器数据恢复—DELL EqualLogic PS6100系列存储简介及如何收集故障信息?

DELL EqualLogic PS6100系列存储采用虚拟ISCSI SAN阵列&#xff0c;支持VMware、Solaris、Linux、Mac、HP-UX、AIX操作系统&#xff0c;提供全套企业级数据保护和管理功能&#xff0c;具有可扩展性和容错功能。DELL EqualLogic PS6100系列存储介绍&#xff1a; 1、上层应用基础…

【笔面试常见题:三门问题】用条件概率、全概率和贝叶斯推导

1. 问题介绍 三门问题&#xff0c;又叫蒙提霍尔问题&#xff08;Monty Hall problem&#xff09;&#xff0c;以下是蒙提霍尔问题的一个著名的叙述&#xff0c;来自Craig F. Whitaker于1990年寄给《展示杂志》&#xff08;Parade Magazine&#xff09;玛丽莲沃斯莎凡特&#x…

C++ | Leetcode C++题解之第526题优美的排列

题目&#xff1a; 题解&#xff1a; class Solution { public:int countArrangement(int n) {vector<int> f(1 << n);f[0] 1;for (int mask 1; mask < (1 << n); mask) {int num __builtin_popcount(mask);for (int i 0; i < n; i) {if (mask &am…

新160个crackme - 089-fornixcrackme1

运行分析 需要破解Name和Serial PE分析 ASM程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 ida搜索找到关键字符串 动态分析关键函数&#xff0c;逻辑如上图&#xff0c;通过Name计算得到char_1&#xff0c;亦或后对比Serial&#xff0c;相等则返回成功信息 分析…

【测试平台】打包 子节点ios环境配置

主要记录如何配置ios打包机环境&#xff0c;ios环境相对来说比较简单的&#xff0c;研发配置好证书可以本地打包&#xff0c;接入流程比较简单了。 打包机系统升级 1.升级mac OS系统 一般升级好几个小时&#xff0c;可以晚上下载好 2.下载xcode并安装 Appstroe 下载安装xco…

【AIGC】深入探索『后退一步』提示技巧:激发ChatGPT的智慧潜力

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 &#x1f4af;前言&#x1f4af;“后退一步”技巧介绍技巧目的 &#x1f4af;“后退一步”原理“后退一步”提示技巧与COT和TOT的对比实验验证 &#x1f4af;如何应用“后退一步”策略强调抽象思考引导提…

Java后端面试内容总结

先讲项目背景&#xff0c;再讲技术栈模块划分&#xff0c; 讲业务的时候可以先讲一般再特殊 为什么用这个&#xff0c;好处是什么&#xff0c;应用场景 Debug发现问题/日志发现问题. QPS TPS 项目单元测试&#xff0c;代码的变更覆盖率达到80%&#xff0c;项目的复用性高…

TI-Trends in Immunotherapy

文章目录 一、征稿简介二、重要信息三、服务简述四、投稿须知五、联系咨询 一、征稿简介 二、重要信息 期刊官网&#xff1a;https://ais.cn/u/3eEJNv 三、服务简述 Trends in Immunotherapy 是一本开放获取的同行评审期刊&#xff0c;涵盖与所有基于免疫系统的领域相关的各…

springboot-starter 整合feignClient

项目结构图 引入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.o…

Python+Appium+Pytest+Allure自动化测试框架-安装篇

文章目录 安装安装ADT安装NodeJs安装python安装appium安装Appium Server&#xff08;可选&#xff09;安装Appium-Inspector&#xff08;可选&#xff09;安装allure安装pytest PythonAppiumPytestAllure框架的安装 Appium是一个开源工具&#xff0c;是跨平台的&#xff0c;用于…

【Spring IoC】容器和IoC介绍以及IoC程序开发的优势

文章目录 Spring 是什么什么是容器什么是 IoCIoC 介绍传统程序开发解决方法IoC 程序开发IoC 的优势 在前面中&#xff0c;我们学习了 Spring Boot 和 Spring MVC 的开发&#xff0c;可以完成一些基本功能的开发了&#xff0c;但是什么是 Spring 呢&#xff1f;Spring&#xff0…

【眼疾识别】Python+深度学习+人工智能+算法模型训练+TensorFlow+CNN卷积神经网络算法

一、项目介绍 开发眼疾识别系统时&#xff0c;我们选择Python作为核心编程语言&#xff0c;并依托深度学习技术&#xff0c;特别是利用TensorFlow框架来构建ResNet50卷积神经网络。该系统通过训练包含四种眼疾图像的数据集——白内障、糖尿病性视网膜病变、青光眼和正常眼睛—…