html HHKB
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html HHKB相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hhkb</title>
<style>
/* -------------------------------------
* style
* ------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Average+Sans);
/* line 15, ../sass/style.sass */
body {
width: 890px;
margin: 0 auto;
padding: 100px 30px 30px;
font-family: "Average Sans", sans-serif;
color: #555;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
background: #C7DBE5;
}
/*------- Keyboard ------- */
/* line 26, ../sass/style.sass */
#keyboard {
padding: 30px 8px 13px;
background: #f5f3f1;
background: -webkit-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
background: -moz-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
background: -ms-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
background: -o-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
background: linear-gradient(to bottom, #e5e2e1, #f5f3f1, #e5e2e1);
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
-o-transform: rotateX(15deg);
}
/* line 40, ../sass/style.sass */
#main {
padding: 2px;
background: #4d4d4d;
border-radius: 4px;
overflow: hidden;
}
/* line 45, ../sass/style.sass */
#addition_wrap {
width: 650px;
margin: -2px 0 0 85px;
padding: 0 2px 2px;
background: #4d4d4d;
border-radius: 0 0 4px 4px;
position: relative;
}
/* line 52, ../sass/style.sass */
#addition_wrap:before, #addition_wrap:after {
content: "";
width: 5px;
height: 5px;
background: #f5f3f1;
border-top: 2px solid #4d4d4d;
position: absolute;
top: 0px;
}
/* line 60, ../sass/style.sass */
#addition_wrap:before {
left: -5px;
border-right: 2px solid #4d4d4d;
border-radius: 0 5px 0 0;
}
/* line 64, ../sass/style.sass */
#addition_wrap:after {
right: -5px;
border-left: 2px solid #4d4d4d;
border-radius: 5px 0 0 0;
}
/* line 68, ../sass/style.sass */
#addition {
overflow: hidden;
}
/* line 71, ../sass/style.sass */
.key, .f_key {
width: 40px;
height: 45px;
margin: 2px;
border-width: 3px 7px 10px;
border-style: solid;
border-radius: 4px;
float: left;
}
/* line 79, ../sass/style.sass */
.key.pressed, .f_key.pressed {
-webkit-transform: scale(0.95, 0.95);
-moz-transform: scale(0.95, 0.95);
-ms-transform: scale(0.95, 0.95);
-o-transform: scale(0.95, 0.95);
transform: scale(0.95, 0.95);
}
/* line 85, ../sass/style.sass */
.key {
background: #d3cfcc;
border-color: #ece8e4 #dedad6 #c9c4c4;
}
/* line 88, ../sass/style.sass */
.f_key {
background: #a8aeb8;
border-color: #c4c7cc #adb9cc #96a6bd;
}
/* line 92, ../sass/style.sass */
.key .keycap {
width: 33px;
height: 40px;
padding: 5px 0 0 7px;
font-size: 18px;
line-height: 1;
background: #f5f3f1;
background: -webkit-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
background: -moz-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
background: -ms-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
background: -o-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
background: linear-gradient(to right, #e5e2e1, #f5f3f1, #e5e2e1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
border-radius: 4px;
position: relative;
}
/* line 107, ../sass/style.sass */
.f_key .keycap {
width: inherit;
height: inherit;
font-size: 15px;
line-height: 45px;
text-indent: 7px;
background: #cdd3de;
background: -webkit-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
background: -moz-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
background: -ms-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
background: -o-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
background: linear-gradient(to right, #bbc3d2, #cdd3de, #bbc3d2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 4px;
position: relative;
}
/* line 123, ../sass/style.sass */
.top {
padding: 3px 5px 0 0;
font-size: 12px;
font-style: italic;
text-align: right;
line-height: 1;
display: block;
}
/* line 130, ../sass/style.sass */
.bottom {
width: inherit;
line-height: 20px;
display: block;
}
/* line 134, ../sass/style.sass */
.side {
font-size: 10px;
line-height: 1;
display: block;
position: absolute;
left: 4px;
bottom: -10px;
-webkit-transform: rotateX(50deg);
-moz-transform: rotateX(50deg);
-ms-transform: rotateX(50deg);
-o-transform: rotateX(50deg);
transform: rotateX(50deg);
}
/* line 146, ../sass/style.sass */
.f_key .side {
left: -3px;
}
/* line 148, ../sass/style.sass */
.k13 .side {
right: 7px;
text-align: right;
}
/*------- key width ------- */
/* line 154, ../sass/style.sass */
.k27, .k18.left {
width: 38px;
border-right-width: 9px;
}
/* line 157, ../sass/style.sass */
.k192, .fn, .k18.right {
width: 38px;
border-left-width: 9px;
}
/* line 160, ../sass/style.sass */
.k192 .keycap {
width: 30px;
}
/* line 164, ../sass/style.sass */
.k9 {
width: 66px;
border-right-width: 10px;
}
/* line 167, ../sass/style.sass */
.k8 {
width: 66px;
border-left-width: 10px;
}
/* line 170, ../sass/style.sass */
.k17 {
width: 87px;
border-right-width: 10px;
}
/* line 173, ../sass/style.sass */
.k13 {
width: 103px;
border-left-width: 10px;
}
/* line 176, ../sass/style.sass */
.k16.left {
width: 113px;
border-right-width: 10px;
}
/* line 179, ../sass/style.sass */
.k16.right {
width: 77px;
border-left-width: 10px;
}
/* line 182, ../sass/style.sass */
.k91, .k93 {
width: 72px;
}
/* line 184, ../sass/style.sass */
.k91 .top, .k93 .top {
font-size: 13px;
}
/* line 186, ../sass/style.sass */
.k91 .bottom, .k93 .bottom {
font-size: 20px;
}
/* line 188, ../sass/style.sass */
.k91.left {
border-right-width: 10px;
}
/* line 190, ../sass/style.sass */
.k93.right {
border-left-width: 10px;
}
/* line 192, ../sass/style.sass */
.k32 {
width: 328px;
border-width: 3px 8px 10px;
}
/* line 195, ../sass/style.sass */
.k32 .keycap {
width: 321px;
}
/* line 197, ../sass/style.sass */
.k32.pressed {
-webkit-transform: scale(0.98, 0.95);
-moz-transform: scale(0.98, 0.95);
-ms-transform: scale(0.98, 0.95);
-o-transform: scale(0.98, 0.95);
transform: scale(0.98, 0.95);
}
</style>
</head>
<body>
<div id="keyboard">
<div id="main">
<div class="k27 f_key">
<div class="keycap">Esc<span class="side">Power</span></div>
</div>
<div class="k49 key">
<div class="keycap">!<br/>1<span class="side">F1</span></div>
</div>
<div class="k50 key">
<div class="keycap">@<br/>2<span class="side">F2</span></div>
</div>
<div class="k51 key">
<div class="keycap">#<br/>3<span class="side">F3</span></div>
</div>
<div class="k52 key">
<div class="keycap">$<br/>4<span class="side">F4</span></div>
</div>
<div class="k53 key">
<div class="keycap">%<br/>5<span class="side">F5</span></div>
</div>
<div class="k54 key">
<div class="keycap">^<br/>6<span class="side">F6</span></div>
</div>
<div class="k55 key">
<div class="keycap">&<br/>7<span class="side">F7</span></div>
</div>
<div class="k56 key">
<div class="keycap">*<br/>8<span class="side">F8</span></div>
</div>
<div class="k57 key">
<div class="keycap">(<br/>9<span class="side">F9</span></div>
</div>
<div class="k48 key">
<div class="keycap">)<br/>0<span class="side">F10</span></div>
</div>
<div class="k189 key">
<div class="keycap">_<br/>-<span class="side">F11</span></div>
</div>
<div class="k187 key">
<div class="keycap">+<br/>=<span class="side">F12</span></div>
</div>
<div class="k220 key">
<div class="keycap">|<br/>\<span class="side">Ins</span></div>
</div>
<div class="k192 key">
<div class="keycap">~<br/>`<span class="side">Del</span></div>
</div>
<div class="k9 f_key">
<div class="keycap">Tab<span class="side">Caps</span></div>
</div>
<div class="k81 key">
<div class="keycap">Q</div>
</div>
<div class="k87 key">
<div class="keycap">W</div>
</div>
<div class="k69 key">
<div class="keycap">E</div>
</div>
<div class="k82 key">
<div class="keycap">R</div>
</div>
<div class="k84 key">
<div class="keycap">T</div>
</div>
<div class="k89 key">
<div class="keycap">Y</div>
</div>
<div class="k85 key">
<div class="keycap">U</div>
</div>
<div class="k73 key">
<div class="keycap">I<span class="side">PSc/SRq</span></div>
</div>
<div class="k79 key">
<div class="keycap">O<span class="side">ScrLk</span></div>
</div>
<div class="k80 key">
<div class="keycap">P<span class="side">Pus/Brk</span></div>
</div>
<div class="k219 key">
<div class="keycap">{<br/>[<span class="side">↑</span></div>
</div>
<div class="k221 key">
<div class="keycap">}<br/>]</div>
</div>
<div class="k8 f_key">
<div class="keycap">Delete<span
class="side">BS <em>Clear</em></span></div>
</div>
<div class="k17 f_key">
<div class="keycap">Control</div>
</div>
<div class="k65 key">
<div class="keycap">A<span class="side">Vol_Dn</span></div>
</div>
<div class="k83 key">
<div class="keycap">S<span class="side">Vol_Up</span></div>
</div>
<div class="k68 key">
<div class="keycap">D<span class="side">Mute</span></div>
</div>
<div class="k70 key">
<div class="keycap">F<span class="side">Eject</span></div>
</div>
<div class="k71 key">
<div class="keycap">G</div>
</div>
<div class="k72 key">
<div class="keycap">H<span class="side">*</span></div>
</div>
<div class="k74 key">
<div class="keycap">J<span class="side">/</span></div>
</div>
<div class="k75 key">
<div class="keycap">K<span class="side">Home</span></div>
</div>
<div class="k76 key">
<div class="keycap">L<span class="side">PageUp</span></div>
</div>
<div class="k186 key">
<div class="keycap">:<br/>;<span class="side">←</span></div>
</div>
<div class="k222 key">
<div class="keycap">"<br/>'<span class="side">→</span></div>
</div>
<div class="k13 f_key">
<div class="keycap">Return<span class="side"><em>Enter</em></span></div>
</div>
<div class="k16 left f_key">
<div class="keycap">Shift</div>
</div>
<div class="k90 key">
<div class="keycap">Z</div>
</div>
<div class="k88 key">
<div class="keycap">X</div>
</div>
<div class="k67 key">
<div class="keycap">C</div>
</div>
<div class="k86 key">
<div class="keycap">V</div>
</div>
<div class="k66 key">
<div class="keycap">B</div>
</div>
<div class="k78 key">
<div class="keycap">N<span class="side">+</span></div>
</div>
<div class="k77 key">
<div class="keycap">M<span class="side">-</span></div>
</div>
<div class="k188 key">
<div class="keycap"><<br/>,<span class="side">End</span></div>
</div>
<div class="k190 key">
<div class="keycap">><br/>.<span class="side">PageDn</span></div>
</div>
<div class="k191 key">
<div class="keycap">?<br/>/<span class="side">↓</span></div>
</div>
<div class="k16 right f_key">
<div class="keycap">Shift</div>
</div>
<div class="fn f_key">
<div class="keycap">Fn</div>
</div>
</div>
<div id="addition_wrap">
<div id="addition">
<div class="k18 left f_key">
<div class="keycap"><span class="top">Opt</span><span class="bottom">Alt</span></div>
</div>
<div class="k224 k91 left f_key">
<div class="keycap"><span class="top">⌘</span><span class="bottom">◇</span></div>
</div>
<div class="k32 key">
<div class="keycap"></div>
</div>
<div class="k224 k93 right f_key">
<div class="keycap"><span class="top">⌘</span><span class="bottom">◇</span><span
class="side">Stop</span></div>
</div>
<div class="k18 right f_key">
<div class="keycap"><span class="top">Opt</span><span class="bottom">Alt</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
以上是关于html HHKB的主要内容，如果未能解决你的问题，请参考以下文章