【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】收藏纯css打造 mackbook air的更多相关文章

CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
css之纯css实现流程导航效果
:::tip 使用纯css线上流程导航效果. 本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一利用裁剪该方法IE下不支持利用裁剪 clip ...
【css】纯css实现文字循环滚动效果
不用js来实现. html: <div class="box"> <p class="animate"> 文字滚动的内容文字滚动的内容文 ...
瀑布流的实现纯CSS实现Jquery实现
瀑布流的实现注:本文部分图片自百度下载,如有侵权,联系删图. 首先,选择几张图片布局到HTML内容中.HTML如下所示. <div class="wrapper"> ...
纯CSS打造银色MacBook Air（完整版）
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一步骤二步骤三通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法纯CSS打造淘宝导航菜单栏 C# Winform
Expression构建DataTable to Entity 映射委托 1 namespace Echofool.Utility.Common { 2 using System; 3 using ...
一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

随机推荐

Active Session History (ASH) Performed An Emergency Flush Messages In The Alert Log
Active Session History (ASH) Performed An Emergency Flush Messages In The Alert Log (文档 ID 1385872.1 ...
Java计算文件的SHA码和MD5码
可参考:http://blog.csdn.net/hudashi/article/details/8394158 /** * 计算文件的MD5码 * @param file * @return */ ...
[改善Java代码]避免对象的浅拷贝
建议43: 避免对象的浅拷贝我们知道一个类实现了Cloneable接口就表示它具备了被拷贝的能力,如果再覆写clone()方法就会完全具备拷贝能力.拷贝是在内存中进行的,所以在性能方面比直接通过ne ...
Math.random获得随机数
function GetRandomNum(Min,Max){ var Range = Max - Min; var Rand = Math.random(); ...
VSX规划Package文件
VSX是VS扩展,可以针对不同项目编写插件,虽然接触VSX的时间并不多,但是当了解VSX后深刻感受到VSX的魅力. VSX的材料比较少,配置文件也很繁琐,当初我也走了不少弯路. 这篇文章将帮助您更好的 ...
MySQL数据库中的触发器
--触发器是一类特殊的监控增删改操作,并产生相应的增删改的操作 --1,监视谁 2,监视动作 3,监视时间(之前或之后) 4,触发的事件 --触发器的简单语法 create trigger 触发器名字 ...
Lombok(1.14.8) - @NonNull
@NonNull @NonNull,生成一个非空检查. package com.huey.lombok; import lombok.Getter; import lombok.NonNull; im ...
Asp.net MVC 4 动作方法结果
Action Method Result动作方法结果 ActionResult generic return value for an action and is used to perform a ...
C# 好书一本推荐
书名<CLR Via C#>第三版中文版,我已上传: 下载地址:http://files.cnblogs.com/jackchiang/CLR_Via_Csharp.%E7%AC%AC3% ...
iBeacon
iBeacon[1] 是苹果公司2013年9月发布的移动设备用OS(iOS7)上配备的新功能.其工作方式是,配备有低功耗蓝牙(BLE)通信功能的设备使用BLE技术向周围发送自己特有的ID,接收到该I ...

【css】 收藏 纯css打造 mackbook air

【css】 收藏 纯css打造 mackbook air的更多相关文章

随机推荐

热门专题

【css】收藏纯css打造 mackbook air

【css】收藏纯css打造 mackbook air的更多相关文章