• 姓名:莊宙憲
• 學號:4071C001
• 回首頁

• 第七課的上課練習
• 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:主要的版面配置建置
• 9.1.A:主要的版面配置建置
• 9.1.B:主要的版面配置建置
• 9.1.C:主要的版面配置建置
• 9.1.D:主要的版面配置建置
• 9.1.E:主要的版面配置建置
• 9.1.F:主要的版面配置建置
• 9.2.B:主要的版面配置建置
• 例題 9.3.A: 使用網址傳遞變數給伺服器處理
• 例題 9.3.B: 使用網址傳遞變數給伺服器處理-解決
• 9.4.B:主要的版面配置建置
• 9.4.C:主要的版面配置建置
• 9.4.D:主要的版面配置建置

• 第六課的上課練習
• 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:讓圖片自己動的小小動畫效果

• 第五課的上課練習
• 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:隱藏效果

• 第四課的上課練習
• 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的影藏效果

• 第三課的上課練習
• 3.1.B:使用CSS的style取代font.strong等標記
• 3.2.A:使用CSS的數值單位修改某些特性的大小
• 3.2.B:搭配Body的CSS整體網頁風格的效果
• 3.3.A:直接在head內增加style設定CSS風格
• 3.3.B:在表格上套用底圖的設計方式
• 3.4.A:使用CSS套用表格兩格不同橫列的設計
• 3.4.B:統一表格的單一class的功能
• 3.5.A:使用id取代class的功能
• 3.6.A:呼叫外部css風格設定檔

Homework

• 第九課程後練習
  • 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.4:以CSS修飾表格以及:hover的美化

• 第三課程後練習
• 3.7.2:外部的CSS風格設定檔主要內容
• 3.7.3:以CSS風格取代HTML的課表展示
• 以CSS風格取代HTML的特殊符號對應表
• 以CSS風格取代HTML的書籍清單展示