用HTML和CSS打造屬於自己的暖男「大白」_HTML/Xhtml_網頁製作

最終的成果是這樣滴，是不是萌萌噠…

PS：您最好對 HTML 和 CSS 有一定的了解，但如果你是小白也沒關係，小白見「大白」也是可以的！

一、準備工作

進入 /home/shiyanlou/ 目錄下，新空白文件：

命名為 Baymax.html （其它名字也可以，但後綴名稱必須是 .html）：

使用 gedit 打開，準備編輯程式碼：

二、寫 HTML

填入以下程式碼：

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3.    head>>>>>>>charset="utf-8">title
4. > Baymaxtitle>
5. 。 >  
6. body>           
7. div
8.  id id
9.  id 🎜>>              
  
10.         div div div div 
11. >               div 🎜>>div>  
12.             div div div > 🎜>>div>  
13.             div div
 🎜>
14. >
15. div>  
16.         div>              
17.            div id="torso">               
18. div 🎜>>div
>
19.   
        div>     
20.           
21.         div id="belly">  
22.             div div 🎜>>div>           
23. div>     
24.         
25.            
26. div id="left-arm ">               
27. div div ">div>               
28. div >div>           div>  
29.              
32.         div id="right-arm ">
33.                div div ">div>  
34.             div >div>           
35. div>     
36.         
37.   
38.         div id="left-leg ">div>  
39.   
40.           
41.         div id="right-leg ">div>  
42.   
43.     div>  
44. body>  
45. html>  
46.   

三、新增 CSS 樣式

我們已經使用 HTML 定義好「大白」的各個元素，現在就需要利用到 CSS 來繪製它的樣式外觀。

由於「大白」是白色的，為了更容易辨識，我們把背景設為深色。

然後首先是頭部：

CSS Code複製內容到剪貼簿

1. body {   
2.     background: #595959  
}   
  
5. #baymax{   
    
6. /*設定為 居中*/       
    
7. margin: 0 auto;   >auto;   
8. ;
  
9.     /*高度*/
      
10.     height: 600px
;   
11.   
12.     /*隱藏溢位*/       
13.     overflow: hidden;   
hidden
14. ;  
}   
  
16. #head
{   
17.     height: 64px
;   
18. 64px;       width: 
19. 100px;  
20.        /*定義圓角的形狀*/
21.             border
22. -radius: 50%;   
23.        /*背景*/
24.             background: #fff
25. ;   #fff;       margin: 0 
auto
26. ;   >auto;   ;     
margin-bottom
27. : -
20px
28. ;     
    
29. /*設定下邊框的樣式*/            border-bottom: 5px 5px
 
30. >#e0e0e0
;   
31.   
    
32. /*屬性設定元素的堆疊順序；    擁有較高堆疊順序的元素總是會在堆疊順序較低的元素的前面*/ >     
z-index
33. : 100;   
34.        
/*產生相對定位的元素*/
35.             position: 
relative
36. ; 🎜>relative
37. ; 🎠
}   

  

效果預覽：

趕快再來添加眼睛和嘴巴吧！

CSS Code複製內容到剪貼簿

1. #eye,   
2. #eye2{   
3.     width: 11px;   
4. ;   ;     height: 13px
5. ;   13px;        background
: 
6. #282828 #282828  
7.     border-radius: 50%;        position
8. : relative; 🎜>relative; 🎠    
9. top: 30px;   30px;   
10.     
left
11. : 27px;   27px
12. ;   
;   
13.   
14.     
/*旋轉此元素*/
15.             transform: rotate(8deg);   
16. }      
#eye2
18. {        /*使其旋轉對稱*/            transform: rotate(-8deg);        
left
19. : 
69px
20. 17px
;   
21. }   
  
22. #mouth{   
    
23. width: 38px;   ;   
24.     height: 1.5px;   
    
25. background: #282828 #282828  
26.     position: relative; 🎜>relative
; 🎠
27.     left: 34px;   
34px
28. ;   
29.     
top

: 

10px

;   10px

;   

}   

   一個 mini 的「大白」，雛形初現： 接下來是軀幹和腹部： CSS Code複製內容到剪貼簿

