• 姓名:梁慧玲
• 學號:4050c056
• 回我的個人首頁

上課連結

• 第三堂課
• 例題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.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 圓形的大頭貼產生的方式
• 第六堂課
• 例題6.1.A 色彩漸層的初體驗
• 例題6.1.B 圓形的彩虹漸層處理
• 例題6.2.A 寧夏的歌詞(三張底圖的處理方式)
• 例題6.2.B 底圖的填滿效果(contain vs.cover)
• 例題6.2.C 使用底圖產生假按鈕的效果(contain vs.cover)
• 例題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 以HTML 5的新標籤處理整體網站的風格樣式
• 第八堂課
• 例題8.2.A
• 第九堂課
• 例題9.1.A
• 例題9.1.B
• 例題9.1.C
• 例題9.1.D
• 例題9.1.E
• 例題9.1.F
• 例題9.2.A
• 例題9.2.B
• 例題9.3.A

Home Wroks

• 第三堂課
• 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:使用postion進行排版
• 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.5:透過地圖連結以及清單項目的絕對位址說明