web2 CSS相關網頁內容

• 姓名:黃振翔
• 學號: 4070C022
• 回首頁

上課例題

• 第三堂課
  • 3.1.B 第一次使用CSS
  • 3.2.A CSS單位理解
  • 3.2.B CSS顏色應用
  • 3.3.A 在head使用style
  • 3.3.B 在background加入底圖
  • 3.4.A class類別的使用
  • 3.4.B 使用類別與背景
  • 3.5.A 使用 id 來設計 CSS
  • 3.6.A 使用外部呼叫 CSS 方式
• 第四堂課
  • 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.6.A css父子繼承問題
  • 4.6.B css父子繼承問題-使用
  • 4.6.C css隱藏效果
• 第五堂課
  • 5.1.A css的div方塊應用
  • 5.1.B css的div方塊-置中的用法
  • 5.1.C css的div方塊-圓角與陰影
  • 5.1.D css的div方塊-圖檔用作框線
  • 5.2.A css的div-inline-block展示
  • 5.2.B css的div-簡易排版方式
  • 5.2.C css的div-重質編排方式
  • 5.2.D css的div-簡易排版方式-float使用
  • 5.2.E css的div-簡易排版方式-float搭配overfloat
  • 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 版面調配-用overflowd控制過多資料
  • 5.4.B 使用hidden設計圓形頭貼
  • 5.4.C 使用隱藏來處理算命的答案
• 第六堂課
  • 6.1.A 使用漸層被景色
  • 6.1.B 使用漸層被景色-大頭彩虹圖
  • 6.2.A 背景圖的應用-三張背景圖同時存在
  • 6.2.B 背景圖的應用-填滿背景的contain,cover用法
  • 6.2.C 背景圖的應用-假裝的按鈕設計
  • 6.3.A 圖片的放大應用
  • 6.4.A 圖片的選轉應用-transfrom: rotate 功能
  • 6.4.B 圖片的選轉應用-transfrom: translate, scale 功能
  • 6.5.A 圖片的漸變應用-transition
  • 6.6.A 圖片的漸變應用-使用動畫讓他自己動
  • 6.6.C 圖片的漸變應用-讓蜜蜂飛動
  • 6.6.D 圖片的漸變應用-讓超連結框循環轉動
• 第七堂課
  • 7.1.A 清單做成導覽列的練習
  • 7.1.B 清單做成導覽列的練習-增加一個網頁識別項目
  • 7.1.C 清單做成導覽列的練習-讓按鈕綁在一起
  • 7.2.A 具有下拉式的第二層選單
  • 7.3.B 使用圖片當成按鈕樣式
  • 7.4.B 用balsamiq Markup進行快速排版設計
  • 7.5.A 用balsamiq Markup進行快速排版設計
• 第八堂課
  • 8.2.A - 單欄式版面設計
  • 8.2.B - 兩欄式版面設計
• 第九堂課
  • 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 - 許多照片隨便丟在某個空間內

Home Works

• 第三堂課
  • 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 的美化
• 第五堂課
  • 5.5.2 使用 position 進行排版
  • 5.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 透過地圖連結以及清單項目的絕對位址說明
• 第九堂課
  • 9.5.2 九九乘法列表
  • 9.5.3 剪刀石頭布
  • 9.5.4 透過陣列設計以及亂數，取得最大獎的抽獎活動