畫乙隻動態的皮卡丘(二)

2021-10-23 19:46:38 字數 688 閱讀 7704

繼續總結過程中學到的新知識,這是第2部分。

.upperlip

.upperlip.left

.lowerlip
設定容器絕對定位:

height: 110px; /*設定框的高度,使框的高度與 相對元素底對齊*/

width: 300px;

position: absolute;

bottom: 0; /*距離相對元素下面0,即上移至 相對元素底對齊*/

left: 50%;

margin-left: -150px;

z-index: -1;

/* border: 1px solid red; */ /*設定完overflow隱藏後,注釋掉*/

overflow: hidden; /*設定隱藏超出範圍框的部分*/ }

設定內容(橢圓)絕對定位:

.lowerlip
設定鬍子(div邊框)的背景色

.upperlip
轉變思路,視為:圓弧下方,再增加乙個橢圓圓弧即可。

.lowerlip

.lowerlip::after

1 搞懂z-index的所有細節;

畫乙個皮卡丘專案小結(3)

繼續總結過程中學到的新知識,這是第3部分。預設框架樣式 引入跟隨展示效果 樣式 after body flex 1 height 50 使code部分佔高度一半 padding 10px flex 1 height 50 使效果展示部分佔高度一半 preview width 100 height 1...

畫乙個皮卡丘專案小結(2)

繼續總結過程中學到的新知識,這是第2部分。upperlip upperlip.left.lowerlip設定容器絕對定位 height 110px 設定框的高度,使框的高度與 相對元素底對齊 width 300px position absolute bottom 0 距離相對元素下面0,即上移至 ...

畫乙個皮卡丘專案小結(1)

今天開始做乙個 畫皮卡丘的專案,所以總結一下過程中學到的一些新知識。設定盒模型為 ie盒模型 after,before通過flex布局,形成絕對居中的效果 body通過相對定位和絕對定位,形成水平居中 width 100 height 165px border 1px solid red posit...