.board{ width: 600px; height: 450px; background: rgb(210,210,210); border-radius: 20px; margin: 0 auto; padding: 0 auto; margin-top: 50px; 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)); } /*笔记本盖子*/ .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; left: -90px; top: -20px; background: -webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255)); border-bottom: 2px solid rgb(0,0,0); } /*笔记本旋转轴*/ .blackbar{ width: 450px; height: 18px; position: absolute; left: 75px; border-radius: 2px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; 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; left: 35px; top: 35px; width: 530px; height: 216px; 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; } 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: 4px; padding-left: 3px; } li{ width: 29px; height: 29px; float: left; margin-left: 5px; margin-bottom: 3px; 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(-n+14):nth-child(n+1){ width: 30px; height: 15px; } /*键盘第二行*/ li:nth-child(-n+27):nth-child(n+16) span,li:nth-child(40) span,li:nth-child(41) span,li:nth-child(42) span,li:nth-child(53) span,li:nth-child(54) span,li:nth-child(-n+66):nth-child(n+64) 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(-n+74),li:nth-child(n+68){ 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: 21px; right: 38px; } /*笔记本触摸鼠标*/ .touch{ position: absolute; bottom: 23px; left: 200px; width: 200px; height: 150px; border: 2px solid rgb(190,190,190); border-radius: 8px; } .name{ position: absolute; left: 20px; bottom: 10px; } .name img{ width: 150px; height: 80px; }
全部用css写出来的笔记本,只供学习娱乐。