• 姓名：陳育杉
• 學號：4061c004
• 回我的個人首頁

上課的資料

• 第三堂課
  • 第一個 CSS 文字、背景的調整
  • 考慮單位大小，例如文字大小
  • 許多底色的設定方式
  • 直接在head內增加style設定CSS風格
  • 使用 head 內的 style 設計
  • 在表格上面套用底圖的設計方式
  • 使用CSS套用表格兩個不同橫列的設計
  • 統一表格的單一class設計方式
  • 使用 id 取代 class 的功能
  • 呼叫外部CSS風格設定檔
• 第四堂課
  • 簡單文字的滾滾長江東逝水
  • 承上，加上內部留白的 padding 處理
  • 承上，但是使用自己伺服器提供的字型
  • 超連結的特殊效果 (:hover)
  • 超連結元素變成區塊元素 (display: block)
  • 任何東西都可以 :hover 的啦
  • 清單的中文數字顯示
  • 清單的項目符號使用圖示來展示
  • 空氣品質表格處理
  • 空氣品質表格處理2
  • 用清單來說明繼承，這是後代通通繼承的時候
  • 用清單來說明繼承，僅影響下一代而不是所有後代
  • 用清單來說明繼承，加上 display: none 的隱藏應用
• 第五堂課
  • 方塊模型的初級理解
  • 方塊模型的置中處理(水平對齊, margin)
  • 方塊模型的圓角與陰影
  • 方塊模型使用圖檔作為框線的來源
  • 方塊對齊的機制-inline-block
  • 方塊對齊的機制-外部方塊整合排版 (display: block)
  • 方塊對齊的機制-內部靠上對齊用 vertical-align
  • 方塊對齊的機制-內部靠上對齊用 float
  • 方塊對齊的機制-外部框線補齊用 overflow
  • 位置探討 - 正常流向時，使用 margin 調整移動的位置
  • 位置探討 - 承上，使用 z-index 搭配 position 來調整圖層
  • 位置探討 - 一般排版，使用垂直朝上對齊的效果，分三欄位
  • 位置探討 - 使用 position relative 來調整單一方塊移動的效果
  • 位置探討 - 位置探討 - 使用 position absolute 來調整全部方塊移動的效果
  • 位置探討 - 使用 position fixed 來增加一個類似按鈕方塊的功能
  • 討論不同的 overflow 效果展示
  • 圓形的大頭貼產生的方式
• 第六堂課堂課
  • 色彩漸層的初體驗
  • 圓形的彩虹漸層處理
  • 6.2.A 寧夏的歌詞 (三張底圖的處理方式)
  • 6.2.B：底圖填滿效果 contain vs. cover
  • 6.2.C：底圖產生假按鈕效果
  • 6.3.A：特定效果圖示
  • 6.4.A：transform-rotate 改變圖層
  • 6.4.B：transform-translate+scale 改變圖層
  • 6.5.A：特定效果圖示加上漸變 transition
  • 6.6.A：圖示自動移動小動畫 @keyframes
  • 6.6.B：企鵝圖示自動轉圈
  • 6.6.C：蜜蜂圖示自動飛
  • 6.6.D：圖示依序旋轉小動畫
• 第七堂課
  • 7.1.A：導覽列功能
  • 7.1.B：導覽列功能 活動項目
  • 7.1.C：導覽列功能 按鈕
  • 7.2.A：下拉式選單
  • 7.2.B：做選單的 transition 漸變特效
  • 7.3.A： 使用圖片地圖的超連結導覽方式
  • 7.3.B：使用 Balsamiq 超快速製作頁面簡介
  • 7.4.1：例題 7.5.A 一層一層建置好所需要的版型(搭配 7.3.B)

  課後練習

  第3堂課作業
  • 外部的 CSS 風格設定檔主要內容
  • 以 CSS 風格取代 HTML 的課表展示
  • 以 CSS 風格取代 HTML 的特殊符號對應表
  • 以 CSS 風格取代 HTML 的書籍清單展示
• 第4堂課作業
  • 以CSS修飾古文
  • 以CSS修飾清單及巢狀清單隱藏使用
  • 已CSS修飾表格