css3 制作简易MacBook Air
2021-06-22 21:03
标签：block center 兼容问题 auto src html com css rgb 这是在谷歌浏览器下的浏览效果，因为ie的兼容性问题，所以在ie8及以下浏览器中会存在兼容问题，需要hack解决。 css3 制作简易MacBook Air 标签：block center 兼容问题 auto src html com css rgb 原文地址：http://www.cnblogs.com/asituhaitang/p/7169413.html
这个在实际工作中用处不是很大，（制作自定义键盘可能会有用...）只是为了练习一些css新特性，利用这些新特性可以做出一些好看的视觉效果，对初学者的学习和应用将起到事半功倍的作用。DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
style>
.board{
width:600px;
height:450px;
margin:50px auto;
background:rgb(210,210,210);
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
position: relative;
-webkit-box-shadow: 0px 5px 6px rgb(160,160,160);
-moz-box-shadow: 0px 5px 6px rgb(160,160,160);
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))
}
.board:before{
width:780px;
height:20px;
content:"";
display:block;
background:rgb(210,210,210);
position: absolute;
-webkit-border-radius:0px 0px 3px 3px;
-moz-border-radius:0px 0px 3px 3px;
border-radius:0px 0px 3px 3px;
border-top-left-radius:390px 18px;
border-top-right-radius:390px 18px;
top:-20px;
left:-90px;
border-bottom: 2px solid rgb(0,0,0);
background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
}
.blackbar{
width:450px;
height:18px;
position:absolute;
left:75px;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-bottom:2px solid #fff;
background: linear-gradient(top,rgb(30,30,30),rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
}
.keyboard{
position:absolute;
width:530px;
height: 216px;
position: absolute;
left:35px;
top:35px;
border:1px solid rgb(180,180,180);
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:rgba(250,250,250,1);
-webkit-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;
-moz-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;
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;
}
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;
}
li{
width:29px;
height:29px;
float: left;
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);
-webkit-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);
-moz-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);
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);
}
li:nth-child(-n+14):nth-child(n+1){
width:30px;
height:15px;
}
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;
}
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;
}
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{
position: absolute;
width:200px;
height:150px;
border: 2px solid rgb(190,190,190);
bottom: 23px;
left: 200px;
border-radius: 8px;
}
style>
head>
body>
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>
li>span>!span>span>1span>li>
li>span>@span>span>2span>li>
li>span>#span>span>3span>li>
li>span>$span>span>4span>li>
li>span>%span>span>5span>li>
li>span>^span>span>6span>li>
li>span>&span>span>7span>li>
li>span>*span>span>8span>li>
li>span>(span>span>9span>li>
li>span>)span>span>0span>li>
li>span>—span>span>-span>li>
li>span>+span>span>=span>li>
li>li>
li>li>
li>Qli>
li>Wli>
li>Eli>
li>Rli>
li>Tli>
li>Yli>
li>Uli>
li>Ili>
li>Oli>
li>Pli>
li>span>{span>span>[span>li>
li>span>}span>span>]span>li>
li>span>|span>span>\span>li>
li>li>
li>Ali>
li>Sli>
li>Dli>
li>Fli>
li>Gli>
li>Hli>
li>Jli>
li>Kli>
li>Lli>
li>span>:span>span>;span>li>
li>span>"span>span>‘span>li>
li>li>
li>li>
li>Zli>
li>Xli>
li>Cli>
li>Vli>
li>Bli>
li>Nli>
li>Mli>
li>span><span>span>,span>li>
li>span>>span>span>.span>li>
li>span>?span>span>/span>li>
li>li>
li>li>
li>li>
li>li>
li>li>
li>By Pure CSS.To Be Continued.li>
li>li>
li>li>
li>li>
li>li>
li>li>
li>li>
ul>
div>
div class="touch">
div>
div>
body>
html>
