建智的網頁設計自學網
姓名:黃建智
學號:4060C005
回首頁
HTML 標記學習
第一堂課
第二堂課
HTML 作業回顧
第一堂課
第二堂課
CSS 學習
第三堂課
第四堂課
第五堂課
第六堂課
第七堂課
第八堂課
CSS 作業回顧
第三堂課
第四堂課
第五堂課
第六堂課
第七堂課
網站地圖
關於我
建智自學網
>
CSS 學習
第三堂課
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: 使用本伺服器提供的中文字型
4.2.A: 超連結的 :hover, :active :focus 特效
4.2.B: 讓超連結變成區塊顯示 (display: block)
4.3.A: :hover 用在其他任意的地方
4.4.A: 清單的效果-中文號碼清單
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: 方塊 - 水平置中
5.1.C: 方塊 - 框線的圓角+陰影
5.1.D: 方塊 - 框線的圓角+陰影自製的邊框 (90x90x 為例)
5.2.A: 方塊 - 將方塊變成行內元素
5.2.B: 方塊 - 盡量不要跑版的設計之一
5.2.C: 方塊 - 用 vertical-align 進行向上對齊的功能 (放在子元素內歐~)
5.2.D: 方塊 - 用 float 進行向上對齊的功能
5.2.E: 方塊 - 加上 overflow 得父元素的功能
5.3.A: 方塊 - 兩個方塊的重疊與透明度
5.3.B: 方塊 - 透過 z-index 調整元素的圖層上/下
5.3.C: 方塊 - position 位置初探
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: 背景--背景填滿的效果-cover, contain
6.2.C: 背景--清單變成按鈕的效果
6.3.A: 照片圖文框的設計
6.4.A: 方塊的變形--角度變化與疊圖
6.4.B: 方塊的變形--方塊的大小、位置
6.5.A: 照片圖文框的設計-增加漸變功能 (類似動畫)
6.6.A: 讓圖片自己動的小小動畫效果
6.6.B: 讓小企鵝自己轉圈圈
6.6.C: 『寧夏』歌詞,背景讓蜜蜂跑來跑去
6.6.D: 五個畫面裡面有超連結加上互相輪轉的功能
第七堂課
7.1.A: 用清單設計導覽列
7.1.B: 用清單設計導覽列 - 增加目前瀏覽中的頁面
7.1.C: 用清單設計導覽列 - 增加目前瀏覽中的頁面 - 連在一起
7.2.A: 用清單設計導覽列 - 兩層導覽列
7.2.B: 用清單設計導覽列 - 兩層導覽列 - 加上下拉效果
7.3.A: 用圖片進行超連結的 map 功能
7.4.B: 使用 Balsamiq Mark 進行快速版面配置作業
7.5.A: 主要的版面配置建置
第八堂課
8.2.A: 版面配置 - 單欄式設計
8.2.B: 版面配置 - 單欄式設計
8.4.A: 版面配置 - 單欄式設計
CSS 的相關資料