CSS標記語言使用

第三堂課的上課練習

例題 3.1.1: 第一次使用 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-colloapse

例題 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:隱藏效果

第六堂課的上課練習

例題 6.1.A:背景的漸層效果初探

例題 6.1.B:背景的漸層效果--用於大頭貼

例題 6.2.A:背景--多張背景的應用

例題 6.2.B:背景--背景填滿的效果

例題 6.2.C:背景--清單變成按鈕的效果

例題 6.3.A:照片圖文的設計

例題 6.5.A:照片圖文框的設計-增加漸變功能

例題 6.4.A:方塊的變形--角度變化與疊圖

例題 6.4.B:方塊的變形--方塊的大小、位置

例題 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: 用data()判斷時間，並告知問候語

例題 9.2.B: 透過 function 處理時間問候語

例題 9.3.A: 使用網址傳遞變數給伺服器處理

例題 9.3.B: 使用網址傳遞變數給伺服器處理-解決 XSS

例題 9.4.A: 電腦隨機出拳

例題 9.4.B:跟電腦猜拳-假設你先出剪刀

例題 9.4.C: 隨機計算人物屬性

例題 9.4.D: 隨機讓電腦判斷圖片怎麼撒~