• 姓名：王嘉清
• 學號：4030C011
• 回我的個人首頁

上課的資料

• 第九堂課的上課練習
  • 9.1.A： 第一個PHP的網頁(你看不到程式碼)
  • 9.1.B： 利用變數處理
  • 9.1.C： 迴圈處理網頁安全色
  • 9.1.D： 迴圈處理網頁安全色-套用文字對比色
  • 9.1.E： PHP的伺服器時間顯示
  • 9.1.F： PHP的伺服器時間顯示-加上問候語
  • 9.2.A：
  • 9.2.B：
  • 9.3.A：
• 第七堂課
  • 例題 7.1.A 第一個導覽列功能
  • 例題 7.1.B 第一個導覽列功能-外加活動中的項目
  • 例題 7.1.C 第一個導覽列功能-按鈕連在一起
  • 例題 7.2.A 第一個下拉式選單
  • 例題 7.2.B 做選單的 transition 漸變特效
  • 例題 7.3.A 使用圖片地圖的超連結導覽方式
  • 例題 7.4.B 使用 Balsamiq 超快速製作頁面簡介
  • 例題 7.5.A 一層一層建置好所需要的版型(搭配 7.4.B)
• 第六堂課
  • 例題 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 讓圖示自己動的小動畫-1(@keyframes)
  • 例題 6.6.B 讓企鵝自己轉圈圈
  • 例題 6.6.C 在背景下的蜜蜂會飛來飛去的
  • 例題 6.6.D 經常用在首頁旋轉圖示的小動畫效果
• 第五堂課
  • 例題 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 來調整單一方塊移動的效果
• 第四堂課
  • 例題 4.1.A 簡單文字的滾滾長江東逝水
  • 例題 4.1.B 承上，加上內部留白的 padding 處理
  • 例題 4.1.D 承上， 但是使用自己伺服器提供的字型
  • 例題 4.2.A 超連結的特殊效果 (:hover)
  • 例題 4.2.B 超連結元素變成區塊元素 (display: block)
  • 例題 4.3.A 任何東西都可以 :hover 的啦
  • 例題 4.4.A 清單的中文數字顯示
  • 例題 4.4.B 清單的項目符號使用圖示來展示
  • 例題 4.5.A 空氣品質表格處理
  • 例題 4.5.B 空氣品質表格處理-collapse 的使用
  • 例題 4.6.A 用清單來說明繼承，這是後代通通繼承的時候
  • 例題 4.6.B 用清單來說明繼承，僅影響下一代而不是所有後代
  • 例題 4.6.C 用清單來說明繼承，加上 display: none 的隱藏應用
• 第三堂課
  • 例題 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.class1 tr {..})
  • 例題 3.5.A 使用 id 取代 class 的方案
  • 例題 3.6.A 使用外部檔案來處理 css 的呼叫

Homeworks

• 第六堂課程課後練習
  • 6.7.2： 使用漸層處理與圖片重疊的技巧，處理彩虹人物像
  • 6.7.3： 直立的按鈕改橫式按鈕，並增加一個按鈕
  • 6.7.4： 圖示放大變成在正中央放大，不是向右下放大的模樣
  • 6.7.5： 承上，加上漸變的功能
  • 6.7.6： 蜜蜂飛來飛去，衝向螢幕來嚇你
  • 6.7.7： 照片的幻燈片淡出/淡入效果功能
• 第五堂課程課後練習
  • 5.5.2： 使用position進行排版
  • 5.5.3： 使用 :hover 搭配 visibility 進行答案隱藏