WEB2 CSS 相關的網頁內容

• 姓名:陳佳臨
• 學號:4070c018
• 回首頁

上課例題

• 第九堂課
  • 9.1.A: 第一個PHP網頁測試
  • 9.1.B: 練習PHP的變數
  • 9.1.3.C-1: 最陽春迴圈練習
  • 9.1.3.C-2: 色票製作 - 單迴圈
  • 9.1.3.C-3: 色票製作 - 雙迴圈
  • 9.1.3.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:rotate, 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-CSS顏色的使用
  • 3.3.A-在head使用style
  • 3.3.B-CSS 背景圖
  • 3.4.A-class 類別的使用
  • 3.4.B-使用類別與背景
  • 3.5.A-使用id來設計CSS囉
  • 3.6.A-使用外部呼叫CSS方式

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的書籍清單展示