20240309web前端_第二周作业_完成游戏导航栏
作业：游戏导航栏
成果展示：
完整代码：
<!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> </span><div id="bb">游戏2</div><span> </span><div>游戏3</div><div>游戏4</div><span> </span><div>游戏5</div><span> </span><div>游戏6</div><span> </span><div>游戏7</div><span> </span><div>游戏8</div><span> </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 之间使用   添加空格
<body><div id="aa"><div>游戏1</div><span> </span><div id="bb">游戏2</div><span> </span><div>游戏3</div><div>游戏4</div><span> </span><div>游戏5</div><span> </span><div>游戏6</div><span> </span><div>游戏7</div><span> </span><div>游戏8</div><span> </span><div>游戏9</div></div>
</body>相关文章：
20240309web前端_第二周作业_完成游戏导航栏
作业：游戏导航栏 成果展示： 完整代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0…...
五、大模型-Prompt
一、prompt是什么 在大型语言模型集成中，"prompt" 是指您向模型提供的输入文本或指令，以引导模型生成特定类型的响应。这个 prompt 可以是一个问题、一段描述、一个任务说明，甚至是一部分对话历史记录等。通过设计和优化 prompt&a…...
【网络安全】 MSF提权
本文章仅用于信息安全学习，请遵守相关法律法规，严禁用于非法途径。若读者因此作出任何危害网络安全的行为，后果自负，与作者无关。 环境准备： 名称系统位数IP攻击机Kali Linux6410.3.0.231客户端Windows 76410.3.0.234…...
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…...
网工内推 | 数通工程师，IE认证优先，五险一金，绩效奖
01 星网信通 招聘岗位：数通产品经理 职责描述： 1、售前技术支持：技术交流、产品选型报价、方案制作等工作； 2、招投标支持：项目招标参数撰写、标书质疑、应标文件技术部分撰写及资质文件归纳准备、现场讲标及技术澄清…...
2024 年 AI 辅助研发趋势将更加强调智能化、自动化和个性化
目录 前言 AI辅助研发的技术进展 行业应用案例 医药行业 汽车行业 电子行业 面临的挑战与机遇 技术挑战 伦理问题 数据安全 机遇和解决方案 未来趋势预测 1. 深度融合AI与研发流程 2. 智能研发平台的崛起 3. 强化AI与人类智慧的融合 前言 当谈到人工智能ÿ…...
Jackson 2.x 系列【1】概述
有道无术，术尚可求，有术无道，止于术。 本系列Jackson 版本 2.17.0 源码地址：https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 前言2. 什么是 JSON3. 常用 Java JSON 库4. Jackson4.1 简介4.2 套件4.3 模块4.…...
深入理解并优化Android中的文件描述符（FD）
文章目录 一、文件描述符（FD）概述二、为什么要优化文件描述符？三、实际开发中的文件描述符优化策略3.1 及时关闭文件和资源3.2 使用try-with-resources3.3 检查并优化第三方库3.4 使用文件描述符检查工具3.4.1 使用/proc文件系统3.4.2 使用ls…...
「JS 基础」异步解决方案入门
前言 为了解决Javascript 语言的执行环境是单线程所带来的问题，Javascript 将任务的执行模式分为两种：同步和异步 同步即为后一个任务等待前一个任务结束再继续执行，程序的执行顺序与任务的排列顺序是一致的 异步则完全不同，每…...
408学习笔记-16-C-动态内存管理
1、为什么要有动态内存分配 常规定义出来的变量，它们的大小都是已经规定好的，即在内存中开辟的内存空间都是固定的；且空间大小不可调整，可能会造成内存空间的浪费。 于是C语言引入了动态内存开辟功能，让程序员自己可…...
vuex - 21年的笔记 - 后续更新
vuex是什么 Vuex是实现组件全局状态（数据）管理的一种机制，方便的实现组件之间的数据的共享 使用vuex统一管理状态的好处 能够在vuex中集中管理共享的数据，易于开发和后期维护能够高效地实现组件之间的数据共享，提高…...
ngrok实现内网穿透
在使用jenkins进行自动化部署时，需要设置github的webhook钩子来触发构建，由于jenkins运行在自己的电脑上，因此需要通过内网穿透来接受http请求。 Install ngrok via Homebrew with the following command: brew install ngrok/ngrok/ngrokP…...
开发chrome扩展（ 禁止指定域名使用插件）
mainfest.json: {"manifest_version": 3,"name": "ChatGPT学习","version": "0.0.2","description": "ChatGPT,GPT-4,Claude3,Midjourney,Stable Diffusion,AI,人工智能,AI","icons": {&quo…...
Flink：Lookup Join 实现与示例代码
本文要演示的是：在流上关联一张外部表（例如 MySQL 数据库中的一张维表），用于丰富流上的数据，实际上，这正是最普遍的 ”维表 Join“ 的实现方式。通过这种方式和外部维表关联时，依然能关联到最新变化的维度数据，所以才说这是 ”维表 Join“。Lookup Join 与 《Flink Tem…...
)
python基础知识(四)
if not x % 2 > if x % 2 ! 0 Python HTML和XML解析的第三方库是 Beautifull Soup 不属于软件设计原则是 自底向上 用来表示实体之间联系的是 二维表 当对关系R和S进行自然连接时，要求R和S含有一个或者多个共有的 属性（关系就是二维表）…...
论文笔记：Llama 2: Open Foundation and Fine-Tuned Chat Models
导语 Llama 2 是之前广受欢迎的开源大型语言模型 LLaMA 的新版本，该模型已公开发布，可用于研究和商业用途。本文记录了阅读该论文的一些关键笔记。 链接：https://arxiv.org/abs/2307.09288 1 引言 大型语言模型（LLMsÿ…...
Unity UGUI之Toggle基本了解
在Unity中，Toggle一般用于两种状态之间的切换，通常用于开关或复选框等功能。 它的基本属性如图： 其中， Interactable（可交互）：指示Toggle是否可以与用户交互。设置为false时，禁用To…...
鸿蒙Harmony应用开发—ArkTS-全局UI方法（日期滑动选择器弹窗）
根据指定的日期范围创建日期滑动选择器，展示在弹窗上。 说明： 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用&…...
华岳M9制造企业管理软件业务流程 2/4
华岳M9制造企业管理软件业务流程 2/4 步骤3 初始一、应收账款初始余额二、应付账款初始余额三、出纳账项初始余额四、会计账项初始余额五、盘点入库六、存货细目七、存货属性设置八、存货存量控制九、存货价格管理十、月末处理 步骤4 技术一、存货目录二、存货细目三、仓库绑定…...
echarts geo地图加投影两种方法
方法1，geo中加多个地图图形，叠加。缩放时 可能会不一致，需要捕捉georoam事件，使下层的geo随着上层的geo一起缩放拖曳 geo: [{zlevel: 3,//geo显示级别，默认是0 【最顶层图形】map: BJ,//地图名roam: true,scaleLimit: …...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...