【css】 收藏 纯css打造 mackbook air

 

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;

    width: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;

}

 

你可能感兴趣的:(css)