VBird 學習 CSS

CSS 相關課程

• 第七堂課
  • 7.1.1 單層導覽列
  • 7.1.2 單層導覽列-增加 active 功能
  • 7.2.1 雙層導覽列-下拉式選單
  • 7.3.1 地圖超連結的按鈕
  • 7.5.1 HTML5 新標籤應用
• 第六堂課
  • 6.1.1 使用漸層背景
  • 6.1.2 使用漸層背景-大頭照加上彩虹
  • 6.2.1 三張底圖的應用
  • 6.2.2 底圖填滿的效果 (contain/cover)
  • 6.2.3 用底圖搭配清單設計按鈕
  • 6.3.1 用 CSS 做會動的圖示
  • 6.5.1 用 CSS 做會動的圖示-搭配transition
  • 6.4.1 圖示方塊的旋轉 - transform: rotate
  • 6.4.2 圖示方塊的變化 - transform: translate/scale
  • 6.6.1 用 CSS 做會動的圖示-動畫效果
  • 6.6.4 用 CSS 做會動的圖示-方塊的移動
• 第五堂課
  • 5.1.1 初探方塊 - 了解邊界
  • 5.1.3 初探方塊 - 框線圓角、陰影
  • 5.1.4 初探方塊 - 自製框線
  • 5.2.1 兩個方塊的對齊 - 預設值 inline-block
  • 5.2.2 兩個方塊的對齊 - 使用大外框限制寬度
  • 5.2.3 兩個方塊的對齊 - 用 virtical-align 設計垂直對齊
  • 5.2.4 兩個方塊的對齊 - 用 float 漂浮在父元素上面
  • 5.3.1 多個方塊的位置設計 - 先用 margin 處理
  • 5.3.3 多個方塊的位置設計 - 先用 vertical-align top 對齊
  • 5.3.5 多個方塊的位置設計 - 用 position:absolute 處理
  • 5.3.6 方塊固定位置的方法 - 用 position:fixed 處理
  • 5.4.1 使用 overflow 限制子元素的內容
  • 5.4.2 圓形照片 - 使用 overflow
  • 5.4.3 使用 display 隱藏/顯示答案
• 第四堂課
  • 4.1.1 練習不同字型 - 用預設的瀏覽器字型
  • 4.1.3 練習不同字型 - 呼叫 google fonts 的方法
  • 4.2.1 處理超連結效果 :hover 初探
  • 4.2.2 處理超連結效果 - 把 a 變成區塊元素
  • 4.3.1 測試 :hover 在任意的地方
  • 4.4.1 用 CSS 修改 ul, ol, li...
  • 4.6.1 了解一下繼承
• 第三堂課
  • 3.3.1 使用全域處理 CSS - 網路線介紹
  • 3.3.2 開始使用背景圖示 - background 用 url()
  • 3.4.1 開始使用 class - 以表格展示
  • 3.6.1 開始使用外部檔案呼叫 CSS 類別

回家作業

Unit03-回家作業

• overall.css 外部風格檔
• ex03.7.3.html - 作業3
• ex03.7.4.html - 作業4
• ex03.7.5.html - 作業5

Unit04-回家作業

• ex04.7.2.html - 作業2

Unit05-回家作業

• ex05.5.2.html - 作業2
• ex05.5.3.html - 作業3

Unit06-回家作業

• ex06.7.2.html - 作業2
• ex06.7.3.html - 作業3
• ex06.7.4.html - 作業4
• ex06.7.5.html - 作業5

Unit07-回家作業

• ex07.6.2.html - 作業2
• ex07.6.3.html - 作業3