再网上看到的，试着敲了一遍，弥补我不堪的css

2017-02-06

Css底子不行，看人家用css搭建了一个macBook，甚是不错，模仿敲了一遍。
首先有些图标并没有添加，只做到大概和基本键位，其次并没有实现键位的功能，日后如果有时间，还可添加笔记本盖打开的效果。
实现仅用HTML和CSS/CSS3,其中使用了伪类及CSS3的选择器nth-Child,整体代码没有难度。

结构

<body>
<!--平板-->
<div class="board">
    <!--macBar-->
    <div class="bar"></div>
    <!--键盘-->
    <div class="keyboard">
        <!--按键-->
        <ul></ul>
    </div>
    <!--触摸区-->
    <div class="touch"></div>
</div>
</body>

添加按键

<ul>
        ....省略
        <li><span>!</span><span>1</span></li>
        <li><span>@</span><span>2</span></li>
        <li><span>#</span><span>3</span></li>
        <li></li>
        <li></li>
        <li>Q</li>
          ....省略
    </ul>

多个span嵌套表示某个有两个值的按键。

board 的实现

.board{
    margin: 50px auto;
    padding: 0 auto;
    height: 450px;
    width: 600px;
    background: #D2D2D2;
    border-radius: 20px;
    position: relative;
    box-shadow: 0px 5px 6px rgb(160,160,160);
    background: -webkit-linear-gradient(60deg,#fafafa 25%,#d2d2d2);/*不考虑ie6~9兼容*/
}

电脑盖

用伪类进行设置.

.board:before{
    content: "";
    width:780px;
    height: 20px;
    display: block;
    background:#d2d2d2;
    position: absolute;
    top:-20px;
    left:-90px;
    /**
    上面左右两个大圆角，下面两个小圆角
     */
    border-radius: 0 0 3px 3px;
    border-top-left-radius: 390px 18px;
    border-top-right-radius: 390px 18px;
    border-bottom: 2px solid ;
    background: -webkit-linear-gradient(top,#d2d2d2 50%,#fafafa)
}

bar

盖和主机的链接部分

}
.board .bar{
    width: 450px;
    height: 20px;
    position: absolute;
    left:75px;
    top:2px;
    border-radius: 2px;
    /**
    留空白，更像那么回事
     */
    border: 2px solid #fff;
    border-top: 0;
    background:-webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
}

键盘

绘制键盘区,就是画个框子

.board .keyboard{
    position: absolute;
    left:35px;
    top:35px;
    width: 530px;
    height: 216px;
    border:1px solid #b4b4b4;
    border-radius: 8px;
    background: #fafafa;
    /**
    阴影增加立体感，分分钟3d起来
     */
    box-shadow:2px 0px 2px #b4b4b4 inset,
    0px 3px 3px #b4b4b4 inset,
    -2px -0px 1px #b4b4b4 inset,
    0px -3px 3px #b4b4b4 inset;
}

按键

1 对按键做统一格式安排如下：

ul,li{
    list-style: none;
    padding: 0 auto;
    margin: 0 auto;
    display: block;
    font-family: Verdana;
    cursor: pointer;
    /**
    按键处理为文本不可选择
     */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul{
    width:530px;
    margin-top:8px;
    padding-left: 8px;
}
li{
    width: 29px;
    height: 29px;
    line-height: 29px;
    float:left;
    margin-right: 5px;
    margin-bottom: 5px;
    color: #fff;
    background: #000;
    text-align: center;
    font-size:12px;
    border: 1px solid #464646;
    border-radius: 4px;
    box-shadow: 1px 0px 0px #000,
    0px 1px 0px #000,
    -1px 0px 0px #000,
    0px -1px 0px #000;
}

2 对第一排的功能按键进行大小调整

/**
利用nth-Child选择器,选择前14个功能键
 */
li:nth-child(-n+14) {
    width: 30px;
    height: 15px;
}

3 拥有换挡多功能的按键

/**
拥有换挡功能的键
 */
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.7;
}

4 方向键

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

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

最后，将touch区放上

.touch{
    position: absolute;
    width: 200px;
    height: 150px;
    border:2px solid #bebebe;
    bottom:23px;
    left:200px;
    border-radius: 8px;
    background: #d6d6d6;
}

ok了，最终图如下
效果图