代码共计230行，花费两节课手搓出来的，完整代码放在了文章末尾。
![图片[1]-从零开始学习html+css：构建一个拟态键盘-属余学习网](https://pho.waikanl.cn//2025/10/20251026061356739.png)
一、先认“骨架”：HTML部分（放内容的架子）
HTML就像“搭房子的框架”，你能看到的键盘、按键，都是用这个“积木块”堆出来的。
1. 最开头的固定格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拟态键盘</title>
</head>
<body>
<!-- 键盘内容都在这里 -->
</body>
</html>- <DOCTYPE html> ：告诉浏览器“这是HTML文件”，必须放第一行。
- <html> ：所有内容的“大外套”，所有代码都要包在里面。
- <head> ：“后台配置区”，放浏览器需要的设置，比如 <title> 是浏览器标签上的名字（“拟态键盘”这四个字）。
- <body> ：“前台展示区”，键盘、按键这些能看见的东西，全放这里面。
2. 键盘的“三层积木”（核心结构）
就像“大盒子套中盒子，中盒子套小盒子”，用3层 <div> 搭出键盘的样子：
第一层：container（最外层盒子）
<div class="container">...</div>- 作用：让键盘乖乖待在屏幕正中间，背景弄成黑色（突出键盘）。
- 注意： container 就是“容器”，把键盘装起来固定位置。
第二层：keyboard（键盘主体盒子）
<div class="keyboard">...</div>- 作用：这是键盘的“外壳”，所有按键都装在里面，自带圆角和立体边框。
- 注意： keyboard 就是“键盘”，是中间的大盒子。
第三层：area（按键分区盒子）
真实键盘分主键盘、方向键、小键盘，这里也用3个盒子分开装：
- <div class=”area-1″> ：装主键盘（字母键、Esc、Shift这些常用键）
- <div class=”area-2″> ：装方向键和功能键（↑↓←→、Insert这些）
- <div class=”area-3″> ：装小键盘（数字键、Num Lock这些）
最小积木：key（单个按键）
每个按键都是一个小 <div> ，比如Esc键：
<div class="key" style='background-color: chocolate;color: white;'>Esc</div>- class=”key” ：给按键贴个“标签”，后面用CSS给所有按键统一加样式。
- 中间的 Esc ：就是按键上显示的文字。
二、再穿“衣服”：CSS部分（让内容变好看）
CSS就像“给积木上色、做造型”，没有CSS，键盘就是一堆乱序的文字。所有CSS都写在 <head> 里的 <style> 标签里。
1. 第一步：擦掉默认“污渍”（必做）
浏览器会给文字、盒子自带边距，就像衣服上的污渍，先擦掉：
html, body, div {
margin: 0; /* 擦掉外边距 */
padding: 0; /* 擦掉内边距 */
font-family:'Segoe UI', ...; /* 统一文字样式，更美观 */
}2. 让键盘居中：一招搞定
给 container （最外层盒子）加样式，让键盘在屏幕正中间：
.container {
width: 100vw; /* 宽度=整个屏幕宽 */
height: 100vh; /* 高度=整个屏幕高 */
display: flex; /* 开启“弹性布局”，万能居中工具 */
justify-content: center; /* 水平方向居中 */
align-items: center; /* 垂直方向居中 */
background-color: black; /* 背景弄成黑色 */
}- 注意： display: flex + 两个 center ，就是“上下左右都居中”的秘诀。
3. 键盘外壳的“立体感”（拟态核心）
keyboard （键盘主体）的样式，让它看起来像真实的键盘外壳：
.keyboard {
display: flex; /* 让3个按键分区横向排开 */
border-radius: 10px; /* 边角弄成圆角，不扎手 */
/* 内外阴影叠加，做出“凹陷”的立体效果 */
box-shadow: 0px 0px 20px 1px #666 inset, /* 内阴影：像外壳凹进去 */
0px 0px 5px 1px #fff; /* 外阴影：像外壳的亮边 */
background-color: #E4E6EA; /* 外壳底色：浅灰色 */
padding: 30px; /* 外壳内部留空隙，按键不贴边 */
}4. 单个按键的“凸起感”（最关键）
每个按键的样式，让它摸起来像能按下去：
.key {
width: 40px; /* 按键宽40px */
height: 40px; /* 按键高40px */
border-radius: 8px; /* 按键边角也弄圆角 */
background-color: #E4E9EC; /* 按键底色：比外壳浅一点 */
/* 左右阴影反差，做出“凸起”效果 */
box-shadow: 3px 3px 8px 2px #999, /* 左下深阴影：像凸起的影子 */
-3px -3px 8px 2px #fff; /* 右上白阴影：像凸起的高光 */
color: #666; /* 按键文字颜色：深灰色 */
cursor: pointer; /* 鼠标放上去变“小手”，提示能点 */
}
/* 鼠标放上去的效果（模拟按下去） */
.key:hover {
box-shadow: 0 0 3px 1px #999; /* 阴影变浅，像按下去了 */
}完整代码&演示地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拟态键盘</title>
</head>
<style>
html, body, div {
margin: 0;
padding: 0;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.keyboard {
display: flex;
border-radius: 10px;
box-shadow: 0px 0px 20px 1px #666 inset, 0px 0px 5px 1px #fff;
background-color: #E4E6EA;
padding: 30px;
}
.key {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 8px;
background-color: #E4E9EC;
box-shadow: 3px 3px 8px 2px #999, -3px -3px 8px 2px #fff;
color: #666;
font-size: 13px;
cursor: pointer;
transition: .1s;
}
.key:hover {
box-shadow: 0 0 3px 1px #999;
}
.key-empty {
width: 40px;
height: 40px;
}
.area-1 {
width: 740px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-content: baseline;
}
.area-2 {
width: 140px;
margin-left: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.area-2-item{
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.area-3 {
width: 190px;
margin-left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.area-3-light{
display: flex;
gap: 10px;
}
.area-3-light-item{
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
}
.area-3-number {
display: flex;
gap: 10px;
}
.area-3-number-item {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
</style>
<body>
<div class="container">
<div class="keyboard">
<div class="area-1">
<div class="key" style='background-color: chocolate;color: white;'>Esc</div>
<div class="key" style="margin-left: 50px;">F1</div>
<div class="key"> F2</div>
<div class="key">F3</div>
<div class="key">F4</div>
<div class="key" style="margin-left: 25px;">F5</div>
<div class="key">F6</div>
<div class="key">F7</div>
<div class="key">F8</div>
<div class="key" style="margin-left: 25px;">F9</div>
<div class="key">F10</div>
<div class="key">F11</div>
<div class="key">F12</div>
<div class="key"><span>~</span>`</div>
<div class="key"><span>!</span>1</div>
<div class="key"><span>@</span>2</div>
<div class="key"><span>#</span>3</div>
<div class="key"><span>$</span>4</div>
<div class="key"><span>%</span>5</div>
<div class="key"><span>^</span>6</div>
<div class="key"><span>&</span>7</div>
<div class="key"><span>*</span>8</div>
<div class="key"><span>(</span>9</div>
<div class="key"><span>)</span>0</div>
<div class="key"><span>—</span>-</div>
<div class="key"><span>+</span>=</div>
<div class="key" style="width: 90px;">←</div>
<div class="key" style="width: 70px;">Tab</div>
<div class="key">Q</div>
<div class="key">W</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
<div class="key"><span>{</span>[</div>
<div class="key"><span>}</span>]</div>
<div class="key"style="width:50px;">Enter</div>
<div class="key"style="width: 50px">Cap</div>
<div class="key">A</div>
<div class="key">S</div>
<div class="key">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
<div class="key"><span>:</span>;</div>
<div class="key"><span>"</span>'</div>
<div class="key" style="width: 40px;"><span>|</span>\</div>
<div class="key" style="width: 100px;">Shift</div>
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
<div class="key"><span><</span>,</div>
<div class="key"><span>></span>.</div>
<div class="key"><span>?</span>/</div>
<div class="key" style="width: 120px;">Shift</div>
<div class="key" style="width: 50px;">Ctrl</div>
<div class="key" style="width: 50px;">Win</div>
<div class="key" style="width: 50px;">Alt</div>
<div class="key" style="width: 300px;">Ctrl</div>
<div class="key" style="width: 50px;">Alt</div>
<div class="key" style="width: 50px;">Fn</div>
<div class="key" style="width: 50px;">▤</div>
<div class="key" style="width: 50px;">Ctrl</div>
</div>
<div class="area-2">
<div class="area-2-item">
<div class="key">Print</div>
<div class="key">Scroll</div>
<div class="key">Pause</div>
<div class="key">Insert</div>
<div class="key">Home</div>
<div class="key">Up</div>
<div class="key">Delete</div>
<div class="key">End</div>
<div class="key">Down</div>
</div>
<div class="area-2-item">
<div class="key-empty"></div>
<div class="key">↑</div>
<div class="key-empty"></div>
<div class="key">←</div>
<div class="key">↓</div>
<div class="key">→</div>
</div>
</div>
<div class="area-3">
<div class="area-3-light">
<div class="area-3-light-item" style="color: yellow;">◘</div>
<div class="area-3-light-item">◘</div>
<div class="area-3-light-item">◘</div>
<div class="area-3-light-item">◘</div>
</div>
<div class="area-3-number">
<div class="area-3-number">
<div class="area-3-number-item">
<div class="key">Num</div>
<div class="key">/</div>
<div class="key">*</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key" style="width: 90px;">0</div>
<div class="key">.</div>
</div>
<div class="area-3-number-item">
<div class="key">-</div>
<div class="key" style="height: 90px;">+</div>
<div class="key" style="height: 90px;">Enter</div>
</div>
</body>
</html>© 版权声明
本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。
如果用于其他用途，请购买正版支持作者，谢谢！若您认为「WAIKANL.CN」发布的内容若侵犯到您的权益，请联系站长邮箱:1659872714@qq.com 进行删除处理。
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。THE END
暂无评论内容