div+css布局实现实体电脑键盘效果代码-html代码-BFW代码库

div+css布局实现实体电脑键盘效果代码

代码语言：html

代码描述：div+css布局实现实体电脑键盘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<style>
    body {
  background-color: rgb(199, 197, 197);
  color: white;
}

.keyboard {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  width: 760px;
  display: flex;
  gap: 5px;
  flex-direction: column;
  border: 4px solid rgb(63, 62, 62);
  outline: 3px solid #222222;
  border-radius: 5px;
  font-family: "Audiowide", cursive;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  background: rgb(85, 85, 85);
  background: linear-gradient(
    0deg,
    rgba(85, 85, 85, 1) 0%,
    rgb(61, 61, 61) 100%
  );
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
}

.smaller {
  font-size: 0.9rem;
}

.mini-text {
  font-size: 0.6rem;
}

.row {
  display: flex;
  column-gap: 5px;
  flex-direction: row;
  width: 760px;
}

.key {
  width: 37px;
  height: 30px;
  color: #f1f1f1;
  border-radius: 5px;
  border: 3px solid #000;
  outline: 1px solid #555;
  text-align: center;
  background: rgb(85, 85, 85);
  background: linear-gradient(
    0deg,
    rgba(85, 85, 85, 1) 0%,
    rgba(17, 17, 17, 1) 100%
  );
}

.brand {
  font-size: 1.2rem;
  letter-spacing: 0.6px;
  text-shadow: 1px 1px 1px rgb(0, 0, 0);
}

.space {
  width: 38px;
}

.small-space {
  width: 10px;
}

.bcksp {
  width: 80px;
  height: 30px;
  color: #f1f1f1;
  border-radius: 3px;
  border: 3px solid #000;
  outline: 1px solid #555;
  text-align: center;
  background: rgb(85, 85, 85);
  background: linear-gradient(
    0deg,
    rgba(85, 85, 85, 1) 0%,
    rgb(39, 39, 39) 100%
  );
}

.tab {
  width: 54px;
  height: 30px;
  color: #f1f1f1;
  border-radius: 3px;
  border: 3px solid #000;
  outline: 1px solid #555;
  text-align: cent.........完整代码请登录后点击上方下载按钮下载查看