html+css تىن پايدىلىنىپ چىرايلىق كۇنۇپكا تاختىسى ياساش
دېتال كودى
html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>键盘</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body align=”center”>
<div class=”keyboard”>
<ul class=”keys wun”>
<li class=”Esc”>Esc</li>
<li>F1</li>
<li>F2</li>
<li>F3</li>
<li>F4</li>
<li>F5</li>
<li>F6</li>
<li>F7</li>
<li>F8</li>
<li>F9</li>
<li>F10</li>
<li>F11</li>
<li>F12</li>
<li>退出</li>
</ul>
<ul class=”keys two”>
<li>`</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>-</li>
<li>=</li>
<li class=”back”>Delete</li>
</ul>
<ul class=”keys three”>
<li class=”Tab”>Tab</li>
<li>Q</li>
<li>W</li>
<li>E</li>
<li>R</li>
<li>T</li>
<li>Y</li>
<li>U</li>
<li>I</li>
<li>O</li>
<li>P</li>
<li>[</li>
<li>]</li>
<li>\</li>
</ul>
<ul class=”keys four”>
<li class=”Caps”>Caps</li>
<li>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>;</li>
<li>”</li>
<li class=”Enter”>Enter</li>
</ul>
<ul class=”keys five”>
<li class=”Shift”>shifit</li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li>,</li>
<li>.</li>
<li>?</li>
<li class=”Shift”>shift</li>
</ul>
<ul class=”keys six”>
<li class=”ctrl”>ctrl</li>
<li class=”win”>win</li>
<li class=”alt”>alt</li>
<li class=”space”>作者：nijat QQ：2100932579</li>
<li class=”alt”>alt</li>
<li class=”book”>?</li>
<li class=”ctrl”>ctrl</li>
</ul>
</div>
</body>
</html>
css
body{
background: #f1f1f7;
display: flex;
/*让子元素垂直显示*/
flex-direction: column;
/*子元素水平对齐*/
justify-content: center;
align-items: center;
}
.keyboard{
user-select: none;
cursor: pointer;
}
.keys{
display: flex;
list-style: none;
}
li{
box-shadow: 0 -6px 10px rgba(255, 255, 255), 0 4px 15px rgba(0, 0, 0, .3);
height: 5em;
width: 6em;
font-size: 1em;
margin: 0.3em;
background-color: #f2f2f2;
border-radius: 15px;
-webkit-border-radiuse:15px;
-moz-border-radius:15px;
-ms-border-radius:15px;
-o-border-radius:15px;
text-align: center;
line-height: 5em;
letter-spacing: 2px;
transition: all 0.25s;
}
li:active{
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);
color: rgba(12, 164, 190);
text-shadow: 0 0 15px #57c1f1;
}
.wun{
color: #eb3f33;
}
.two{
color: #df960e;
}
.three{
color: #2b46df;
}
.four{
color: rgb(57, 194, 75);
}
.five{
color: #8919ca;
}
.six{
color: #e73d09;
}
.Esc{
width: 10em;
}
.back{
width: 10.1em;
}
.Tab{
width: 10em;
}
.Caps{
width: 11em;
}
.Enter{
width: 11.5em;
}
.Shift{
width: 14.6em;
}
.ctrl,
.win,
.alt,
.book{
width: 9.5em;
}
.space{
width: 35.6em;
}
ئەگەر كودنى ئىشلىتەلمىگەن بولسىڭىز ئىككىلىك كودنى سىكانىرلاپ توپقا كىرىپ توپ ھۆججىتىدىن ئەسلى كودنى چۈشۈرۋالسىڭىز بولدۇ 
