CSS--导航栏案例

news/2024/12/14 11:42:30/

利用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.ppmy.cn/news/1545104.html

相关文章

黑客入门教程(非常详细)从零基础入门到精通,看完这一篇就够了_黑客技术自学教程 (2)

这篇文章没有什么套路。就是一套自学理论和方向&#xff0c;具体的需要配合网络黑白去学习。毕竟是有网络才会有黑白&#xff01; 有自学也有培训&#xff01; 1.打死也不要相信什么分分钟钟教你成为大黑阔的&#xff0c;各种包教包会的教程,就算打不死也不要去购买那些所谓的…

MT4交易的平仓与强制平仓有哪几种情况

在MT4交易中&#xff0c;有哪些平仓和强制平仓的情况&#xff1f;MT4是一种保证金交易方式&#xff0c;其中保证金用于开仓和维持仓位。通过杠杆&#xff0c;投资者可以利用少量资金操作大额投资&#xff0c;从而获取相应倍数的利润。不过&#xff0c;杠杆的使用也意味着在市场…

javascript-Web APLs (四)

日期对象 用来表示时间的对象 作用&#xff1a;可以得到当前系统时间 在代码中发现了 new 关键字时&#xff0c;一般将这个操作称为 实例化 //创建一个时间对象并获取时间 //获得当前时间 const date new Date() //获得指定时间 const date new Date(2006-6-6) console.log(…

AI革命:探索智能技术如何重塑未来!

一、引言 人工智能&#xff08;AI&#xff09;在 21 世纪展现出了强大的变革力量&#xff0c;其影响力已深入社会各个领域。从自动化任务到复杂决策支持系统&#xff0c;AI 正在重塑我们的生活与工作方式。本文将深入探讨 AI 的发展历程、当前应用状态以及未来发展前景。 二、…

echart实现地图数据可视化

文章目录 [TOC](文章目录) 前言一、基本地图展示2.数据可视化 总结 前言 最近工作安排使用echarts来制作图形报表&#xff0c;记录一下我的步骤&#xff0c;需求呈现一个地图&#xff0c;地图显示标签&#xff0c;根据业务指标值给地图不同省市填充不同颜色&#xff0c;鼠标放…

Python小游戏22——吃豆豆小游戏

运行效果图 【python】代码展示 import pygame import random # 初始化Pygame pygame.init() # 屏幕尺寸 WIDTH, HEIGHT 800, 600 WIN pygame.display.set_mode((WIDTH, HEIGHT)) pygame.display.set_caption("吃豆豆小游戏") # 颜色定义 WHITE (255, 255, 255) B…

国产MCU厂商第三季度取得亮眼成绩!

【哔哥哔特导读】今年MCU市场整体回暖明显&#xff0c;多家国内MCU厂商迎来销售的显著增长&#xff0c;这也直接体现在了多家上市企业的季度报上。 作为智能设备的核心元器件&#xff0c;微控制单元(MCU)成为科技消费市场的“晴雨表”。 经历2023年MCU消费低迷和库存高压等行…

Redis 的使⽤和原理

第一章:初识 Redis 1.1盛赞 Redis Redis 是⼀种基于键值对&#xff08;key-value&#xff09;的 NoSQL 数据库&#xff0c;与很多键值对数据库不同的是&#xff0c;Redis 中的值可以是由 string&#xff08;字符串&#xff09;、hash&#xff08;哈希&#xff09;、list&…