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

20240309web前端_第二周作业_完成游戏导航栏

news 2026/4/12 2:32:05

作业：游戏导航栏

成果展示：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航栏</title><style>div{display: inline-block;}#aa{/* 边框 */border-width: 1px;border-style: solid;border-radius: 20px;width: 1200px;height: 54px;background-color: rgb(35, 26, 54);/* 字体 */color: white;font-size:30px;text-align: center;font-weight: bolder;line-height: 1.8;text-shadow: 10px 10px 10px gray;}#bb{background-color: brown;}  </style>
</head>
<body><div id="aa"><div>游戏1</div><span>&nbsp;</span><div id="bb">游戏2</div><span>&nbsp;</span><div>游戏3</div><div>游戏4</div><span>&nbsp;</span><div>游戏5</div><span>&nbsp;</span><div>游戏6</div><span>&nbsp;</span><div>游戏7</div><span>&nbsp;</span><div>游戏8</div><span>&nbsp;</span><div>游戏9</div></div>
</body>
</html>

解析：

<style>标签用于定义文档样式信息，即css（层叠式样式表），允许开发者在html文件中嵌入样式信息，以控制html元素的外观和布局。

主体框架使用块级元素 div 包裹，并且使用元素属性转换将块级元素转换成行内样式并保留。

div{display: inline-block;}

边框：

为了更好的区分并且调整每个块级 div 的属性，我们将外 div 的 id 定义为 "aa" ，然后在<style>标签中使用 #aa 定义外层框架的属性。

    <div id="aa"></div>

#aa{}

 

定义边框属性，样式设置为 solid 实线，使用 border-radius 调整边框的弧度， width 属性调整边框的粗细。

/* 边框 */border-width: 1px;border-style: solid;border-radius: 20px;

定义边框大小，为美观将 width 属性设置为 1200px ， height 属性设置为 54px ，根据题意背景颜色通过 background-color 设置。

width: 1200px;height: 54px;background-color: rgb(35, 26, 54);

字体：

在 #aa 中字体颜色 color 设置白色 white ，通过 font-size 设置字体大小，使用 text-align 使字体居中， font-weight:bolder 加粗字体， line-height 不断调整行距，达到题目要求，使用 text-shadow 添加字体阴影并调整

/* 字体 */color: white;font-size:30px;text-align: center;font-weight: bolder;line-height: 1.8;text-shadow: 10px 10px 10px gray;

设置游戏2的属性：

将其 div 的 id 设置为 "bb" 

        <div id="bb">游戏2</div>

在<style>标签中，通过 #bb 游戏2的样式信息，背景颜色调整

        #bb{background-color: brown;}

在主体标签中，为美观，在每个被嵌套的 div 之间使用 &nbsp 添加空格

<body><div id="aa"><div>游戏1</div><span>&nbsp;</span><div id="bb">游戏2</div><span>&nbsp;</span><div>游戏3</div><div>游戏4</div><span>&nbsp;</span><div>游戏5</div><span>&nbsp;</span><div>游戏6</div><span>&nbsp;</span><div>游戏7</div><span>&nbsp;</span><div>游戏8</div><span>&nbsp;</span><div>游戏9</div></div>
</body>

相关文章：

20240309web前端_第二周作业_完成游戏导航栏

作业&#xff1a;游戏导航栏 成果展示&#xff1a; 完整代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0…...

编程日记 2024/3/22 22:34:13

五、大模型-Prompt

一、prompt是什么 在大型语言模型集成中&#xff0c;"prompt" 是指您向模型提供的输入文本或指令&#xff0c;以引导模型生成特定类型的响应。这个 prompt 可以是一个问题、一段描述、一个任务说明&#xff0c;甚至是一部分对话历史记录等。通过设计和优化 prompt&a…...

编程日记 2024/3/22 22:33:12

【网络安全】 MSF提权

本文章仅用于信息安全学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若读者因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与作者无关。 环境准备&#xff1a; 名称系统位数IP攻击机Kali Linux6410.3.0.231客户端Windows 76410.3.0.234…...

编程日记 2024/3/22 22:31:10

