自動播放
自動完成
上一個單元
Complete and Continue
[FE101] 前端基礎:HTML 與 CSS
課前須知
課前須知
網頁背後到底是什麼?
帶你一探網頁背後的秘密 (7:19)
HTML 基礎
絕對會用到的標籤:html、head 與 body (7:18)
別忘了 HTML 最早存在的意義:h1~h6、p (4:45)
很常見的標籤:div 與 span (3:52)
顯示圖片就靠它:img (3:12)
顯示清單:ul、ol 與 li (2:00)
保留完整格式:pre (3:03)
表格必備標籤:table、th、tr 與 td (3:34)
帶我走,到遙遠的以後:a (4:27)
語意化的 UI 標籤:main、nav、footer 等等 (4:38)
直接用別人的網頁:iframe (2:30)
表單相關標籤:form、input、textarea (9:48)
SEO 與相關標籤:meta tag (17:10)
Escape:該怎麼顯示標籤? (3:36)
CSS 基礎 Part1:Selector
選我選我選我選我:CSS selector (4:56)
CSS Selector:我全部都要 (1:02)
CSS Selector:標籤 (1:29)
CSS Selector:id 與 class (3:34)
CSS Selector:同時符合 (2:32)
CSS Selector:底下的元素 (5:01)
CSS Selector:~ 與 + (8:16)
CSS Selector:Pseudo-classes,以 hover 為例 (3:41)
CSS Selector:nth-child (8:00)
CSS Selector:before 與 after (7:15)
CSS Selector 的權重 (12:34)
CSS 基礎 Part2:各種裝飾
背景:background (7:45)
把自己框起來:border 與 border-radius (9:36)
離我遠一點,或我離你遠一點:margin 與 padding (4:12)
文字相關:color、font-family、font-weight 與 line-height (7:49)
文字相關 part2:word-break 與 white-space (2:46)
你滿了,那我就漫出來了:overflow 與 text-overflow (3:04)
加了我質感瞬間升級:transition (5:37)
Die Verwandlung:transform 的妙用 (8:04)
CSS 基礎 Part3:盒模型(box model)
鋼彈吊單槓:什麼是盒模型? (7:50)
斯斯有三種:display 的三種形式:block、inline 與 inline-block (6:11)
CSS 基礎 Part4:定位(position)
最好理解的兩種:static 與 relative (4:33)
沒那麼難理解的 absolute 與 fixed (8:07)
你前面還我前面:z-index (1:34)
比較潮的 sticky (2:17)
簡單切板實戰
CSS 隨意聊加上切板實戰(直播影片存檔) (67:37)
Teach online with
語意化的 UI 標籤:main、nav、footer 等等
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock