• 姓名：宋貞瑩
• 學號：4050C033
• 回我的個人首頁

上課連結

• 第三堂課的上課練習
  • 3.1.B：使用CSS的style取代font,strong等標記
  • 3.2.A：使用CSS的『數值單位』修改某些特性的大小
  • 3.2.B：搭配Body的CSS整體網頁風格的效果
  • 3.3.A：直接在head內增加style設定CSS風格
  • 3.3.B：在表格上面套用底圖的設計方式
  • 3.4.A：使用CSS套用表格兩個不同橫列的設計
  • 3.4.B：統一表格的單一class設計方式
  • 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：空氣品質的相關說明用CSS美化圖表:collapse的框線重疊
• 第五堂課
  • 例題 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 讓圖示自己動的小動畫-1(@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.4.B 使用 Balsamiq 超快速製作頁面簡介
  • 例題 7.5.A 一層一層建置好所需要的版型(搭配 7.4.B)
• 第八堂課
  • 例題 8.2.A 單欄式設計-使用 vw 的單位
  • 例題 8.2.B 雙欄式設計-讓導覽列固定在左側
• 第九堂課
  • 例題 9.1.A 我的第一個 PHP 網頁
  • 例題 9.1.B 使用變數處理資料輸出
  • 例題 9.1.C 網頁安全色，使用 PHP 迴圈的顯示方案
  • 例題 9.1.D 網頁安全色，使用 PHP 迴圈的顯示方案 加上對比色
  • 例題 9.1.E 目前伺服器的時間顯示
  • 例題 9.1.F 根據時間回應問候語
  • 例題 9.2.A 根據時間回應問候語
  • 例題 9.2.B 根據時間回應問候語
  • 例題 9.3.A 使用變數處理資料輸出

Home Work

• 第3堂課
• overall-外部的CSS風格設定檔主要內容
• 3.7.3：以CSS風格取代HTML的課表展示
• 3.7.4：以CSS風格取代HTML的特殊符號對應表
• 3.7.5：以CSS風格取代HTML的書籍清單展示
• 第4堂課
• 4.7.2：以CSS修飾古文的展示
• 4.7.4：以CSS修飾清單以及巢狀清單的隱藏使用
• 4.7.5：以CSS修飾表格以及:hover的美化
• 第5堂課
• 5.5.2：使用position進行排版
• 5.5.3：使用 :hover搭配visibility進行答案隱藏
• 第6堂課
• 6.7.2：使用漸層處理與圖片重疊的技巧，處理彩虹人物像
• 6.7.3：直立按鈕改橫式按鈕，並增加一個按鈕
• 6.7.4：圖片放大變成在正中央放大，不是向右下方放大的模樣
• 6.7.5：承上，加上漸變的功能
• 6.7.6：蜜蜂飛來飛去，衝向螢幕來嚇你
• 6.7.7：照片的幻燈片淡出/淡入效果功能
• 第7堂課
• 7.6.2：使用較清爽的導覽列模式
• 7.6.3：讓原本橫的導覽列變成直的導覽列模式
• 7.6.4：預計達成的期中報告網站列表
• 7.6.5：透過地圖連結以及清單項目的絕對位置說明
• 第8堂課
• 阿貞的HTML&CSS學習網