纯CSS打造银色MacBook Air精要.docx

纯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，待我找着合适的字体图标网址链接后给大家补全，同时也欢迎小伙伴们捣腾。 小伙伴们也可以猛戳 HYPERLINK http://codepen.io/myvin/pen/yNezZR \t _blank 这里去 HYPERLINK http://codepen.io/myvin/pen/yNezZR \t _blank Codepen上查看 HYPERLINK http://codepen.io/myvin/pen/yNezZR \t _blank 高清无码大图，给出链接：  HYPERLINK http://codepen.io/myvin/pen/yNezZR \t _blank http://codepen.io/myvin/pen/yNezZR 零、第零步 这里使用了CSS的before、after伪元素、渐变gradient、阴影、nth-child选择器等相关内容，阴影和渐变效果从图片上可能看的不太清楚，小伙伴们可以去上面的 HYPERLINK http://codepen.io/myvin/pen/yNezZR \t _blank 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。 没 HYPERLINK http://codepen.io/myvin/pen/yNezZR \t _blank 图我说个什么：  接下来，我按照我的绘制顺序一步步来介绍。口渴的小伙伴可以先去沏杯茶。 一、第一步 先给出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? ??