【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来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

随机推荐

ArcGIS Server 10.2 实战（三）图层标注及图例中文显示乱码的解决
发布的图层中不可避免的使用到中文来标注,默认设置下,ArcGIS Server不支持中文的,中文标注显示成乱码,主要是编码的问题,需要把手动把编码改为UTF-8. ArcGIS Server 10.2 ...
JMX笔记(一)
上篇 JMX初体验使用HtmlAdaptorServer提供的界面实现了调用MBean,除此之外,还可以使用rmi方式连接调用MBeanServer 要连接,自然要有url:service:jmx: ...
[BigData]关于Hadoop学习笔记第三天(PPT总结)(一)
课程安排 MapReduce原理*** MapReduce执行过程** 数据类型与格式*** Writable接口与序列化机制*** ---------------------------加深拓展- ...
【补】【FZU月赛】【20150515】【待续】
A FZU-2054 水题,比较A,B双方的最大值即可. B FZU-2055 string,截取‘.’之前和之后然后和给出的文件夹名和拓展名比较就好了啊,不明白为什么那么多人错. 代码: #incl ...
Apache ab 测试工具使用(一)
简述: 试用apache ab测试工具下载点 http://httpd.apache.org/download.cgi 参考: http://jingyan.baidu.com/article/e3 ...
tools安装
1.ruby安装下载安装包勾选中间一个 2.sass 安装转换TB镜像 $ gem sources --remove https://rubygems.org/$ gem sources - ...
Git CMD - show: Show various types of objects
命令格式 git show [options] <object>… 实例 a) 查看某次提交的信息 $ git show <commit> b) 查看远程仓库的信息. git ...
Android中用PULL解析XML
解析XML的方式有DOM,SAX,PULL,那为什么要在Android中使用PULL解析呢?首先来说一下PULL解析的优点,然后再说一下其他两种解析方式的缺点,答案就清晰可见啦. DOM不适合文档较大 ...
【转】用capability 特征加强Linux系统安全
用capability 特征加强Linux系统安全摘要:传统UNIX系统的访问控制模型非常简单——普通用户对超级用户.在这种模型中,一个进程或者帐户要么只有很小的权限,要么具有全部的系统权限.显然, ...
###《VIM实用技巧》
###<VIM实用技巧> #@author: gr #@date: 2015-11-20 #@email: forgerui@gmail.com <VIM实用技巧>阅读笔记. ...

【css】 收藏 纯css打造 mackbook air

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

随机推荐

热门专题

【css】收藏纯css打造 mackbook air

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