纯CSS仿MAC BOOK

- 日理万妓 2022-06-18 05:10 244阅读 0赞

这个是之前看到一个大神写的，当时觉得有点意思就也仿着写了一下， 和大家分享..  如有说的不对或不恰当的地方，希望读者指出，共同进步 ![吐舌头][tongue.gif]

先展示一下效果图：

![20170330123353591][]

（1）将html结构布局写出来，就是div嵌套；

（2）在键盘区域插入按键，在keyboard里创建一个列表UL，这是一个痛苦的过程，要注意算清楚“li”也就是按键的数量（一共78个），不然到后面会很麻烦的。

在这里我只举例一个按键的内容，你们可以自行补充：<li>esc</li>

注意上面一排数字键的格式应该这样写：<li><span>!</span><span>1</span></li>

现在就可以开始CSS部分啦~

（3）首先写board的样式：

.board\{   
margin:0 auto;  
padding:0 auto;  
width:600px;  
height:450px;  
margin-top:50px;  
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));   //设置背景颜色线性渐变  
\}

**插注：[linear-gradient][](线性渐变)：**共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

现在图片应该是这样的，可以看到面板大致成型，但是按键还没有设置：

![20170331175523467][]

（4）设置盖子样式，这里使用：before伪元素：

.board:before\{   
content:''; //设置文本内容为无  
display:block;//设置为行块元素  
width:780px;  
height:20px;  
border-radius:0 0 3px 3px;  
border-top-left-radius:390px 18px;//设置左上角边框的形状  
border-top-right-radius:390px 18px;//设置右上角边框的形状  
position:absolute;//设置绝对定位  
left:-90px;top:-20px;  
border-bottom:2px solid rgb(0,0,0);//将盖子设置在面板上方并且居中显示  
background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(225,225,225));//设置背景颜色线性渐变  
\}

**插注：**:before 伪元素在元素之前添加内容。这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

现在图片应该是这样的，可以看到盖子的样子已经出来了，离我们的计划又近一步啦~：

![20170331184423553][]

（5）接下来就是设置按键区域的步骤啦~

.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;//设置内边框阴影  
\}

现在图片应该是这样的，可以看到按键区域范围已经大致成型，但是按键还没有设置：

![20170331201623660][]

（6）接下来设置按键即Li的格式：

ul,li\{  
list-style:none;//清除li默认样式  
margin:0 auto;  
padding:0 auto;  
display:block;//设置为行块元素  
\-webkit-user-select:none;//禁止用户选中  
\-moz-user-select:none;//禁止用户选中  
\-ms-user-select:none;//禁止用户选中  
user-select:none;//禁止用户选中  
\}

.keyboard ul\{  
width:530px;  
margin-top:8px;//设置距离上面的外边距  
padding-left:8px;//设置内左边距  
\}  
.keyboard ul li\{  
width:29px;height:29px;  
float:left; //设置左浮动，使li浮动到一行  
margin-right:5px;//按键左右之间的距离为5px;  
margin-bottom:5px;//按键上下之间的距离为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); //设置四条边框阴影  
\}

现在图片应该是这样的，可以看到总体效果已经大致成型，距离我们需要的样子只差一点了，细心的朋友应该已经发现有些按键的大小与实际有点区别：

![20170331202505704][]

(7)现在开始设置第一排Fn按键的样式高度;

li:nth-child(-n+14):nth-child(n+1)\{  
width:30px;  
height:15px;  
line-height:15px;  
\}

现在图片应该是这样的，可以看到第一排Fn按键样式已经改变：

![20170331204713644][]

（8）现在开始设置第二排数字按键的内容样式，使里面的内容上下显示;

li:nth-child(-n+27):nth-child(n+16) 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;  
\}

现在图片应该是这样的，可以看到第二排数字按键内容样式已经改变：

![20170331205025989][]

（9）现在设置键盘左右两边比较大的六个按键的样式：

.keyboard ul li:nth-child(28),.keyboard ul li:nth-child(29)\{  
width:45px;  
\}  
.keyboard ul li:nth-child(43),.keyboard ul li:nth-child(55)\{  
width:55px;  
\}  
.keyboard ul li:nth-child(56),.keyboard ul li:nth-child(67)\{  
width:73px;  
\}

现在图片应该是这样的，可以看到左右两边比较大的六个按键样式已经改变：

![20170331205448842][]

（10）设置空格键和其两侧的两个按键的样式：

li:nth-child(-n+74),li:nth-child(n+68)\{  
width:33px;  
\}  
.keyboard ul li:nth-child(72)\{  
width:173px;  
\}  
.keyboard ul li:nth-child(71),.keyboard ul li:nth-child(73)\{  
width:37px;  
\}  
现在图片应该是这样的，可以看到空格键和其两侧的两个按键的样式已经改变：

![20170331205938958][]

（11）设置四个光标键的样式：

.keyboard ul li:nth-child(75),.keyboard ul li:nth-child(77),.keyboard ul li:nth-child(78)\{  
margin-top:18px;  
height:14px;  
\}  
.keyboard ul li:nth-child(76)\{  
height:13px;   
margin-top:19px;  
\}  
.keyboard ul li:nth-child(78)\{  
position:absolute;  
bottom:22px;  
right:38px;  
\}

现在图片应该是这样的，可以看到四个光标键样式已经改变：

![20170331210344916][]

（12）现在就是设置触摸板的样式了：

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

设置好的图片应该如下：

![20170331210926404][]

（13）设置好触摸板的样式，有没有朋友总感觉缺点啥，最后一步应该设置黑色转轴区域了：

.blackbar\{  
width:450px;height:18px;  
position:absolute;//设置绝对定位  
left:75px;  
border-radius:2px;//设置四个角样式  
border-bottom:2px solid \#fff;//设置底边框样式  
border-right:2px solid \#fff;//设置右边框样式  
background:-webkit-linear-gradient(top,rgb(30,30,30),rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);//设置转轴背景线性渐变  
\}

效果如下：

![20170401160043400][]

到这里我们的模仿Mac Book就算是大功告成啦,有些按键的内容我就偷赖没有填入，这个大家可以自行补充啦~

感谢阅读![微笑][smile.gif]

[tongue.gif]: /images/20220618/94616c4a1b8148818942d5626fa9218d.png
[20170330123353591]: /images/20220618/bf9457b668bf4b6da4129a5447422572.png
[linear-gradient]: http://lists.w3.org/Archives/Public/www-style/2011Apr/0083.html
[20170331175523467]: /images/20220618/97a472e349974a278123971b2e7d196f.png
[20170331184423553]: /images/20220618/17923aabdf244b07aafc8758f3380853.png
[20170331201623660]: /images/20220618/de40b774a45d45ce86996166f0890f98.png
[20170331202505704]: /images/20220618/3bf31a9997ae4500bce8c71d8575bd06.png
[20170331204713644]: /images/20220618/1a5a63350af548039b78663f803876ff.png
[20170331205025989]: /images/20220618/07e04108ab674a19a47d663d5db4ebd7.png
[20170331205448842]: /images/20220618/8d03effb649f4f98a0fad89dd2cd810f.png
[20170331205938958]: /images/20220618/8bb85aae09d84faab2e17af908949f1c.png
[20170331210344916]: /images/20220618/89e7da6ec818404fb468139a3b15b207.png
[20170331210926404]: /images/20220618/187cc5257039455eb35dfffd6e45c462.png
[20170401160043400]: /images/20220618/b101cad9eb2c4dc7a580b5e72a7d7859.png
[smile.gif]: /images/20220618/417fb694b70d4eb78fc12f6f9e70b3ec.png