笔记本键盘布局效果-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 >.........完整代码请登录后点击上方下载按钮下载查看