• 姓名:Wang Zi Lin
• 學號:4050C045
• 回我的個人首頁

上課連結

• 第三堂:上課練習
  • 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： 使用 CSS 修改字體相關的功能顯示
  • 4.1.B： 在字框與字體之間透過 padding 保留空白留白感
  • 4.1.C： 使用外部雲端字型(會有時間期限，已經失效)
  • 4.1.D： Google 與 Adobe 提供的字型顯示中文
  • 4.2.A： 超連結的 :hover, :active, :focus 特效
  • 4.2.B： 讓超連結變成區塊顯示 (display: block)
  • 4.3.A： :hover 用在其他任意的地方
  • 4.4.A： 清單與 :hover 的同時應用
  • 4.4.B： 清單特效:使用圖檔來取代前導符號
  • 4.5.A： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表
  • 4.5.B： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表 :collapse 的框線重疊
  • 4.6.A： 以清單來說明使用 ul li 會產生的後代繼承影響問題
  • 4.6.B： 承上，使用 ul>li 討論後代就不會繼承的效應
  • 4.6.C： 使用 display 搭配 :hover 討論隱藏資料的特效
• 第五堂課:上課練習
  • 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： 修改導覽列加入 active 的樣板
  • 7.1.C： 修改導覽列，讓按鈕間沒有框線
  • 7.2.A： 讓導覽列擁有第二個選單功能
  • 7.2.B： 讓導覽列第二層選單可以具有滑動特效
  • 7.3.A： 讓圖片可以具有超連結的點選功能
  • 7.4.B： 使用Balsamiq Markup 快速鍵置網站示意圖
  • 7.5.A： 以HTML5的新標籤處理整體網站的風格樣式
• 第八堂課:上課練習
  • 8.2.A：單欄式設計-使用 vw 的單位
  • 8.2.B：雙欄式設計-讓導覽列固定在左側

Homework

• 第三堂:課後練習
  • 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： 透過地圖連結以及清單項目的絕對位置說明