星期三的CSS-CSSBattle#29

閱讀時間約 2 分鐘

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

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

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

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

raw-image

我的思維邏輯

  1. 利用四個圓角矩形組成上面的圖案。
  2. 會利用grid的方式來調整對齊。

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

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

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

body {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
background: #1A4341;
}
div {
width: 100%;
height: 100%;
background: #F3AC3C;
}
div:nth-of-type(1) {
border-radius: 0 0 100px 0;
}
div:nth-of-type(2) {
border-radius: 0 0 0 100px;
}
div:nth-of-type(3) {
border-radius: 0 100px 0 0;
}
div:nth-of-type(4) {
border-radius: 100px 0 0 0;
}

這裡我透過使用nth-of-type的方式來調整四個網格區域的border-radius

技術總結

這題除了考驗怎麼解構圖案之外,這裡也考驗對 grid 或是 flex 的熟悉程度,以及對 nth-of-type的使用理解,當然你也可以透過下Id的方式去做微調,以上就是我的 100% 解法分享,一樣這題 100% 的解法絕對不會只有我這一種,大家也可以分享自己的作法與我交流,那麼我們下個禮拜三再見,Happy coding~ !

avatar-img
1會員
22內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Lee Luciano的沙龍 的其他內容
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
是的,身為前端工程師的基本功! 還是需要時不時拿出來打磨一番,這系列文章每個禮拜三都會更新一題CSS Battle的題目,歡迎與我交流喔!
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目與解法
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目解法
我不確定這個是不是台灣才有的特殊文化,總覺得這是中等以上規模的公司,普遍會發生的事情,以軟體開發來說這個情況會造成很多的誤判,錯誤的決策要比不懂來得更可怕!
走得遠和持久要比走得快更為重要,沒必要在短時間透支掉自己學習的動力,抓自己覺得舒服的學習時數,持之以恆,保持與生活的平衡,不要因為別人的成功來對自己的生活施加不必要的壓力,別人的成功可以參考應用,每個人都是不同的個體,他能承受的苦難,你未必也能承受,又或者幹嘛承受XD。
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 很多大公司的切版與前端是分開的,但不能因為碰不到就不去理解,假如要系統性的調整樣式,那麼你就一定要懂基礎,就好像你要調整微前端的架構,總不能連包板工具的設定都不會吧! 回到正題,這系列文章每個禮拜三都會更新一題CSS Battle的題
是的,身為前端工程師的基本功! 還是需要時不時拿出來打磨一番,這系列文章每個禮拜三都會更新一題CSS Battle的題目,歡迎與我交流喔!
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目與解法
是的,身為前端工程師的基本功!還是需要時不時拿出來打磨一番! 這系列文章每個禮拜三都會更新一題CSS Battle的題目解法
我不確定這個是不是台灣才有的特殊文化,總覺得這是中等以上規模的公司,普遍會發生的事情,以軟體開發來說這個情況會造成很多的誤判,錯誤的決策要比不懂來得更可怕!
走得遠和持久要比走得快更為重要,沒必要在短時間透支掉自己學習的動力,抓自己覺得舒服的學習時數,持之以恆,保持與生活的平衡,不要因為別人的成功來對自己的生活施加不必要的壓力,別人的成功可以參考應用,每個人都是不同的個體,他能承受的苦難,你未必也能承受,又或者幹嘛承受XD。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
如果你的一週,只有一天能有意識的過,你會怎麼過呢?是嚴守規律腳踏實地,還是放縱聲色盡情享受這24小時? 《消失的星期三》中,描述男子因意外生成七個不同的人格,且週一到週日每天固定更換人格......
Thumbnail
華燈拍攝的年代,大約是我三、四年級的時候,當時好流行吹高角度,我覺得好漂釀🥰🥰🥰從小擁有實驗精神的我,吵著媽媽幫我買罐果凍髮膠、尖尾梳,利用星期三讀半天的下午,自己想辦法法吹出「夢幻高角度」。輕而易舉的,我破解了高角度的做法,每個星期三下午,我都讓自己頂著美美高角度,在家附近閒晃。 這一天,
週三又是三堂課的日子,早上在九如上活氧舒展(Jun)和熱血戰鼓(Alan),下午在博愛上熱力燃脂(Owen)。 相對靜態,又有練到平衡、肌力和伸展的活氧舒展,對我來說本季是替代樂活瑜珈的一堂課,音樂很好聽,上課很享受。今天有帶新動作,Jun說如果這動作讓屁股很酸,就要去上超能55,呵呵~我不由得會心
Thumbnail
被遺忘的《愛登士家庭》 在本公子的記憶中,跟《愛登士家庭》的初接觸應該是小學時期,曾在電視上看過一些片段。
Thumbnail
今天來聊聊復古作品的延伸新作《星期三》,即使不記得舊作故事,或許也記得經典的家族合照和片頭曲的第一小節!是個很抓眼球的作品
Thumbnail
雖然這幾天持續低溫特報,桃園觀音的風勢也特別大,但這一天孩子卻特別認真於課堂活動,讓老師覺得欣慰。
Thumbnail
「你知道我為什麼喜歡喝威士忌嗎?威士忌源自uisge beatha這,意指「生命之水」……給人生命與活力的水,那不是很美好嗎?」
Thumbnail
這個月開始,我參加了作家朋友帶領的線上讀書會,這一週,她以自己的著作《親愛的,你好》一書中的一篇文章〈我姓白,名老鼠〉為主題,讓大家以醫學這個傳統的權威角色,透過書寫來審視自己的權威議題。
Thumbnail
簡介: 七種不同人格在一個人體內輪流出現,一週中交換醒來。有一天,普通、沒有特別嗜好的星期二突然在星期三時醒來,他發現,星期三不見了。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
如果你的一週,只有一天能有意識的過,你會怎麼過呢?是嚴守規律腳踏實地,還是放縱聲色盡情享受這24小時? 《消失的星期三》中,描述男子因意外生成七個不同的人格,且週一到週日每天固定更換人格......
Thumbnail
華燈拍攝的年代,大約是我三、四年級的時候,當時好流行吹高角度,我覺得好漂釀🥰🥰🥰從小擁有實驗精神的我,吵著媽媽幫我買罐果凍髮膠、尖尾梳,利用星期三讀半天的下午,自己想辦法法吹出「夢幻高角度」。輕而易舉的,我破解了高角度的做法,每個星期三下午,我都讓自己頂著美美高角度,在家附近閒晃。 這一天,
週三又是三堂課的日子,早上在九如上活氧舒展(Jun)和熱血戰鼓(Alan),下午在博愛上熱力燃脂(Owen)。 相對靜態,又有練到平衡、肌力和伸展的活氧舒展,對我來說本季是替代樂活瑜珈的一堂課,音樂很好聽,上課很享受。今天有帶新動作,Jun說如果這動作讓屁股很酸,就要去上超能55,呵呵~我不由得會心
Thumbnail
被遺忘的《愛登士家庭》 在本公子的記憶中,跟《愛登士家庭》的初接觸應該是小學時期,曾在電視上看過一些片段。
Thumbnail
今天來聊聊復古作品的延伸新作《星期三》,即使不記得舊作故事,或許也記得經典的家族合照和片頭曲的第一小節!是個很抓眼球的作品
Thumbnail
雖然這幾天持續低溫特報,桃園觀音的風勢也特別大,但這一天孩子卻特別認真於課堂活動,讓老師覺得欣慰。
Thumbnail
「你知道我為什麼喜歡喝威士忌嗎?威士忌源自uisge beatha這,意指「生命之水」……給人生命與活力的水,那不是很美好嗎?」
Thumbnail
這個月開始,我參加了作家朋友帶領的線上讀書會,這一週,她以自己的著作《親愛的,你好》一書中的一篇文章〈我姓白,名老鼠〉為主題,讓大家以醫學這個傳統的權威角色,透過書寫來審視自己的權威議題。
Thumbnail
簡介: 七種不同人格在一個人體內輪流出現,一週中交換醒來。有一天,普通、沒有特別嗜好的星期二突然在星期三時醒來,他發現,星期三不見了。