1.效果图

2.代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>mac book air - CSS</title>
  6. </head>
  7. <style>
  8.     .board{
  9.         margin: 0 auto;
  10.         padding: 0 auto;
  11.         width: 600px;
  12.         height: 450px;
  13.         margin-top: 50px;
  14.         background: rgb(210,210,210);
  15.         border-radius: 20px;
  16.         position: relative;
  17.         box-shadow: 0px 5px 6px rgb(160,160,160);
  18.         background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
  19.     }
  20.  
  21.     .board:before{
  22.         content: '';
  23.         display: block;
  24.         width: 780px;
  25.         height: 20px;
  26.         background: rgb(210,210,210);
  27.         border-radius: 0px 0px 3px 3px;
  28.         border-top-left-radius: 390px 18px;
  29.         border-top-right-radius: 390px 18px;
  30.         position: absolute;
  31.         top:-20px;
  32.         left: -90px;
  33.         border-bottom: 2px solid rgb(0,0,0);
  34.         background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
  35.     }
  36.     .blackbar{
  37.         width: 450px;
  38.         height: 18px;
  39.         position: absolute;
  40.         left: 75px;
  41.         border-radius: 2px;
  42.         border-bottom: 2px solid #ffffff; /* 小白边 */
  43.         border-right: 2px solid #ffffff;
  44.         background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
  45.         background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
  46.     }
  47.     .keyboard{
  48.         position: absolute;
  49.         width:530px;
  50.         height: 216px;
  51.         left: 35px;
  52.         top: 35px;
  53.         border: 1px solid rgb(180,180,180);
  54.         border-radius: 8px;
  55.         background:rgba(250,250,250,1);
  56.         box-shadow:2px 0px 2px rgb(180,180,180) inset,
  57.                     0px 3px 3px rgb(180,180,180) inset,
  58.                     -5px -0px 1px rgb(255,255,255) inset,
  59.                     0px -3px 3px rgb(180,180,180) inset;
  60.     }
  61.     ul,li{
  62.         list-style: none;
  63.         margin:0 auto;
  64.         padding:0 auto;
  65.         display: block;
  66.         font-family: "Vrinda";
  67.         -webkit-user-select: none;
  68.         -moz-user-select: none;
  69.         -ms-user-select: none;
  70.         user-select: none;
  71.     }
  72.  
  73.     ul{
  74.         width:530px;
  75.         margin-top: 8px;
  76.         padding-left: 8px;
  77.         /* border:2px solid black; */
  78.     }
  79.  
  80.     li{
  81.         width:29px;
  82.         height:29px;
  83.         float: left;
  84.         /* padding-left: 0px; */
  85.         margin-right: 5px;
  86.         margin-bottom: 5px;
  87.         background-color: rgb(30,30,30);
  88.         color: rgb(200,200,200);
  89.         text-align: center;
  90.         line-height: 28px;
  91.         font-size: 12px;
  92.         border-radius: 4px;
  93.         border: 1px solid rgb(70,70,70);
  94.         box-shadow: 1px 0px 0px rgb(0,0,0),
  95.         0px 1px 0px rgb(0,0,0),
  96.         -1px 0px 0px rgb(0,0,0),
  97.         0px -1px 0px rgb(0,0,0);
  98.     }
  99.     li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4),
  100.     li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8),
  101.     li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12),
  102.     li:nth-child(13),li:nth-child(14){
  103.         width:30px;
  104.         height:15px;
  105.     }
  106.     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,
  107.     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,
  108.     li:nth-child(26) span,li:nth-child(27) span{
  109.         display: block;
  110.         margin-top: 5px;
  111.         line-height: 0.5;
  112.     }
  113.     li:nth-child(28),li:nth-child(29){
  114.         width:45px;
  115.     }
  116.     li:nth-child(43),li:nth-child(55){
  117.         width:55px;
  118.     }
  119.     li:nth-child(56),li:nth-child(67){
  120.         width:73px;
  121.     }
  122.         li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71),
  123.         li:nth-child(72),li:nth-child(73),li:nth-child(74){
  124.         height:33px;
  125.     }
  126.     li:nth-child(72){
  127.         width:173px;
  128.     }
  129.     li:nth-child(71),li:nth-child(73){
  130.         width:37px;
  131.     }
  132.     li:nth-child(75),li:nth-child(77),li:nth-child(78){
  133.         margin-top: 18px;
  134.         height: 14px;
  135.     }
  136.  
  137.     li:nth-child(76){
  138.         height: 13px;
  139.         margin-top: 19px;
  140.     }
  141.  
  142.     li:nth-child(78){
  143.         position: absolute;
  144.         bottom: 22px;
  145.         right:38px;
  146.     }
  147.     .touch{
  148.         position: absolute;
  149.         width:200px;
  150.         height:150px;
  151.         border: 2px solid rgb(190,190,190);
  152.         bottom: 23px;
  153.         left: 200px;
  154.         border-radius: 8px;
  155.     }
  156. </style>
  157. <body>
  158.     <div class="board">
  159.         <div class="blackbar">
  160.  
  161.         </div>
  162.         <div class="keyboard">
  163.             <ul>
  164.                 <li></li>
  165.                 <li></li>
  166.                 <li></li>
  167.                 <li></li>
  168.                 <li></li>
  169.                 <li></li>
  170.                 <li></li>
  171.                 <li></li>
  172.                 <li></li>
  173.                 <li></li>
  174.                 <li></li>
  175.                 <li></li>
  176.                 <li></li>
  177.                 <li></li>
  178.                 <li></li>
  179.                 <li><span>!</span><span>1</span></li>
  180.                 <li><span>@</span><span>2</span></li>
  181.                 <li><span>#</span><span>3</span></li>
  182.                 <li><span>$</span><span>4</span></li>
  183.                 <li><span>%</span><span>5</span></li>
  184.                 <li><span>^</span><span>6</span></li>
  185.                 <li><span>&</span><span>7</span></li>
  186.                 <li><span>*</span><span>8</span></li>
  187.                 <li><span>(</span><span>9</span></li>
  188.                 <li><span>)</span><span>0</span></li>
  189.                 <li><span>—</span><span>-</span></li>
  190.                 <li><span>+</span><span>=</span></li>
  191.                 <li></li>
  192.                 <li></li>
  193.                 <li>Q</li>
  194.                 <li>W</li>
  195.                 <li>E</li>
  196.                 <li>R</li>
  197.                 <li>T</li>
  198.                 <li>Y</li>
  199.                 <li>U</li>
  200.                 <li>I</li>
  201.                 <li>O</li>
  202.                 <li>P</li>
  203.                 <li></li>
  204.                 <li></li>
  205.                 <li></li>
  206.                 <li></li>
  207.                 <li>A</li>
  208.                 <li>S</li>
  209.                 <li>D</li>
  210.                 <li>F</li>
  211.                 <li>G</li>
  212.                 <li>H</li>
  213.                 <li>J</li>
  214.                 <li>K</li>
  215.                 <li>L</li>
  216.                 <li></li>
  217.                 <li></li>
  218.                 <li></li>
  219.                 <li></li>
  220.                 <li>Z</li>
  221.                 <li>X</li>
  222.                 <li>C</li>
  223.                 <li>V</li>
  224.                 <li>B</li>
  225.                 <li>N</li>
  226.                 <li>M</li>
  227.                 <li></li>
  228.                 <li></li>
  229.                 <li></li>
  230.                 <li></li>
  231.                 <li></li>
  232.                 <li></li>
  233.                 <li></li>
  234.                 <li></li>
  235.                 <li>By Pure CSS.To Be Continued.</li>
  236.                 <li></li>
  237.                 <li></li>
  238.                 <li></li>
  239.                 <li></li>
  240.                 <li></li>
  241.                 <li></li>
  242.             </ul>
  243.         </div>
  244.         <div class="touch">
  245.  
  246.         </div>
  247.     </div>
  248. </body>
  249. </html>

