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

代码语言：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: center;
  background: rgb(85, 85, 85);
  background: linear-gradient(
    0deg,
    rgba(85, 85, 85, 1) 0%,
    rgba(17, 17, 17, 1) 100%
  );
}

.tab-r {
  width: 55px;
  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%,
    rgba(17, 17, 17, 1) 100%
  );
}

.caps {
  width: 65px;
  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%,
    rgba(17, 17, 17, 1) 100%
  );
}

.caps-l {
  width: 60px;
  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%,
    rgba(17, 17, 17, 1) 100%
  );
}

.enter {
  width: 100px;
  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%,
    rgba(17, 17, 17, 1) 100%
  );
}

.shift {
  width: 90px;
  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%,
    rgba(17, 17, 17, 1) 100%
  );
}

.shift-r {
  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%,
    rgba(17, 17, 17, 1) 100%
  );
}

.spatie {
  width: 248px;
  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(17, 17, 17, 1) 100%
  );
}

.alt {
  width: 60px;
  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%,
    rgba(17, 17, 17, 1) 100%
  );
}

.crt {
  width: 45px;
  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%,
    rgba(17, 17, 17, 1) 100%
  );
}

.line {
  margin: auto;
  margin-top: 4px;
  width: 50px;
  height: 2px;
  background-color: #f1f1f1;
}

@media screen and (max-width: 760px) {
  .keyboard {
    width: 650px;
    font-size: 0.6rem;
  }

  .key {
    width: 25px;
    height: 20px;
    font-size: 0.5rem;
  }

  .tab {
    width: 43px;
    height: 20px;
    font-size: 0.5rem;
  }

  .tab-r {
    width: 25px;
    height: 20px;
    font-size: 0.5rem;
  }

  .caps-l {
    width: 55px;
    height: 20px;
    font-size: 0.5rem;
  }

  .caps {
    width: 50px;
    height: 20px;
    font-size: 0.5rem;
  }

  .shift {
    width: 70px;
    height: 20px;
    font-size: 0.5rem;
  }

  .shift-r {
    width: 70px;
    height: 20px;
    font-size: 0.5rem;
  }

  .spatie {
    width: 220px;
    height: 20px;
    font-size: 0.5rem;
  }

  .enter {
    width: 50px;
    height: 20px;
    font-size: 0.5rem;
  }

  .bcksp {
    width: 43px;
    height: 20px;
    font-size: 0.5rem;
  }

  .crt {
    width: 50px;
    height: 20px;
    font-size: 0.5rem;
  }

  .alt {
    width: 20px;
    height: 20px;
    font-size: 0.5rem;
  }

  .up {
    margin-left: 40px;
  }

  .space {
    width: 7px;
    height: 20px;
  }

  .delete {
    width: 20px;
    height: 20px;
    font-size: 0.5rem;
  }

  .line {
    width: 30px;
    height: 1px;
    margin-top: 6px;
  }
}
</style>
</head>
<body>



<div class="keyboard&quo.........完整代码请登录后点击上方下载按钮下载查看