• 姓名：簡名妍
• 學號：4050C049
• 回到我的個人首頁

第九堂課

• 9.1.A：第一個 php 網頁
• 9.1.B：利用變數處理
• 9.1.C：迴圈處理網頁安全色
• 9.1.D：迴圈處理網頁安全色 - 套用文字對比色
• 9.1.E：php 的伺服器時間顯示
• 9.1.F：php 的伺服器時間顯示 - 加上問候語

第八堂課

• 8.2.A：單欄式版面設計
• 8.2.B：雙欄式版面設計

第七堂課

• 7.1.A：第一個導覽列功能
• 7.1.B：第一個導覽列功能-外加活動中的項目
• 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：背景放大到邊框的型態 cover/contain
• 6.2.C：影像透明度的使用 opacity 的處理
• 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：區塊標記的左右對齊方式
• 5.1.C：方塊加上圓角以及陰影的方式
• 5.1.D：使用自製框線：border-image-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：使用 css 修改字體相關的功能顯示
• 4.1.B：在字框與字體之間使用 Padding 保留空白留白感
• 4.1.C：使用外部雲端字體
• 4.1.D：Goolge 與 Adobe 提供的字形顯示中文
• 4.2.A：超連結的 :hover, :active, :focus 特效
• 4.2.B：讓超連結變成區塊顯示 (display:block)
• 4.3.A：:hover 用在其他任意地方
• 4.4.A：清單與:hover 的同時運用
• 4.5.A：空氣品質表格處理
• 4.5.B：空氣品質表格處理-collapse 的使用
• 4.6.A：以清單來說明使用 ul li 會產生的後代繼承影響問題
• 4.6.B：承上，使用 ul > li 討論後代就不會繼承的效應
• 4.6.C：使用 display 搭配 :hover 討論隱藏資料的特效

第三堂課

• 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 的呼叫

Homework

• 03.7.2：外部的 CSS 風格設定檔主要內容
• 03.7.3：以 CSS 風格取代 HTML 之課表展示
• 03.7.4：以 CSS 風格取代 HTML 之特殊符號對照表
• 03.7.5：以 CSS 風格取代 HTML 之書籍清單展示
• 04.7.2：以 CSS 修飾古文的展示
• 05.2.2：使用 position 進排版
• 05.2.3：使用 :hover 搭配 visibility 進行答案隱藏 進排版
• 06.7.2：使用漸層處理與圖片重疊的技巧，處理彩虹人物像
• 06.7.3：直立的按鈕改橫式按鈕，並增加一個按鈕
• 06.7.4：圖示放大變成在正中央放大，並不是向右下方放大的模樣
• 06.7.5：承上，加上漸變
• 06.7.6：蜜蜂飛去嚇你
• 06.7.7：照片的幻燈片淡出/淡入效果功能
• 07.6.2：使用較清爽的導覽列模式
• 07.6.3：讓原本橫的導覽列變直的
• 07.6.4：預計達成的期中
• 07.6.5：地圖連結以及清單項目的絕對位址說明