导航栏小案例

实现类似于这样的效果

<!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.rhkb.cn/news/462959.html

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

相关文章

ASP .NET CORE 6 在项目中集成WatchDog开源项目

概念 WatchDog是一个开源的项目&#xff0c;可以实现对.Net 应用程序和API实现实时应用日志和性能监控平台。可以实现实时记录和查看应用程序中的消息、事件、HTTP请求和响应&#xff0c;以及运行时捕获的异常&#xff0c;有效帮助开发人员去排查应用异常&#xff0c;提升开发效…

四、k8s快速入门之Kubernetes资源清单

kubernetes中的资源 ⭐️ k8s中所有的内容都抽象为资源&#xff0c;资源实列化之后&#xff0c;叫做对象 1️⃣名称空间级别 ⭐️ kubeadm在执行k8s的pod的时候会在kube-system这个名称空间下执行&#xff0c;所以说当你kubectl get pod 的时候是查看不到的查看的是默认的po…

无人机之集群控制方法篇

无人机的集群控制方法涉及多个技术和策略&#xff0c;以确保多架无人机能够协同、高效地执行任务。以下是一些主要的无人机集群控制方法&#xff1a; 一、编队控制方法 领航-跟随法&#xff08;Leader-Follower&#xff09; 通过设定一架无人机作为领航者&#xff08;长机&am…

给大家推荐一本书《GPT时代人类再腾飞》

大家好&#xff0c;我是袁庭新。给大家推荐一本书——《GPT时代人类再腾飞》。 先给大家介绍一位顶级大佬——里德霍夫曼。他是著名互联网企业家&#xff0c;领英联合创始人&#xff1b;知名风险投资者&#xff0c;Open AI早期投资人&#xff1b;《纽约时报》畅销书作者、播客…

法律智能助手:开源NLP系统助力法律文件高效审查与检索

一、系统概述 思通数科AI平台是一款融合了自然语言处理和多标签分类技术的开源智能文档分类工具&#xff0c;特别适用于法律行业。平台采用深度学习的BERT模型来进行特征提取与关系抽取&#xff0c;实现了精准的文档分类和检索。用户可以在线训练和标注数据&#xff0c;使系统…

redis模板的应用:自定义redisTemplate序列化规则 (RedisTemplate和StringRedisTemplate)

文章目录 引言I 基础知识redis对key和value使用序列化方式RedisTemplate<Object, Object>自定义redisTemplate序列化规则RedisTemplate<String, String>II 存储自定义对象redisTemplate存储自定义对象StringRedisTemplate存储自定义对象引言 StringRedisTemplate只…

SQL之排名窗口函数RANK()、ROW_NUMBER()、DENSE_RANK() 和 NTILE() 的区别(SQL 和 Hive SQL 都支持)

现有一张student 表&#xff0c;表中包含id、uname、age、score 四个字段&#xff0c;如下所示&#xff1a; 该表的数据如下所示&#xff1a; 一、ROW_NUMBER() 1、概念 ROW_NUMBER() 为结果集中的每一行分配一个唯一的连续整数&#xff0c;编号从 1 开始。‌ 该函数按照指…

【开源免费】基于SpringBoot+Vue.JS网上超市系统(JAVA毕业设计)

本文项目编号 T 037 &#xff0c;文末自助获取源码 \color{red}{T037&#xff0c;文末自助获取源码} T037&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

mac电脑设置crontab定时任务,以及遇到的问题解决办法

crontab常用命令 crontab -u user&#xff1a;用来设定某个用户的crontab服务&#xff1b; crontab file&#xff1a;file是命令文件的名字,表示将file做为crontab的任务列表文件并载入crontab。如果在命令行中没有指定这个文件&#xff0c;crontab命令将接受标准输入&#xf…

基于vue+neo4j 的中药方剂知识图谱可视化系统

前言 历时一周时间&#xff0c;中药大数据R02系统中药开发完毕&#xff0c;该系统通过scrapy工程获取中药数据&#xff0c;使用python pandas预处理数据生成知识图谱和其他相关数据&#xff0c;利用vuespringbootneo4jmysql 开发系统&#xff0c;具体功能请看本文介绍。 简要…

