• 姓名:莊秀娟
• 學號:4050C010

>> Class <<

• 『class。9』
--------9.1--------
• 9.1.1: 我的第一個php網頁
• 9.1.2: 姓氏&名字
• 9.1.3: 變數相加
• 9.1.3-a: 網頁色彩-色碼
• 9.1.3-b: 網頁色彩-色塊
• 9.1.4: 網頁色彩-色塊(字反白
• 9.1.5: 時間
• 9.1.6: 時間+問候語
--------9.2--------
• 9.2.1: 時間-include
• 9.2.2: 時間-function
--------9.3--------
• 9.3.1: 網址列貼變數之變化


• 『class。8』
--------8.2--------
• 8.2.1:單欄式設計-使用 vw 的單位
• ×）8.2.2: 雙欄式設計-讓導覽列固定在左側


• 『class。7』
--------7.1--------
• 7.1.1:導覽列項目設計改變
• 7.1.2:導覽列項目設計改變-顯示活動中項目
• 7.1.3:導覽列項目設計改變(按鈕間隔&框線消失)
--------7.2--------
• 7.2.1:第一個下拉式選單
• 7.2.2:第一個下拉式選單+transition變化<<7.2.1延伸
--------7.3--------
• 7.3.1:圖片連結網站 coords
--------7.4--------
• 7.4.2:快速版面設置Balsamiq Mockups
--------7.5--------
• 7.5.1:一層一層建置所需要的版型<<7.5.1延伸


• 『class。6』
--------6.1--------
• 6.1.1:色彩漸層初體驗
• 6.1.2:圓形彩虹漸層
--------6.2--------
• 6.2.1:寧夏的歌詞(三張底圖的處理方式)
• 6.2.2:底圖填滿效果(contain vs. cover)
• 6.2.3:使用底圖產生假按鈕的效果
--------6.3--------
• 6.3.1:圖示效果變化
--------6.4--------
• 6.4.1:圖示效果變化-旋轉(transform-rotate)
• 6.4.2:圖示效果變化-位移(transform-translate.scale)
--------6.5--------
• 6.5.1:圖示效果變化-漸變(transition)<<6.3.1延伸
--------6.6--------
• 6.6.1:讓圖示自己動<<6.5.1延伸
• 6.6.2:讓企鵝自己轉圈圈<<6.4.1延伸
• 6.6.3:在背景下的蜜蜂會飛來飛去<<6.2.1延伸
• ×）6.6.4:首頁旋轉圖示的小動畫<<6.4.2延伸


• 『class。5』
--------5.1--------
• 5.1.1:方塊模型-初階
• 5.1.2:方塊模型-置中(水平對齊, margin)
• 5.1.3:方塊模型-圓角.陰影
• 5.1.4:方塊模型-使用圖檔作為框線的來源
--------5.2--------
• 5.2.1:方塊對齊-inline-block
• 5.2.2:方塊對齊-外部方塊整合排版
• 5.2.3:方塊對齊-內部靠上對齊用 vertical-align
• 5.2.4:方塊對齊-內部靠上對齊用 float
• 5.2.5:方塊對齊-外部框線補齊用 overflow
--------5.3--------
• 5.3.1:位置探討-正常流向時，使用 margin 調整移動的位置
• 5.3.2:位置探討-承上，使用 z-index 搭配 position 來調整圖層
• 5.3.3:位置探討-一般排版，使用垂直朝上對齊的效果，分三欄位
• 5.3.4:位置探討-使用 position relative 來調整單一方塊移動的效果
• 5.3.5:位置探討-使用 position absolute 來調整全部方塊移動的效果
• 5.3.6:位置探討-使用 position fixed 來增加一個類似按鈕方塊的功能
--------5.4--------
• 5.4.1:討論不同的 overflow 效果展示
• 5.4.2:圓形圖示大頭貼
• 5.4.3:小測驗選項:hover出現


• 『class。4』
--------4.1--------
• 4.1.1:詩
• 4.1.2:詩+pdding留白
• 4.1.4:詩+myfont.css
--------4.2--------
• 4.2.1:改變超連結效果
• 4.2.2:改變超連結效果-區塊
--------4.3--------
• 4.3.1:詩+:hover
--------4.4--------
• 4.4.1:本堂課4.1~4.3的練習連結設計
• 4.4.2:本堂課4.1~4.3的練習連結設計+星星
--------4.5--------
• 4.5.1:表格-空氣品質


• 『class。3』
--------3.1--------
• 3.1.2:span取代font
--------3.2--------
• 3.2.1:span取代font2-本系目標
• 3.2.2:整體背景
--------3.3--------
• 3.3.1:字體不同
• 3.3.2:字體不同+背景圖
--------3.4--------
• 3.4.1:表格-2種tr
• 3.4.2:表格+背景圖
--------3.5--------
• 3.5.1:id取代class"."→"#"
--------3.6--------
• 3.6.1:外部檔案，呼叫

>> Homeworks <<

• 『homework。7』
• 7.6.2:較簡潔的導覽列<<7.1.3延伸
• 7.6.3:下拉式選單-橫式→直式<<7.2.2延伸
• 7.6.4:期中網站報告草圖Balsamiq
• 7.6.5:地圖連結&清單項目-絕對位址說明


• 『homework。6』
• 6.7.2:加上彩虹漸層<<6.1.2延伸
• 6.7.3:直列按鈕→橫列按鈕<<6.2.3延伸
• 6.7.4:右下放大→正中間放大<<6.3.1延伸
• 6.7.5:承上，加上漸變(transition)<<6.7.4延伸
• ×）6.7.6:位移放大(transform-translate.scale)<<6.2.2延伸
• ×）6.7.7:照片循環播放+淡出淡入


• 『homework。5』
• 5.5.2:使用position排版
• 5.5.3:使用:hover搭配visibility隱藏答案


• 『homework。4』
• 4.7.2:改詩
• 4.7.4:叢書介紹，隱藏&出現
• 4.7.5:表格應用-大頭照，CSS


• 『homework。3』
• 3.7.2:css設計
• 3.7.3:課表，呼叫
• 3.7.4:特殊符號表格-2種tr
• 3.7.5:叢書介紹