1. #軀幹，  
2. #肚皮{   
3.     邊距: 0 自動;   自動
4. ;   ;       高度: 200px
;   
5.     寬度: 180px;   
6. ;       背景: #fff
; 🎜
7.     邊界-半徑：47%；  
8.   
9.     /*調整自己*/       
10.     邊框: 5px 🎜>#e0e0e0;        邊框頂部
: 
11. 無； 🎜>無；🎠    
z 索引
12. ：1；   }   
13.   
#肚皮
15. {        
高度
16. : 300px;   ;   ;
17.     寬度: 245px;   
;       頁邊距: -140px       
18. z 索引：5；  
}   
  
21. #cover{   
    
22. 寬度: 190px;   ;   
23.     背景: #fff; 🎜     
24. 高度: 150px;       
25. 邊距: 0 自動;   自動;   ;  
26.     職位: 相對;       
27. 上方: -20px;   20px;   
28. ;        邊框
29. -半徑：50%；  
30. }   

  

配戴「大白」象徵生命的心： CSS 代碼

將內容複製到剪切板

1. #heart{     
2.   width:25px;   
;
3.   height:25px;  
  
4. border-radius:50%;    
  
5. position:relative;    
  
  
7. /*在邊框四周加上陰影效果*/  
  box-shadow:
8. 2px 5px  🎜>#ccc inset;       
9.   right
10. right:-115px;   top:
11. 40px;       z-index:111;    
12.   border:
13. 1px 1px  🎜>#ccc;    }      
15. 現在的「大白」是這個樣子的了：

還沒有手和腳，怪萌怪萌的...「大白」需要溫暖的手臂：

CSS Code

複製內容到剪貼簿

1. #左-手臂，  
2. #右-手臂{   
3.     高度: 270px;   
4. ;       寬度: 120px;   
5.     邊框-半徑：50%；  
6.     背景: #fff; 🎜
7.     邊距: 0 自動;   自動
;   
8. ;       職位: 相對;  
9.     上方: -350px;   
;       左: -100px;   
10. ;       轉換：旋轉（20deg）；   
11.     z 索引: -1;   
12. }   
13.   
14. #右-手臂{   
15.     轉換：旋轉（-20deg）；   
16.     左: 100px;   
17.     上方: -620px;   
18. ;   
}   
  

還沒有手指頭呢：

CSS 代碼

將內容複製到剪切板

1. #l-大手指，  
2. #r-bigfinger{   
3.     高度: 50px;   50px
4. ;       寬度: 20px
;   
5. 20px;        
6. 邊框-半徑：50%；       背景: 
7. #fff; 🎜     職位: 相對
8. ;       上方: 250px;   
9.     左: 50px;   50px
10. ;   
11.     轉換：旋轉（-50deg）；   
12. }   
13.   
14. #r-bigfinger{        左: 50px
15. ;   50px
;   
16.     轉換：旋轉（50deg）；   
17. }   
18.   
19. #l-小指，  
20. #r-小手指{        高度: 
21. 35px;   35px;       寬度
22. : 15px;   15px
;   
23.     邊框-半徑：50%；       
24. 背景: #fff; 🎜     職位
25. : 相對;       上方: 
26. 195px;   ;       左
: 
27. 66px
;   
28. 66px;   
    轉換：旋轉（-40deg）；   
29. }   
30.    #r-小手指{        
背景
31. : 
#fff
32. ; 🎜     轉換：旋轉（40 度）；        上方
: 
33. 195px;        左
34. : 37px
35. ;   37px
;   

}   

  

有點意思了：

迫不及待要給「大白」加上腿吧： CSS 代碼 將內容複製到剪切板

1. #left-脚、
2. #right-脚{
3. 高さ: 170px;   
4. 幅: 90px;   
5. 境界線-半径: 40% 30% 10px 45%;   
6. 背景: #fff;   
7. 位置: 相対;   
8. トップ: -640px;   
9. 左: -45px;   
10. transform: rotate(-1deg);   
11. z-index: -2;   
12. マージン: 0 自動;   
13. }
15. #right-脚{
16. 背景: #fff;   
17. ボーダー-半径:30% 40% 45% 10px;   
18. マージン: 0 自動;   
19. トップ: -810px;   
20. 左: 50px;   
21. transform: rotate(1deg);   
22. }

duang~ duang~ duang~ 特技完成！

你的暖男大白来到了你的身边，是不是特別安全感哦！