純css打造網頁大白知識點：
首先要把大白分割，整體baymax中包含header（eye1,eye2,mouth），torso（heart），belly（cover），l-bigfinger,r-bigfinger，l-smallfinger，r-smallfinger，l-leg，r-leg。
因為大白是白色，所以背景顏色（body）要設為深色。
大白居中，div居中要用margin：0 auto；
保險起見overflow：hidden
首先寫head：
設定寬高之後以百分比定義圓角的形狀 border-radius:50%
margin-bottom設為負值，使身體與頭部有重疊
因為只有設定了position 為relative absolute fixed 後 ，設定z-index才生效。並且z-index是相對於同一父親元素的所有子元素的層級關係，z-index的值越大，說明他的位置越高。
所以給頭部設定position：relative，然後將層級z-index：100
其次寫eye1,eye2:
用到旋轉對稱使左右眼對稱，transform：rotate（**deg）與transform：rotate（-**deg）左右對稱，左右手臂，左右手指，左右腿都會用到。
附**：
doctype
html>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
>
body
#baymax
#head
#eye1
#eye2
#mouth
#torso
,#belly
#belly
#cover
#heart
#left-arm
,#right-arm
#right-arm
#l-bigfinger
#l-smallfinger
#r-smallfinger
#r-bigfinger
#left-leg
#right-leg
style
>
head
>
<
body
>
<
divid
="baymax"
>
<
divid
="head"
>
<
divid
="eye1"
>
div>
<
divid
="eye2"
>
div>
<
divid
="mouth"
>
div>
div>
<
divid
="torso"
>
<
divid
="heart"
>
div>
div>
<
divid
="belly"
>
<
divid
="cover"
>
div>
div>
<
divid
="left-arm"
>
<
divid
="l-bigfinger"
>
div>
<
divid
="l-smallfinger"
>
div>
div>
<
divid
="right-arm"
>
<
divid
="r-bigfinger"
>
div>
<
divid
="r-smallfinger"
>
div>
div>
<
divid
="left-leg"
>
div>
<
divid
="right-leg"
>
div>
div>
body
>
html
>
更多專業前端知識，請上
【猿2048】www.mk2048.com
css畫橫線箭頭 用純CSS實現的箭頭
用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...
實驗樓 純css打造 BayMan（大白）
該小專案是實驗樓的乙個實驗吧，用純css 畫出了大白，還是很有意思的。用到的知識點很簡單，就是相對定位的應用，通過這個小專案，對定位的理解更加深入，也補了乙個坑，就是z index這個屬性只能對宣告定位的元素起作用，糾結了好一會。還有乙個，就是昨晚心血來潮的思考著 技術 這個詞的定義，我認為大部分人...
原創 純CSS畫黃金梅麗號！
如下 梅麗號 title style type text css body face face eye eye out eye left eye in right nose nose out nose down nose left nose right nose bottom nose bottom...