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

web第二次作业

news 2025/11/13 14:42:28

代码如下

<!DOCTYPE html>
<html>
<head>
    <!-- 设置页面的字符编码为utf-8，确保能正确显示各种字符 -->
    <meta charset="utf-8">
    <title></title>
<style>
    /* 全局样式设置 */
    *{
        /* 将所有元素的外边距设置为0%，去除默认的外边距 */
        margin: 0%;
        /* 将所有元素的内边距设置为0%，去除默认的内边距 */
        padding: 0%;
    }
 
    /* 菜单的样式设置，通过id选择器定位到id为menu的元素 */
    #menu{
        /* 设置菜单的背景颜色为蓝色 */
        background-color: blue;
        /* 设置菜单的宽度为整个浏览器窗口的宽度，即100% */
        width: 100%;
        /* 设置菜单的高度为40像素 */
        height: 40px;
    }
 
    /* 菜单项的样式设置，通过类选择器定位到具有item类的元素 */
   .item{
        /* 使菜单项向左浮动，实现水平排列 */
        float: left;
        /* 设置每个菜单项的宽度为100像素 */
        width: 100px;
        /* 设置每个菜单项的高度为40像素，与菜单高度一致 */
        height: 40px;
        /* 设置行高为40像素，使菜单项内的文本垂直居中 */
        line-height: 40px;
        /* 设置文本在菜单项内水平居中对齐 */
        text-align: center;
        /* 设置菜单项的定位方式为相对定位，以便后续进行更精确的位置调整 */
        position: relative;
        /* 设置菜单项的文本颜色为浅灰色 */
        color: lightgrey;
    }
 
    /* 当鼠标悬停在菜单项上时的样式变化 */
   .item:hover{
        /* 将菜单项的背景颜色改为黑色 */
        background-color:black;
        /* 将菜单项的文本颜色改为金色 */
        color: gold;
    }
 
    /* 容器的样式设置，通过id选择器定位到id为container的元素 */
    #container{
        /* 设置容器的宽度为720像素 */
        width: 720px;
        /* 设置容器在浏览器窗口中水平居中，通过自动计算左右外边距实现 */
        margin: auto;
    }
 
    /* 下拉菜单内部每个子项的样式设置，通过类选择器定位到具有down_menu类的元素下的div子元素 */
   .down_menu>div{
        /* 设置下拉菜单内部子项的背景颜色为蓝色 */
        background-color: blue;
        /* 设置下拉菜单内部子项的文本颜色为白色 */
        color:white;
    }
 
    /* 下拉菜单的整体样式设置，通过类选择器定位到具有down_menu类的元素 */
   .down_menu{
        /* 设置下拉菜单的背景颜色为金色 */
        background-color: gold;
        /* 初始时将下拉菜单设置为不显示 */
        display: none;
        /* 设置下拉菜单的定位方式为绝对定位，以便精确控制其在页面中的位置 */
        position: absolute;
    }
 
    /* 当鼠标悬停在菜单项上时，显示对应的下拉菜单，并设置其位置和尺寸 */
   .item:hover>.down_menu{
        /* 将下拉菜单设置为显示状态 */
        display: block;
        /* 设置下拉菜单的宽度为100像素，与菜单项宽度一致 */
        width: 100px;
        /* 设置下拉菜单的高度为40像素 */
        height: 40px;
        /* 设置下拉菜单的左边距为0像素，使其与对应的菜单项左对齐 */
        left: 0px;
        /* 设置下拉菜单的上边距为40像素，使其出现在对应的菜单项下方 */
        top: 40px;
    }
</style>
</head>
<body>
    <div id="menu">
        <div id="container">
            <div class="item">游戏资料
                <div class="down_menu">
                    <div>游戏下载</div>
                    <div>新手指引</div>
                    <div>资料库</div>
                    <div>开发者基地</div>
                </div>
            </div>
            <div class="item">商城/合作
                <div class="down_menu">
                    <div>点券充值</div>
                    <div>周边商城</div>
                    <div>道聚城</div>
                    <div>网吧特权</div>
                    <div>电竞小说</div>
                </div>
            </div>
            <div class="item">社区互动
                <div class="down_menu">
                    <div>视频中心</div>
                    <div>官方微博</div>
                </div>
            </div>
            <div class="item">赛事官网
                <div class="down_menu">
                    <div>全球总决赛</div>
                    <div>全国高校联赛</div>
                </div>
            </div>
            <div class="item">自助系统
                <div class="down_menu">
                    <div>封号查询</div>
                    <div>账号注销</div>
                    <div>信誉分查询</div>
                    <div>服务器状态查询</div>
                    <div>转区系统</div>
                </div>
            </div>
            <div class="item">在线客服
                <div class="down_menu">
                    <div>联系客服</div>
                    <div>消息中心</div>
                    <div>意见反馈</div>
                    <div>举报中心</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