Qt的程序如何打包详细教学

生成Release版的程序 在打包Qt程序时&#xff0c;我们需要将发布程序需要切换为Release版本&#xff08;Debug为调试版本&#xff09;&#xff0c;编译器会对生成的Release版可执行程序进行优化&#xff0c;使生成的可执行程序会更小。 debug版本 debug版本是一种开发过程中的…

AUTOSAR从入门到精通-BswM模块(二)

目录 前言 算法原理 BswM接口端口 BswM功能描述 模式仲裁 仲裁规则(Arbitration Rules) 模式仲裁来源 模式仲裁过程 模式条件(ModeCondition) 逻辑表达式(LogicExpressions) 模式控制 模式处理 操作执行 模式控制过程 模式控制基本流程 BswM Interfaces and …

【C++题解】1970. 判断是什么字符

欢迎关注本专栏《C从零基础到信奥赛入门级&#xff08;CSP-J&#xff09;》 问题&#xff1a;1970. 判断是什么字符 类型&#xff1a;字符串、字符型 题目描述&#xff1a; 从键盘读入一个字符&#xff0c;有可能是大写字母、小写字母、数字中的一种&#xff0c;请编程判断&…

2. Flink快速上手

文章目录 1. 环境准备1.1 系统环境1.2 安装配置Java 8和Scala 2.121.3 使用集成开发环境IntelliJ IDEA1.4 安装插件2. 创建项目2.1 创建工程2.1.1 创建Maven项目2.1.2 设置项目基本信息2.1.3 生成项目基本框架2.2 添加项目依赖2.2.1 添加Flink相关依赖2.2.2 添加slf4j-nop依赖2…

年底和2025年黄金预测:至少3000

黄金价格瞄准$3,000.00关口 过去两年&#xff0c;现货黄金价格一直处于强劲的牛市&#xff0c;从2022年9月的低点上涨了将近70%&#xff0c;达到本周创下的每金衡盎司$2,790.00的历史高点&#xff0c;几乎触及心理关口$2,800.00。 即使出现明显的回撤&#xff0c;只要2024年的…

Halcon区域分割之分水岭分割法

现实中我们见到过有山有湖的景象&#xff0c;那么一定是水绕山、山围水的情形。当然可在需要的时候人工构筑分水岭&#xff0c;以防集水盆之间的互相穿透。而区分高山与水的界线以及湖与湖之间的间隔&#xff0c;就是分水岭。 分水岭分割法是一种基于拓扑理论的数学形态…

LLM | 论文精读 | CVPR | SelTDA:将大型视觉语言模型应用于数据匮乏的视觉问答任务

论文标题&#xff1a;How to Specialize Large Vision-Language Models to Data-Scarce VQA Tasks? Self-Train on Unlabeled Images! 作者&#xff1a;Zaid Khan, Vijay Kumar BG, Samuel Schulter, Xiang Yu, Yun Fu, Manmohan Chandraker 期刊&#xff1a;CVPR 2023 DOI…

基于JavaWeb+MySQL实现口算题卡

爱 math 口算题卡 1. 总体要求 综合运用软件工程的思想&#xff0c;协同完成一个软件项目的开发&#xff0c;掌软件工程相关的技术和方法&#xff1b;组成小组进行选题&#xff0c;通过调研完成项目的需求分析&#xff0c;并详细说明小组成员的分工、项目的时间管理等方面。根…

Linux云计算 |【第五阶段】CLOUD-DAY8

主要内容&#xff1a; 掌握DaemonSet控制器、污点策略&#xff08;NoSchedule、Noexecute&#xff09;、Job / CronJob资源对象、掌握Service服务、服务名解析CluterIP&#xff08;服务名自动发现&#xff09;、&#xff08;Nodeport、Headless&#xff09;、Ingress控制器 一…

机器学习1_机器学习定义——MOOC

一、机器学习定义 定义一 1959年Arthur Samuel提出机器学习的定义&#xff1a; Machine Learning is Fields of study that gives computers the ability to learn without being explicitly programmed. 译文&#xff1a;机器学习是这样的领域&#xff0c;它赋予计算机学习的…