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

构建一个导航栏web

news 2026/3/27 23:47:08 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}#menu{background-color:purple;width: 100px;height: 50px;}.item{float: left;/* 浮动标签可以让块标签，处于同一行 */width: 100px;height: 50px;line-height: 50px;text-align: center;color: white;position: relative;}.item:hover{background-color: red;}#container{width: 720px;margin: auto;}.down>div{color:black;}.down{background-color:#ccc;display: none;position: absolute;}.item:hover>.down{display: block;width:100px;top: 50px;left: 0px;}</style></head><body><div id="menu"><div id="container"><div class="item">游戏1<div class="down"><!-- 要是需要多个就不能用id，id只能用一次，复制多个得用class --><div>下载</div><div>交易</div><div>外挂</div><div>攻略</div></div></div><div class="item">游戏2<div class="down"><!-- 要是需要多个就不能用id，id只能用一次，复制多个得用class --><div>下载</div><div>交易</div><div>外挂</div><div>攻略</div></div></div><div class="item">游戏3<div class="down"><!-- 要是需要多个就不能用id，id只能用一次，复制多个得用class --><div>下载</div><div>交易</div><div>外挂</div><div>攻略</div></div></div><div class="item">游戏4<div class="down"><!-- 要是需要多个就不能用id，id只能用一次，复制多个得用class --><div>下载</div><div>交易</div><div>外挂</div><div>攻略</div></div></div><div class="item">游戏5<div class="down"><!-- 要是需要多个就不能用id，id只能用一次，复制多个得用class --><div>下载</div><div>交易</div><div>外挂</div><div>攻略</div></div></div><div class="item">游戏6<div class="down"><!-- 要是需要多个就不能用id，id只能用一次，复制多个得用class --><div>下载</div><div>交易</div><div>外挂</div><div>攻略</div></div></div><div class="item">游戏7<div class="down"><!-- 要是需要多个就不能用id，id只能用一次，复制多个得用class --><div>下载</div><div>交易</div><div>外挂</div><div>攻略</div></div></div><div class="item">游戏2</div><div class="item">游戏3</div><div class="item">游戏4</div><div class="item">游戏5</div><div class="item">游戏6</div><div class="item">游戏7</div></div></div></body>
</html>

代码如上；

代码实现效果如下所示:

 

73ee1c0781b84423a9087abc0ba961ff.png

 

相关文章：

构建一个导航栏web

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{margin: 0;padding: 0;}#menu{background-color:purple;width: 100px;height: 50px;}.item{float: left;/* 浮动标签可以让块标签&#xff0c…...

编程日记 2024/11/6 16:18:41

【Linux】Linux安全与密钥登录指南

在使用Linux服务器时&#xff0c;确保服务器的安全至关重要。本文将为你介绍一些关键的Linux安全措施&#xff0c;包括开启密钥登录、查看登录日志、限制登录IP以及查看系统中能够登录的账号。以下内容适合小白用户&#xff0c;通过简单的操作就能有效提升服务器的安全性。 目录…...

编程日记 2024/11/6 16:17:39

数据采集之scrapy框架

本博文使用基本框架完成搜房网或者其他网站的数据爬取&#xff08;重点理解 scrapy 框架的构建过程&#xff0c;使用回调函数&#xff0c;完成数据采集和数据处理&#xff09; 包结构目录如下图所示&#xff1a; 主要代码&#xff1a; &#xff08;sfw.py&#xff09; # -*- …...

编程日记 2024/11/6 16:14:36