运行结果

相关文章：

web第二次作业

代码如下 <!DOCTYPE html> <html> <head> <!-- 设置页面的字符编码为utf-8&#xff0c;确保能正确显示各种字符 --> <meta charset"utf-8"> <title></title> <style> /* 全局样式设置 */ *{ …...

编程日记 2024/11/7 14:01:50

大模型技术讲解：大模型参数微调（大模型微调）

转自 秋色稻田公众号 这篇文章讲讲大模型的参数微调&#xff0c;参数微调&#xff08;Fine-tuning&#xff09;是一种机器学习技术&#xff0c;用于调整大型预训练模型的参数&#xff0c;以大模型适应特定应用场景。这种方法通常用于自然语言处理&#xff08;NLP&#xff09;…...

编程日记 2024/11/7 14:00:49

测试自动化如何和业务流程结合？

测试自动化框架固然重要&#xff0c;但是最终自动化的目的都是为了业务服务的。 那测试自动化如何对业务流程产生积极影响&#xff1f; 业务流程的重要性 测试自动化项目并非孤立存在&#xff0c;其生命周期与被测试的应用程序紧密相关。项目的价值在于被整个开发团队所使用&a…...

编程日记 2024/11/7 13:59:48

Python进阶之IO操作

文章目录 一、文件的读取二、文件内容的写入三、之操作文件夹四、StringIO与BytesIO 一、文件的读取 在python里面&#xff0c;可以使用open函数来打开文件&#xff0c;具体语法如下&#xff1a; open(filename, mode)filename&#xff1a;文件名&#xff0c;一般包括该文件所…...

编程日记 2024/11/7 13:58:47

ubuntu如何卸载colmap

如果你是通过源码编译并安装的 COLMAP&#xff0c;可以按照以下步骤手动卸载&#xff1a; 1. **查找安装路径**&#xff1a; 检查 COLMAP 安装时的路径&#xff08;通常是 /usr/local&#xff09;。 2. **删除二进制文件**&#xff1a; 删除已安装的 COLMAP 可执行文…...

编程日记 2024/11/7 13:57:45

【comfyui教程】ComfyUI即将迎来全新界面：升级体验就在11月15日

前言 ComfyUI迎来全新界面&#xff1a;升级体验就在11月15日 想象一下&#xff0c;拥有一个更直观、更智能的用户界面&#xff0c;不再需要在繁杂的设置中摸索。这不再只是梦想&#xff01;从2024年11月15日起&#xff0c;ComfyUI将正式启用新UI (Beta UI)作为默认界面&#…...

编程日记 2024/11/7 13:56:43

Leecode热题100-104.二叉树的最大深度

给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a;root [1,null,2] 输出…...

编程日记 2024/11/7 13:52:38

深度学习中的 Dropout：原理、公式与实现解析

8. dropout 深度学习中的 Dropout&#xff1a;原理、公式与实现解析 在神经网络训练中&#xff0c;模型往往倾向于“记住”训练数据的细节甚至噪声&#xff0c;导致模型在新数据上的表现不佳&#xff0c;即过拟合。为了解决这一问题&#xff0c;Dropout 应运而生。通过在训练…...

编程日记 2024/11/7 13:50:36

【大数据学习 | HBASE】habse的表结构

在使用的时候hbase就是一个普通的表&#xff0c;但是hbase是一个列式存储的表结构&#xff0c;与我们常用的mysql等关系型数据库的存储方式不同&#xff0c;mysql中的所有列的数据是按照行级别进行存储的&#xff0c;查询数据要整个一行查询出来&#xff0c;不想要的字段也需要…...

编程日记 2024/11/7 13:49:35

完成程序《大奖赛评分B》

学习目标&#xff1a; 使用代码完成程序《大奖赛评分B》 题目&#xff1a; 如今许多歌手大奖赛评分时&#xff0c;为了体现公平&#xff0c;在评委给出分数后统计平均得分时&#xff0c;都会去掉最高分和最低分。编写程序&#xff0c;读入评委打分&#xff08;分数都是大于0的…...

