是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番!
很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧!
回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題目,也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔!
gird
的方式排版。grid
排版的話那要注意,要從垂直的方向下去做,不然從水平面的話,中間那行的底色就要額外處理了。<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
沒什麼特別的,幾個1/4圓餅圖,就對應幾個 div
。
這次的圖面比較簡單,我們就直接往下處理版面配置的grid
處理:
body {
margin: 0;
display: grid;
place-items: center;
background: #5C434C;
gap: 10;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
}
div {
width: 80px;
height: 80px;
border-radius: 100% 0 0 0;
background: #F09462;
}
div:nth-child(even) {
background: #F5D6B4;
}
這裡我透過使用nth-of-type(even)
的方式來選取雙數單位的樣式,就如同前面提到的一樣,你如果選擇雙數的話要從垂直方向下手,不然不會達到錯位的效果,邏輯就是2%n !== 0
,如果採水平的方向,你會得到所有垂直方向同色的效果。
這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度,以及對nth-of-type
的使用理解,當然你也可以透過下Id
或class
的方式去做微調,以上就是我的 100% 解法分享,一樣這題 100% 的解法絕對不會只有我這一種,大家也可以分享自己的作法與我交流,那麼我們下個禮拜三再見,Happy coding~ !