是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番!
很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧!
回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題目,也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔!
gird
的方式排版。class
,再透過 CSS
選擇器避開它。:before
的方式顯示。<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="clear"></div>
<div></div>
<div class="clear"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
大概算一下 5 x 5 = 25,所以需要 25 個 div
,又在中間那行的偶數格處理,避開顯示黃色圓形色塊的 class
,方便後續選擇器避開處理。
接著我們來處理 5 x 5 棋盤格的畫面,一樣透過 gird
的排版處理,先將方塊都生出來,如下:
body {
background: #E3516E;
display: grid;
place-items: center;
place-content: center;
grid-template: repeat(5, 40px) / repeat(5, 40px);
}
div {
width: 40px;
height: 40px;
background: #FADE8B;
}
這邊可以透過 cssBattle 的工具去計算格子的大小,然後如上述的 5 x 5 排版,並在 grid-template
裡面下 repeat
函數處理方格排版。
div:nth-child(even) {
background: #E3516E;
position: relative;
}
div:not(.clear):nth-child(even)::before {
content: '';
width: 20px;
height: 20px;
background: #FADE8B;
position: absolute;
border-radius: 50%;
top: 10px;
left: 10px;
}
這邊針對偶數格處理變色,使用了nth-child(even)
並加上 position: relative;
,方便待會黃色圓形色塊定位;還有避開剛剛設定的 clear class,再加上上面相同的選擇條件,並透過::before
去長出圓形色塊。
這題除了考驗基本的常用排版之外,也考驗你對元件選擇器的使用,就如上述我所做的,透過 :not()
的方式來排除額外的區塊,偽元素的應用也是這題的一個考量,當然也可以透過 background: radial-gradient(...)
的方式直接長出圓形出來,不過我也必須承認那個做法我真的不常使用,那麼以上就是我的 100% 解法分享,一樣這題 100% 的解法絕對不會只有我這一種,大家也可以分享自己的作法與我交流,那麼我們下個禮拜三再見,Happy coding~ !