• 姓名：廖建明
• 學號：4046x004
• 回我的個人首頁

上課的資料

• 第三堂課
  • 3.1.B:第一個 CSS 文字、背景的調整
  • 3.2.A:考慮單位大小，例如文字大小
  • 3.2.B:許多底色的設定方式
  • 3.3.A:使用 head 內的 style 修改預設標記顯示模式
  • 3.3.B:加上底圖的設定方式
  • 3.4.A:表格加上兩種不同的 tr 顯示模式
  • 3.4.B:設定類別影響子標記的方式 (table.class1 tr {..})
  • 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:空氣品質表格處理
  • 4.5.B:空氣品質表格處理:collapse的框限重疊
  • 4.6.A:以清單來說明使用ul li會產生的後代繼承影響問題
  • 4.6.B:承上，使用ul>li討論後代就不會繼承的效應
  • 4.6.C:使用display搭配:hover討論隱藏資料的特效
• 第五堂課
  • 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)
• 第八堂課
  • 8.2.A:單欄式設計-使用 vw 的單位
  • 8.2.B:雙欄式設計-讓導覽列固定在左側
• 第九堂課
  • 9.1.A:第一個php網頁
  • 9.1.B:利用變數處理
  • 9.1.C:迴圈處理網頁安全色
  • 9.1.D:迴圈處理網頁安全色-套用文字對比色
  • 9.1.E:PHP的伺服器時間顯示
  • 9.1.F:PHP的伺服器時間顯示-加上問候語
  • 9.2.A:使用 include 呼叫程式來執行
  • 9.2.B:使用 function 呼叫程式來執行
  • 9.3.A:在網址列外帶變數來顯示資料

作業

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