王嘉清的網頁設計自學網
姓名:王嘉清
學號:4030C011
首頁
HTML課程
第一堂課
第二堂課
HTML作業
css課程
第三堂課
第四堂課
第五堂課
第六堂課
第七堂課
css作業
網站地圖
網站設計
王嘉清的自學網
>
首頁
第七堂課
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的新標籤處理整體網站的風格樣式
第六堂課
6.1.A: 色彩漸層的體驗
6.1.B: 圓形的彩虹漸層處理
6.2.A: 寧夏的歌詞(三張底圖的處理方式)
6.2.B: 底圖的填滿效果(contain vs. cover)
6.2.C: 影像透明度的使用 opacity 的處理
6.3.A: 方塊內圖片上面疊上文字說明的統一格式處理
6.4.A: 多重圖示的轉動技巧加上萬用字元的呼叫使用
6.4.B: 圖示的重疊畫展示(五個圖示重疊)
6.5.A: 以漸變方式取代直接變化的 transition 功能
6.6.A: 以動畫方式讓滑鼠特效變成一直變動的畫面
6.6.B: 以動畫方式讓企鵝一直轉圈圈
6.6.C: 讓底圖的蜜蜂飛
6.6.D: 讓動畫持續輪轉
第五堂課
5.1.A: 使用方塊的留白與相關框線利用
5.1.B: 區塊標記的左右對齊方式: margin-right: auto
5.1.C: 方塊加上圓角以及陰影方式
5.1.D: 使用自製框線: border-images-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 隱藏答案
第四堂課
4.1.A: 簡單文字的滾滾長江東逝水
4.1.B: 承上,加上內部留白的 padding 處理
4.1.C: 使用外部雲端字體(會有時間限制,已經失效)
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: 空氣品質(AQI)的相關說明用 css 美化圖表: collapse 的框線重疊
4.6.A: 以清單來說明使用 ul li 會產生的後代繼承影響問題
4.6.B: 承上,使用 ul>li 討論後代就不會繼承的效應
4.6.C: 使用 display 搭配 :hover 討論隱藏資料的特效
第三堂課
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 風格設定檔