导航栏小案例

news/2024/11/14 7:22:34/
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/news/1546426.html

相关文章

引入了JUnit框架 却报错找不到:java.lang.ClassNotFoundException

完整报错如下&#xff1a; Internal Error occurred. org.junit.platform.commons.JUnitException: TestEngine with ID junit-jupiter failed to discover tests at org.junit.platform.launcher.core.EngineDiscoveryOrchestrator.discoverEngineRoot(EngineDiscoveryOrc…

工程认证与Spring Boot:计算机课程管理的新探索

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于工程教育认证的计算机课程管理平台的开发全过程。通过分析基于工程教育认证的计算机课程管理平台管理的不足&#xff0c;创建了一个计算机管理基于工程教育认…

LeetCode 力扣 热题 100道(一)两数之和(C++)

两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案&#xff0c;并且你不能使用两次相同的元素。 你可以按任意顺序返回答案…

Unity 网格模型及优化

一个模型中可以包含很多网格&#xff0c;一个模型可以由多个网格组成。在Unity3D中一个网格可以由多个子网格&#xff08;Sub-Mesh)组成。 在渲染引擎的时候&#xff0c;每个子网格都要匹配一个材质球来做渲染&#xff0c;实际上一个子网格本身就是一个个普通的模型&#xff0…

(蓝桥杯C/C++)——搜索

一、回溯法 1.回溯法简介 回溯法一般使用 ** DFS(深度优先搜索) ** 实现&#xff0c;DFS是一种遍历或搜索图、树或图像等数据结构的算法&#xff0c;当然这个图、树未必要存储下来(隐式处理就是回溯法)&#xff0c;常见的是通过某种关系构造出的搜索树&#xff0c;搜索树一般…

Stable Diffusion:照片转视频插件

Stable Diffusion是一款基于人工智能技术开发的作图神器&#xff0c;它支持照片转视频的功能&#xff0c;这通常需要通过安装特定的插件来实现。以下是一些关于Stable Diffusion照片转视频插件的详细信息&#xff1a; 一、插件介绍 AnimateDiff 功能&#xff1a;AnimateDiff是…

蓝桥杯:编程爱好者的试炼场

引言 蓝桥杯全国软件和信息技术专业人才大赛&#xff08;简称 “蓝桥杯”&#xff09;是中国大陆地区一项重要的计算机编程与软件设计赛事&#xff0c;旨在为在校学生提供展示编程能力的平台&#xff0c;以促进信息技术人才的培养和软件开发产业的发展。从2010年首届比赛开始&…

计算机网络(5)

网络层 网关&#xff08;Gateway&#xff09; 网关是连接两个不同网络协议、不同体系结构的计算机网络的设备&#xff0c;可实现不 同网络之间的协议转换&#xff0c;将数据重新分组、包装和转换&#xff0c;使采用不同高层协议 的主机仍然可以互相合作&#xff0c;从而完成各种…