• 姓名:方智弘
• 學號:4050c024
• 回到我的首頁

上課連結

• 第三章課堂練習
  • 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風格設定檔
• 第四章課堂練習
  • 4.1.a:簡單文字的滾滾長江東逝水
  • 4.1.b:承上，加上內部留白的 padding 處理
  • 4.1.d:承上， 但是使用自己伺服器提供的字型
  • 4.2.a:超連結的特殊效果 (:hover)
  • 4.2.b:超連結元素變成區塊元素 (display: block)
  • 4.3.a:任何東西都可以 :hover
  • 4.4.a:清單的中文數字顯示
  • 4.4.b:清單特效:使用圖檔來取代前導符號
  • 4.5.a:空氣品質(AQI)的相關說明用CSS美化圖表
  • 4.5.b:空氣品質(AQI)的相關說明用CSS美化圖表:collapse的框線重疊
• 第五章課堂練習
  • 5.1.a:方塊模型的初級理解
  • 5.1.b:方塊模型的置中處理(水平對齊, margin)
  • 5.1.c:方塊模型的圓角與陰影
  • 5.1.d:方塊模型使用圖檔作為框線的來源
  • 5.2.a:方塊對齊的機制-inline-block
  • 5.2.b:方塊對齊的機制-外部方塊整合排版
  • 5.2.c:方塊對齊的機制-內部靠上對齊用 vertical-align
  • 5.2.d:方塊對齊的機制-內部靠上對齊用 float
  • 5.2.e:方塊對齊的機制-外部框線補齊用 overflow
  • 5.3.a:正常流向時，使用 margin 調整移動的位置
  • 5.3.b:承上，使用 z-index 搭配 position 來調整圖層
  • 5.3.c:一般排版，使用垂直朝上對齊的效果，分三欄位
  • 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:討論 visibility 搭配 hover 的效果
• 第六章課堂練習
  • 6.1.a:色彩漸層的初體驗
  • 6.1.b:圓形的彩虹漸層處理
  • 6.2.a:寧夏的歌詞(三張底圖的處理方式)
  • 6.2.b:底圖的處理效果(contain vs 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:讓圖示自己動的小動畫-1(@keyframes)
  • 6.6.b:讓企鵝自己轉圈圈
  • 6.6.c:在背景下的蜜蜂會飛來飛去的
  • 6.6.d:經常用在首頁旋轉圖示的小動畫效果
• 第七章課堂練習
  • 7.1.a:第一個導覽列功能
  • 7.1.b:第一個導覽列功能-外加活動中的項目
  • 7.1.c:第一個導覽列功能-按鈕連在一起
  • 7.2.a:第一個下拉式選單
  • 7.2.b:做選單的 transition 漸變特效
  • 7.3.a:使用圖片地圖的超連結導覽方式
  • 7.4.b:使用 Balsamiq 超快速製作頁面簡介
  • 7.5.a:一層一層建置好所需要的版型(搭配 7.4.b)
• 第八章課堂練習
  • 8.2.a:
  • 8.2.b:
• 第十章
  • 10.1.a:
  • 10.1.b:
  • 10.1.c:
  • 10.2.a:
  • 10.2.b:
  • 10.3.a:
  • 10.3.c:
  • 10.4.a:
  • 10.4.b:
  • 10.4.c:
  • 10.4.d:
  • 10.5.a:
  • 10.5.b:

  HomeWorks

• 第三章作業
  • 3.7.b:外部的CSS風格設定檔主要內容
  • 3.7.c:以CSS風格取代HTML的課表展示
  • 3.7.d:以CSS風格取代HTML的特殊符號對應表
  • 3.7.e:以CSS風格取代HTML的書籍清單展示
• 第四章作業
  • 4.7.b:以CSS修飾古文展示
  • 4.7.e:以CSS修飾表格以及:hover的美化
• 第五章作業
  • 5.5.b:使用postion進行排版
  • 5.5.c:使用:hover搭配visibility進行答案隱藏
• 第六章作業
  • 6.7.b
  • 6.7.c
  • 6.7.d
  • 6.7.e
  • 6.7.f
  • 6.7.g
• 第七章作業
  • 7.6.b
  • 7.6.c
  • 7.6.d
  • 7.6.e