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

web第二次作业

news 2025/12/28 17:32:34

代码如下

<!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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/12/15 15:15:10

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/12/10 21:51:45

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/12/17 16:37:05

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/12/20 16:13:31

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/12/21 14:10:00