html+css 实现键盘

文章目录

成果

在学css, 用 html + css 做一个 macbook 键盘, 对着电脑键盘画的, 成果如下:

第一次

初次效果初现,但有些没有对齐

第二次

这次好多了, 也处理了方向键的布局

变量

观察各宽度, 有如下关系:

bash 复制代码

a 1 键 						# 最小宽度 a, 键盘最多, 对应数字1的键
b tab 键 =1.5a      # tab, esc ,delete 键都是这个宽
c enter 键          # 中/英切换, enter 键宽度
d shift 键
e space 键 =5a
f cmd 键

解方程, 其中 l 为总长

bash 复制代码

13a+b  => l=14.5a
11a+2c => c=1.75a
10a+2d => d=2.25a
12a+2f => f=1.25a

令 a=100px,

bash 复制代码

a =100px
b tab =1.5a=150px
c enter =1.75a=175px
d shift = 2.25a=225px
e space =5a=500px
f cmd =1.25a=125px

CSS

提取键盘公共项

它们都有边框

css 复制代码

    .col,
    .tab,
    .enter,
    .shift,
    .space,
    .cmd,
    .dr {
      margin: 0px;
      border-style: solid;
      border-color: black;
      border-width: 3px;
    }

定义各自的宽度高度

css 复制代码

 .col {
      width: 100px;
      height: 100px;
      border-radius: 10px;
    }

    .up,.left,.right,.down {
      width: 100px;
      height: 50px;
      border-radius: 10px;
    }
    .up{
      margin: auto;
    }

    .tab {
      width: 150px;
    }

    .enter {
      width: 175px;
    }

    .shift {
      width: 225px;
    }

    .space {
      width: 500px;
    }

    .cmd {
      width: 125px;
    }

实现代码

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Keyboard</title>

  <style>
    .contain {
      width: 1450px;
      border-style: solid;
      border-width: 5px;
      padding: 10px;
    }

    .row {
      display: flex;
      width: 1450px;
    }

    .row-top,
    .row-bottom {
      display: flex;
      height: 50px;
      border-width: 3px;
    }

    .col,
    .dr {
      margin: 0px;
      border-style: solid;
      border-color: white;
      border-width: 3px;
      background-color: black;
      width: 100px;
      height: 100px;
      border-radius: 10px;
    }

    .dr {
      background-color: white;
    }


    .left,
    .right,
    .up,
    .down {
      width: 100px;
      height: 50px;
      border-radius: 10px;
      background-color: black;
    }

    .up {
      height: 47px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;

    }

    .down {
      height: 47px;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      margin-top: 6px;
    }

    .non {
      width: 100px;
      height: 50px;
      background-color: white;
    }

    .tab {
      width: 150px;
    }

    .enter {
      width: 175px;
    }

    .shift {
      width: 225px;
    }

    .space {
      width: 500px;
    }

    .cmd {
      width: 125px;
    }
  </style>
</head>

<body>
  <div class="contain">
    <!-- 功能键行 -->
    <div class="row">
      <div class="col tab"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>

    <!-- 数字行 -->
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col tab"></div>
    </div>
    <!-- 字母行 Q -->
    <div class="row">
      <div class="col tab"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <!-- 字母行 A -->
    <div class="row">
      <div class="col enter"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col enter"></div>
    </div>
    <!-- 字母行 Z -->
    <div class="row">
      <div class="col shift"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col shift"></div>
    </div>
    <!-- cmd 行 -->
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>

      <div class="col cmd"></div>
      <div class="col space"></div>
      <div class="col cmd"></div>

      <div class="col"></div>

      <!-- 方向 -->
      <div class="dr">
        <div class="non"></div>
        <div class="left"></div>
      </div>
      <div class="dr">
        <div class="up"></div>
        <div class="down"></div>
      </div>
      <div class="dr">
        <div class="non"></div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</body>

</html>