笔记本键盘布局效果-html代码-BFW代码库

代码语言：html

代码描述：笔记本键盘布局效果

代码标签：效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Varela&display=swap");
html, body {
  font-family: 'Varela', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  height: auto;
  width: 100%;
  background: white;
  color: white;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1%;
  width: 854px;
  height: 598px;
  border: 2px solid #FDDBC9;
  border-radius: 35px;
  background: #FDDBC9;
}

.key-container {
  display: grid;
  grid-template-rows: repeat(7, auto);
  border: 1px solid #A87961;
  box-shadow: inset 0px 2px 2px 0px #A87961, inset 2px 0px 2px 0px #A87961, inset -2px 2px 2px 0px #A87961, inset 0px -2px 2px 0px #A87961;
  width: 780px;
  height: 330px;
  margin: 3.5% 0 0 0;
  border-radius: 12px;
}

.row1 {
  display: flex;
  justify-content: space-around;
  margin: 1% 0.5% 0 0.5%;
}

.row2, .row3, .row4, .row5 {
  display: flex;
  justify-content: space-around;
  margin: 0 0.5% 0 0.5%;
}

.row6 {
  display: flex;
  justify-content: space-around;
  margin: 0 0.5% 0% 0.5%;
}

.f-keys {
  font-size: 0.1em;
  letter-spacing: -0.05em;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: #202124;
  border-radius: 5px;
  border: 2px solid black;
  padding: 0;
  height: 23px;
  width: 48px;
}

.touchID {
  width: 23px;
  border-radius: 5px;
}

.esc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.7em;
}

.esc > span:first-of-type {
  margin: 0 0 0 4%;
}

.square-key-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid black;
  background: #202124;
  height: 45px;
  width: 45px;
  border-radius: 5px;
  font-size: 0.9em;
}

.square-content {
  height: 100%;
}

.delete {
  font-size: 0.7em;
  justify-content: flex-end;
  align-items: flex-end;
  width: 70px;
}

.delete > span {
  margin: 0 4% 4% 0;
}

.row3 > div, .row4 > div, .row5 > div, .row6 > div {
  justify-content: center;
}

.tab:first-of-type {
  align-items: flex-start;
  justify-content: flex-end;
  width: 70px;
}

.tab > span {
  margin: 0 0 4% 4%;
  font-size: 0.7em;
}

.row4 > .caps {
  align-items: flex-start;
  width: 82px;
}

.return {
  font-size: 0.7em;
  justify-content: flex-end !important;
  align-items: flex-end;
  width: 82px;
}

.return > span:first-of-type {
  margin: 0 4% 4% 0;
}

.lock {
  margin: 0 0 4% 4%;
  font-size: 0.7em;
}

.period {
  margin: 0 0 11% 4%;
}

.shift:first-of-type {
  width: 110px;
  font-size: 0.7em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.shift:first-of-type > span {
  margin: 0 0 4% 4%;
}

.shift:last-of-type {
  width: 110px;
  font-size: 0.7em;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.shift:last-of-type > span {
  margin: 0 4% 4% 0;
}

.row6 > .fn {
  font-size: 0.7em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 45px;
}

.fn > span {
  margin: 0 0 4% 6%;
}

.ctrl {
  margin-top: 20%;
  font-size: 0.7em;
}

.cmd {
  width: 55px;
}

.spacebar {
  width: 260px;
}

.down-arrow {
  transform: rotate(180deg);
}

.trackpad {
  margin: 1% 0;
  width: 320px;
  height: 220px;
  border: 1px solid #9F6E57;
  border-radius: 10px;
}
</style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<div class="container">
<div class="key-container">
<div class="row1">
<span class="esc f-keys">
<span>esc</span>
</span>
<span class="F1 f-keys">F1</span>
<span class="F2 f-keys">F2</span>
<span class="F3 f-keys">F3</span>
<span class="F4 f-keys">F4</span>
<span class="F5 f-keys">F5</span>
<span class="F6 f-keys">F6</span>
<span class="F7 f-keys">F7</span>
<span class="F8 f-keys">F8</span>
<span class="F9 f-keys">F9</span>
<span class="F10 f-keys">F10</span>
<span class="F11 f-keys">F11</span>
<span class="F12 f-keys">F12</span>
<span class="touchID f-keys"></span>
</div>
<div class="row2">
<div class="square-key-cont">
<span class="square-content">
~
</span>
<span class="square-content">
`
</span>
</div>
<div class="square-key-cont">
<span class="square-content">
!
</span>
<span class="square-content">
1
</span>
</div>
<div class="square-key-cont">
<span class="square-content">
@
</span>
<span class="square-content">
2
</span>
</div>
<div class="square-key-cont">
<span class="square-content">
#
</span>
<span class="square-content">
3
</span>
</div>
<div class="square-key-cont">
<span class="square-content">
$
</span>
<span class="square-content">
4
</span>
</div>
<div class="square-key-cont">
<span class="square-content">
%
</span>
<span class="square-content">
5
</span>
</div>
<div class="square-key-cont">
<span class="square-content">
^
</span>
<span class="square-content">
6
</span>
</div>
<div class="square-key-cont">
<span class="square-content">
&
</span>
<span class="square-content">
7
</span>
</div>
<div class="square-key-cont">
<span class="square-content">
*
</span>.........完整代码请登录后点击上方下载按钮下载查看