html--钢琴

news2024/11/16 2:59:24

代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html钢琴</title>
<script src="js/js.js"></script>
<link href="css/css.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="all">
    <h1 style="width:100%;text-align:center;">建议使用谷歌浏览器</h1>
	
	<!--主要代码-->
    <div id="main">
        <div id="key60" class="key whiteKey">q<br>a<br>z</div>
        <div id="key62" class="key whiteKey"><br>s<br>x</div>
        <div id="key64" class="key whiteKey"><br>d<br>c</div>
        <div id="key65" class="key whiteKey">r<br>f<br>v</div>
        <div id="key67" class="key whiteKey"><br>g<br>b</div>
        <div id="key69" class="key whiteKey"><br>h<br>n</div>
        <div id="key71" class="key whiteKey"><br>j<br>m</div>
        <div id="key72" class="key whiteKey">i<br>k<br>,</div>
        <div id="key61" class="key blackKey">w</div>
        <div id="key63" class="key blackKey">e</div>
        <div id="key66" class="key blackKey">t</div>
        <div id="key68" class="key blackKey">y</div>
        <div id="key70" class="key blackKey">u</div>
    </div>
	
    <div id="comment">
    
　　</div>
</div>

</body>
</html>

在这里插入图片描述

效果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vscode setting.json 全局设置 工作区设置 位置 优先级

vscode setting.json 全局设置 工作区设置 位置 优先级

vscode中setting.json有两种配置权限 一、全局配置&#xff1a;setting.json文件位于C:\Users\Administrator\AppData\Roaming\Code\User\settings.json 二、工作区配置&#xff1a;setting.json文件位于工作区的.vscode\settings.json 当两种配置同时存在时&#xff0c;工作区…
阅读更多...
IOS覆盖率报告info文件解读

IOS覆盖率报告info文件解读

一&#xff0c;IOS覆盖率报告的生成 在做前端精准测试的时候&#xff0c;对于iOS端&#xff0c;通常会做如下操作&#xff1a; &#xff08;1&#xff09;合并覆盖率数据 如下操作&#xff1a; xcrun llvm-profdata merge coverage_file1657885040728.profraw coverage_fil…
阅读更多...
力扣hot100：240.搜索二维矩阵II（脑子）

力扣hot100：240.搜索二维矩阵II（脑子）

吉大21级算法分析与设计的一道大题&#xff0c;由于每一行都是排好序的直接逐行二分 可以达到&#xff1a;O(mlogn)。但是这里追求更广的思路可以使用其他方法。 矩阵四分&#xff1a; 在矩阵中用中心点比较&#xff0c;如果target大于中心点的值&#xff0c;则由于升序排列&am…
阅读更多...
Java面试（8）

Java面试（8）

三次握手与四次挥手 三次握手: 客户端与服务端建立TCP连接时总共需要发送三个包 三次握手过程中容易引发SYN(DDOS)攻击,所谓SYN攻击是指: 攻击客户端,在短时间内伪造大量不存在的IP地址,向服务端不断发送syn包,服务端收到包后向客户端发送确认包,但由于客户端IP不存在,导致服务…
阅读更多...
FPGA FIFO 读取模式

FPGA FIFO 读取模式

FPGA FIFO 读取模式分两种&#xff1a; Normal Mode: In normal mode, the “rdreq” signal serves as the read request or read enable. When this signal goes high, the data output provides the first data from the FIFO.Essentially, in normal mode, data is availa…
阅读更多...
Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架)

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架)

Prompt进阶系列1:LangGPT(从编程语言反思LLM的结构化可复用提示设计框架) 大语言模型 (Large Language Models, LLMs) 在不同领域都表现出了优异的性能。然而&#xff0c;对于非AI专家来说&#xff0c;制定高质量的提示来引导 LLMs 是目前AI应用领域的一项重要挑战。现有的提示…
阅读更多...
【经典案例】某大型公园构建检查监督机制项目纪实

【经典案例】某大型公园构建检查监督机制项目纪实

——引入网格化监督管理机制&#xff0c;实现责任、人员、信息三位一体 公园管理由于其本身地域范围广的特性在工作中很难进行有效的监督检查&#xff0c;该公园的监督检查由不同的部门分别负责&#xff0c;同部门检查时往往会处于情面而使检查流于形式&#xff0c;并且公园的监…
阅读更多...
VSCode搭建ARM开发环境

VSCode搭建ARM开发环境

为了构建Cortex M系列单片机免费开源的开发环境&#xff0c;网络上了解来看VSCODEGCCJLINK是一套比较高效的组合方式&#xff0c;下面记录环境搭建的流程。 我这边的PC环境为 WIN7专业版64bit。 需要用到的工具 Visual Studio CodeSTM32CubemxARM GCC 交叉编译工具链&#x…
阅读更多...
javaWebssh文玩竞价管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

javaWebssh文玩竞价管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh文玩竞价管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0…
阅读更多...
MySQL--索引底层数据结构详解

