纯CSS打造银色MacBook Air（二）

上一篇：《纯CSS打造银色MacBook Air（一）》

p{font-size:14px;}

写在前面

上一篇我们谈了《纯CSS打造银色MacBook Air（一）》，今天我们接着谈。

First注：如果图片过大没有完全显示，请F5或Ctrl+F5。

Double注：本文为Markdown+少量html编辑。

Triple注：没有查看第一部分的可以猛戳上方查看第一部分。

三、第三步

这一步来做屏幕旋转轴，也就是屏幕下方的那条黑色矩形blackbar。

同样先设置width和height，absolute定位，居中显示，移动的距离可以参考上面的方法小算一下就可以了，加上2px的圆角，为了显示出旋转轴立体的沟槽，我们给blackbar类的下边框和右边框加上2px的白色实线，同时给blackbar一个从上到下的渐变，中间显示出宅宅的亮丽的白色即可，颜色和过渡的位置小伙伴们可以自行了断，哦不对，是自行把握。

实现和效果：

.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%);
}

四、第四步

接下来就是MacBook Air最显眼的部分了，那就是键盘部分，为什么显眼呢，因为它占的地儿最大吧哈哈。

在画键盘之前呢，小伙伴们最好先算好整个键盘区域的大小，各个按键的大小和排列，否则到时候只能一点点重新调。好了，咱先把键盘区域画下来吧。

传统步骤，设置宽高，绝对定位，然后设置left、top居中，勾勒出1px solid 颜色为

rgb(180,180,180)

的border，8px的圆角，白色的背景颜色；

实现和效果如下：

.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给keyboard的四条边框添加四条内部inset阴影，关于box-shadow以后有机会再讲，先把实现和效果贴上：

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;

雏形出来了，接下来就是一个个的nth-child了。让我们接着猛烈地荡起双桨吧。

五、第5步

就像前面提到的，我们最好事先先计算好每个按键的大小和位置，做到心中有数，不至于到时候一片混乱。

首先是一些常规的设置，去掉列表标志，margin、padding设置，列表的宽和高，按照之前的计算，设置按键与按键的间距，大致排列下这么多个按键，并给按键添加4px的圆角，为了显示立体效果，加上一个border：

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);

附上代码和效果:

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);
}

看上去还很乱，但是妈妈说，心急吃不了热豆腐，慢慢来，保准等会就驯服得她服服帖帖的。

细心的小伙伴们会发现有一段代码，貌似不细心的也能发现，就是这段：

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

这是什么意思呢？先来看下不加这段代码的效果：



对，就是这一片的蓝色，当用鼠标去键盘上拖着选中的时候，那一个个的li就会被选中，添加这段代码就能还我们一片巧克力键盘了。

我们先把键盘最上面的那一排功能键先捣腾好。这里我们用nth-child来选择上面那一排14个功能键，并给它们设置样式。

实现和效果如下：

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;
}

接下来调整第二行的数字按键上的那些数字和符号的一上一下的体位，同样先用nth-child选中再设置样式：

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的绘制了。

触控板的绘制和键盘的绘制是一样的，设置大小定位，圆角，border即可。直接上：

.touch{
position: absolute;
width:200px;
height:150px;
border: 2px solid rgb(190,190,190);
bottom: 23px;
left: 200px;
border-radius: 8px;
}

七、小了个结

到这里，MacBook Air就算完成了，还是那句话，是个半成品，一些icon还待用font-face来完成，当然还可以添加些动画，让它旋转来展示等等，这只是抛砖引玉而已，期待小伙伴们更多奇思妙想。

没有查看第一部分的可以猛戳下方查看第一部分。

下一篇：《RGBA与Opacity区别小解》