搭配 CSS

第三堂課

例題 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:超連結變成區塊(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:讓圖片自己動的小小動畫效果

第七堂課

例題 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.B:使用網址傳遞變數給伺服器處理-解決 XSS
例題 9.4.A:電腦隨機出拳
例題 9.4.B:跟電腦猜拳-假設你先出剪刀
例題 9.4.C:隨機計算人物屬性
例題 9.4.D:照片隨便你丟