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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/762629.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos系统ssh7.4升级9.6

编译安装 OpenSSL 下载 OpenSSL 源代码&#xff1a; wget https://www.openssl.org/source/openssl-1.1.1w.tar.gz这个命令从 OpenSSL 的官方网站下载指定版本&#xff08;1.1.1w&#xff09;的源代码压缩包。 解压源代码&#xff1a; tar zxvf openssl-1.1.1w.tar.gz使用 tar…

杭州克鲁斯机器人控制信号线缆故障维修攻略,快来了解一下!

克鲁斯机器人作为工业自动化的重要组成部分&#xff0c;其稳定运行对于生产效率至关重要。克鲁斯机器人控制信号线缆作为机器人与外部控制设备之间的桥梁&#xff0c;承担着传输指令和反馈信号的重要任务。 一、克鲁斯机器人控制信号线缆故障识别与诊断 故障现象&#xff1a;当…

Godot 学习笔记(4):一切以场景为中心

文章目录 前言场景搭建新建子场景最简单的按钮事件 手动控制场景手动加载场景添加多个场景对象更快速的获取脚本对象 删除多个场景对象脚本命名的问题 总结 前言 Godot的场景是C#与Godot最后的中间连接。我们解决了场景的加载&#xff0c;我们基本可以保证C#和godot之间的彻底…

JVM的知识

什么是JVM 1.JVM&#xff1a; JVM其实就是运行在 操作系统之上的一个特殊的软件。 2.JVM的内部结构&#xff1a; &#xff08;1&#xff09;因为栈会将执行的程序弹出栈。 &#xff08;2&#xff09;垃圾99%的都是在堆和方法区中产生的。 类加载器&#xff1a;加载class文件。…

处理 input type=‘hidden‘ 的事件触发

前言 在公司的 MES 系统&#xff08;摩尔元数N2&#xff09;做二次开发页面。某个字段在表单模型中配置为 弹出窗口 后、页面的对应字段样式自动转为 <input type"hidden"> &#xff0c;从而导致不能使用常规的 blur 、keydown 事件触发关联操作。下面是解决思…

【力扣刷题日记】603.连续空余座位

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 603.连续空余座位 表&#xff1a;Cinema 列名类型seat_idintfreebool Seat_id 是该表的自动递增主键列。 在…

将表格数据导出 Excel 格式的数据方法(2)

1、在工具类中创建一个脚本文件 /*** param {*} tableValueData* 表格数据: []* param {*} tableTitleData* 表格标题数据: ["", "", "", ""]* param {*} fileName* 文件名* param {*} tableHeader* 表格名*/// …

【RabbitMQ | 第一篇】消息队列基础知识

文章目录 1.消息队列基础知识1.1什么是消息队列&#xff1f;1.2消息队列有什么用&#xff1f;&#xff08;结合项目说&#xff09;1.2.1异步处理1.2.2削峰/限流1.2.3降低系统耦合性1.2.4实现分布式事务 1.3消息队列的缺点1.4JMS和AMQP1.4.1 JMS的两种消息模型&#xff08;1&…

高效备考2024年AMC10:吃透2000-2023年1250道真题(限时免费送)

我们今天继续来随机看5道AMC10真题&#xff0c;以及详细解析&#xff0c;这些题目来自1250道完整的官方历年AMC10真题库。通过系统研究和吃透AMC10的历年真题&#xff0c;参加AMC10的竞赛就能拿到好名次。即使不参加AMC10竞赛&#xff0c;掌握了这些知识和解题思路后初中和高中…

Google 的 C++编程规范

1.1 头文件均使用 #define guards #ifndef <PROJECT>_<PATH>_<FILE>_H_ #define <PROJECT>_<PATH>_<FILE>_H_...#endif // <PROJECT>_<PATH>_<FILE>_H_1.2 包含所有使用到的头文件 只要头文件中引用了其他文件中的符…

mysql基础01

登录 and 修改密码 登录 mysql //默认用户root ,主机名为localhost,密码为空,端口为3306 mysql -uroot -p123 -hlocalhost -p3306 //如果-p后无密码,可以通过非明文实现登录修改密码 mysqladmin -uroot -p password 123 //在root密码为空的情况下可以设置密码,否则需要旧密…

#鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行

3 月 19 日&#xff0c;#鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行。 现场&#xff0c;深圳市南山区人民政府副区长李志娜发布《2024 年南山区支持鸿蒙原生应用发展首批政策措施清单》&#xff0c;从加强鸿蒙原生应用供给能力、推动鸿蒙原生应用产业集聚、完善鸿蒙原生…

扩容分区和文件系统(Linux)

在ECS控制台上扩容云盘容量后&#xff0c;对应分区和文件系统并未扩容&#xff0c;您还需要进入ECS实例内部继续扩容云盘的分区和文件系统&#xff0c;将扩容部分的容量划分至已有分区及文件系统内&#xff0c;使云盘扩容生效。本文为您介绍如何通过两个步骤完成Linux实例云盘的…

API 接口渗透测试

1 API 接口介绍 1.1 RPC&#xff08;远程过程调用&#xff09; 远程过程调用&#xff08;英语&#xff1a;Remote Procedure Call&#xff0c;缩写为 RPC&#xff09;是一个计算机通信协议。该协议允许运行于一台计算机的程序调用另一台计算机的子程序&#xff0c;而程序员无…

RecyclerView万能适配器之BaseQuickAdapter方法详解

BaseQuickAdapter方法详解 1. setNewData(List<T> data)2. addData(List<T> data)3. replaceData(int index, List<T> data) 这篇文章我们主要对BaseQuickAdapter的setNewData()、addData()、和 replaceData() 三个方法进行讲解 1. setNewData(List data) …

JavaScript高级(十三)---ES6中Set,map

ES6 Set 在ES6之前&#xff0c;我们存储数据的结构主要有两种&#xff1a;数组、对象。 在ES6中新增了另外两种数据结构&#xff1a;Set、Map&#xff0c;以及它们的另外形式WeakSet、WeakMap。 Set是一个新增的数据结构&#xff0c;可以用来保存数据&#xff0c;类似于数组&a…

应用APM-如何配置Prometheus + Grafana监控springboot应用

文章目录 概述在Spring Boot应用中集成Micrometerspringboot配置修改 Docker安装Prometheus和Grafanaprometheus配置grafana配置启动Prometheus和Grafana在Grafana中配置数据源创建Grafana仪表盘配置Grafana告警&#xff08;可选&#xff09;监控和分析 概述 配置Prometheus和…

前缀列表和route-policy

前缀列表和route-policy ACL&#xff1a;访问控制列表 1、它可以用于过滤流量报文 2、又可以过滤路由条目 前缀列表&#xff1a; 1、只能过滤路由条目 2、不能过滤流量报文 ACL&#xff1a;在过滤路由条目时&#xff0c;只能过滤路由前缀。 前缀列表&#xff1a;在过滤…

第十节HarmonyOS 常用容器组件2-Counter

1、描述 计数器组件&#xff0c;提供相应的增加或者减少的计数操作。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 2、子组件 可以包含子组件。 3、接口 Counter() 从API version 9开始…

如何在Android设备上运行深度网络

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a; 下一篇&#xff1a; 介绍 在本教程中&#xff0c;您将了解如何使用 OpenCV 深度学习模块在 Android 设备上运行深度学习网络。教程是为 Android Studio 2022.2.1 编写的。…