iPHoP：病毒宿主预测

Bitbucket 安装 conda create -c conda-forge -n iphop_env python 3 .8 mamba conda activate iphop_env mamba install -c conda-forge -c bioconda iphop iphop -h 下载数据库 iphop download --db_dir path_to_iPHoP_db #解压 iphop download --db_dir path_to_iP…...

编程日记 2024/3/22 22:30:09

网工内推 | 数通工程师，IE认证优先，五险一金，绩效奖

01 星网信通 招聘岗位&#xff1a;数通产品经理 职责描述&#xff1a; 1、售前技术支持&#xff1a;技术交流、产品选型报价、方案制作等工作&#xff1b; 2、招投标支持&#xff1a;项目招标参数撰写、标书质疑、应标文件技术部分撰写及资质文件归纳准备、现场讲标及技术澄清…...

编程日记 2024/3/22 22:29:08

2024 年 AI 辅助研发趋势将更加强调智能化、自动化和个性化

目录 前言 AI辅助研发的技术进展 行业应用案例 医药行业 汽车行业 电子行业 面临的挑战与机遇 技术挑战 伦理问题 数据安全 机遇和解决方案 未来趋势预测 1. 深度融合AI与研发流程 2. 智能研发平台的崛起 3. 强化AI与人类智慧的融合 前言 当谈到人工智能&#xff…...

编程日记 2024/3/22 22:27:05

Jackson 2.x 系列【1】概述

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 前言2. 什么是 JSON3. 常用 Java JSON 库4. Jackson4.1 简介4.2 套件4.3 模块4.…...

编程日记 2024/3/22 22:25:04

深入理解并优化Android中的文件描述符（FD）

文章目录 一、文件描述符&#xff08;FD&#xff09;概述二、为什么要优化文件描述符&#xff1f;三、实际开发中的文件描述符优化策略3.1 及时关闭文件和资源3.2 使用try-with-resources3.3 检查并优化第三方库3.4 使用文件描述符检查工具3.4.1 使用/proc文件系统3.4.2 使用ls…...

编程日记 2024/3/22 22:24:02

「JS 基础」异步解决方案入门

前言 为了解决Javascript 语言的执行环境是单线程所带来的问题&#xff0c;Javascript 将任务的执行模式分为两种&#xff1a;同步和异步 同步即为后一个任务等待前一个任务结束再继续执行&#xff0c;程序的执行顺序与任务的排列顺序是一致的 异步则完全不同&#xff0c;每…...

编程日记 2024/3/22 22:23:01

408学习笔记-16-C-动态内存管理

1、为什么要有动态内存分配 常规定义出来的变量&#xff0c;它们的大小都是已经规定好的&#xff0c;即在内存中开辟的内存空间都是固定的&#xff1b;且空间大小不可调整&#xff0c;可能会造成内存空间的浪费。 于是C语言引入了动态内存开辟功能&#xff0c;让程序员自己可…...

编程日记 2024/3/22 22:20:59

vuex - 21年的笔记 - 后续更新

vuex是什么 Vuex是实现组件全局状态&#xff08;数据&#xff09;管理的一种机制&#xff0c;方便的实现组件之间的数据的共享 使用vuex统一管理状态的好处 能够在vuex中集中管理共享的数据&#xff0c;易于开发和后期维护能够高效地实现组件之间的数据共享&#xff0c;提高…...

编程日记 2024/3/22 22:18:57

ngrok实现内网穿透

在使用jenkins进行自动化部署时&#xff0c;需要设置github的webhook钩子来触发构建&#xff0c;由于jenkins运行在自己的电脑上&#xff0c;因此需要通过内网穿透来接受http请求。 Install ngrok via Homebrew with the following command: brew install ngrok/ngrok/ngrokP…...

编程日记 2024/3/22 22:16:55

开发chrome扩展（ 禁止指定域名使用插件）

