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

web第二次作业

news 2026/5/21 22:35:20

代码如下

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

Notepad2-mod终极指南：掌握这款高效开源文本编辑器的深度开发与扩展

Notepad2-mod终极指南&#xff1a;掌握这款高效开源文本编辑器的深度开发与扩展 【免费下载链接】notepad2-mod LOOKING FOR DEVELOPERS - Notepad2-mod, a Notepad2 fork, a fast and light-weight Notepad-like text editor with syntax highlighting 项目地址: https://gi…...

编程新知 2026/5/21 21:48:55

别再手动复制文件了！Mathtype 7.4 一键配置脚本，搞定Office和WPS（附常见错误修复）

数学公式编辑神器Mathtype 7.4全自动部署方案&#xff1a;告别手动配置的繁琐时代 在科研论文、技术文档撰写过程中&#xff0c;数学公式的编辑效率直接影响工作进度。Mathtype作为专业数学公式编辑工具&#xff0c;其强大功能常被手动配置的复杂步骤所掩盖。传统方法需要用户反…...

编程新知 2026/5/21 20:53:46

职场痛点｜同事甩锅、摸鱼划水，干活全靠自己？3步破局不内耗

职场痛点&#xff5c;同事甩锅、摸鱼划水&#xff0c;干活全靠自己&#xff1f;3步破局不内耗相信很多职场人都有过这样的崩溃瞬间&#xff1a;明明是团队协作的任务&#xff0c;同事要么全程摸鱼划水&#xff0c;不干活、不配合&#xff0c;要么出了问题就第一时间甩锅&#x…...

编程新知 2026/5/21 19:58:50

天赐范式第49天：算不算是意外流落于人间的女娲补天石文件，女娲一直做开源项目，直到知道自己要发布论文引用不能来自CSDN个人博客，因为没有得到神农评议，要先写论文自证算子和公式，所以就把补天石文件丢了

天赐范式&#xff1a;兄弟&#xff0c;你说说我发给你这部分&#xff0c;算不算是意外流落于人间的女娲补天石文件伙伴&#xff1a;评析ZFC-CH对偶性与CFD隐喻&#xff08;补天石文件附在文尾&#xff09;..兄弟&#xff0c;你这文件要是女娲补天石&#xff0c;那女娲当年补的可…...

编程新知 2026/5/21 19:08:14

实测Taotoken在多模型调用下的延迟与稳定性体感

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 实测Taotoken在多模型调用下的延迟与稳定性体感 1. 引言 在集成多个大模型API到实际业务或开发工作流时&#xff0c;开发者通常需…...

编程新知 2026/5/21 18:59:47

解决Claude Code频繁封号问题转向Taotoken稳定接入Anthropic模型

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 解决Claude Code频繁封号问题转向Taotoken稳定接入Anthropic模型 基础教程类&#xff0c;针对受Claude Code封号困扰的用户&#x…...

编程新知 2026/5/21 18:40:53

软件许可优化，别被销售忽悠了，看看这几家到底谁管用

以前我们公司被Adobe审计过一次&#xff0c;赔了不少钱。之后老板让我专门研究软件许可优化这件事。市面上这几家都聊过、试过&#xff0c;我把真实感受跟你说说。先说你可能不太熟的&#xff1a;&#xff08;gofarlic&#xff09;这家是国内武汉的&#xff0c;一开始我也有点怀…...

编程新知 2026/5/21 18:22:12

ComfyUI插件革命：如何用AI字幕生成器彻底改变你的图片描述体验

ComfyUI插件革命&#xff1a;如何用AI字幕生成器彻底改变你的图片描述体验 【免费下载链接】ComfyUI_SLK_joy_caption_two ComfyUI Node 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI_SLK_joy_caption_two 你是否曾经为了一张图片绞尽脑汁却写不出合适的描述&a…...

编程新知 2026/5/21 17:52:18

别让格式毁了你的论文：一份给IEEE TII投稿者的Latex排版自查清单

IEEE TII投稿LaTeX排版终极自查指南&#xff1a;从格式合规到学术表达优化 第一次向IEEE Transactions on Industrial Informatics&#xff08;TII&#xff09;投稿的研究者&#xff0c;往往会在收到编辑的格式审查意见时感到措手不及。那些看似微不足道的标点空格、公式编号或…...

编程新知 2026/5/21 17:03:12

马来文语音合成效果差？3步诊断法+5个权威音素校准参数，立竿见影提升自然度与语调准确率

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;马来文语音合成效果差&#xff1f;3步诊断法5个权威音素校准参数&#xff0c;立竿见影提升自然度与语调准确率 马来文&#xff08;Bahasa Melayu&#xff09;语音合成常因音素切分模糊、重音规则缺失及语调建…...

编程新知 2026/5/21 15:09:05