http://www.cnblogs.com/myvin/p/4621231.html
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./key.css"> </head> <body> <div class="board"> <div class="blackbar"> </div> <div class="keyboard"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li><span>!</span><span>1</span></li> <li><span>@</span><span>2</span></li> <li><span>#</span><span>3</span></li> <li><span>$</span><span>4</span></li> <li><span>%</span><span>5</span></li> <li><span>^</span><span>6</span></li> <li><span>&</span><span>7</span></li> <li><span>*</span><span>8</span></li> <li><span>(</span><span>9</span></li> <li><span>)</span><span>0</span></li> <li><span>—</span><span>-</span></li> <li><span>+</span><span>=</span></li> <li></li> <li></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> <li></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></li> <li></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></li> <li></li> <li></li> <li></li> <li></li> <li>By Pure CSS.To Be Continued.</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="touch"> </div> </div> </body> </html>
.board{ margin: 0 auto; padding: 0 auto; width: 600px; height: 450px; margin-top: 50px; background: rgb(210,210,210); border-radius: 20px; position: relative; box-shadow: 0px 5px 6px rgb(160,160,160); background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1)); /* background:linear-gradient(60deg,rgba(250,250,250,1) 20%,rgba(210,210,210,1)); */ } .board:before{ content: ''; display: block; width: 780px; height: 20px; background: rgb(210,210,210); border-radius: 0px 0px 3px 3px; border-top-left-radius: 390px 18px; border-top-right-radius: 390px 18px; position: absolute; top:-20px; left: -90px; border-bottom: 2px solid rgb(0,0,0); background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255)); } /*.board:after{ content: ''; display: block; 774px; height: 2px; background-color: rgb(30,30,30); position: absolute; top: 0px; left: -87px; }*/ .blackbar{ width: 450px; height: 18px; position: absolute; left: 75px; /* background: #000000; */ border-radius: 2px; border-bottom: 2px solid #ffffff; /* 小白边 */ border-right: 2px solid #ffffff; background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%); background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%); } .keyboard{ position: absolute; width:530px; height: 216px; left: 35px; top: 35px; border: 1px solid rgb(180,180,180); border-radius: 8px; background:rgba(250,250,250,1); box-shadow:2px 0px 2px rgb(180,180,180) inset, 0px 3px 3px rgb(180,180,180) inset, -5px -0px 1px rgb(255,255,255) inset, 0px -3px 3px rgb(180,180,180) inset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ul,li{ list-style: none; margin:0 auto; padding:0 auto; display: block; font-family: "Vrinda"; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ul{ width:530px; margin-top: 8px; padding-left: 8px; /* border:2px solid black; */ } li{ width:29px; height:29px; float: left; /* padding-left: 0px; */ margin-right: 5px; margin-bottom: 5px; background-color: rgb(30,30,30); color: rgb(200,200,200); text-align: center; line-height: 28px; font-size: 12px; border-radius: 4px; border: 1px solid rgb(70,70,70); box-shadow: 1px 0px 0px rgb(0,0,0), 0px 1px 0px rgb(0,0,0), -1px 0px 0px rgb(0,0,0), 0px -1px 0px rgb(0,0,0); } li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4), li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8), li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12), li:nth-child(13),li:nth-child(14){ width:30px; height:15px; /* float: left; */ /* padding-left: 0px; */ /* margin-right: 5px; margin-bottom: 5px; background-color: rgb(30,30,30); border-radius: 4px; */ } li:nth-child(16),li:nth-child(17),li:nth-child(18),li:nth-child(19),li:nth-child(20), li:nth-child(21),li:nth-child(22),li:nth-child(23),li:nth-child(24),li:nth-child(25), li:nth-child(26),li:nth-child(27){ /*box-sizing: border-box; padding-top: 4px;*/ } li:nth-child(16) span,li:nth-child(17) span,li:nth-child(18) span,li:nth-child(19) span,li:nth-child(20) span, li:nth-child(21) span,li:nth-child(22) span,li:nth-child(23) span,li:nth-child(24) span,li:nth-child(25) span, li:nth-child(26) span,li:nth-child(27) span{ display: block; margin-top: 5px; line-height: 0.5; } li:nth-child(28),li:nth-child(29){ width:45px; } li:nth-child(43),li:nth-child(55){ width:55px; } li:nth-child(56),li:nth-child(67){ width:73px; } li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71), li:nth-child(72),li:nth-child(73),li:nth-child(74){ height:33px; } li:nth-child(72){ width:173px; } li:nth-child(71),li:nth-child(73){ width:37px; } li:nth-child(75),li:nth-child(77),li:nth-child(78){ margin-top: 18px; height: 14px; } li:nth-child(76){ height: 13px; margin-top: 19px; } li:nth-child(78){ position: absolute; bottom: 22px; right:38px; } .touch{ position: absolute; width:200px; height:150px; border: 2px solid rgb(190,190,190); /* box-shadow: 1px 0px 0px rgb(160,160,160) inset, 0px 1px 0px rgb(160,160,160) inset, 0px -1px 0px rgb(160,160,160) inset; */ bottom: 23px; left: 200px; border-radius: 8px; }