日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
純CSS打造銀色MacBookAir（完整版）

寫在前面的前面

前幾天講解了自己用純CSS繪制銀色MacBook Air的詳細過程，由于篇幅較長就分了兩部分介紹，今天我將其合二為一方便大家查看，該文章用Markdown+少量的html編輯。

同時在用markdown的過程中發(fā)現(xiàn)，一些markdown語法在cnblog博文里面和直接在瀏覽器顯示是有區(qū)別的，比如網(wǎng)址鏈接和引用，但是完全不影響使用和查看。為了讓大家更好的查看，markdown中的所有鏈接我都用a標簽進行了修飾，并沒有使用markdown中的鏈接方式。

寫在前面

前段時間自己用CSS繪制了一個銀色的MacBook Air，今天把它從電腦硬盤深處挖了出來，我把我的思路和想法寫下來和小伙伴們分享分享。先把***的效果給大家。

First 注：如果圖片顯示過大沒有完全顯示，請F5或Ctrl+F5。

Double 注：本文為Markdown+少量html編輯。

Triple 注：祝愿小伙伴們每天都過得快樂。

這其實是一個半成品，鍵盤上的其他圖標和文字都還沒有加，圖標的話可以用font-face，待我找著合適的字體圖標網(wǎng)址鏈接后給大家補全，同時也歡迎小伙伴們搗騰。

小伙伴們也可以猛戳這里去Codepen上查看高清無碼大圖，給出鏈接：

http://codepen.io/myvin/pen/yNezZR

零、第零步

這里使用了CSS的before、after偽元素、漸變gradient、陰影、nth-child選擇器等相關內(nèi)容，陰影和漸變效果從圖片上可能看的不太清楚，小伙伴們可以去上面的Codepen上查看，文章的***我會給出整個源代碼，有興趣的可以自己隨意修改完善。

Ok，開始肆無忌憚地進入。

首先介紹一下繪制的結構。

