姓名:顏廷仲
學號:4060C004
回首頁
上課連結
第三堂課的上課練習
例題 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.A: 清單的效果-中文號碼清單
第五堂課的上課練習
例題 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 的隱藏效果
第四堂課的上課練習
4.1.A: 使用 CSS 修改字體相關的功能顯示
4.1.B: 在字框與字體之間透過 padding 保留空白留白感
4.1.D: 使用本伺服器提供的中文字型
4.2.A: 超連結的 :hover, :active :focus 特效
4.2.B: 讓超連結變成區塊顯示 (display: block)
4.3.A: :hover 用在其他任意的地方
4.4.A: 清單的效果-中文號碼清單
4.4.B: 清單的效果-使用圖檔來取代前導符號
4.5.A: 空氣品質 (AQI) 的相關說明用 CSS 美化圖表
4.5.B: 空氣品質 (AQI) 的相關說明用 CSS 美化圖表(collapse 的框線重疊)
4.6.A: 以清單來說明使用 ul li 會產生的後代繼承影響問題
4.6.B: 承上,使用 ul > li 討論後代就不會繼承的效應
4.6.C: 使用 display 搭配 :hover 討論影藏資料的特效
第六堂課的上課練習
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: 讓圖片自己動的小小動畫效果
第七堂課的上課練習
7.1.A: 用清單設計導覽列
7.1.B: 用清單設計導覽列 - 增加目前瀏覽中的頁面
7.1.C: 用清單設計導覽列 - 增加目前瀏覽中的頁面 - 連在一起
7.2.A: 用清單設計導覽列 - 兩層導覽列
7.2.B: 用清單設計導覽列 - 兩層導覽列 - 加上下拉效果
7.3.A: 用圖片進行超連結的 map 功能
7.4.B: 使用 Balsamiq Mark 進行快速版面配置作業
7.5.A: 主要的版面配置建置
第八堂課的上課練習
8.2.A: 用清單設計導覽列
8.2.A: 用清單設計導覽列
第九堂課的上課練習
例題 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.B: 使用網址傳遞變數給伺服器處理-解決 XSS
例題 9.4.A: 電腦隨機出拳
例題 9.4.B: 跟電腦猜拳-假設你先出剪刀
例題 9.4.C: 隨機計算人物屬性
例題 9.4.C: 隨機計算人物屬性
Homeworks
第三節課程課後練習
3.7.2: 外部的 CSS 風格設定檔主要內容
3.7.3: 以 CSS 風格取代 HTML 的課表展示
3.7.4: 以 CSS 風格取代 HTML 的特殊符號對應表
3.7.5: 以 CSS 風格取代 HTML 的書籍清單展示
第四節課程課後練習
4.7.2: 以 CSS 修飾古文展示
4.7.4: 以 CSS 修飾清單以及巢狀清單的影藏使用
4.7.5: 以 CSS 修飾表格以及 :hover 的美化
第五堂課的上課練習
ex05.5.2:使用 position 進行編排
ex05.5.3:使用 : hover 搭配 visibility 進行答案隱藏
第六節課程課後練習
6.7.2: 使用漸層處理與圖片重疊的技巧,處理彩虹人物像
6.7.3: 直立的按鈕改橫式按鈕,並增加一個按鈕
6.7.4: 圖示放大變成在正中央放大,不是向右下方放大的模樣
6.7.5: 承上,加上漸變功能
6.7.6: 蜜蜂飛來飛去,衝向螢幕來嚇你
6.7.7: 照片的幻燈片淡出/淡入效果功能
第七節課程課後練習
7.6.2: 使用較清爽的導覽列模式
7.6.3: 讓原本橫的導覽列變成直的導覽列模式
7.6.4: 預計達成的期中報告網站列表
7.6.5: 透過地圖連結以及清單項目的絕對位置說明
第九節課程課後練習
3.7.2: 外部的 CSS 風格設定檔主要內容