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

随机推荐

python(5) - 冒泡排序
data = [10, 4, 33, 21, 54, 3, 8, 11, 5, 22, 2, 1, 17, 13] ''' 思路:有多少个元素就循环多少次,每次循环从第一个元素开始与它后面的元素比较, ...
oracle--clob
最近,收到这样的异常邮件: Error updating database. Cause: java.sql.SQLException: ORA-01461: can bind a LONG val ...
Hive中自定义函数
Hive的自定义的函数的步骤: 1°.自定义UDF extends org.apache.hadoop.hive.ql.exec.UDF 2°.需要实现evaluate函数,evaluate函数支持重 ...
Linux内核开发基础
1.Linux内核简介 1.1.Linux系统如何构成内核空间(Kernel Space)+用户空间(User Space) 用户空间 = 用户程序 + C语言库(例如:GNC C Library) ...
ECharts地图详解【转】
$(function() { // 路径配置 require.config({ paths : { // echarts: 'http://echarts.baidu.com/build/dist' ...
c#中网络异常的处理办法
加入try catch来判断,catch使用的WebException来处理 try { var request = WebRequest.Create(uri); using (var respon ...
面试之SQL（1）--选出选课数量>=2的学号
ID Course 1 AA 1 BB 2 AA 2 BB 2 CC 3 AA 3 BB 3 CC 3 DD 4 AA NULL NULL 选出选课数量>=2的学号 selectdis ...
Ubuntu系统中登陆阿里云服务器的方法
如果您购买了阿里云服务器,恰巧又在使用Ubuntu操作系统,那么恭喜你来对地方了,今天给大家分享一下如何在Ubuntu中登陆阿里云服务器: 主要使用两款软件:1.SecureCRT:2.SecureF ...
Java之绘制五环图案
前面已经介绍过绘制方法.这里不再赘述. package com.caiduping; import java.awt.BasicStroke; import java.awt.Color; impor ...
做SqlDependency总结的一些经验
1.--查询是否具有Broker功能 select is_broker_enabled from sys.databases where [name]='DBName' 2.--打开Broker功能 ...

【css】 收藏 纯css打造 mackbook air

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

随机推荐

热门专题

【css】收藏纯css打造 mackbook air

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