星期三的CSS-CSSBattle#136

閱讀時間約 3 分鐘

是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番!

很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧!

回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題目,也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔!

那麼我們這次從 #136 的問題來提供我的作法,那麼題目圖如下:

raw-image
  1. 首先我們先將圖面置中,這邊我會考慮使用 gird 的方式排版。
  2. 裡面的結構簡單來說就是一個圓形一層,然後一層包著一層,有點類似俄羅斯娃娃的概念。
  3. 最後再調整每一層的位移偏差。

下面的 html 是按照上述所描述的產出

<div class="wrapper">
<div class="black">
<div class="inner">
<div class="center"></div>
</div>
</div>
</div>

那麼我們接著處理置中的處理,這次的對象除了底層以外,我會讓每一層 div 也處理置中。

body{
margin: 0;
background: #998235;
display: grid;
place-items: center;
}
div {
display: grid;
place-items: center;
}

每一層的寬度可以藉由平台的工具去計算寬度,那處理完就會如下:

.wrapper {
width: 180px;
height: 180px;
background: #FCBE5C;
border-radius: 50%;
}
.black {
width: 140px;
height: 140px;
background: #0B2429;
border-radius: 50%;
translate: 10px;
}
.inner {
width: 100px;
height: 100px;
background: #FCBE5C;
border-radius: 50%;
translate: -10px;
}
.center {
width: 60px;
height: 60px;
background: #998235;
border-radius: 50%;
translate: 10px;
}

技術總結

這題除了考驗你對基本CSS置中排版的處理以外,再來就是要活用translate去做每一層 圓形的微調,那麼以上就是我的 100% 解法分享,一樣這題 100% 的解法絕對不會只有我這一種,大家也可以分享自己的作法與我交流,那麼我們下個禮拜三再見,Happy coding~ !

1會員
20內容數
留言0
查看全部
發表第一個留言支持創作者!