星期三的CSS-CSSBattle#153

閱讀時間約 4 分鐘

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

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

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

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

raw-image
  1. 首先我們先來思考處理西洋棋盤的部分,這邊我會考慮使用 gird 的方式排版。
  2. 除了中間那行以外,所有的粉色方格內都需要有圓形色塊。
  3. 我會在中間的那兩個粉色區塊下 class ,再透過 CSS 選擇器避開它。
  4. 圓形色塊的顯示我會考慮透過 :before 的方式顯示。

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

<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~ !


1會員
22內容數
留言0
查看全部
發表第一個留言支持創作者!
Lee Luciano的沙龍 的其他內容
本篇文章分享了 CSS Battle 的題目 #160 的解法,並講解了對於前端工程師基礎切版的重要性和技術總結。
這篇文章將解析CSS Battle第136題的解法,主要考驗基本CSS置中排版的能力,並提供了作者的解法與技術總結。透過互動學習,讓想要學習或練習基礎切版的朋友可以參與討論。
本篇文章介紹了 CSS Battle 第 163 題的解法,並分享了作者的實際操作方法。透過使用 gird 排版、before & after 搭配 overflow: hidden 等修飾來創建多邊形。這篇提供了基本的 CSS 切版技術以及解法分享。
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
本文介紹CSS Battle題目#73的解法,涵蓋了分層拆解圖形、使用grid排版、調整樣式等基礎技巧。
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
本篇文章分享了 CSS Battle 的題目 #160 的解法,並講解了對於前端工程師基礎切版的重要性和技術總結。
這篇文章將解析CSS Battle第136題的解法,主要考驗基本CSS置中排版的能力,並提供了作者的解法與技術總結。透過互動學習,讓想要學習或練習基礎切版的朋友可以參與討論。
本篇文章介紹了 CSS Battle 第 163 題的解法,並分享了作者的實際操作方法。透過使用 gird 排版、before & after 搭配 overflow: hidden 等修飾來創建多邊形。這篇提供了基本的 CSS 切版技術以及解法分享。
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
本文介紹CSS Battle題目#73的解法,涵蓋了分層拆解圖形、使用grid排版、調整樣式等基礎技巧。
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
那陣子的每週三下午,都是令我最期待的一刻。 上完半天的課程後,我火速回家,換個衣服,吃點簡單的午餐,拾起裝備,再衝回去與他們玩耍。
Thumbnail
華燈拍攝的年代,大約是我三、四年級的時候,當時好流行吹高角度,我覺得好漂釀🥰🥰🥰從小擁有實驗精神的我,吵著媽媽幫我買罐果凍髮膠、尖尾梳,利用星期三讀半天的下午,自己想辦法法吹出「夢幻高角度」。輕而易舉的,我破解了高角度的做法,每個星期三下午,我都讓自己頂著美美高角度,在家附近閒晃。 這一天,
週三又是三堂課的日子,早上在九如上活氧舒展(Jun)和熱血戰鼓(Alan),下午在博愛上熱力燃脂(Owen)。 相對靜態,又有練到平衡、肌力和伸展的活氧舒展,對我來說本季是替代樂活瑜珈的一堂課,音樂很好聽,上課很享受。今天有帶新動作,Jun說如果這動作讓屁股很酸,就要去上超能55,呵呵~我不由得會心
Thumbnail
被遺忘的《愛登士家庭》 在本公子的記憶中,跟《愛登士家庭》的初接觸應該是小學時期,曾在電視上看過一些片段。
Thumbnail
今天來聊聊復古作品的延伸新作《星期三》,即使不記得舊作故事,或許也記得經典的家族合照和片頭曲的第一小節!是個很抓眼球的作品
Thumbnail
雖然這幾天持續低溫特報,桃園觀音的風勢也特別大,但這一天孩子卻特別認真於課堂活動,讓老師覺得欣慰。
Thumbnail
「你知道我為什麼喜歡喝威士忌嗎?威士忌源自uisge beatha這,意指「生命之水」……給人生命與活力的水,那不是很美好嗎?」
Thumbnail
這個月開始,我參加了作家朋友帶領的線上讀書會,這一週,她以自己的著作《親愛的,你好》一書中的一篇文章〈我姓白,名老鼠〉為主題,讓大家以醫學這個傳統的權威角色,透過書寫來審視自己的權威議題。
Thumbnail
簡介: 七種不同人格在一個人體內輪流出現,一週中交換醒來。有一天,普通、沒有特別嗜好的星期二突然在星期三時醒來,他發現,星期三不見了。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
那陣子的每週三下午,都是令我最期待的一刻。 上完半天的課程後,我火速回家,換個衣服,吃點簡單的午餐,拾起裝備,再衝回去與他們玩耍。
Thumbnail
華燈拍攝的年代,大約是我三、四年級的時候,當時好流行吹高角度,我覺得好漂釀🥰🥰🥰從小擁有實驗精神的我,吵著媽媽幫我買罐果凍髮膠、尖尾梳,利用星期三讀半天的下午,自己想辦法法吹出「夢幻高角度」。輕而易舉的,我破解了高角度的做法,每個星期三下午,我都讓自己頂著美美高角度,在家附近閒晃。 這一天,
週三又是三堂課的日子,早上在九如上活氧舒展(Jun)和熱血戰鼓(Alan),下午在博愛上熱力燃脂(Owen)。 相對靜態,又有練到平衡、肌力和伸展的活氧舒展,對我來說本季是替代樂活瑜珈的一堂課,音樂很好聽,上課很享受。今天有帶新動作,Jun說如果這動作讓屁股很酸,就要去上超能55,呵呵~我不由得會心
Thumbnail
被遺忘的《愛登士家庭》 在本公子的記憶中,跟《愛登士家庭》的初接觸應該是小學時期,曾在電視上看過一些片段。
Thumbnail
今天來聊聊復古作品的延伸新作《星期三》,即使不記得舊作故事,或許也記得經典的家族合照和片頭曲的第一小節!是個很抓眼球的作品
Thumbnail
雖然這幾天持續低溫特報,桃園觀音的風勢也特別大,但這一天孩子卻特別認真於課堂活動,讓老師覺得欣慰。
Thumbnail
「你知道我為什麼喜歡喝威士忌嗎?威士忌源自uisge beatha這,意指「生命之水」……給人生命與活力的水,那不是很美好嗎?」
Thumbnail
這個月開始,我參加了作家朋友帶領的線上讀書會,這一週,她以自己的著作《親愛的,你好》一書中的一篇文章〈我姓白,名老鼠〉為主題,讓大家以醫學這個傳統的權威角色,透過書寫來審視自己的權威議題。
Thumbnail
簡介: 七種不同人格在一個人體內輪流出現,一週中交換醒來。有一天,普通、沒有特別嗜好的星期二突然在星期三時醒來,他發現,星期三不見了。