• 姓名:王崇名

• 學號:4050C014

• 回我的個人首頁

上課連結

第三堂課

• 2.3.2 CSS 屬性與 HTML 標記的關係
• 3.2.a CSS 屬性值常見的單位與表示方式
• 3.2.b
• 3.3.a整體版型設定如文字、背景、段落行高等屬性
• 3.3.b整體版型設定如文字、背景、段落行高等屬性
• 3.4.a增加類別 (class) 可重複引用特定屬性的方式
• 3.4.b增加類別 (class) 可重複引用特定屬性的方式
• 3.5.a增加 id 可重複引用特定屬性的方式
• 3.6.a使用外部 style 檔案，重複呼叫同一樣式設定

第四堂課

• 4.1.1
• 4.1.2
• 4.1.3
• 4.2.1
• 4.3.A
• 4.4.A
• 4.4.B
• 4.5.A
• 4.5.B
• 4.6.A
• 4.6.B
• 4.6.C
• 第五堂課
  • 5.1.A:使用方塊的留白與相關框線利用
  • 5.1.B:區塊標記的左右對齊方式: margin-right: auto
  • 5.1.C:方塊加上圓角以及陰影的方式
  • 5.1.D:使用自製框線: border-image-source的使用
  • 5.2.A:利用display:inline-block讓區塊標記在水平上面對齊
  • 5.2.B:在小方塊外面加上一個大方塊來進行版面配置
  • 5.2.C:利用vertical-align讓元素對齊水平線上方
  • 5.2.D:利用float讓子元素漂浮在父元素上方
  • 5.2.E:父元素加上overflow來解決子元素float後的排版問題
  • 5.3.A:利用margin來讓方塊重疊的方式
  • 5.3.B:透過z-index指定圖層的上下順序
  • 5.3.C:透過vertical-align以及外層排版，定義三欄排版版型
  • 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隱藏答案
  • 第六堂課
  • 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)

作業

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