编程日记 2024/11/7 13:45:32

K8S篇（基本介绍）

目录 一、什么是Kubernetes&#xff1f; 二、Kubernetes管理员认证&#xff08;CKA&#xff09; 1. 简介 2. 考试难易程度 3. 考试时长 4. 多少分及格 5. 考试费用 三、Kubernetes整体架构 Master Nodes 四、Kubernetes架构及和核心组件 五、Kubernetes各个组件及功…...

编程日记 2024/11/7 13:42:28

linux alsa-lib snd_pcm_open函数源码分析（三)

欢迎直接到博客 linux alsa-lib snd_pcm_open函数源码分析&#xff08;三) 系列文章其他部分: linux alsa-lib snd_pcm_open函数源码分析&#xff08;一) linux alsa-lib snd_pcm_open函数源码分析&#xff08;二) linux alsa-lib snd_pcm_open函数源码分析&#xff08;四…...

编程日记 2024/11/7 13:40:25

基于ssm的个人健康管理系统

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…...

编程日记 2024/11/7 13:39:24

Debian下载ISO镜像的方法

步骤 1&#xff1a;访问Debian官方网站 打开你的网络浏览器&#xff0c;在地址栏中输入 https://www.debian.org/ 并回车&#xff0c;这将带你到Debian的官方网站。 步骤 2&#xff1a;导航到下载页面 在Debian官方网站的首页上&#xff0c;找到并点击“Download Debian”或类…...

编程日记 2024/11/7 13:37:22

大厂面试真题-简单说说线程池接到新任务之后的操作流程

线程池在接到新任务后的操作流程通常遵循以下步骤&#xff0c;这些步骤确保了任务的高效管理和执行。 一、判断当前线程状态 线程池首先会判断当前是否存在空闲线程&#xff0c;即没有正在执行任务且未被标记为死亡的线程。 有空闲线程&#xff1a;如果存在空闲线程&#xf…...

编程日记 2024/11/7 13:36:20

「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用

自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件&#xff0c;鸿蒙应用能够提高代码的可维护性&#xff0c;并简化复杂布局的构建。本篇将介绍如何创建自定义组件&#xff0c;如何向组件传递数据&#xff0c;以及如何在不同页面间复用这些组件。 关键…...

编程日记 2024/11/7 13:34:18

C++关键字：mutable

文章目录 一、mutable1.mutable修饰非静态的成员变量2.mutable用于lambda表达式3.mutable不能修饰的变量&#xff1a;静态变量、const变量 一、mutable 1.mutable修饰非静态的成员变量 1.mutable仅能修饰类中的非静态的成员变量。不能修饰全局变量、局部变量、静态变量、常量…...

编程日记 2024/11/7 13:32:15

Agent 智能体开发框架选型指南

编者按&#xff1a; 本文通过作者的实践对比发现&#xff0c;框架的选择应基于项目具体需求和团队特点&#xff0c;而不是简单追求某个特定框架。不同框架各有优势&#xff1a; 无框架方案实施最为简单直接&#xff0c;代码结构清晰&#xff0c;适合理解智能体原理&#xff0c;…...

编程日记 2024/11/7 13:31:14

基于Zynq FPGA对雷龙SD NAND的测试

一、SD NAND 特征 1.1 SD 卡简介 雷龙的 SD NAND 有很多型号&#xff0c;在测试中使用的是 CSNP4GCR01-AMW 与 CSNP32GCR01-AOW。芯片是基于 NAND FLASH 和 SD 控制器实现的 SD 卡。具有强大的坏块管理和纠错功能&#xff0c;并且在意外掉电的情况下同样能保证数据的安全。 …...

编程日记 2024/11/7 13:30:13

AOSP沙盒android 11

这里介绍一下aosp装系统 什么是aosp AOSP&#xff08;Android Open Source Project&#xff09;是Android操作系统的开源版本。 它由Google主导&#xff0c;提供了Android的源代码和相关工具&#xff0c;供开发者使用和修改。 AOSP包含了Android的核心组件和API&#xff0c;使…...

编程日记 2024/11/7 13:29:12

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/11/10 16:48:53

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2025/11/9 21:18:48

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/11/8 9:16:25

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/11/10 2:40:50

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

编程新知 2025/11/12 16:40:01

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2025/11/12 21:37:12

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/9/21 23:43:15

网页端 js 读取发票里的二维码信息（图片和PDF格式）

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…...

编程新知 2025/11/11 2:09:50