mainfest.json: {"manifest_version": 3,"name": "ChatGPT学习","version": "0.0.2","description": "ChatGPT,GPT-4,Claude3,Midjourney,Stable Diffusion,AI,人工智能,AI","icons": {&quo…...

编程日记 2024/3/22 22:13:52

Flink：Lookup Join 实现与示例代码

本文要演示的是：在流上关联一张外部表（例如 MySQL 数据库中的一张维表），用于丰富流上的数据，实际上，这正是最普遍的 ”维表 Join“ 的实现方式。通过这种方式和外部维表关联时，依然能关联到最新变化的维度数据，所以才说这是 ”维表 Join“。Lookup Join 与 《Flink Tem…...

编程日记 2024/3/22 22:12:51

python基础知识(四)

if not x % 2 > if x % 2 ! 0 Python HTML和XML解析的第三方库是 Beautifull Soup 不属于软件设计原则是 自底向上 用来表示实体之间联系的是 二维表 当对关系R和S进行自然连接时&#xff0c;要求R和S含有一个或者多个共有的 属性&#xff08;关系就是二维表&#xff09…...

编程日记 2024/3/22 22:11:50

论文笔记：Llama 2: Open Foundation and Fine-Tuned Chat Models

导语 Llama 2 是之前广受欢迎的开源大型语言模型 LLaMA 的新版本&#xff0c;该模型已公开发布&#xff0c;可用于研究和商业用途。本文记录了阅读该论文的一些关键笔记。 链接&#xff1a;https://arxiv.org/abs/2307.09288 1 引言 大型语言模型&#xff08;LLMs&#xff…...

编程日记 2024/3/22 22:10:49

Unity UGUI之Toggle基本了解

在Unity中&#xff0c;Toggle一般用于两种状态之间的切换&#xff0c;通常用于开关或复选框等功能。 它的基本属性如图&#xff1a; 其中&#xff0c; Interactable&#xff08;可交互&#xff09;&#xff1a;指示Toggle是否可以与用户交互。设置为false时&#xff0c;禁用To…...

编程日记 2024/3/22 22:08:48

鸿蒙Harmony应用开发—ArkTS-全局UI方法（日期滑动选择器弹窗）

根据指定的日期范围创建日期滑动选择器&#xff0c;展示在弹窗上。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 本模块功能依赖UI的执行上下文&#xff0c;不可在UI上下文不明确的地方使用&…...

编程日记 2024/3/22 22:07:47

华岳M9制造企业管理软件业务流程 2/4

华岳M9制造企业管理软件业务流程 2/4 步骤3 初始一、应收账款初始余额二、应付账款初始余额三、出纳账项初始余额四、会计账项初始余额五、盘点入库六、存货细目七、存货属性设置八、存货存量控制九、存货价格管理十、月末处理 步骤4 技术一、存货目录二、存货细目三、仓库绑定…...

编程日记 2024/3/22 22:06:46

echarts geo地图加投影两种方法

方法1&#xff0c;geo中加多个地图图形&#xff0c;叠加。缩放时 可能会不一致&#xff0c;需要捕捉georoam事件&#xff0c;使下层的geo随着上层的geo一起缩放拖曳 geo: [{zlevel: 3,//geo显示级别&#xff0c;默认是0 【最顶层图形】map: BJ,//地图名roam: true,scaleLimit: …...

编程日记 2024/3/22 22:03:43

winpeas使用教程

winpeas是PEASS&#xff08;Privilege Escalation Awesome Scripts SUITE&#xff0c;权限提升优秀脚本套件&#xff09;中的Windows平台专用模块&#xff0c;全称为Windows Privilege Escalation Awesome Script。它是一款专为Windows系统设计的自动化权限提升扫描工具&#x…...

编程新知 2026/4/12 2:06:52

OpenGL多线程踩坑实录：EGL_BAD_ACCESS错误排查与修复指南

OpenGL多线程开发中的EGL_BAD_ACCESS&#xff1a;从原理到实战解决方案 当你在深夜调试一个复杂的OpenGL多线程应用时&#xff0c;突然在终端看到EGL_BAD_ACCESS错误提示&#xff0c;那种感觉就像在高速公路上爆胎——既焦虑又无助。这个错误在多线程OpenGL开发中极为常见&…...

编程新知 2026/4/12 1:42:31

宝塔面板一键部署前端项目：新手避坑指南

1. 为什么选择宝塔面板部署前端项目 第一次接触服务器部署的朋友&#xff0c;看到nginx配置里那些server_name、location规则估计头都大了。我当年也是这样&#xff0c;光是配个反向代理就折腾了一整天。后来发现宝塔面板这个神器&#xff0c;部署效率直接提升10倍不止。 宝塔最…...

编程新知 2026/4/11 23:30:56

别再为Containerd私有仓库的HTTPS报错头疼了，用ctr命令的--plain-http参数一键搞定镜像推送

Containerd私有仓库HTTPS报错的终极解法&#xff1a;ctr命令--plain-http实战指南 凌晨三点的告警铃声响起&#xff0c;屏幕上闪烁着熟悉的错误提示——http: server gave HTTP response to HTTPS client。这不是第一次在私有仓库镜像推送时遇到这个拦路虎了。每次修改containe…...

编程新知 2026/4/11 22:18:57

Harness层接口限流：防止恶意调用

一、 标题 Harness 层接口限流实战&#xff1a;从恶意调用防护到 DevOps 平台稳定性的铜墙铁壁二、 摘要/引言 2.1 开门见山&#xff08;Hook&#xff09; 假设你是一家拥有 500 开发者、日均 1000 CI/CD 流水线运行、每月发布 200 新特性的中型 SaaS 公司 DevOps 负责人。周一…...

编程新知 2026/4/11 21:07:07

QTableWidget 表格组件拿

7.1 初识三维模型 7.1.1 三维模型的数据载体 随着计算机图形技术的发展&#xff0c;我们或多或少都会见过或者听说过三维模型。笔者始终记得小时候第一次在电视上看到三维动画《变形金刚&#xff1a;超能勇士》的震撼感受&#xff1b;而现在我们已经可以在手机上玩三维游戏《王…...

编程新知 2026/4/11 20:58:51

不用装软件！这款MicroPython浏览器 IDE :让你在手机上也能调试树莓派 Pico晌

1、普通的insert into 如果&#xff08;主键/唯一建&#xff09;存在&#xff0c;则会报错 新需求&#xff1a;就算冲突也不报错&#xff0c;用其他处理逻辑 回到顶部 2、基本语法&#xff08;INSERT INTO ... ON CONFLICT (...) DO (UPDATE SET ...)/(NOTHING)&#xff09; 语…...

编程新知 2026/4/11 20:52:48

手把手教你用Matlab调用MODTRAN 5：从零配置到批量模拟太阳辐照度

MATLAB与MODTRAN 5工程化集成实战&#xff1a;太阳辐照度模拟全流程解析 当我们需要精确计算大气层外的太阳辐射经过大气衰减后的地面辐照度时&#xff0c;MODTRAN作为业界公认的大气辐射传输模型&#xff0c;其准确性已得到广泛验证。而MATLAB作为工程计算的标准工具&#xff…...

编程新知 2026/4/11 20:04:12

Win11下JDK1.8和17双版本共存指南：5分钟搞定环境变量配置与快速切换

Win11下JDK1.8与17双版本共存实战&#xff1a;从配置到智能切换的全套解决方案 作为一名长期奋战在Java开发一线的工程师&#xff0c;我深刻理解同时维护新旧项目的痛苦。每次打开IDE前都要反复确认环境变量&#xff0c;或者在会议演示时突然发现项目跑在了错误版本上——这些场…...

编程新知 2026/4/11 19:25:38

Maxwell电机多目标尺寸优化：基于Ansys Maxwell与OptiSlang的内嵌式永...

Maxwell电机多目标尺寸优化 Ansys Maxwell 和OptiSlang 有案例电机&#xff0c;永磁同步电机内嵌式 满足电机多尺寸参数入手&#xff0c;满足多尺寸联动优化&#xff0c;最终达到多参数优化效果 提供源文件&#xff0c;提供操作视频概述 本文档旨在详细阐述一套基于 Ansys Maxw…...

编程新知 2026/4/11 19:11:04