社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > 用HTML和CSS打造屬於自己的暖男「大白」_HTML/Xhtml_網頁製作

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

WBOY
發布： 2016-05-16 16:36:01
原創
1235 人瀏覽過

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

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

效果預覽：

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

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

10px

;   10px

;   

}   
   一個 mini 的「大白」，雛形初現： 接下來是軀幹和腹部： CSS Code複製內容到剪貼簿
  1. #軀幹，  
  2. #肚皮{   
  3.     邊距: 0 自動;   自動
  4. ;   ;       高度: 200px
    5. ;   
  5.     寬度: 180px;   
  6. ;       背景: #fff
    7. ; 🎜
  7.     邊界-半徑：47%；  
  8.   
  9.     /*調整自己*/       
  10.     邊框: 5px 🎜>#e0e0e0;        邊框頂部
    11. : 
  11. 無； 🎜>無；🎠    
    12. z 索引
  12. ：1；   }   
  13.   
    15. #肚皮
  15. {        
    16. 高度
  16. : 300px;   ;   ;
  17.     寬度: 245px;   
    18. ;       頁邊距: -140px       
  18. z 索引：5；  
    19. }   
    20.   
  21. #cover{   
    22.     
  22. 寬度: 190px;   ;   
  23.     背景: #fff; 🎜     
  24. 高度: 150px;       
  25. 邊距: 0 自動;   自動;   ;  
  26.     職位: 相對;       
  27. 上方: -20px;   20px;   
  28. ;        邊框
  29. -半徑：50%；  
  30. }   
  

配戴「大白」象徵生命的心： CSS 代碼
將內容複製到剪切板
  1. #heart{     
  2.   width:25px;   
    3. ;
  3.   height:25px;  
    4.   
  4. border-radius:50%;    
    5.   
  5. position:relative;    
    6.   
    7.   
  7. /*在邊框四周加上陰影效果*/  
    8.   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. ;   
  8. ;       職位: 相對;  
  9.     上方: -350px;   
    10. ;       左: -100px;   
  10. ;       轉換：旋轉（20deg）；   
  11.     z 索引: -1;   
  12. }   
  13.   
  14. #右-手臂{   
  15.     轉換：旋轉（-20deg）；   
  16.     左: 100px;   
  17.     上方: -620px;   
  18. ;   
    19. }   
    20.   

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

}   

  

有點意思了：
迫不及待要給「大白」加上腿吧： 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~ 特技完成！

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

相關標籤：
css html
來源：php.cn
上一篇：HTML九宮格佈局實作方法_HTML/Xhtml_網頁製作 下一篇：關於html的下載功能詳解_HTML/Xhtml_網頁製作
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PX自動轉換為REM錯誤 <style>html {   字體大小：calc(100vw / 3.75); }body {    字體大小：0.16rem； }</style><...
來自於 2024-04-16 09:34:16
0
0
4687
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...
來自於 2024-04-06 20:22:15
0
1
454
如何在 livewire 惰性佔位符中使用 laravel 元件 我想在livewire3佔位符內添加我的laravel組件的骨架到目前為止我已經嘗試過：通過包含Laravel組件來實現Livewire類：publicfunctionplaceh...
來自於 2024-04-06 20:02:10
0
2
543
用 HTML 程式碼（從陣列產生）取代字串的頂級方法 給定一個像這樣的字串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何將子字串#na...
來自於 2024-04-06 17:40:41
0
2
410
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板