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

web第二次作业

news 2025/9/15 11:46:51

代码如下

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

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/9/13 5:25:43

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/9/9 10:12:51

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/6/17 10:46:36

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/8/6 18:56:50

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/7/4 0:49:28

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/9/11 19:52:30

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/9/9 10:10:10

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/9/7 8:55:13

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2025/9/14 15:55:13