• 姓名：曾玉惠
• 學號：4050c003
• 回我的個人首頁

上課連結

• 第九堂課的上課練習
  • 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： 在網址列外帶變數來顯示資料

• 第八堂課的上課練習
  • 8.2.A： 單欄式設計-使用 vw 的單位
  • 8.2.B： 雙欄式設計-讓導覽列固定在左側

• 第七堂課的上課練習
  • 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的新標籤處理整體網站的風格樣式

• 第六堂課的上課練習
  • 6.1.A： 色彩漸層的體驗
  • 6.1.B： 圓形的彩虹漸層處理
  • 6.2.A： 寧夏的歌詞(三張底圖的處理方式)
  • 6.2.B： 底圖的填滿效果(contain vs. cover)
  • 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： 讓動畫持續輪轉

• 第五堂課的上課練習
  • 5.1.A： 使用方塊的留白與相關框線利用
  • 5.1.B： 區塊標記的左右對齊方式： margin-right: auto
  • 5.1.C： 方塊加上圓角以及陰影方式
  • 5.1.D： 使用自製框線： border-images-source 的使用
  • 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： 進一步了解 overflow 的屬性值意義
  • 5.4.B： 圓形大頭照的處理方案
  • 5.4.C： 透過 visibility 隱藏答案

• 第四堂課的上課練習
  • 4.1.A： 簡單文字的滾滾長江東逝水
  • 4.1.B： 承上，加上內部留白的 padding 處理
  • 4.1.C： 使用外部雲端字體(會有時間限制，已經失效)
  • 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： 空氣品質(AQI)的相關說明用 CSS 美化圖表： collapse 的框線重疊
  • 4.6.A： 以清單來說明使用 ul li 會產生的後代繼承影響問題
  • 4.6.B： 承上，使用 ul>li 討論後代就不會繼承的效應
  • 4.6.C： 使用 display 搭配 :hover 討論隱藏資料的特效

• 第三堂課的上課練習
  • 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 風格設定檔

Homeworks

• 第七堂課程課後練習
  • 7.6.2： 使用較清爽的導覽列模式
  • 7.6.3： 讓原本橫的導覽列變成直的導覽列模式
  • 7.6.4： 預計達成的期中報告網站列表
  • 7.6.5： 透過地圖連結以及清單項目的絕對位置說明

• 第六堂課程課後練習
  • 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 進行答案隱藏

• 第四堂課程課後練習
  • 4.7.2：以 CSS 修飾古文的展示
  • 4.7.4： 以 CSS 修飾清單以及巢狀清單的隱藏使用
  • 4.7.5： 以 CSS 修飾表格以及 :hover 的美化

• 第三堂課程課後練習
  • 3.7.2： 外部的 CSS 風格設定檔主要內容
  • 3.7.3： 以 CSS 風格取代 HTML 的課表展示
  • 3.7.4： 以 CSS 風格取代 HTML 的特殊符號對應表
  • 3.7.5： 以 CSS 風格取代 HTML 的書籍清單展示