Html
    Css
    Js

    
                        
.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;
			}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯CSS打造笔记本电脑

全部用css写出来的笔记本,只供学习娱乐。

1
      甜甜だ爱た/tp0
      2017/2/15 10:45:59