• 姓名:黃凱煜
• 學號:4060C026
• 回我的個人首頁

上課練習

第三堂課

• 例題 3.1.B：第一次使用 CSS 取代 <font>
• 例題 3.2.A：探討 CSS 的單位
• 例題 3.2.B：探討 CSS 的簡易使用
• 例題 3.3.A：以 CSS 在 head 使用的整體設定值
• 例題 3.3.B：以 CSS 處理背景
• 例題 3.4.A：以 CSS 處理兩種不同的 class
• 例題 3.4.B：以 CSS 處理 table 的底圖
• 例題 3.5.A：以 CSS 使用 id 去呼叫，不是用 class
• 例題 3.6.A：使用外部呼叫的 style.css 樣式

第四堂課

• 例題 4.1.A：簡易的 CSS 字型處理
• 例題 4.1.B：簡易的 CSS 字型處理+padding(內部留白)
• 例題 4.1.D：使用本伺服器提供的字型
• 例題 4.2.A：超連結的使用
• 例題 4.2.B：a 超連結變成區塊 (block)
• 例題 4.3.A：任何地方都能使用 :hover
• 例題 4.4.A：清單的效果-中文號碼清單
• 例題 4.4.B：清單的效果-項目變圖片
• 例題 4.5.A：表格功能的 CSS 修訂
• 例題 4.5.B：表格功能 - border-collapse 功能
• 例題 4.6.A：繼承 - 清單為例
• 例題 4.6.B：繼承 - 後代子孫不會被影響 >
• 例題 4.6.C：繼承 - display 的隱藏效果

第五堂課

• 例題 5.1.A：方塊試探
• 例題 5.1.B：方塊 - 水平置中
• 例題 5.1.C：方塊 - 框線的圓角 + 陰影
• 例題 5.1.D：方塊 - 自製的邊框圖片 (90x90 為例)
• 例題 5.2.A：方塊 - 將方塊變成行內元素
• 例題 5.2.B：方塊 - 盡量不要跑版的設計
• 例題 5.2.C：方塊 - 用 vertical-align 進行向上對齊的功能(放在子元素內喔!)
• 例題 5.2.D：方塊 - 用 float 進行向上對齊的功能
• 例題 5.2.E：方塊 - 加上 overflow 的父元素功能
• 例題 5.3.A：方塊 - 兩個方塊的重疊與透明度
• 例題 5.3.B：方塊 - 透過 z-index 調整元素的塗層上/下
• 例題 5.3.C：方塊 - position 位置初探
• 例題 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 的隱藏效果

第六堂課

• 例題 6.1.A：背景的漸層效果初探
• 例題 6.1.B：背景的漸層效果--用於大頭照
• 例題 6.2.A：背景--多張背景的應用
• 例題 6.2.B：背景--背景填滿的效果-cover.contain
• 例題 6.2.C：背景--清單變成按鈕的效果
• 例題 6.3.A：照片圖文框的設計
• 例題 6.4.A：方塊的變形--角度變化與疊圖
• 例題 6.4.B：方塊的變形--方塊打小、位置
• 例題 6.5.A：照片圖文框的設計-增加漸變功能 (類似動畫)
• 例題 6.6.A：讓圖片自己動的小動畫效果
• 例題 6.6.B：讓小企鵝自己轉圈圈
• 例題 6.6.C：『寧夏』歌詞，背景讓蜜蜂跑來跑去
• 例題 6.6.D：五個畫面裡面有超連結加上互相輪轉的功能

第七堂課

• 例題 7.1.A：用清單設計導覽列
• 例題 7.1.B：用清單設計導覽列-增加目前瀏覽中的頁面
• 例題 7.1.C：用清單設計導覽列-增加目前瀏覽中的頁面-連在一起
• 例題 7.2.A：用清單設計導覽列-兩層導覽列
• 例題 7.2.B：用清單設計導覽列-兩層導覽列-加上下拉效果
• 例題 7.3.A：用圖片進行超連結的 map 功能
• 例題 7.4.B：使用 Balsamiq 設計簡單的網頁草圖
• 例題 7.5.A：主要的版面配置建置

第八堂課

• 例題 8.2.A：版面配置-單攔式設計
• 例題 8.2.B：版面配置-雙攔式設計

第九堂課

• 例題 9.1.A：第一個 PHP 程式
• 例題 9.1.B：使用變數處理
• 例題 9.1.C：迴圈搭配表格秀出網頁安全色
• 例題 9.1.D：迴圈搭配表格秀出網頁安全色-對比色
• 例題 9.1.E：用 PHP 抓伺服器的時間
• 例題 9.1.F：用 date() 判斷時間，告知問候語
• 例題 9.2.B：透過 function 處理時間問候語
• 例題 9.3.A：使用網址傳遞變數給伺服器處理
• 例題9.3.A：使用網址傳遞變數給伺服器處理
• 例題 9.3.B：使用網址傳遞變數給伺服器處理 - XSS
• 例題 9.4.A：電腦隨機猜拳
• 例題 9.4.B：與電腦猜拳
• 例題 9.4.C：隨機計算人物屬性
• 例題 9.4.D：照片隨便丟

Home Works

第九堂課

• ex09.5.2：九九乘法表列表
• ex09.5.3：剪刀石頭布
• ex09.5.4：透過陣列設計以及亂數，取得最大獎的抽獎活動

第七堂課

• ex07.6.2：使用較清爽的導覽列模式
• ex07.6.3：讓原本橫的導覽列變成直的導覽列模式
• ex07.6.4：預計達成的期中報告網站列表
• ex07.6.5：透過地圖連結以及清單項目的絕對位址說明

第六堂課

• ex06.7.2：使用漸層處理與圖片重疊的技巧，處理彩虹人物像
• ex06.7.3：直立的按鈕改橫式按鈕，並增加一個按鈕
• ex06.7.4：圖示放大變成在中央放大，不是向右下方放大的模樣
• ex06.7.5：承上，加上漸變的功能
• ex06.7.6：蜜蜂飛來飛去，衝向螢幕嚇死你
• ex06.7.7：照片的幻燈片淡出/淡入的效果功能

第五堂課

• ex05.5.2：使用 position 進行編排
• ex05.5.3：使用 : hover 搭配 visibility 進行答案隱藏

第四堂課

• ex04.7.2：以 CSS 修飾古文的展示
• ex04.7.3：以 CSS 修飾清單以及巢式清單的隱藏使用
• ex04.7.4：以 CSS 修飾表格以及: hover 的美化

第三堂課

• ex03.7.2：利用 CSS 風格設定檔設定主要內容
• ex03.7.4：利用 CSS 風格取代 HTML 的課表展示
• ex03.7.5：利用 CSS 風格取代 HTML 的特殊符號對應表
• ex03.7.5：利用 CSS 風格取代 HTML 的書籍清單展示