HTML部分

HTML的结构使用Emmet语法可以很简单的生成。键盘第一行有14个按键，第二行有13个，第三行有12个,因此我们只需在VSCode中输入 div>ul>li*14^ul>li*13^ul>li*12 后点击 Tab 键即可生成我们所需要的HTML结构了。

Emmet语法（部分）

使用Emmet语法通过简短的表达式就生成我们所需要的HTML代码片段，一般主流的编辑器都已经内置了Emmet工具，可以直接使用。

子节点生成

语法：父节点标签名称>子节点标签名称，例如 div>span，就会生成下面的代码片段。

<div><span></span></div>

重复节点生成

语法：标签名称*重复次数，例如 li*3，就会生成3个li标签。

父级兄弟节点生成

语法：父节点标签名称>子节点标签名称^父级兄弟节点标签名称，例如 ul>li^ul>li，就会生成下面的代码片段。

<ul>
    <li></li>
</ul>
<ul>
    <li></li>
</ul>

这个符号 ^，其实就是将当前上下文返回到上一级，它可以多次使用， 假如我们想返回父级的父级，就可以这样使用 div>ul>li^^div>span，这样就会生成下面的代码片段。

  <div>
    <ul>
      <li></li>
    </ul>
  </div>
  <div><span></span></div>

HTML结构生成完成后，我们开始写样式。

CSS部分

首先整体使用的是flex弹性布局，通过设置 justify-content 和 align-items 值为 center 实现水平垂直居中。

接着每个ul也是使用flex布局，因为这样一会可以通过给那几个特殊按键设置 flex:1，来很方便的实现按键长度自适应，就不用我们计算长度了。除此之外，因为是li标签，所以还要给ul的 list-style 属性值设为 none，以此来消除前面默认的小黑点。

然后就是按键的 :hover 和按键被点击时的 clicked 样式，只需要将背景色调深一点即可，字体大小也可以调小一号，这样按下去的时候会有种距离感，让感觉更真实。

CSS部分要注意的就是有关权重的问题。

权重

权重指的就是样式的优先级， 即当样式冲突时，谁生效的解决方案。当多个样式作用于同一个元素时，只有权重高的起作用，权重相同时，后写的样式则会覆盖先写的样式。

每一个选择器都有自己的权重值，而权重就是这些选择器之和。

内联样式，权重值=1000；
ID选择器，权重值=100；
Class和伪类选择器，权重值=10；
标签选择器，权重值=1；
!important，权重值=无穷大；

比如说，.key-board ul li 和 .enter 这两个选择器都作用于我们键盘上的回车键，那么谁会生效呢？我们来计算一下他们的权重，首先是 .key-board ul li = 10+1+1 = 12，然后是 .enter = 10，很明显前者的权重会比后者高，因此前者设置的样式生效，这样就会导致我们单独给回车键设置样式的时候不起作用。

解决方案就是要么降低前者权重，要么提高后者权重，再要么就是让它们权重相等，然后让特殊按键的样式覆盖掉默认样式。
降低前者权重： 将 .key-board ul li 改为 ul li 即可
提高后者权重： 将 .enter 改为 .key-board ul li.enter 即可

JS部分

当我们点击按键的时候，页面上的键盘对应的按键要做出反应，因此我们可以通过监听按键按下和按键弹起事件来实现，代码如下。

但是按键监听事件有一个弊端，那就是中文模式下的按键事件是不生效的，因此只有在我们输入英文的时候，键盘的按键才会有对应的按键效果。

【Vue】快来定制属于你的专属键盘