纯CSS绘制mac代码的更多相关文章

  1. 碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

  2. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  3. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  4. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  5. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  6. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  7. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. 记录使用 Cake 进行构建并制作 nuget 包

    书接上一回(https://www.cnblogs.com/h82258652/p/4898983.html)?[手动狗头] 前段时间折腾了一下,总算是把我自己的图片缓存控件(https://gith ...

  2. Golang 调用 Python 代码

    go 中的 cgo 模块可以让 go 无缝调用 c 或者 c++ 的代码,而 python 本身就是个 c 库,自然也可以由 cgo 直接调用,前提是指定正确的编译条件,如 Python.h 头文件( ...

  3. first one

    我说一句话你就知道我是干什么的 hello world

  4. Android开发的插件Code Generator与LayoutCreator的安装与使用，提升你的开发效率

    前言 大家好,给大家带来Android开发的插件Code Generator与LayoutCreator的安装与使用,提升你的开发效率的概述,希望你们喜欢 学习目标 掌握两个插件的安装和使用,能够实现 ...

  5. 机器学习技法笔记：11 Gradient Boosted Decision Tree

    Roadmap Adaptive Boosted Decision Tree Optimization View of AdaBoost Gradient Boosting Summary of Ag ...

  6. 25-socket

    socket通信流程 #server端 #family参数代表地址家族,可为AF_INET或AF_UNIX.AF_INET家族包括#Internet地址,AF_UNIX家族用于同一台机器上的进程间通信 ...

  7. 使用POI导出Excel文件

    创建表头信息 表头信息用于自动生成表头结构及排序 public class ExcelHeader implements Comparable<ExcelHeader>{ /** * ex ...

  8. 学习DDD之路--勇于纠正自己的错误

    写这篇文章主要是之前三篇对DDD的介绍算是自己学习的一次试水,也希望能够有更多的人能帮我发现其中的问题.昨天继续阅读了DDD书,发现了自己之前的例子存在了一些问题,早上也和园友进行了一些讨论.最后整理 ...

  9. linux日常运维常用命令

    ---查看端口占用 netstat -ap | grep 8000 ---重启nginx sudo /usr/sbin/nginx -c /usr/local/nginx/conf/nginx.con ...

  10. Linux 软件安装到 /usr，/usr/local/ 还是 /opt 目录？

    转自:https://blog.csdn.net/aqxin/article/details/48324377 Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的 /usr:系 ...