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

web第二次作业

news 2025/7/8 21:17:06

代码如下

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

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/7/7 8:38:21

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/7/8 0:54:17

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/7/8 0:34:21

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/7/8 15:28:22

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/7/8 19:06:27

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/6/20 18:33:23

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/7/7 6:27:52

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/6/20 11:13:34

SpringAI实战：ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

编程新知 2025/7/6 16:11:09

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/6/25 4:46:18