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

2022-08-30 17:54:12 字數 687 閱讀 7067

繼續總結過程中學到的新知識,這是第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...

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

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

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

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