• 第三堂課
  • 3.1.B：第一個CSS，文字與背景的調整
  • 3.2.A：考慮單位大小
  • 3.2.B：設定底色的方式
  • 3.3.A：使用 head 內的 style 修改預設標記顯示模式
  • 3.3.B：加上底圖的設定方式
  • 3.4.A：表格加上兩種不同的 tr 顯示模式
  • 3.4.B：設定類別影響子標記(table.class ,tr{..})
  • 3.5.A：使用 id 取代 class 功能
  • 3.6.A：呼叫外部CSS風格設定檔
• 第四堂課
  • 4.1.A：使用CSS修改字體相關的功能顯示
  • 4.1.B：在字框與字體之間透過padding保留空白
  • 4.1.D：Google & Adobe提供的字型顯示中文
  • 4.2.A：超連結的特效
  • 4.2.B：讓超連結變成區塊顯示
  • 4.3.A：hover用在其他任意的地方
  • 4.4.A：清單與hover的同時應用
  • 4.4.B：用圖檔來取代前導符號
  • 4.5.A：空氣品質的相關說明css圖表
  • 4.5.B：空氣品質的相關說明css圖表collaose框線重疊
• 第五堂課
  • 5.1.A：方塊模型初級理解
  • 5.1.B：方塊模型置中處理(水平對齊.margin)
  • 5.1.C：方塊模型圓角與陰影
  • 5.1.D：方塊模型使用圖檔作為框線來源
  • 5.2.A：方塊對齊機制 inline-block
  • 5.2.B：方塊對齊機制 外部方塊整合排版
  • 5.2.C：方塊對齊機制 內部靠上對齊 vertical-align
  • 5.2.D：方塊對齊機制 內部靠上對齊 float
  • 5.2.E：方塊對齊機制 外部框線補齊 overflow
  • 5.3.A：位置探討 正常流向 margin調整移動的位置
  • 5.3.B：位置探討 正常流向 z-index搭配position調整圖層
  • 5.3.C：位置探討 一般排版 垂直朝上對齊 分三欄
  • 5.3.D：位置探討 position relative調整單一方塊移動效果
  • 5.3.E：位置探討 position absolute調整全部方塊移動效果
  • 5.3.F：位置探討 position fixed增加一個類似按鈕方塊功能
  • 5.4.A：討論不同 overflow效果
  • 5.4.B：圓形大頭貼產生方式
  • 5.4.C：討論visibility搭配hover效果
• 第六堂課
  • 6.1.A：色彩漸層
  • 6.1.B：圓形的彩虹漸層
  • 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：導覽列功能 active
  • 7.1.C：導覽列功能 按鈕
  • 7.2.A：下拉式兩層選單
  • 7.2.B：下拉式兩層滑動選單
  • 7.3.A：圖片增加超連結
  • 7.5.A：HTML5處理網站整體風格
• 第八堂課
  • 8.2.A：單欄式版面網頁
  • 8.2.B：雙欄式版面網頁