打造網頁版「大白」
阿新 • • 發佈：2021-08-09
知識點：
- div 佈局
- CSS 相對定位
- CSS 各種屬性的應用
效果演示：
程式碼演示：
baymax.html
把最實用的經驗，分享給最需要的讀者，希望每一位來訪的朋友都能有所收穫！<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Baymax</title> <style> body { background: #595959; } #baymax { /*設定為 居中*/ margin: 0 auto; /*高度*/ height: 600px; /*隱藏溢位*/ overflow: hidden; } #head { height: 64px; width: 100px; /*以百分比定義圓角的形狀*/ border-radius: 50%; /*背景*/ background: #fff; margin: 0 auto; margin-bottom: -20px; /*設定下邊框的樣式*/ border-bottom: 5px solid #e0e0e0; /*屬性設定元素的堆疊順序； 擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面*/ z-index: 100; /*生成相對定位的元素*/ position: relative; } #eye, #eye2 { width: 11px; height: 13px; background: #282828; border-radius: 50%; position: relative; top: 30px; left: 27px; /*旋轉該元素*/ transform: rotate(8deg); } #eye2 { /*使其旋轉對稱*/ transform: rotate(-8deg); left: 69px; top: 17px; } #mouth { width: 38px; height: 1.5px; background: #282828; position: relative; left: 34px; top: 10px; } #torso, #belly { margin: 0 auto; height: 200px; width: 180px; background: #fff; border-radius: 47%; /*設定邊框*/ border: 5px solid #e0e0e0; border-top: none; z-index: 1; } #belly { height: 300px; width: 245px; margin-top: -140px; z-index: 5; } #cover { width: 190px; background: #fff; height: 150px; margin: 0 auto; position: relative; top: -20px; border-radius: 50%; } #heart { width: 25px; height: 25px; border-radius: 50%; position: relative; /*向邊框四周新增陰影效果*/ box-shadow: 2px 5px 2px #ccc inset; right: -115px; top: 40px; z-index: 111; border: 1px solid #ccc; } #left-arm, #right-arm { height: 270px; width: 120px; border-radius: 50%; background: #fff; margin: 0 auto; position: relative; top: -350px; left: -100px; transform: rotate(20deg); z-index: -1; } #right-arm { transform: rotate(-20deg); left: 100px; top: -620px; } #l-bigfinger, #r-bigfinger { height: 50px; width: 20px; border-radius: 50%; background: #fff; position: relative; top: 250px; left: 50px; transform: rotate(-50deg); } #r-bigfinger { left: 50px; transform: rotate(50deg); } #l-smallfinger, #r-smallfinger { height: 35px; width: 15px; border-radius: 50%; background: #fff; position: relative; top: 195px; left: 66px; transform: rotate(-40deg); } #r-smallfinger { background: #fff; transform: rotate(40deg); top: 195px; left: 37px; } #left-leg, #right-leg { height: 170px; width: 90px; border-radius: 40% 30% 10px 45%; background: #fff; position: relative; top: -640px; left: -45px; transform: rotate(-1deg); z-index: -2; margin: 0 auto; } #right-leg { background: #fff; border-radius: 30% 40% 45% 10px; margin: 0 auto; top: -810px; left: 50px; transform: rotate(1deg); } </style> </head> <body> <div id="baymax"> <!-- 定義頭部，包括兩個眼睛、嘴 --> <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="mouth"></div> </div> <!-- 定義軀幹，包括心臟 --> <div id="torso"> <div id="heart"></div> </div> <!-- 定義肚子腹部，包括 cover（和軀幹的連線處） --> <div id="belly"> <div id="cover"></div> </div> <!-- 定義左臂，包括一大一小兩個手指 --> <div id="left-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- 定義右臂，同樣包括一大一小兩個手指 --> <div id="right-arm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- 定義左腿 --> <div id="left-leg"></div> <!-- 定義右腿 --> <div id="right-leg"></div> </div> </body> </html>