惠鈴 的網頁設計自學網
姓名:吳惠鈴
學號:4040L044
回首頁
HTML課程
第一堂課
第二堂課
HTML作業
第一堂課作業
第二堂課作業
CSS課程
第三堂課
第四堂課
第五堂課
第六堂課
第七堂課
第八堂課
CSS作業
第三堂課作業
第四堂課作業
第五堂課作業
第六堂課作業
第七堂課作業
第八堂課作業
網站地圖
關於我
惠鈴 自學網
>
首頁
>
CSS課程
>
第六堂課
第三堂課
例題 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-soure 的使用
例題 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 進一步了解 overfloe 的屬性值意義
例題 5.4.B 圓形大頭照的處理方案
例題 5.4.C 透過 visibility 隱藏答案
第六堂課
例題 6.1.A 使用漸層的背景
例題 6.1.B 圓形外框大頭照加上厚重彩虹圓形
例題 6.2.A 多張底圖的處理方式
例題 6.2.B 背景放大到邊框的型態 cover/contain
例題 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 讓動畫持續輪轉
第七堂課
例題 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的新標籤處理整體網站的風格樣式
第八堂課
例題 8.2.A 單欄式設計-使用 vw 的單位
例題 8.2.B 雙欄式設計-讓導覽列固定在左側
CSS 的相關資料
回首頁