【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;
}
时间： 2024-10-25 14:13:17

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

CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 复制代码 代码如下: #square { width: 100px; height: 100px; background: red; }

【CSS】纯CSS实现三级导航（模板）

以前觉得级联导航实现应该很简单,就是使用css的hover属性来实现就可以了,于是也没有过多地留意实践.可是在最近的面试当中,当被问到这个问题的时候才明白,很多东西不能想当然地以为这样做就可以了,不单只是知道大概的思路就认为OK了,更需要实际的动手能力. 后来就实际操作了级联菜单的实现,借此机会把它弄成一个模板来和大家一起学习. 以下是HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q

CSS Card:纯css制作扑克牌

制作扑克的html代码 第一步是制作扑克的html,我的原则是用最少最简洁的代码,不引用任何图片,也许你认为不可能,但是你还是乖乖的看我是如何工作的吧. 建立一个div,赋予两个class属性:cardand suitdiamonds .代码 <div class="card suitdiamonds"> </div> 往这个div中添加卡片的内容,只需要一个包含字母A的段落标记<P>就可以了. .代码 <div class="car

HTML5 CSS3专题 纯CSS打造相册效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点. 先看html文件: <body> <div id="gallery"> <h1>纯CSS3相册效果&l

纯CSS打造忙碌光标

我们经常会用到忙碌等待的情况,比如ajax等待回调,或者加载页面的时候,我们通常的做法就是放一张loading.gif图片,在那里转呀转. 以前是在pc上用,也没有觉得不妥,如今要在移动端用,问题就来了,以前呢,做前端,兼容各种浏览器,就够让人头疼了,现在还要兼容各种屏幕尺寸. 开始呢,是做了N张不同大小的gif图.用javascript去判断屏的大小,然后选择适当的gif图片,这样做的缺点是很显的,说多了都是泪.现在我要做的,就是 换成css3去实现这个效果.下面看效果图: 有兴趣的,可以复制

纯CSS打造的安卓系统开机画面动画特效代

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>纯CSS打造的安卓系统开机画面动画特效代码</title> <style> .android{ position:relative; width:200px; heigh

一个标签的72变，打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,求star!) 关于改造,一开始的想法就是使用百分比尺寸来改造,然

史上最详细 纯CSS打造3D文本滚动

昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下. 首先把效果图贴给大家 根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/ http://www.w3cplus.com/blog/tags/95.html 那么首先我们就

纯CSS打造可折叠树状菜单

1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="subsubfolder1" type="checkbox" /> <ol> <li class="file"><a>下级</a></li> <li> <label for=&q