.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写出来的笔记本,只供学习娱乐。