zoukankan      html  css  js  c++  java
  • 纯CSS绘制mac代码

    1.效果图

    2.代码

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>mac book air - CSS</title>
    </head>
    <style>
        .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));
        }
        
        .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));
        }
        .blackbar{
            width: 450px;
            height: 18px;
            position: absolute;    
            left: 75px;
            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;
        }
        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;
        }
        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);
            bottom: 23px;
            left: 200px;
            border-radius: 8px;
        }
    </style>
    <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>
  • 相关阅读:
    python全栈开发从入门到放弃之socket并发编程之协程
    python全栈开发从入门到放弃之socket并发编程多线程GIL
    python全栈开发从入门到放弃之socket并发编程多线程
    python全栈开发从入门到放弃之socket并发编程多进程
    python全栈开发从入门到放弃之socket网络编程基础
    python全栈开发从入门到放弃之异常处理
    python全栈开发从入门到放弃之面向对象反射
    python全栈开发从入门到放弃之面向对象的三大特性
    转:经典ACM算法
    反射在Java Swing中的应用
  • 原文地址:https://www.cnblogs.com/cynthia-wuqian/p/4632921.html
Copyright © 2011-2022 走看看