纯CSS打造银色MacBookAir精选.docxVIP

纯CSS打造银色MacBook Air（完整版）写在前面的前面前几天讲解了自己用纯CSS绘制银色MacBook Air的详细过程，由于篇幅较长就分了两部分介绍，今天我将其合二为一方便大家查看，该文章用Markdown+少量的html编辑。同时在用markdown的过程中发现，一些markdown语法在cnblog博文里面和直接在浏览器显示是有区别的，比如网址链接和引用，但是完全不影响使用和查看。为了让大家更好的查看，markdown中的所有链接我都用a标签进行了修饰，并没有使用markdown中的链接方式。写在前面前段时间自己用CSS绘制了一个银色的MacBook Air，今天把它从电脑硬盘深处挖了出来，我把我的思路和想法写下来和小伙伴们分享分享。先把最后的效果给大家。First 注：如果图片显示过大没有完全显示，请F5或Ctrl+F5。Double 注：本文为Markdown+少量html编辑。Triple 注：祝愿小伙伴们每天都过得快乐。这其实是一个半成品，键盘上的其他图标和文字都还没有加，图标的话可以用font-face，待我找着合适的字体图标网址链接后给大家补全，同时也欢迎小伙伴们捣腾。小伙伴们也可以猛戳这里去Codepen上查看高清无码大图，给出链接：http://codepen.io/myvin/pen/yNezZR零、第零步这里使用了CSS的before、after伪元素、渐变gradient、阴影、nth-child选择器等相关内容，阴影和渐变效果从图片上可能看的不太清楚，小伙伴们可以去上面的Codepen上查看，文章的最后我会给出整个源代码，有兴趣的可以自己随意修改完善。Ok，开始肆无忌惮地进入。首先介绍一下绘制的结构。对于键盘，就是建立了一个无序列表ul，然后写上若干个li即可，其他的用几个div包裹即可，先给出HTML结构：div?class=board?????????div?class=blackbar??????????????????????/div?????????div?class=keyboard?????????????ul??????????????????????????????/ul?????????/div?????????div?class=touch??????????????????????/div?/div?4个div加上2个伪元素，总共六个部分构成整个MacBook Air。board是MacBook Air的底座，blackbar是屏幕的那个黑色旋转轴，keyboard是键盘，touch是触控板；board:before是上面的盖 子，border-bottom是盖子下面的那个黑色细长条。Ok，这六部分构成了整个MacBook Air。没图我说个什么：接下来，我按照我的绘制顺序一步步来介绍。口渴的小伙伴可以先去沏杯茶。一、第一步先给出HTML，下面是一段很长很长但是却没什么研究价值的无序列表，让滚轮飞起来吧：?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?????????????????lispan!/spanspan1/span/li?????????????????lispan@/spanspan2/span/li?????????????????lispan#/spanspan3/span/li?????????????????lispan$/spanspan4/span/li?????????????????lispan%/spanspan5/span/li?????????????????lispan^/spanspan6/span/li?????????????????lispan/spanspan7/span/li???????????