纯 css 画一个 MacBookAir

最新推荐文章于 2024-07-04 10:59:43 发布
最新推荐文章于 2024-07-04 10:59:43 发布
阅读量2k 收藏 42
点赞数 36
分类专栏： 代码块 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36330464/article/details/137358546
版权
本文详细展示了如何使用HTML和CSS代码创建一个仿照MacBookAir设计的虚拟键盘，包括键盘布局和触摸板效果，适合前端开发者学习和模仿。
摘要由CSDN通过智能技术生成

效果图和代码如下

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>仿MacBookAir</title>
    <style>
      .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));
      }
      .board:before {
        content: '';
        display: block;
        width: 780px;
        height: 20px;
        background: rgb(210, 210, 210);
        border-top-left-radius: 390px 18px;
        border-top-right-radius: 390px 18px;
        background: -webkit-linear-gradient(top, rgb(210, 210, 210) 50%, rgb(255, 255, 255));
        border-bottom: 2px solid rgb(0, 0, 0);
        border-bottom: 2px solid rgb(0, 0, 0);
      }
      .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));
      }
      .blackbar {
        width: 450px;
        height: 18px;
        position: absolute;
        left: 75px;
        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;
      }
      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(-n + 14):nth-child(n + 1) {
        width: 30px;
        height: 15px;
        line-height: 15px;
      }
      li:nth-child(-n + 27):nth-child(n + 15) span,
      li:nth-child(40) span,
      li:nth-child(41) span,
      li:nth-child(42) span,
      li:nth-child(53) span,
      li:nth-child(54) span,
      li:nth-child(-n + 66):nth-child(n + 64) 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(-n + 74):nth-child(n + 68) {
        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);
        bottom: 23px;
        left: 200px;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <div class="board">
      <div class="blackbar"></div>
      <div class="keyboard">
        <ul>
          <li>esc</li>
          <li>F1</li>
          <li>F2</li>
          <li>F3</li>
          <li>F4</li>
          <li>F5</li>
          <li>F6</li>
          <li>F7</li>
          <li>F8</li>
          <li>F9</li>
          <li>F10</li>
          <li>F11</li>
          <li>F12</li>
          <li></li>
          <li><span>~</span><span>、</span></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>delete</li>
          <li>tab</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><span>{</span><span>[</span></li>
          <li><span>}</span><span>]</span></li>
          <li><span>|</span><span>\</span></li>
          <li>caps lock</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><span>:</span><span>;</span></li>
          <li><span>"</span><span>,</span></li>
          <li><span>enter</span><br /><span>return</span></li>
          <li>shift</li>
          <li>Z</li>
          <li>X</li>
          <li>C</li>
          <li>V</li>
          <li>B</li>
          <li>N</li>
          <li>M</li>
          <li><span><</span><span>,</span></li>
          <li><span>></span><span>.</span></li>
          <li><span>?</span><span>/</span></li>
          <li>shift</li>
          <li>fn</li>
          <li>ctrl</li>
          <li>alt</li>
          <li>command</li>
          <li></li>
          <li>command</li>
          <li>alt</li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="touch"></div>
    </div>
    <br />
  </body>