ReactPress—基于React的免费开源博客CMS内容管理系统

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;感谢Star。 ![ReactPress](https://i-blog.csdnimg.cn/direct/0720f155edaa4eadba796f4d96d394d7.png#pic_center ReactPress 是使用React开发的开源发布平台&…...

编程日记 2024/11/6 16:12:33

Android 解决飞行模式下功耗高，起伏波动大的问题

根据现象抓log如下&#xff1a; 10-31 15:26:16.149066 940 3576 I android.hardware.usb1.2-service-mediatekv2: uevent_event change/devices/platform/soc/10026000.pwrap/10026000.pwrap:mt6366/mt6358-gauge/power_supply/battery 10-31 15:26:16.149245 940 3576 …...

编程日记 2024/11/6 16:08:28

2024第三次随堂测验参考答案

7-1 求一组数组中的平均数 输入10个整数&#xff0c;输出这10个整数的的平均数&#xff0c;要求输出的平均数保留2位小数 输入样例&#xff1a; 1 2 3 4 5 6 7 8 9 10 输出样例&#xff1a; 5.50 参考答案&#xff1a; #include <stdio.h> int main(){int sum 0;…...

编程日记 2024/11/6 16:07:27

期权交易策略 v0.1

一.概述 1.参考 <期权波动率与定价> 2.期权价格 标的现价100元,到期日价格可能情况如下。 价格 80 90 100 110 120 概率 20% 20% 20% 20% 20% 持有标的时,期望收益为0.如果持有100的看涨期权&#xff0c;忽略期权费&#xff0c;期望收益为(100-100)*0.2…...

编程日记 2024/11/6 16:06:26

pytorch学习：矩阵分解：奇异值分解（SVD分解）

前言 矩阵分解&#xff08;Matrix Decomposition&#xff09;是将一个矩阵分解成多个矩阵的乘积的过程&#xff0c;这种分解方法在计算、机器学习和线性代数中有广泛应用。不同的分解方式可以简化计算、揭示矩阵的内在结构或提高算法的效率。 奇异值分解 奇异值分解&#xf…...

编程日记 2024/11/6 16:02:21

接口测试用例设计的关键步骤与技巧解析！

简介 接口测试在需求分析完成之后&#xff0c;即可设计对应的接口测试用例&#xff0c;然后根据用例进行接口测试。接口测试用例的设计也需要用到黑盒测试用例设计方法&#xff0c;和测试流程与理论章节的功能测试用例设计的方法类似&#xff0c;设计过程中还需要增加与接口特…...

编程日记 2024/11/6 16:01:20

CSS画icon图标系列（一）

目录 前言&#xff1a; 一、向右箭头 1.原理&#xff1a; 2.代码实现 3.结果展示&#xff1a; 二、钟表 1.原理&#xff1a; 2.代码展示&#xff1a; 3.最终效果&#xff1a; 三、小手机 1.原理&#xff1a; 2.代码展示&#xff1a; 3.最后效果&#xff1a; 四、结…...

编程日记 2024/11/6 15:57:14

【数据结构-合法括号字符串】【华为笔试题】力扣1190. 反转每对括号间的子串

给出一个字符串 s&#xff08;仅含有小写英文字母和括号&#xff09;。 请你按照从括号内到外的顺序&#xff0c;逐层反转每对匹配括号中的字符串&#xff0c;并返回最终的结果。 注意&#xff0c;您的结果中 不应 包含任何括号。 示例 1&#xff1a; 输入&#xff1a;s “…...

编程日记 2024/11/6 15:55:12

qt QFileInfo详解

1、概述 QFileInfo是Qt框架中用于获取文件信息的工具类。它提供了与操作系统无关的文件属性&#xff0c;如文件的名称、位置&#xff08;路径&#xff09;、访问权限、类型&#xff08;是否为目录或符号链接&#xff09;等。此外&#xff0c;QFileInfo还可以获取文件的大小、创…...

编程日记 2024/11/6 15:53:09

金华迪加 现场大屏互动系统 mobile.do.php 任意文件上传漏洞复现

0x01 产品简介 金华迪加现场大屏互动系统是一种集成了先进技术和创意设计的互动展示解决方案，旨在通过大屏幕和多种交互方式，为观众提供沉浸式的互动体验。该系统广泛应用于各类活动、展览、会议等场合，能够显著提升现场氛围和参与者的体验感。 0x02 漏洞概述 金华迪加 现…...

编程日记 2024/11/6 15:51:07

探寻5G工业网关市场，5G工业网关品牌解析

随着5G技术的浪潮席卷全球&#xff0c;工业领域正经历着一场前所未有的变革。5G工业网关&#xff0c;作为连接工业设备与云端的桥梁&#xff0c;以其高速、低延迟的数据传输能力和强大的边缘计算能力&#xff0c;成为推动工业数字化转型的关键力量。那么&#xff0c;在众多5G工…...

编程日记 2024/11/6 15:50:06

RK3568开发板静态IP地址配置

1. 连接SSH MYD-LR3568 开发板设置了静态 eth0:1 192.168.0.10 和 eth1:1 192.168.1.10&#xff0c;在没有串口时调试开发板&#xff0c;可以用工具 SSH 登陆到开发板。 首先需要用一根网线直连电脑和开发板&#xff0c;或者通过路由器连接到开发板&#xff0c;将电脑 IP 手动设…...

编程日记 2024/11/6 15:49:05

element-plus table tableRowClassName 无效

官网上给的是 .el-table .warning-row {--el-table-tr-bg-color: var(--el-color-warning-light-9); } .el-table .success-row {--el-table-tr-bg-color: var(--el-color-success-light-9); } 但是 如果 加上了 scoped 这样样式是无效的 在 vue3 中用样式穿透 即可生…...

编程日记 2024/11/6 15:48:03

商务英语学习柯桥学外语到泓畅-老外说“go easy on me”是什么意思？

在口语中“go easy on sb ”这个短语是很常见的 01 go easy on me 怎么理解&#xff1f; 在口语中&#xff0c;“go easy on me”是一个非常常见的表达&#xff0c;通常表示请求对方在某方面对自己宽容一些&#xff0c;不要对自己太过苛刻或严厉。 短语&#xff08;go&#xff…...

编程日记 2024/11/6 15:47:01

【Python爬虫基础】基于 Python 的反爬虫机制详解与代码实现

基于 Python 的反爬虫机制详解与代码实现 在如今的信息时代，数据的重要性不言而喻。许多企业网站都包含着宝贵的数据，这些数据可能会被网络爬虫恶意抓取，这种行为不仅影响服务器的正常运行，还可能泄露商业机密。为了应对这种情况，网站开发人员需要了解并应用有效的反爬虫…...

编程日记 2024/11/6 15:45:59

HTB：PermX[WriteUP]

目录 连接至HTB服务器并启动靶机 1.How many TCP ports are listening on PermX? 使用nmap对靶机TCP端口进行开放扫描 2.What is the default domain name used by the web server on the box? 使用curl访问靶机80端口 3.On what subdomain of permx.htb is there an o…...

编程日记 2024/11/6 15:43:57

uniapp 整合 OpenLayers - 使用modify修改要素

import { Modify } from "ol/interaction"; 修改点、线、面的位置和形状核心代码&#xff1a; // 修改要素核心代码modifyFeature() {this.modify new Modify({source: this.lineStringLayer.getSource(),});this.map.addInteraction(this.modify);}, 完整代码&am…...

编程日记 2024/11/6 15:41:55

高性能指纹特征提取开源方案：FingerJetFX OSE架构解析与实现指南

高性能指纹特征提取开源方案&#xff1a;FingerJetFX OSE架构解析与实现指南 【免费下载链接】FingerJetFXOSE Fingerprint Feature Extractor; the initial contribution by DigitalPersona is MINEX Compliant (SDK 3F). 项目地址: https://gitcode.com/gh_mirrors/fi/Fing…...

编程新知 2026/3/27 21:52:01

著名学者、顶尖大学教授近期失联

点击下方卡片&#xff0c;关注“CVer”公众号AI/CV重磅干货&#xff0c;第一时间送达点击进入—>【顶会/顶刊】投稿交流群添加微信号&#xff1a;CVer2233&#xff0c;小助手拉你进群&#xff01;扫描下方二维码&#xff0c;加入CVer学术星球&#xff01;可以获得最新顶会/顶…...

编程新知 2026/3/27 21:21:48

SWF逆向工程标准化文档：JPEXS Free Flash Decompiler实施指南

SWF逆向工程标准化文档&#xff1a;JPEXS Free Flash Decompiler实施指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款强大的SWF逆向工程工具&…...

编程新知 2026/3/27 21:11:46

python基于微信小程序的直播带货商品数据分析系统的爬虫可视化

目录需求分析与系统架构设计微信小程序数据爬取方案数据存储与清洗数据分析与可视化系统集成与部署注意事项项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析与系统架构设计 明确系统目标为爬取微信小程序直播带货商品数…...

编程新知 2026/3/27 20:45:38

TikTok零/低播放突围：跨境账号实战破局指南

图片来源&#xff1a;TK云大师0播放或低播放是TikTok跨境从业者的高频痛点——行业数据显示&#xff0c;超68%新手账号遇初始零播放&#xff0c;45%带货账号因持续低播放停摆。耗时制作的内容无人问津&#xff0c;既耗资源又乱节奏。结合实操经验&#xff0c;本文从排查、挽救、…...

编程新知 2026/3/27 20:21:23

KMS_VL_ALL_AIO激活工具完全指南：从问题诊断到长效管理

KMS_VL_ALL_AIO激活工具完全指南&#xff1a;从问题诊断到长效管理 【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 如何诊断Windows/Office激活失败的核心原因&#xff1f; 1.1 激活失败的三大…...

编程新知 2026/3/27 19:08:50

从零开始：如何为你的深度学习项目选择最合适的开源数据集

从零开始&#xff1a;如何为你的深度学习项目选择最合适的开源数据集 当你站在深度学习项目的起点&#xff0c;面对琳琅满目的开源数据集时&#xff0c;如何做出明智的选择往往决定了项目的成败。数据集不仅是模型训练的"原材料"&#xff0c;更是影响最终性能的关键变…...

编程新知 2026/3/27 18:02:06

语义分割竞赛必备：5种Loss函数组合效果对比（含Dice+Focal Loss调参指南）

语义分割竞赛进阶&#xff1a;5种损失函数组合实战评测与调参策略 在Kaggle等数据竞赛中&#xff0c;语义分割任务的性能提升往往取决于损失函数的巧妙选择与组合。不同于常规分类任务&#xff0c;多类别像素级预测需要处理极端类别不平衡、边界模糊等独特挑战。本文将深入剖析…...

编程新知 2026/3/27 17:48:04

Souliss嵌入式状态同步框架：轻量级去中心化智能家居通信实践

1. Souliss 智能家居网络框架深度解析&#xff1a;面向嵌入式工程师的底层通信架构实践指南Souliss 是一个专为资源受限嵌入式节点设计的轻量级、去中心化智能家居网络框架。其核心目标并非构建通用物联网平台&#xff0c;而是解决真实家庭场景中多协议共存、低功耗节点协同、边…...

编程新知 2026/3/27 16:43:31

炸穿 2026 技术圈！AI Agent 从 0 到 1 商业落地全攻略，附 Python 可跑源码 + 双场景变现

引言:“AI Agent&#xff1a;程序员效率革命的最后一公里”前言&#xff1a;还在死磕 CRUD、熬夜改 BUG、被重复研发工作榨干精力&#xff1f;2026 年的技术风口早已彻底转向 ——AI Agent&#xff0c;从华为虚拟工程师、蘑菇物联工业智能体&#xff0c;到全行业自动化落地&…...

编程新知 2026/3/27 16:35:29