iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

挑戰 CSS 30 天 系列

挑戰 CSS 30 天

參賽天數 30 天 | 共 30 篇文章 | 21 人訂閱 訂閱系列文 RSS系列文
DAY 21

day21_繼承

在一個 HTML 文件中,標籤之間有所謂的親子關係。舉例來說,title 這個標籤一定都是在 head 這個標籤之內,所以我們就說 title 是 head...

2017-12-24 ‧ 由 小斑 分享
DAY 22

day22_選擇器 (selector)

選擇器 (selector) 包含:Class 與 ID Class 的宣告法,是先放一個句點 (.),之後再列出選擇器名稱。設定一個 Class 選擇器的語...

2017-12-25 ‧ 由 小斑 分享
DAY 23

day23_div&span

div 與 span 類似的地方是:兩個標籤的目的都是將內容分為不同的區域。 而不同的地方是: span 可以涵蓋更細層的元素,因此可以用 span 來...

2017-12-26 ‧ 由 小斑 分享
DAY 24

day24_vertical-align

vertical-align 屬性可用來調整圖片與文字的對齊效果。 如以下範例: <!DOCTYPE html> <html> <...

2017-12-27 ‧ 由 小斑 分享
DAY 25

day25_css3 border

使用 CSS3 的border-radius 屬性可為元素添加圓角邊框以及box-shadow 屬性可為元素添加陰影 範例: <!DOCTYPE html...

2017-12-28 ‧ 由 小斑 分享
DAY 26

day26_css3 border-radius

border-radius 屬性中如果只指定一個值,那麼將生成 4 個圓角。但是,如果想在四個角上一一指定,可以使用以下規則: 四個值:第一個值為左上角,第...

2017-12-29 ‧ 由 小斑 分享
DAY 27

day27_css3 box-shadow

CSS3 中的 box-shadow 屬性適用於盒子陰影,也可用來創建卡片。 範例: <!DOCTYPE html> <html>...

2017-12-30 ‧ 由 小斑 分享
DAY 29

day29_hover

按鈕動畫->鼠標移動到按鈕上後添加箭頭標記 範例: <!DOCTYPE html> <html> <head> &...

2018-01-01 ‧ 由 小斑 分享
DAY 30

day30_review

在 day2 中有提到,我的發文內容可能比較偏向基本,因是第一次參賽,目的希望在挑戰連續發文的 30 天中,更重要的是能從中學習並累積自己的前端技術。終於來到最...

2018-01-02 ‧ 由 小斑 分享