html练习2

news2024/11/25 7:09:58
实现下列图片的效果

代码:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#menu {
				background-color: #0c0048;
				width: 100%;
				height: 50px;
				margin: auto;
			}

			.item {
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: white;
				position: relative;
			}

			.item:hover {
				background-color: red;
				color: gold;

			}

			#container {
				width: 720px;
				margin: auto;
			}

			.down_menu {
				background-color: #cccccc;
				display: none;
				position: absolute;
			}

			.down_menu>div {
				color: black;
			}

			.item:hover>.down_menu {
				display: block;
				width: 100px;
				left: 0px;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div id="container">
				<div class="item">游戏1
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏2
					<div class="down_menu">
						<div>游戏插件</div>
						<div>游戏聊天</div>
						<div>邀请好友</div>
						<div>自定义房间</div>
					</div>
				</div>
				<div class="item">游戏3
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏4
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏5
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏6
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏7
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
效果展示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2234397.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机视觉常用数据集Cityscapes的介绍、下载、转为YOLO格式进行训练

我在寻找Cityscapes数据集的时候花了一番功夫&#xff0c;因为官网下载需要用公司或学校邮箱邮箱注册账号&#xff0c;等待审核通过后才能进行下载数据集。并且一开始我也并不了解Cityscapes的格式和内容是什么样的&#xff0c;现在我弄明白后写下这篇文章&#xff0c;用于记录…

Java | Leetcode Java题解之第523题连续的子数组和

题目&#xff1a; 题解&#xff1a; class Solution {public boolean checkSubarraySum(int[] nums, int k) {int m nums.length;if (m < 2) {return false;}Map<Integer, Integer> map new HashMap<Integer, Integer>();map.put(0, -1);int remainder 0;fo…

MATLAB计算朗格朗日函数

1. 朗格朗日函数介绍 朗格朗日函数&#xff08;Lagrange function&#xff09;通常用于优化问题&#xff0c;尤其是带有约束的优化问题。其一般形式为&#xff1a; 其中&#xff1a; f(x) 是目标函数。 是约束条件。 是拉格朗日乘子。 为了编写一个MATLAB代码来计算和绘制…

手机的ip地址是固定的吗?多角度深入探讨

手机的IP地址是否固定&#xff0c;这一问题涉及到网络连接、技术配置以及运营商策略等多个方面。为了全面解答这一问题&#xff0c;我们需要从多个角度进行深入探讨。 首先&#xff0c;明确IP地址&#xff08;Internet Protocol Address&#xff09;的基本概念。IP地址是互联网…

宠物空气净化器推荐,哪款除毛好、噪音小?希喂、352性能对比

大家都有选购宠物空气净化器时在各大品牌里挑挑拣拣、费时费力的体验吧...本以为只要多看点推荐&#xff0c;确定了品牌&#xff0c;就能买到好用的产品&#xff0c;不过实际情况却并非如此。 身为宠物博主&#xff0c;之前用过不少宠物空气净化器&#xff0c;20年还写过几篇测…

`掌握Python-PPTX,让PPt制作变得轻而易举!`

文章目录 掌握Python-PPTX&#xff0c;让PPT制作变得轻而易举&#xff01;背景介绍python-pptx 是什么&#xff1f;如何安装 python-pptx&#xff1f;简单库函数使用方法应用场景常见Bug及解决方案总结 掌握Python-PPTX&#xff0c;让PPT制作变得轻而易举&#xff01; 背景介绍…

【python】OpenCV—Connected Components

文章目录 1、任务描述2、代码实现3、完整代码4、结果展示5、涉及到的库函数6、参考 1、任务描述 基于 python opencv 的连通分量标记和分析函数&#xff0c;分割车牌中的数字、号码、分隔符 cv2.connectedComponentscv2.connectedComponentsWithStatscv2.connectedComponents…

ENSP (虚拟路由冗余协议)VRRP配置

VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;是一种用于提高网络可用性和可靠性的协议。它通过在多个路由器之间共享一个虚拟IP地址&#xff0c;确保即使一台路由器发生故障&#xff0c;网络依然能够正常运行&#xff0c;防止…

【JS学习】08. web API-事件进阶

Web APIs - 第3天 进一步学习 事件进阶&#xff0c;实现更多交互的网页特效&#xff0c;结合事件流的特征优化事件执行的效率 掌握阻止事件冒泡的方法理解事件委托的实现原理 事件流 事件流是对事件执行过程的描述&#xff0c;了解事件的执行过程有助于加深对事件的理解&…

Hadoop完全分布式环境搭建步骤

【图书介绍】《Spark SQL大数据分析快速上手》-CSDN博客 大数据与数据分析_夏天又到了的博客-CSDN博客 本文介绍Hadoop完全分布式环境搭建方法&#xff0c;这个Hadoop环境用于安装配置Spark。假设读者已经安装好Visual Box 7.0.6虚拟环境与一个CentOS 7虚拟机&#xff08;如果…

H7-TOOL的CAN/CANFD助手增加帧发送成功标识支持, 继续加强完善功能细节

2.27版本固件正式携带此功能&#xff0c;包括之前做的负载率检测和错误信息展示也将集成到这个版本固件中。 对于接收&#xff0c;我们可以直接看到效果&#xff0c;而发送不行&#xff0c;所以打算在发送的地方展示下发送成功标识。CAN发送不像串口&#xff0c;需要等待应答后…

ssm+jsp653基于Javaweb的网上花店系统的设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…

操作系统如何执行,他究竟是个什么

硬件中断 所谓硬件中断&#xff0c;其实也是一个执行信号的过程&#xff0c;具体流程如下。 具体要执行什么方法&#xff0c;只需要拿着对应的信号访问中断向量表就就行比如 N就是像cpu发的中断信号。 时钟中断 但是这里面有一个叫做时钟源的东西&#xff0c;其实也是一个外…

音视频入门基础:FLV专题(24)——FFmpeg源码中,获取FLV文件视频信息的实现

一、引言 通过FFmpeg命令可以获取到FLV文件的视频压缩编码格式、色彩格式&#xff08;像素格式&#xff09;、分辨率、码率、帧率信息&#xff1a; 而由《音视频入门基础&#xff1a;FLV专题&#xff08;9&#xff09;——Script Tag简介》和《音视频入门基础&#xff1a;FLV专…

JMM内存模型(面试回答)

1.什么是JMM JMM就是Java内存模型(java memory model)。因为在不同的硬件生产商和不同的操作系统下&#xff0c;内存的访问有一定的差异&#xff0c;所以会造成相同的代码运行在不同的系统上会出现各种问题。所以Java内存模型(JMM)屏蔽掉各种硬件和操作系统的内存访问差异&…

【stablediffusion又出王炸】IC-Light,可以操控图像生成时的光照,光照难题终于被解决了!

IC-Light代表Impose Constant Light,是一个控制图像照明的项目。可以操控图像生成时的光照&#xff0c;对内容主体重新打光生成符合新背景环境光照的图片。这下商品图合成这种需要最大程度保持原有主体 ID 需求的最大的问题解决了。 Controlnet, Layerdiffusion, IC-light… …

创建线程时传递参数给线程

在C中&#xff0c;可以使用 std::thread 来创建和管理线程&#xff0c;同时可以通过几种方式将参数传递给线程函数。这些方法包括使用值传递、引用传递和指针传递。下面将对这些方法进行详细讲解并给出相应的代码示例。 1. 值传递参数 当你创建线程并希望传递参数时&#xff…

react使用Fullcalendar 实战用法

使用步骤请参考&#xff1a;react使用Fullcalendar 卡片式的日历&#xff1a; 需求图&#xff1a; 卡片式的日历&#xff0c;其实我是推荐 antd的&#xff0c;我两个都写了一下都能实现。 antd 的代码&#xff1a; antd的我直接用的官网示例&#xff1a;antd 日历示例 i…

使用 RabbitMQ 有什么好处?

大家好&#xff0c;我是锋哥。今天分享关于【使用 RabbitMQ 有什么好处&#xff1f;】面试题。希望对大家有帮助&#xff1b; 使用 RabbitMQ 有什么好处&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RabbitMQ 是一种流行的开源消息代理&#xff0c;广…

基于MATLAB的农业病虫害识别研究

matlab有处理语音信号的函数wavread&#xff0c;不过已经过时了&#xff0c;现在处理语音信号的函数名称是audioread选取4.wav进行处理&#xff08;只有4的通道数为1&#xff09; 利用hamming窗设计滤波器 Ham.m function [N,h,H,w] Ham(fp,fs,fc)wp 2*pi*fp/fc;ws 2*pi*…