MySQL--索引底层数据结构详解

索引是什么&#xff1f; 索引是帮助MySQL高效获取数据的排好序的数据结构&#xff0c;因此可知索引是数据结构。 概念很抽象&#xff0c;但是类比生活中的例子就很容易理解&#xff0c;比如一本厚厚的书&#xff0c;我们想取找某一小节&#xff0c;我们可以根据目录去快速找到…
阅读更多...
复试人工智能前沿概念总结

复试人工智能前沿概念总结

1.大模型相关概念&#xff08;了解即可&#xff09; 1.1 GPT GPT&#xff0c;全称为Generative Pre-training Transformer&#xff0c;是OpenAI开发的一种基于Transformer的大规模自然语言生成模型。GPT模型采用了自监督学习的方式&#xff0c;首先在大量的无标签文本数据上进…
阅读更多...
Linux配置.bashrc文件导致各种命令（vim、sudo）失效。

Linux配置.bashrc文件导致各种命令（vim、sudo）失效。

Linux配置.bashrc文件导致各种命令&#xff08;vim、sudo&#xff09;失效。 起因是 nvcc-V一直报错&#xff1a;-bash&#xff1a;nvcc&#xff1a; command not found 踩坑记录&#xff1a;上网一查说是没有配置cuda的环境变量。于是去修改了bashrc文件&#xff0c;在最下面…
阅读更多...
Imagination：RISC-V CPU的重要力量

Imagination：RISC-V CPU的重要力量

根据SHD集团最近发布的报告显示&#xff0c;RISC-V正全速发展中。通过分析从2021年到2030年这十年间RISC-V核在不同应用和功能领域的潜在市场&#xff0c;作者Rich Wawrzyniak得出结论称&#xff0c;到2030年&#xff0c;22.3%的SoC将包含RISC-V CPU&#xff0c;RISC-V的收入预…
阅读更多...
如何保证消息不丢之MQ重试机制消息队列

如何保证消息不丢之MQ重试机制消息队列

1. 简介 死信队列&#xff0c;简称&#xff1a;DLX&#xff0c;Dead Letter Exchange&#xff08;死信交换机&#xff09;&#xff0c;当消息成为Dead message后&#xff0c;可以被重新发送到另外一个交换机&#xff0c;这个交换机就是DLX 那么什么情况下会成为Dead message&a…
阅读更多...
Unity中PICO实现移动交互

Unity中PICO实现移动交互

文章目录 前言一、在允许行走的地面加上对应的组件1、Teleportation Anchor 移动锚点2、Teleportation Area 移动区域 二、在 玩家&#xff08;需要移动的对象&#xff09;上挂载对应组件1、Teleportation Provider 被移动对象2、在 Teleportation Anchor 或 Teleportation Are…
阅读更多...
＜商务世界＞《第9课 产品地图》

＜商务世界＞《第9课 产品地图》

1 产品地图 产品地图的核心是产品或用户的业务流程或地图导航&#xff0c;从用户和产品两条路线出发&#xff0c;搭建业务架构&#xff0c;并划分明确的功能模块&#xff0c;用图形化方式记录、整理、表现出产品的清晰特点。其中&#xff0c;包括用户在使用过程中做了什么、感…
阅读更多...
景联文科技：专业提供高质量大语言模型训练数据

景联文科技：专业提供高质量大语言模型训练数据

2024年&#xff0c;数字经济被再次写入政府工作报告中&#xff0c;报告指出要深化大数据、人工智能等研发应用&#xff0c;打造具有国际竞争力的数字产业集群。 大模型作为生成式人工智能的基础&#xff0c;日益成为国际科技竞争的焦点。人大代表杨剑宇指出&#xff0c;尽管我国…
阅读更多...
SHARE 100M PRO：航测领域的多面手

SHARE 100M PRO：航测领域的多面手

在无人机航测领域&#xff0c;SHARE 100M PRO单镜头航测相机以其1.02亿像素的中画幅传感器和创新技术&#xff0c;正在重塑倾斜摄影的精度和效率。这款相机不仅在城市规划和土地管理中发挥着重要作用&#xff0c;还在环境监测、基础设施建设、农业管理等多个航测领域展现出其卓…
阅读更多...
2024 RubyMine 激活，分享几个RubyMine 激活的方案

2024 RubyMine 激活，分享几个RubyMine 激活的方案

文章目录 RubyMine 公司简介我这边使用RubyMine 的理由RubyMine 2023.3 最新变化AI Assistant 正式版对 AI 生成名称建议的支持改进了 Ruby 上下文单元测试生成 RailsRails 应用程序和引擎的自定义路径Rails 路径的自动导入对存储在默认位置之外的模型、控制器和邮件器的代码洞…
阅读更多...
Vue.js 进阶技巧：keep-alive 缓存组件解析

Vue.js 进阶技巧：keep-alive 缓存组件解析

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023