iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
自我挑戰組

前進切版之路! CSS微體驗 系列

從 0 開始的初學者轉職筆記~
透過寫筆記的方式重新釐清自己的思緒,並把筆記整理的淺白易懂,方便未來的自己不會看的一頭霧水
在這邊分享自己踩過的坑以及解決的方法
希望我可以撐過30天!!加油

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 11

【心得】你今天種菜了嗎? grid之路-grid的使用(3)

前言 昨天看了落落長的一大串~看得目睛花花怎麼感覺他沒有一開始的grid-template-areas簡潔可愛呀(。>﹏<) 切莫太早下定論!開始整...

2021-09-20 ‧ 由 豹告 分享
DAY 12

【心得】你今天種菜了嗎? grid之路-grid的使用(4)

前言 前面用棋盤方格為例,練習了如何用grid-template-areas、grid-column grid-row、grid-area來把區域填入格子當中...

2021-09-21 ‧ 由 豹告 分享
DAY 13

【心得】你今天種菜了嗎? grid之路-grid的使用(5)

前言 既然可以使用grid-area為每個區域命名,並填入grid-template-areas中,那可不可以幫線條命名呢? 答案是可以的~這次一樣用照片牆來做...

2021-09-22 ‧ 由 豹告 分享
DAY 14

【心得】你今天種菜了嗎? grid之路-grid的使用(6)

畫欄位線條時我們都要計算要畫幾條線以及每一格的大小,以便接下來完美的將物件填入格子裡像是: grid-template-columns: repeat(5,20...

2021-09-23 ‧ 由 豹告 分享
DAY 15

【踩坑】為什麼a標籤沒有包住我要的範圍!?

前幾天看了落落長的grid使用相信應該有一滴滴的概念了 今天來輕鬆一下~看看我幹過的蠢事⊙▽⊙ 搏君一笑~~ <a>標籤的使用 <a>是...

2021-09-24 ‧ 由 豹告 分享
DAY 16

【心得】我就是要跟別人不一樣!!List 清單樣式變變變~

當我們看到條列式的文字時,首先都會想到使用HTML裡面的<ol>、<ul>來製作 但<ol>、<ul>的預設樣式...

2021-09-25 ‧ 由 豹告 分享
DAY 17

【踩坑】animation 選單按鈕動起來(複習篇)

某天閒晃網站時看到一個充滿魔性的選單按鈕是這個樣子的 圖源:https://www.pinterest.com/pin/446067538096146820/...

2021-09-26 ‧ 由 豹告 分享
DAY 18

【踩坑】animation 選單按鈕動起來(實作篇)

前情提要 昨天好好的復習了一下動畫的特性之後今天就來看看怎麼做這顆按鈕吧! 圖源:https://www.pinterest.com/pin/446067538...

2021-09-27 ‧ 由 豹告 分享
DAY 19

【心得】CSS-transform vs.relative 今天要吃哪一道呢~

前言 position 裡面有一個屬性叫 relative,可以讓物件根據原本的位置進行移動 transform 裡面也有一個屬性叫 translate ,也可...

2021-09-28 ‧ 由 豹告 分享
DAY 20

【心得】 會讓人暈3D的transform

昨天有先提到了transform的位移與relative的差別了那麼今天再來詳細一些比較常使用的transform屬性~以及如果使用多個transform屬性在...

2021-09-29 ‧ 由 豹告 分享