</html>
shifeng~
关注
  • 36
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
html银白色,纯CSS打造银色MacBookAir（二）_html/css_WEB-ITnose
weixin_42571444的博客
06-15 637
上一篇：《纯CSS打造银色MacBook Air(一)》 写在前面上一篇我们谈了《纯CSS打造银色MacBook Air(一)》，今天我们接着谈。First注：如果图片过大没有完全显示，请F5或Ctrl+F5。Double注：本文为Markdown+少量html编辑。Triple注：没有查看第一部分的可以猛戳上方查看第一部分。 三、第三步这一步来做屏幕旋转轴，也就是屏幕下方的那条黑色矩形black...
css一起控制多个标签,纯css实现多标签浮动居中（任意个数）
weixin_35316354的博客
08-04 1284
在做的一个网页上有一块要用浮动标签，具体就是网页底部有未知数量，未知尺寸的元素要水平居中，有点类似于分页器。首先，我们先新建一个容器con，就是标签的爸爸，用来控制标签在页面的位置，.father{position:absolute;width:100%;height:30px;bottom:0;}接下来分析子元素的属性，因为元素的尺寸是未知的(主要是宽度)，所以不能给固定宽度，标签的个数也是未知...
苹果MacBook Air 13寸2020款 Win10驱动
07-07
MacBook Air（视网膜显示屏，13 英寸，2020 年）TJ2CH/A 大致配置 MacBook Air CPU:Intel（R) Core（TM) i3-1000NG4 CPU @ 1.10GHz 内存：8.00GB (7.80GB可用） 硬盘：Apple APPLE SSD AP0256 SCSI Disk Device （256G固态） 显卡：intel（R）lris（R）Plus Graphics （核心显卡） 两个雷雳 3 端口 笔记本颜色：灰色 驱动均为原本Mac环境下下载、仅是Win10系统的驱动而已；暂不提供任何技术支持，请知悉。
超漂亮的仿MAC的CSS菜单.rar
07-04
超漂亮的仿MAC的CSS菜单
苹果系统css样式变化
weixin_34335458的博客
03-23 228
原因：苹果自带样式覆盖了 参考文章比较详细，就不自己写了，copy了一份~~~ @参考文章 只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了！~ input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } textarea {...
纯CSS仿MAC BOOK
NINE-NINE的博客
03-30 1778
纯CSS仿MAC BOOK
纯CSS打造银色MacBook Air（完整版）
测试
11-26 346
纯CSS打造银色MacBook Air（完整版）写在前面前段时间自己用CSS绘制了一个银色的MacBook Air，今天把它从电脑硬盘深处挖了出来，我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。 这其实是一个半成品，键盘上的其他图标和文字都还没有加，图标的话可以用font-face，待我找着合适的字体图标网址链接后给大家补全，同时也欢迎小伙伴...
用HTML5Css敲一个画图
栋栋的博客
01-10 238
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MacBook Air</title> <style> .board { margin: 0 auto; padding: 0 auto; width: 600px; height: 450px; margin-top: 50p
codepen中html如何引用图片,源自codepen的25个最受欢迎的HTML/CSS 代码
weixin_29545089的博客
06-04 974
Codepen是一个非常了不起的网页应用。只要电脑能够上网，你就可以创建HTML, CSS和Javascript。如果你想选择性加入PRO版本，你会得到一些非常酷的效果诸如：世界范围内的成对编程(在线合作编码)，给学生授课(学生可以通过网络观看你实时工作情况)，轻松上传工作所需文件，等等。我搜索了一些时下最好最流行的大家可能会感兴趣的codepen(仅限于HTML和CSS)。如果你想把它们融入到你...
win7 macbook air驱动包 共10款
07-12
macbookairwin7驱动合集是小编为大家整理的一些win系统常用的驱动包，让用户在使用macbookair安装完系统后，避免出行部分系统无法继续安装的问题，这些驱动包均可直接下载安装使用，使系统安装更加的方便，需要的...
MacBookAir安装双系统
12-29
在 MacBookAir 上安装双系统的第一步是使用 Boot Camp 分割磁盘。Boot Camp 是苹果系统自带的软件，可以帮助用户分割硬盘，以便安装 Windows 7 操作系统。在 Finder 中，点选“前往”>>“工具”>>“工具程序资料夹”...
Apple Macbook Air A1370 (MLB K99).pdf_macbookair_chema_AIR_
10-03
这些组件通过复杂的布线连接，形成了一个高效的硬件系统。 CPU是整个系统的运算中心，2014年的Macbook Air可能搭载Intel的Haswell或Broadwell架构处理器，提供高效能和低功耗。GPU则集成在CPU内，负责图形处理任务...
苹果电脑MACBOOK AIR A1370 BOOTCAMP WIN10 X64驱动下载.zip
09-25
从标签“苹果电脑MACBOOKAIR”可以看出，此压缩包的内容与苹果公司的MacBook Air系列电脑有关，特别是A1370这一特定型号。这意味着驱动程序是针对该特定硬件配置优化的。 压缩包内的文件名列表如下： 1. CS420X64....
受欢迎的HTML/CSS代码
weixin_30896825的博客
10-09 48
在下面的例子中你会看到各种各样的片段，HTML 陈列，登录方式，垂直菜单，甚至时下最流行的主题：扁平化设计（扁平化图像，扁平化按钮形状，扁平化用户界面要素，等）。好好欣赏这些精选的代码片段吧，如果把它们融入到设计中去，那会大大节省很多时间，或者你可以考虑下从别人那里学习一些新东西，那就保存下来以备不时之需吧。 CSS3 Working Clock 这是一个纯css3时钟。它使用css动画还有图...
BootStrap前端框架
qq_34283987的博客
11-14 1670
一.what 前端CSS框架,另一个前端框架Foundation前端框架:使用HTML、CSS、JavaScript编写的组件工具集,拿来可以直接用，不用从造轮子.二.why 最流行的前端框架、用的多Twitter公司于2011年8月开源的整体式前端框架,由Twitter的设计师Mark Otto和Jacob Thornton合作开发，短短几个月时间红遍全球,大量的Bootstrap风格的网站出现在
CSS 原生嵌套语法兼容性问题
whs15193553607的博客
07-03 273
所谓的嵌套，就是将一个 CSS 规则放在另一个（嵌套规则）中，子规则的选择器将相对于父规则的选择器。这有利于代码的模块化和可维护性。原来只能在 CSS 预处理器Less、Sass中使用的嵌套功能，先在可以在原生 CSS 中使用。请注意这是一个最近的更新，被称为宽松的CSS嵌套。它适用于最新的Chrome Canary和Safari技术预览版。
uniapp自定义富文本现实组件（支持查看和收起）
最新发布
qq_41733851的博客
07-04 231
剩下就是直接在用template了。
使用css，让div消失在视野中的方法
博哥的二进制世界
07-03 357
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；
macbook air
09-29
MacBook Air过热是一个常见的问题，特别是对于使用2020款MacBook Air的用户来说，因为MacBook Air没有很好的通风选项。过热问题并不仅限于MacBook Air，其他电脑也可能会面临类似的问题。为了找到导致您的MacBook ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shifeng~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值