导航栏小案例

server/2024/11/14 1:33:47/
htmledit_views">

实现类似于这样的效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>导航栏</title><style>*{margin: 0;padding: 0;}.div1{width: 100%;height: 60px;/* border: 1px solid blue; */background-color:rgb(255, 182, 193);}.div12{text-align: center;}.div2{width: 100px;height: 60px;/* border: 1px solid red; */display: inline-block;text-align: center;line-height: 60px;position: relative;}.div2_menu{width: 100px;height: 200px;background-color:rgb(255, 200, 127);display: none;position: absolute;}.div2_menu>div{text-align: center;height: 50px;}.div2:hover>.div2_menu{display: block;}</style></head><body><div class="div1"><div class="div12"><div class="div2">游戏1<div class="div2_menu"><div>游戏下载</div><div>游戏交易</div><div>游戏外挂</div><div>游戏攻略</div></div></div><div class="div2">游戏2<div class="div2_menu"><div>游戏下载</div><div>游戏交易</div><div>游戏外挂</div><div>游戏攻略</div></div></div><div class="div2">游戏3<div class="div2_menu"><div>游戏下载</div><div>游戏交易</div><div>游戏外挂</div><div>游戏攻略</div></div></div><div class="div2">游戏4<div class="div2_menu"><div>游戏下载</div><div>游戏交易</div><div>游戏外挂</div><div>游戏攻略</div></div></div><div class="div2">游戏5<div class="div2_menu"><div>游戏下载</div><div>游戏交易</div><div>游戏外挂</div><div>游戏攻略</div></div></div><div class="div2">游戏6<div class="div2_menu"><div>游戏下载</div><div>游戏交易</div><div>游戏外挂</div><div>游戏攻略</div></div></div><div class="div2">游戏7<div class="div2_menu"><div>游戏下载</div><div>游戏交易</div><div>游戏外挂</div><div>游戏攻略</div></div></div></div></div></body>
</html>

 实现效果


http://www.ppmy.cn/server/141727.html

相关文章

Spring Boot中的自动装配机制

文章目录 1. 什么是自动装配&#xff1f;2. 自动装配是如何工作的&#xff1f;3. 如何开启自动装配&#xff1f;4. 自动装配的注意事项5. 结语推荐阅读文章 在Spring Boot的世界里&#xff0c;自动装配&#xff08;Auto-configuration&#xff09;就像春风拂面&#xff0c;轻轻…

Spring Boot——日志介绍和配置

1. 日志的介绍 在前面的学习中&#xff0c;控制台上打印出来的一大堆内容就是日志&#xff0c;可以帮助我们发现问题&#xff0c;分析问题&#xff0c;定位问题&#xff0c;除此之外&#xff0c;日志还可以进行系统的监控&#xff0c;数据采集等 2. 日志的使用 在程序中获取日…

原生 JavaScript基本内容和常用特性详解

原生 JavaScript&#xff08;也称为 Vanilla JS&#xff09;指的是不依赖于任何框架或库的纯 JavaScript。以下是原生 JavaScript 的一些基本内容和常用特性详解。 目录 1. 数据类型 2. 变量声明 3. 控制结构 4. 函数 5. 对象和数组 6. 事件处理 7. DOM 操作 8. Promi…

《JVM第10课》内存溢出(OOM)排查过程

文章目录 常用命令1. jps2. jconsole3. jstat4. jmap 工具1.jvisualvm 排查OOM的方法其实很简单很简单。 如果能找到拋OOM的日志&#xff0c;可以在日志里看到是哪一行抛出的OOM异常。如果找不到日志&#xff0c;那么处理方式是导出Java进程的内存快照&#xff0c;然后用工具查…

Axure安装步骤及免费替代方案

Axure作为一款强大的原型设计工具&#xff0c;因其丰富的功能而受到设计师的青睐。它包括动态面板、复杂表格编辑、协同设计和高保真原型设计等&#xff0c;这些功能可以简化复杂的设计流程&#xff0c;提高团队效率。本文将介绍Axure的安装方法&#xff0c;并探索一款新兴的Ax…

JavaScript中的二叉树排序你了解吗?

写在前面 在计算机科学中&#xff0c;二叉树是一种常见的数据结构&#xff0c;用于存储和组织数据。二叉树排序&#xff08;Binary Tree Sort&#xff09;是一种基于二叉搜索树的排序算法。它的基本思想是将待排序的元素插入到二叉搜索树中&#xff0c;然后通过中序遍历二叉搜…

SobarQube实现PDF报告导出

文章目录 前言一、插件配置二、使用步骤1.新生成一个Token2.将拷贝的Token加到上文中执行的命令中3.查看报告 三、友情提示总结 前言 这篇博文是承接此文 .Net项目在Windows中使用sonarqube进行代码质量扫描的详细操作配置 描述如何导出PDF报告 众所周知&#xff0c;导出PDF功…

软件设计师-计算机体系结构分类

计算机体系结构分类 Flynn分类法 根据不同的指令流数据流组织方式分类单指令流但数据流SISD,单处理器系统单指令多数据流SIMD&#xff0c;单指令流多数据流是一种采用一个控制器来控制多个处理器&#xff0c;同时对一组数据&#xff08;又称“数据矢量”&#xff09;中的每一…