對于鍵盤，就是建立了一個無序列表ul，然后寫上若干個li即可，其他的用幾個div包裹即可，先給出HTML結構：

 
 
    
  
  
    2. 
  
  
  2.         
    3. 
  
  
  3.             
    4. 
  
  
  4.         
  •         
  •             
    •                 
    •             
  •         
  •         
  •             
  •         

  • 4個div加上2個偽元素，總共六個部分構成整個MacBook Air。board是MacBook Air的底座，blackbar是屏幕的那個黑色旋轉(zhuǎn)軸，keyboard是鍵盤，touch是觸控板；board:before是上面的蓋 子，border-bottom是蓋子下面的那個黑色細長條。Ok，這六部分構成了整個MacBook Air。

    沒圖我說個什么：

    接下來，我按照我的繪制順序一步步來介紹。口渴的小伙伴可以先去沏杯茶。

    一、***步

    先給出HTML，下面是一段很長很長但是卻沒什么研究價值的無序列表，讓滾輪飛起來吧：

     
 
      
  
  
      2. 
  
  
    2.         
      3. 
  
  
    3.             
      4. 
  
  
    4.         
  •         
  •             
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    • !1
    •                 
    • @2
    •                 
    • #3
    •                 
    • $4
    •                 
    • %5
    •                 
    • ^6
    •                 
    • &7
    •                 
    • *8
    •                 
    • (9
    •                 
    • )0
    •                 
    • —-
    •                 
    • +=
    •                 
    •                 
    •                 
    • Q
    •                 
    • W
    •                 
    • E
    •                 
    • R
    •                 
    • T
    •                 
    • Y
    •                 
    • U
    •                 
    • I
    •                 
    • O
    •                 
    • P
    •                 
    •                 
    •                 
    •                 
    •                 
    • A
    •                 
    • S
    •                 
    • D
    •                 
    • F
    •                 
    • G
    •                 
    • H
    •                 
    • J
    •                 
    • K
    •                 
    • L
    •                 
    •                 
    •                 
    •                 
    •                 
    • Z
    •                 
    • X
    •                 
    • C
    •                 
    • V
    •                 
    • B
    •                 
    • N
    •                 
    • M
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    • By Pure CSS.To Be Continued.
    •                 
    •                 
    •                 
    •                 
    •                 
    •                 
    •             
  •         
  •         
  •             
  •         
  •     

    • 鍵盤按鍵為若干個li，其中按鍵上有兩個符號的我用兩個span包了起來，像這樣：

     
 
      
  
  
    2. !1
      3.

    因為它們***式一上一下的69體位，用span包裹住便于分別布置它們的位置。

    先繪制一個600*450的div，并將board居中，給一個銀色的color，這里用的是rgb(210,210,210)，用border-radius繪制出四個20px的圓角，用box-shadow給出一個灰色的陰影，這里用的灰色是rgb(160,160,160)，小伙伴們可以自己選擇合適的顏色，***從div的左下角到右上角以60度添加一個線性漸變linear-gradient，是從白色開始從四分之一出過渡到灰色。因為之后的div會用到絕對定位，所以在此先把其父元素board定位為relative。

    完整的代碼及效果如下：

     
 
      
  
  
    1. .board{
      2. 
  
  
    2.     margin: 0 auto;
      3. 
  
  
    3.     padding: 0 auto;
      4. 
  
  
    4.     width: 600px;
      5. 
  
  
    5.     height: 450px;
      6. 
  
  
    6.     margin-top: 50px;
      7. 
  
  
    7.     background: rgb(210,210,210);
      8. 
  
  
    8.     border-radius: 20px;
      9. 
  
  
    9.     position: relative;
      10. 
  
  
    10.     box-shadow: 0px 5px 6px rgb(160,160,160);
      11. 
  
  
    11.     background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
      12. 
  
  
    12. }
      13.

    這樣，一個有陰影和線性漸變過渡效果的面板就率先完成了。

    #p#

    二、第二步

    接下來我要畫筆記本蓋子，用的是偽元素board:before。

    因為蓋子是翻起來的，所以從上往下看是一個窄邊。把board:before填充為780px*20px的div，背景顏色為灰色。

    實現(xiàn)及效果如下：

     
 
      
  
  
    1. .board:before{
      2. 
  
  
    2.     content: '';
      3. 
  
  
    3.     display: block;
      4. 
  
  
    4.     width: 780px;
      5. 
  
  
    5.     height: 20px;
      6. 
  
  
    6.     background: rgb(210,210,210);
      7. 
  
  
    7. }
      8.

    然后調(diào)一下位置，board:before定位為絕對定位，board寬600px，蓋子寬780px，所以left=- (780-600)/2=-90px，top為board:before的高20px，順帶做出一個大弧形的效果，水平半徑取大一些，垂直半徑取小一 些，like this：

    border-top-left-radius: 390px 18px;
    border-top-right-radius: 390px 18px;

    對border-radius不太熟悉的小伙伴可以查看之前的《CSS3小分隊——進擊的border-radius》。

    此時的效果如下：

    有那么個意思了，為了做出立體的效果，我們給蓋子從上到下加個漸變的過渡效果：

    background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));

    再順帶把屏幕下的那條小黑條加上，一句話很簡單：

    border-bottom: 2px solid rgb(0,0,0);

    看看效果先：

    有沒有感覺某些地方有些違和？放大看一下這里：

    來個更加菊部的：

    對，就是這個小角處，給點效果：

    border-bottom: 2px solid rgb(0,0,0);

    再看看效果：

    這樣黑邊那也有了小的光滑弧度過渡，顯得更加自然。

    附上這一步的完整代碼和效果：

     
 
      
  
  
    1. .board:before{
      2. 
  
  
    2.     content: '';
      3. 
  
  
    3.     display: block;
      4. 
  
  
    4.     width: 780px;
      5. 
  
  
    5.     height: 20px;
      6. 
  
  
    6.     background: rgb(210,210,210);
      7. 
  
  
    7.     border-radius: 0px 0px 3px 3px;
      8. 
  
  
    8.     border-top-left-radius: 390px 18px;
      9. 
  
  
    9.     border-top-right-radius: 390px 18px;
      10. 
  
  
    10.     position: absolute;
      11. 
  
  
    11.     top:-20px; 
      12. 
  
  
    12.     left: -90px;
      13. 
  
  
    13.     border-bottom: 2px solid rgb(0,0,0); 
      14. 
  
  
    14.     background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
      15. 
  
  
    15. }
      16.

    #p#

    三、第三步

    這一步我們來做屏幕旋轉(zhuǎn)軸，也就是屏幕下方的那條黑色矩形blackbar。

    同樣先設置width和height，absolute定位，居中顯示，移動的距離可以參考上面的方法小算一下就可以了，加上2px的圓角，為了顯 示出旋轉(zhuǎn)軸立體的溝槽，我們給blackbar類的下邊框和右邊框加上2px的白色實線，同時給blackbar一個從上到下的漸變，中間顯示出窄窄的亮 麗的白色即可，顏色和過渡的位置小伙伴們可以自行了斷，oops，是自行把握。

    實現(xiàn)和效果：

     
 
      
  
  
    1. .blackbar{
      2. 
  
  
    2.     width: 450px;
      3. 
  
  
    3.     height: 18px;
      4. 
  
  
    4.     position: absolute; 
      5. 
  
  
    5.     left: 75px;
      6. 
  
  
    6.     border-radius: 2px;
      7. 
  
  
    7.     border-bottom: 2px solid #ffffff; /* 小白邊 */
      8. 
  
  
    8.     border-right: 2px solid #ffffff;
      9. 
  
  
    9.     background: -webkit-linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
      10. 
  
  
    10.     background: -linear-gradient(top,rgb(30,30,30) ,rgb(60,60,60) 35%,rgb(100,100,100) 50%,rgb(30,30,30) 65%);
      11. 
  
  
    11. }
      12.

    #p#

    四、第四步

    接下來就是MacBook Air最顯眼的部分了，那就是鍵盤部分，為什么顯眼呢，因為它占的地兒***吧哈哈哈（不好笑的事也要大笑三聲）。

    在畫鍵盤之前呢，小伙伴們***先算好整個鍵盤區(qū)域的大小，各個按鍵的大小和排列，否則到時候只能一點點重新調(diào)，很麻煩。好了，咱先把鍵盤區(qū)域畫下來吧。

    傳統(tǒng)步驟，設置寬高，絕對定位，然后設置left、top居中，勾勒出1px solid 顏色為rgb(180,180,180)的border，8px的圓角，白色的背景顏色；

    實現(xiàn)和效果如下：

     
 
      
  
  
    1. .keyboard{
      2. 
  
  
    2.     position: absolute;
      3. 
  
  
    3.     width:530px;
      4. 
  
  
    4.     height: 216px;
      5. 
  
  
    5.     left: 35px;
      6. 
  
  
    6.     top: 35px;
      7. 
  
  
    7.     border: 1px solid rgb(180,180,180);
      8. 
  
  
    8.     border-radius: 8px;
      9. 
  
  
    9.     background:rgba(250,250,250,1);
      10. 
  
  
    10. }
      11.

    為了顯示出立體的溝槽感，陰影又該出來了。我們用box-shadow給keyboard的四條邊框添加四條內(nèi)部inset陰影，關于box-shadow以后有機會再講，先把實現(xiàn)和效果貼上：

    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了。讓我們接著猛烈地蕩起雙槳吧。

    五、第五步

    就像前面提到的，我們***事先先計算好每個按鍵的大小和位置，做到心中有數(shù)，不至于到時候一片混亂，否則整個鍵盤就像東漢末年似的這一塊兒那一塊兒。

    首先是一些常規(guī)的設置，去掉列表標志，margin、padding設置，列表的寬和高balabala，按照之前的計算，設置按鍵與按鍵的間距，大致排列下這么多個按鍵，并給按鍵添加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);

    附上代碼和效果:

     
 
      
  
  
    1. ul,li{
      2. 
  
  
    2.     list-style: none;
      3. 
  
  
    3.     margin:0 auto;
      4. 
  
  
    4.     padding:0 auto;
      5. 
  
  
    5.     display: block;
      6. 
  
  
    6.     font-family: "Vrinda";
      7. 
  
  
    7.     -webkit-user-select: none;
      8. 
  
  
    8.     -moz-user-select: none;
      9. 
  
  
    9.     -ms-user-select: none;
      10. 
  
  
    10.     user-select: none;
      11. 
  
  
    11. }
      12. 
  
  
    12. 
  
  
    13. ul{
      14. 
  
  
    14.     width:530px;
      15. 
  
  
    15.     margin-top: 8px;
      16. 
  
  
    16.     padding-left: 8px;
      17. 
  
  
    17.     /* border:2px solid black; */
      18. 
  
  
    18. }
      19. 
  
  
    19. 
  
  
    20. li{
      21. 
  
  
    21.     width:29px;
      22. 
  
  
    22.     height:29px;
      23. 
  
  
    23.     float: left;
      24. 
  
  
    24.     /* padding-left: 0px; */
      25. 
  
  
    25.     margin-right: 5px;
      26. 
  
  
    26.     margin-bottom: 5px;
      27. 
  
  
    27.     background-color: rgb(30,30,30);
      28. 
  
  
    28.     color: rgb(200,200,200);
      29. 
  
  
    29.     text-align: center;
      30. 
  
  
    30.     line-height: 28px;
      31. 
  
  
    31.     font-size: 12px;
      32. 
  
  
    32.     border-radius: 4px;
      33. 
  
  
    33.     border: 1px solid rgb(70,70,70);
      34. 
  
  
    34.     box-shadow: 1px 0px 0px rgb(0,0,0),
      35. 
  
  
    35.     0px 1px 0px rgb(0,0,0),
      36. 
  
  
    36.     -1px 0px 0px rgb(0,0,0),
      37. 
  
  
    37.     0px -1px 0px rgb(0,0,0);
      38. 
  
  
    38. }
      39.

    看上去還很亂，連文本都溢出了，但是媽媽說過，心急吃不了熱豆腐，慢慢來，保準等會就馴服得她服服帖帖的。

    Tips：請用力記住父母的生日哦。

    細心的小伙伴們會發(fā)現(xiàn)有一段代碼，貌似不細心的也能發(fā)現(xiàn)，就是這段：

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

    這是什么意思呢？先來看下不加這段代碼的效果：

    對，就是這一片的藍色，當用鼠標去鍵盤上拖著選中的時候，那一個個的li就會被選中，添加這段代碼就能還我們一片巧克力鍵盤了，就能還我們一個潔白的藍天了。

    潔白...的...藍天...^o^

    我們先把鍵盤最上面的那一排功能鍵先搗騰好。這里我們用nth-child來選擇上面那一排我沒數(shù)錯數(shù)量應該是14個的功能鍵，并給它們簡單設置樣式。

    實現(xiàn)和效果如下：

     
 
      
  
  
    1. li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4),
      2. 
  
  
    2. li:nth-child(5),li:nth-child(6),li:nth-child(7),li:nth-child(8),
      3. 
  
  
    3. li:nth-child(9),li:nth-child(10),li:nth-child(11),li:nth-child(12),
      4. 
  
  
    4. li:nth-child(13),li:nth-child(14){
      5. 
  
  
    5.     width:30px;
      6. 
  
  
    6.     height:15px;
      7. 
  
  
    7. }
      8.

    接下來調(diào)整第二行的數(shù)字按鍵上的那些數(shù)字和符號的一上一下的69體位，同樣先用nth-child選中再設置樣式：

     
 
      
  
  
    1. 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,
      2. 
  
  
    2. 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,
      3. 
  
  
    3. li:nth-child(26) span,li:nth-child(27) span{
      4. 
  
  
    4.     display: block;
      5. 
  
  
    5.     margin-top: 5px;
      6. 
  
  
    6.     line-height: 0.5; 
      7. 
  
  
    7. }
      8.

    然后設置除了***的那四個方向鍵外的其他鍵的大小，很簡單，算準寫就行，要做一個心中有數(shù)的男人，這塊直接貼代碼：

     
 
      
  
  
    1. li:nth-child(28),li:nth-child(29){
      2. 
  
  
    2.     width:45px;
      3. 
  
  
    3. }
      4. 
  
  
    4. li:nth-child(43),li:nth-child(55){
      5. 
  
  
    5.     width:55px;
      6. 
  
  
    6. }
      7. 
  
  
    7. li:nth-child(56),li:nth-child(67){
      8. 
  
  
    8.     width:73px;
      9. 
  
  
    9. }
      10. 
  
  
    10.     li:nth-child(68),li:nth-child(69),li:nth-child(70),li:nth-child(71),
      11. 
  
  
    11.     li:nth-child(72),li:nth-child(73),li:nth-child(74){
      12. 
  
  
    12.     height:33px;
      13. 
  
  
    13. }
      14. 
  
  
    14. li:nth-child(72){
      15. 
  
  
    15.     width:173px;
      16. 
  
  
    16. }
      17. 
  
  
    17. li:nth-child(71),li:nth-child(73){
      18. 
  
  
    18.     width:37px;
      19. 
  
  
    19. }
      20.

    找個驛站半路休息下先，順帶看下效果：

    除了四個方向鍵，其他的按鍵放置得還算可以，接著走。

    四個方向鍵設置也很簡單，設置寬高，定位即可，不羅嗦了，直接上：

     
 
      
  
  
    1. li:nth-child(75),li:nth-child(77),li:nth-child(78){
      2. 
  
  
    2.     margin-top: 18px;
      3. 
  
  
    3.     height: 14px;
      4. 
  
  
    4. }
      5. 
  
  
    5. 
  
  
    6. li:nth-child(76){
      7. 
  
  
    7.     height: 13px;
      8. 
  
  
    8.     margin-top: 19px;
      9. 
  
  
    9. }
      10. 
  
  
    10. 
  
  
    11. li:nth-child(78){
      12. 
  
  
    12.     position: absolute;
      13. 
  
  
    13.     bottom: 22px;
      14. 
  
  
    14.     right:38px;
      15. 
  
  
    15. }
      16.

    效果：

    恩，美感效果還在我的審美范圍之內(nèi)。

    #p#

    六、第六步

    ***一步就是觸控板touch的繪制了，哈哈哈，終于要諾曼底登陸了，待我喝口菊花茶先。

    觸控板的繪制和鍵盤的繪制基本上是一樣的，設置大小，定位，圓角，border即可。直接上： 

     
 
      
  
  
    1. .touch{
      2. 
  
  
    2.     position: absolute;
      3. 
  
  
    3.     width:200px;
      4. 
  
  
    4.     height:150px;
      5. 
  
  
    5.     border: 2px solid rgb(190,190,190);
      6. 
  
  
    6.     bottom: 23px;
      7. 
  
  
    7.     left: 200px;
      8. 
  
  
    8.     border-radius: 8px;
      9. 
  
  
    9. }
      10.

    七、小了個結

    到這里，MacBook Air就算完成了，還是那句話，是個半成品，一些字體圖標還待用font-face來完成，當然還可以添加些動畫，讓它像產(chǎn)品旋轉(zhuǎn)來展示等等，這只是拋磚引玉而已，期待小伙伴們更多奇思妙想。小伙伴們有好的想法歡迎分享~~~


    分享標題：純CSS打造銀色MacBookAir（完整版）
    路徑分享：http://www.5511xx.com/article/djhpdgo.html