星期三的CSS-CSSBattle#36

更新於 發佈於 閱讀時間約 2 分鐘

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

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

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

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

raw-image

我的思維邏輯

  1. 這類工整的長條圖案會考慮使用,Flex 排版來處理。
  2. 再透過nth-of-type的方式,選取偶數個單位做180度反轉和顏色的調整。

下面的 html 是按照上述幾個要點的結構

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

這次的圖面比較簡單,我們就直接往下處理版面配置的flex處理:

body {
margin: 0;
display: flex;
justify-content: space-evenly;
align-items: end;
background: #1A4341;
}
div {
width: 50px;
height: 200px;
border-radius: 25px 25px 0 0;
background: #F3AC3C;
}
div:nth-of-type(even) {
background: #998235;
translate: 0 -100px;
rotate: 180deg;
}

這裡我透過使用nth-of-type(even)的方式來選取雙數單位的樣式,並透過 translate 調整位移及 rotate 進行反轉。

技術總結

這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度,以及對nth-of-type的使用理解,當然你也可以透過下Idclass的方式去做微調,以上就是我的 100% 解法分享,一樣這題 100% 的解法絕對不會只有我這一種,大家也可以分享自己的作法與我交流,那麼我們下個禮拜三再見,Happy coding~ !

留言
avatar-img
留言分享你的想法!
avatar-img
Lee Luciano的沙龍
1會員
22內容數
Lee Luciano的沙龍的其他內容
2024/06/19
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
2024/06/19
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
2024/06/12
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧,包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法,鼓勵讀者分享自己的作法與交流。
Thumbnail
2024/06/12
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧,包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法,鼓勵讀者分享自己的作法與交流。
Thumbnail
2024/05/29
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
Thumbnail
2024/05/29
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧,包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法,鼓勵讀者分享自己的作法與交流。
Thumbnail
本文介紹了CSS Battle #172 交叉骷髏題目的解答技巧,包括圖層拆解的熟練程度和對小圓拆開處理等技巧。作者分享了100%的解法,鼓勵讀者分享自己的作法與交流。
Thumbnail
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
Thumbnail
這篇文章將介紹如何透過CSS Battle的題目來練習基礎切版技巧。透過一個眼睛圖案的例子,提供了對於 border、outline、border-radius等屬性的調整方式,並分享了一種 100% 的解法。歡迎大家分享自己的作法與作者交流,一起學習成長。
Thumbnail
這篇文章分享了作者對CSS Battle #151題目的解題方式,並強調了圖形解構的重要性。作者提到了基本的排版能力以及實際應用的弧度計算。透過這篇文章,讀者可以學習到CSS切版的技巧,同時也可以分享自己的作法,進行交流討論。
Thumbnail
這篇文章分享了作者對CSS Battle #151題目的解題方式,並強調了圖形解構的重要性。作者提到了基本的排版能力以及實際應用的弧度計算。透過這篇文章,讀者可以學習到CSS切版的技巧,同時也可以分享自己的作法,進行交流討論。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News