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

CSS之布局系列--顶部导航栏二级菜单居中展示

news 2026/3/28 6:53:03

原文网址：CSS之布局系列--顶部导航栏二级菜单居中展示_IT利刃出鞘的博客-CSDN博客

简介

本文介绍CSS将顶部导航栏居中展示并支持二级菜单下拉展示的方法。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>知识星球</title><style>* {margin: 0;padding: 0;}.top-container {background-color: #406ff9;height: 60px;}.menu-container {text-align: center;}.logo-container {position: absolute;color: white;line-height: 58px;font-weight: bold;margin-left: 10px;}.logo {font-size: 20px;margin-left: 10px;}.first-menu-container {display: inline-block;list-style: none;}.first-menu {line-height: 60px;text-align: center;float: left;}.second-menu {float: none;background-color: #406ff9;}.second-menu a:hover {color: white;background-color: #0033fc;}.second-menu-container {position: absolute;list-style: none;display: none;}.first-menu:hover ul {display: block;}a {text-decoration: none;color: white;display: block;padding: 0 15px;white-space: nowrap;font-weight: bold;}a:hover {background-color: #0033fc;}</style>
</head>
<body>
<div class="top-container"><span class="logo-container"><span class="logo">IT天空</span></span><div class="menu-container"><ul class="first-menu-container"><li class="first-menu"><a href="#">首页</a></li><li class="first-menu"><a href="#">后端</a><ul class="second-menu-container"><li class="second-menu"><a href="#">Java基础</a></li><li class="second-menu"><a href="#">多线程</a></li><li class="second-menu"><a href="#">Spring</a></li></ul></li><li class="first-menu"><a href="#">前端</a><ul class="second-menu-container"><li class="second-menu"><a href="#">HTML</a></li><li class="second-menu"><a href="#">CSS</a></li><li class="second-menu"><a href="#">JavaScript</a></li></ul></li><li class="first-menu"><a href="#">运维</a><ul class="second-menu-container"><li class="second-menu"><a href="#">Linux</a></li><li class="second-menu"><a href="#">Docker</a></li></ul></li><li class="first-menu"><a href="#">关于本站</a><ul class="second-menu-container"><li class="second-menu"><a href="#">作者介绍</a></li><li class="second-menu"><a href="#">github</a></li></ul></li></ul></div></div>
</body>
</html>

测试

相关文章：

CSS之布局系列--顶部导航栏二级菜单居中展示

原文网址&#xff1a;CSS之布局系列--顶部导航栏二级菜单居中展示_IT利刃出鞘的博客-CSDN博客 简介 本文介绍CSS将顶部导航栏居中展示并支持二级菜单下拉展示的方法。 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-…...

编程日记 2023/10/19 7:23:45

算法通关村第九关黄金挑战——透彻理解二叉树中序遍历的应用

大家好&#xff0c;我是怒码少年小码。 上一篇讲了二分查找&#xff0c;今天我们看看它的难度扩展。 有序数组转为二叉搜索树 LeetCode 108&#xff1a;给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 高度平衡 二叉搜索树。 高…...

编程日记 2023/10/19 7:22:44

【算法设计与分析zxd】第7章 贪心法

贪心算法的设计技术 • 每一步的判断都是一个当前最优的抉择&#xff0c;这个抉择计算设计的好坏&#xff0c;决定了算法的成败。 • 多步判断过程&#xff0c;最终的判断序列对应于问题的最优解 • 适用于 能够 由 局部最优达到全局最优的优化问题 【比如 求最短哈密顿回路的…...

编程日记 2023/10/19 7:21:42

CCF CSP认证 历年题目自练Day35

题目一 试题编号&#xff1a; 202305-1 试题名称&#xff1a; 重复局面 时间限制&#xff1a; 1.0s 内存限制&#xff1a; 512.0MB 问题描述&#xff1a; 题目背景 国际象棋在对局时&#xff0c;同一局面连续或间断出现3次或3次以上&#xff0c;可由任意一方提出和棋。 问题…...

编程日记 2023/10/19 7:20:41

应用crash时发送广播及信息

一、环境 高通865 Android 10 二、情景 应用崩溃时&#xff0c;将奔溃信息以广播的形式发送 二、代码位置 frameworks/base/core/java/com/android/internal/os/RuntimeInit.java private static class KillApplicationHandler implements Thread.UncaughtExceptionHandle…...

编程日记 2023/10/19 7:18:40

【亲测可用】图像目标识别入门-利用笔记本电脑摄像头识别人脸标记出来采用深度学习模型实现

更高的精度和准确性&#xff0c;可以考虑使用基于深度学习的人脸检测和识别方法&#xff0c;例如基于人脸特征的人脸检测器和具有高识别率的人脸识别模型。下面是使用基于深度学习的人脸检测和识别方法的代码示例&#xff1a; 首先&#xff0c;安装必要的库和模型&#xff1a;…...

编程日记 2023/10/19 7:17:39

数字孪生技术：煤矿运输的未来革命

煤矿是我国能源工业的重要支柱&#xff0c;然而&#xff0c;煤矿运输过程中一直存在着诸多问题&#xff0c;如安全隐患、能源浪费、效率低下等&#xff0c;这不仅对煤矿行业的可持续发展构成威胁&#xff0c;也对环境造成负面影响。因此&#xff0c;数字孪生技术应运而生&#…...

编程日记 2023/10/19 7:16:37

一些bug总结

今天被几个小问题和bug折磨了一天&#xff0c;来总结一下… 权限问题 用vscode连接服务器&#xff0c;如果是在root用户连接的情况下新建的文件/文件夹&#xff0c;然后切换到别的用户的时候去写的代码 可能会遇到各种问题 解决方案是更改文件或文件夹的所有权。这可以通过使用…...

编程日记 2023/10/19 7:15:36

第三章 内存管理 九、基本分段存储管理方式

目录 一、概括 二、什么是分段 三、段表 四、地址转换 五、分段和分页的对比 六、总结 一、概括 基本分段存储管理方式是一种操作系统的内存管理方式&#xff0c;采用这种方式&#xff0c;将进程所需的内存分成若干个段&#xff0c;每个段都可以单独进行管理和保护。 具…...

编程日记 2023/10/19 7:14:35

轻重链剖分+启发式合并专题

Codeforces-741D(Arpa’s letter-marked tree and Mehrdad’s Dokhtar-kosh paths) 一棵根为1 的树&#xff0c;每条边上有一个字符&#xff08;a-v共22种&#xff09;。 一条简单路径被称为Dokhtar-kosh当且仅当路径上的字符经过重新排序后可以变成一个回文串。 求每个子树中…...

编程日记 2023/10/19 7:13:34

IRC/ML：金融智能风控—信贷风控场景简介、两大场景(贷款场景+信用卡场景)、信用卡评分模型设计、反欺诈检测技术的简介、案例应用之详细攻略

IRC/ML：金融智能风控—信贷风控场景简介、两大场景(贷款场景+信用卡场景)、信用卡评分模型设计、反欺诈检测技术的简介、案例应用之详细攻略 目录 信贷风控简介 信贷风控两大场景...

编程日记 2023/10/19 7:12:33

【学习笔记】RabbitMQ01：基础概念认识以及快速部署

参考资料 RabbitMQ官方网站RabbitMQ官方文档噼咔噼咔-动力节点教程 文章目录 一、认识RabbitMQ1.1 消息中间件&#xff08;MQ Message Queue 消息队列1.2 主流的消息中间件1.3 MQ的应用场景1.3.1 异步处理1.3.2 系统解耦1.3.3 流量削峰1.3.4 日志处理 二、RabbitMQ运行环境搭建…...

编程日记 2023/10/19 7:11:32

Java数据结构之第二十章、手撕平衡AVL树

目录 一、二叉平衡树 1.1二叉搜索树回顾以及性能分析 1.1.1二叉搜索树的概念 1.2二叉搜索树的查找 1.3二叉树查询性能分析 二、AVL树 2.1AVL树的概念 2.2AVL树节点的定义 2.3AVL树的插入 2.4AVL树的旋转 2.4.1新节点插入较高左子树的左侧---右单旋 2.4.2新节点插入较…...

编程日记 2023/10/19 7:10:31

SQL 在PostgreSQL中使用SQL将多行连接成数组

在本文中&#xff0c;我们将介绍如何使用SQL语言在PostgreSQL数据库中将多行数据连接成一个数组。在开发和分析应用程序时&#xff0c;我们经常需要将数据库中的多个行合并为一个&#xff0c;以便更方便地进行处理和分析。PostgreSQL提供了一种名为ARRAY_AGG的聚合函数&#xf…...

编程日记 2023/10/19 7:09:29

Ajax技术实现前端开发

一、原生AJAX 1.1AJAX 简介 AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML。 通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 1.2XML 简介 XML 可扩…...

编程日记 2023/10/19 7:08:28

WebMail:网页注册成功发送邮件

1.特别注意 isELIgnored"false" 如果没有这个El表达式无法识别 2.pre work pox.xml <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>3.8.1</version><scope>…...

编程日记 2023/10/19 7:07:27

Electron之集成vue+vite开发桌面程序

在electron中集成vue开发桌面程序 使用我们之前创建的electron项目 创建vue 项目 命令行进入electron根目录 执行下面命令 npm create vitelatest vue -- --template vue这样就创建了一个vue项目&#xff0c;文件名是vue&#xff0c;命令行进入vue下&#xff0c;执行下面命…...

编程日记 2023/10/19 7:06:26

pycharm社区版创建Django项目的一种方式

pycharm社区版创建Django项目 pycharm创建New project安装django&#xff0c;如果安装过可略过安装完成后查看安装情况生成Django项目需要的文件这里注意生成语句后面的 . 不可以省略 生成文件后&#xff0c;框架搭建完成&#xff0c;配置启动我这里在配置完后&#xff0c;报了…...

编程日记 2023/10/19 7:05:26

Python configparser模块使用教程

文章目录 .ini 拓展名文件简介.ini 文件格式1. 节2. 参数3. 注解 configparser 模块简介configparser 模块的初始化和读取获取 ini 中所有 section获取 section 下的 key获取 section 下的 value获取指点section的所用配置信息修改某个key&#xff0c;如果不存在则会出创建检查…...

编程日记 2023/10/19 7:04:25

Kotlin + 协程 + Room 结合使用

文章目录 前言集成Room结合协程的使用总结 一、前言, 现在kotlin 是趋势&#xff0c;那必然就要用到协程&#xff0c;还有就是随着jetpack 的发力&#xff0c;带来了很多好用的库&#xff0c;比如今天提到Room&#xff0c;是一个类似greenDao的数据库。它不但支持kotlin协程…...

编程日记 2023/10/19 7:03:24

小程序签名组件避坑指南：从米字格绘制到图片生成的完整流程

小程序签名组件开发实战&#xff1a;从米字格绘制到图片生成的深度解析 在小程序开发中&#xff0c;签名功能的需求日益增多&#xff0c;无论是电子合同签署、教育类应用的字帖练习&#xff0c;还是个性化签名设计&#xff0c;都需要一个稳定高效的签名组件。本文将深入探讨如何…...

编程新知 2026/3/28 6:48:50

SU-03T模块烧录固件保姆级教程：从‘智能公元’配置到串口下载（避坑‘路径中文’和‘重新上电’）

SU-03T固件烧录实战指南&#xff1a;从智能公元配置到串口下载全流程解析 第一次拿到SU-03T语音模块时&#xff0c;那种既兴奋又忐忑的心情我至今记忆犹新。作为一款高性能离线语音识别模块&#xff0c;SU-03T确实能带来无限可能&#xff0c;但固件烧录这个看似简单的步骤却让不…...

编程新知 2026/3/28 6:44:49

三维点云到二维图像投影的实战指南：从原理到代码实现

1. 三维点云投影二维图像的核心原理 第一次接触三维点云投影时&#xff0c;我也被各种坐标系转换绕得头晕。后来发现只要抓住一个核心&#xff1a;三维到二维的投影本质上是坐标系转换的接力赛。想象你拿着手机拍照&#xff0c;物体从现实世界到手机屏幕的旅程&#xff0c;就是…...

编程新知 2026/3/28 6:32:46

Wan2.2-I2V-A14B与数据库联动：自动化生成电商商品动态详情页视频

Wan2.2-I2V-A14B与数据库联动&#xff1a;自动化生成电商商品动态详情页视频 1. 电商视频制作的痛点与机遇 电商平台每天都有大量新品上架&#xff0c;传统的商品详情页视频制作方式面临巨大挑战。一个中型电商平台每月可能新增上千款商品&#xff0c;如果每款商品都需要人工…...

编程新知 2026/3/28 5:58:13

React-PDF自定义字体粗细终极指南：实现精确文本字重控制的完整教程

React-PDF自定义字体粗细终极指南&#xff1a;实现精确文本字重控制的完整教程 【免费下载链接】react-pdf &#x1f4c4; Create PDF files using React 项目地址: https://gitcode.com/gh_mirrors/re/react-pdf React-PDF是一个功能强大的库&#xff0c;允许开发者使用…...

编程新知 2026/3/28 5:46:08

dynamic-datasource JVM调优：提升多数据源性能的7个实用技巧

dynamic-datasource JVM调优&#xff1a;提升多数据源性能的7个实用技巧 【免费下载链接】dynamic-datasource dynamic datasource for springboot 多数据源 动态数据源 主从分离 读写分离 分布式事务 项目地址: https://gitcode.com/gh_mirrors/dy/dynamic-datasource …...

编程新知 2026/3/28 5:26:03

ReAct Agent：新手程序员必看！收藏这款融合推理与行动的AI智能体框架，轻松入门大模型应用开发

ReAct框架通过结合推理与行动&#xff0c;解决了传统提示工程的局限性&#xff0c;构建出能主动思考、决策并执行复杂任务的智能体。本文详细介绍了ReAct的核心设计思想&#xff0c;包括推理模块的动态思考链和错误回溯机制&#xff0c;以及行动模块的工具集成和环境状态感知。…...

编程新知 2026/3/28 4:05:49

避开这些坑！群晖+acme.sh申请Let’s Encrypt证书的完整指南

群晖NAS上零踩坑申请Lets Encrypt证书的终极实践手册 每次看到浏览器地址栏那个刺眼的"不安全"提示就浑身难受&#xff1f;作为群晖深度用户&#xff0c;我花了三个周末时间踩遍了所有证书申请的坑。从idn指令缺失到nss验证失败&#xff0c;从API调用超时到证书自动更…...

编程新知 2026/3/28 2:43:06

从SuperGlue到LoFTR：无检测器特征匹配是如何“卷”出来的？技术演进深度解读

从SuperGlue到LoFTR&#xff1a;无检测器特征匹配的技术革命与范式迁移 在计算机视觉领域&#xff0c;特征匹配一直是三维重建、SLAM、图像配准等任务的核心基础。传统方法如SIFT、ORB等基于手工设计的特征检测与描述算法&#xff0c;在过去二十年里主导了这一领域。然而&#…...

编程新知 2026/3/28 2:02:19

嵌入式串口协议中间件：轻量级SerHelp库设计与应用

1. 项目概述nahs-Bricks-Lib-SerHelp是 NAHS&#xff08;North American Home System&#xff09;生态中面向嵌入式砖块化&#xff08;Brick-based&#xff09;硬件平台的一套轻量级串行通信辅助库。该库不提供底层驱动实现&#xff0c;而是聚焦于串口协议层的工程化封装与通用…...

编程新知 2026/3/28 1:35:46