上課的資料

• 第三堂課
  • 例題 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 的呼叫
• 第四堂課
  • 例題 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 以清單來說明使用ul li會產生的後代繼承影響問題
  • 例題 4.6.B 承上，使用ul>li討論後代就不會繼承的效應
  • 例題 4.6.C 使用display搭配:hover討論影藏資料的特效
• 第五堂課
  • 例題 5.1.A 使用方塊的留白與相關框線利用
  • 例題 5.1.B 區塊標記的左右對齊方式： margin-right: auto
  • 例題 5.1.C 方塊加上圓角以及陰影的方式
  • 例題 5.1.D 使用自製框線： border-image-soure 的使用
  • 例題 5.2.A 利用 display: inline-block 讓區塊標記在水平線上面對齊
  • 例題 5.2.B 在小方塊外面加上一個大方塊來進行版面配置
  • 例題 5.2.C 利用 vertical-align 讓元素對其水平線上方
  • 例題 5.2.D 利用 float 讓子元素漂浮在父元素上方
  • 例題 5.2.E 父元素加上 overflow 來解決子元素 float 後的排版問題
  • 例題 5.3.A 利用 margin 來讓方塊重疊的方式
  • 例題 5.3.B 透過 z-index 指定圖層的上下順序
  • 例題 5.3.C 透過 vertical-align 以及外層排版，定義三欄排版版型
  • 例題 5.3.D 使用position 為 relative 修改子元素的相對位置
  • 例題 5.3.E 使用position 為 absolute 修改子元素的絕對位置
  • 例題 5.3.F 使用position 為 fixed 增加固定在瀏覽器上面的元件
  • 例題 5.4.A 進一步了解 overfloe 的屬性值意義
  • 例題 5.4.B 圓形大頭照的處理方案
  • 例題 5.4.C 透過 visibility 隱藏答案
• 第六堂課
  • 例題 6.1.A 使用漸層的背景
  • 例題 6.1.B 圓形外框大頭照加上厚重彩虹圓形
  • 例題 6.2.A 多張底圖的處理方式
  • 例題 6.2.B 背景放大到邊框的型態 cover/contain
  • 例題 6.2.C 影像透明度的使用 opacity 的處理
  • 例題 6.3.A 方塊內圖片上面疊上文字說明的統一格式處理
  • 例題 6.4.A 多重圖示的轉動技巧加上萬用字元的呼叫使用
  • 例題 6.4.B 圖示的重疊畫面展示(五個圖示重疊)
  • 例題 6.5.A 已漸變方式取代直接變化的 transition 的功能
  • 例題 6.6.A 以動畫方式讓滑鼠特效變成一直變動的畫面
  • 例題 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.4.B 使用Balsamiq Markup快速鍵至網站示意圖
  • 例題 7.5.A 以HTML5的新標籤處理整體網站的風格樣式
• 第八堂課
  • 例題 8.2.A 單欄式設計-使用 vw 的單位
  • 例題 8.2.B 雙欄式設計-讓導覽列固定在左側
• 第九堂課
  • 例題 9.1.A 第一個 PHP 的網頁
  • 例題 9.1.B 利用變數處理
  • 例題 9.1.C 迴圈處理網頁安全色
  • 例題 9.1.D 迴圈處理網頁安全色-套用文字對比色
  • 例題 9.1.E PHP的伺服器時間顯示
  • 例題 9.1.F PHP的伺服器時間顯示-加上問候語
  • 例題 9.2.A 使用 include 呼叫程式來執行
  • 例題 9.2.B 使用 function 呼叫程式來執行
  • 例題 9.3.A 在網址列外帶變數來顯示資料