WEB2 CSS 的網頁內容

• 姓名: 吳奕承
• 學號: 4070X009
• 回首頁

• 第九堂課
  • 9.1.A - 第一個 PHP 網頁測試
  • 9.1.B - 練習 PHP 的變數
  • 9.1.C-1 - 最陽春的迴圈練習
  • 9.1.C-2 - 色票製作 - 單迴圈
  • 9.1.C-3 - 色票製作 - 雙迴圈
  • 9.1.C-4 - 色票製作 - 三層迴圈
  • 9.1.D - 色票製作 - 對比色的處理
  • 9.1.E - 用 date 函數抓伺服器的時間
  • 9.1.F - 用 if 搭配 date 回應時間應答
  • 9.2.A - 呼叫外部檔案來實驗
  • 9.3.A - 呼叫外部檔案來實驗
  • 9.3.B - 從網址列輸入變數內容-增加XSS防禦
  • 9.4.A - 剪刀石頭布
  • 9.4.B - 跟電腦猜拳
  • 9.4.C - 隨機產生人物屬性的方式
  • 9.4.D - 許多照片隨便丟在某個空間內
• 第八堂課
  • 8.2.A - 單欄式版面設計
  • 8.2.B - 兩欄式版面設計
• 第七堂課
  • 7.1.A - 清單做成導覽列的練習
  • 7.1.B - 清單做成導覽列的練習-增加一個識別項目(.active)
  • 7.1.C - 清單做成導覽列的練習-讓按鈕綁在一起
  • 7.2.A - 具有下拉式的第二層選單效果
  • 7.3.A - 使用圖片當成按鈕的樣式
  • 7.4.B - 用 balsamiq 做快速版面配置示意圖
  • 7.5.A - 完整的版面配置實際製作
• 第六堂課
  • 6.1.A - 使用漸層背景色
  • 6.1.B - 使用漸層背景色-大頭彩虹圖
  • 6.2.A - 背景圖的應用-三張背景圖同時存在
  • 6.2.B - 背景圖的應用-填滿背景的 contain, cover 用法
  • 6.2.C - 背景圖的應用-假裝的按鈕設計
  • 6.3.A - 圖片的放大應用
  • 6.4.A - 圖片的旋轉應用 - transform rotate 功能
  • 6.4.B - 圖片的位移與尺寸變化 - transform: translate, scale 功能
  • 6.5.A - 圖片的漸變特效 - transition 功能
  • 6.6.A - 圖片的漸變特效 - 使用動畫讓它自己動
  • 6.6.C - 圖片的漸變特效 - 讓蜜蜂自己飛來飛去
  • 6.6.D - 圖片的漸變特效 - 讓超連結框循環轉來轉去
  • 6.6.E - 圖片的漸變特效 - 單純給你看不給你點擊的旋轉圖
• 第五堂課
  • 5.1.A - CSS 的 div 方塊應用
  • 5.1.B - CSS 的 div 方塊 - 置中的應用
  • 5.1.C - CSS 的 div 方塊 - 圓角與陰影
  • 5.1.D - div 框線應用 - 圖檔用作框線
  • 5.2.A - div 的 inline-block 展示
  • 5.2.B - div 的簡易排版方式
  • 5.2.C - div 的垂直排版方式 (vertical-align)
  • 5.2.D - div 的簡易排版 - float 的使用
  • 5.2.E - div 的簡易排版 - float 搭配 overflow
  • 5.3.A - 版面調配 - 預設的 margin 處理即可
  • 5.3.B - 版面調配 - relative 搭配 z-index 調整圖層
  • 5.3.C - 版面調配 - 標準調配方塊
  • 5.3.D - 版面調配 - relative 的單一方塊移動
  • 5.3.E - 版面調配 - absolute 同一個參考點
  • 5.3.F - 版面調配 - fixed 固定在瀏覽器的某個地方
  • 5.4.A - 版面調配 - 用 overflow 控制過多的資料
  • 5.4.B - 使用 hidden 設計圓形大頭貼
  • 5.4.C - 使用隱藏來處理算命的答案

• 第四堂課
  • 4.1.A - CSS 字體字型的運用
  • 4.1.B - 加上 padding 的留白應用
  • 4.1.D - 使用 Google 的免費字型
  • 4.2.A - 超連結的 :hover 特效
  • 4.2.B - 把 a 變成區塊元素 (display : block)
  • 4.3.A - 任何東西都用 :hover 效果
  • 4.4.A - CSS 的清單特效
  • 4.4.B - CSS 的清單特效-圖型效果
  • 4.5.A - CSS 的表格效果
  • 4.5.B - CSS 的表格效果 - 摺疊(collapse)效果
  • 4.6.A - CSS 父與子的繼承問題
  • 4.6.B - CSS 父與子的繼承問題 - 使用 >
  • 4.6.C - CSS 的隱藏效果

• 第三堂課
  • 3.1.B - 第一次使用 CSS
  • 3.2.A - CSS 單位的理解
  • 3.2.B - 顏色的使用
  • 3.3.A - 在 head 使用 style
  • 3.3.B - CSS 背景圖
  • 3.4.A - Class 類別的使用
  • 3.4.B - 使用類別與背景
  • 3.5.A - 使用 id 來設計 CSS
  • 3.6.A - 使用外部呼叫

HOMEWORKS

• 第九堂課
• 習題 9.5.2: 九九乘法表列表
• 習題 9.5.3: 剪刀石頭布
• 習題 9.5.4: 透過陣列設計以及亂數，取得最大獎的抽獎活動
• 第七堂課
• 習題 7.6.2: 使用較清爽的導覽列模式
• 習題 7.6.3: 讓原本橫的導覽列變成直的導覽列模式
• 習題 7.6.4: 預期達成的期中報告網站列表
• 習題 7.6.5: 透過地圖連結以及清單項目的絕對位址說明
• 第六堂課
• 習題 6.7.2: 使用漸層處理與圖片重疊的技巧，處理彩虹人物像
• 習題 6.7.3: 直立的按鈕改橫式按鈕，並增加一個按鈕
• 習題 6.7.4: 圖示放大變成在正中央放大，不是向右下方放大的模樣
• 習題 6.7.5: 承上，加上漸變的功能
• 習題 6.7.6: 蜜蜂飛來飛去，衝向螢幕來嚇你
• 習題 6.7.7: 照片幻燈片淡出/淡入效果功能
• 第五堂課
• 習題 5.5.2: 使用 position 進行排版
• 習題 5.5.3: 使用 :hover 搭配 visibility 進行答案隱藏
• 第四堂課
• 習題 4.7.2: 以 CSS 修飾古文的展示
• 習題 4.7.4: 以 CSS 修飾清單以及巢狀清單的隱藏使用
• 習題 4.7.5: 以 CSS 修飾表格以及 :hover 的美化
• 第三堂課
• 習題 3.7.2: 外部的 CSS 設定風格檔主要內容
• 習題 3.7.3: 以 CSS 風格取代 HTML 的課表展示
• 習題 3.7.4: 以 CSS 風格取代 HTML 的特殊符號對應表
• 習題 3.7.5: 以 CSS 風格取代 HTML 的書籍清單展示