CSS INDEX

• 姓名：莊芷瑄
• 學號：4120C004
♦♦♦回個人首頁♦♦♦

• 按我會去到第三章作業
• 按我會去到第四章作業
• 按我會去到第五章作業
• 按我會去到第六章作業
• 按我會去到第七章作業

CSS課程連結

• 第三單元
• 3-3-1 網路線介紹
• 3-3-2 加入網頁背景圖
• 3-4-1 使用Class 以表格展示
• 3-6-1 使用外部檔案呼叫CSS

• 第四單元
• 4-1-1 練習不同字型 - 用預設的瀏覽器字型
• 4-1-3 練習不同字型 - 呼叫google fonts的方法
• 4-2-1 處理超連結效果 :hover 初探
• 4-2-2 處理超連結效果 - 把 a 變區塊元素
• 4-3-1 測試 :hover 在任意的地方
• 4-4-1 用 CSS 修改 ul, ol, li...
• 4-6-1 了解一下繼承

• 第五單元
• 5-1-1 初探方塊 - 了解邊界
• 5-1-3 初探方塊 - 框線圓角、陰影
• 5-1-4 初探方塊 - 自製框線
• 5-2-1 兩個方塊的對齊 - 預設值
• 5-2-2 兩個方塊的對齊 - 使用大外框限制寬度
• 5-2-3 兩個方塊的對齊 - 用 virtical-align 設計垂直對齊
• 5-2-4 兩個方塊的對齊 - 用 float 漂浮在父元素上面
• 5-3-1 多個方塊的位置設計 - 先用 margin 處理
• 5-3-3 多個方塊的位置設計 - 先用 vertical-align top 對齊
• 5-3-5 多個方塊的位置設計 - 用 position:absolute 處理
• 5-3-6 方塊固定位置的方法 - 用 position:fixed 處理
• 5-4-1 使用 overflow 限制子元素的內容
• 5-4-2 圓形照片 - 使用 overflow
• 5-4-3 使用 display 隱藏/顯示答案

• 第六單元
• 6-1-1 使用漸層背景
• 6-1-2 使用漸層背景 - 大頭照加上彩虹
• 6-2-1 三張底圖的應用
• 6-2-2 底圖填滿的效果 (contain/cover)
• 6-2-3 用底圖搭配清單設定按鈕
• 6-3-1 用 CSS 做會動的圖示
• 6-4-1 圖示方塊的旋轉 - 搭配 transform: rotate
• 6-4-2 顯示方塊的變化 - transform: translate/scale
• 6-5-1 用 CSS 做會動的圖示 - 搭配 transiton
• 6-6-1 用 CSS 做會動的圖示 - 動畫效果
• 6-6-4 用 CSS 做會動的圖示 - 方塊的移動

• 第七單元
• 7-1-1 單層導覽列
• 7-1-2 單層導覽列 - 增加 active 功能
• 7-2-1 雙層導覽列 - 下拉式選單
• 7-3-1 地圖超連結的按鈕
• 7-5-1 HTML5 新標籤運用

CSS課程作業

• 第三單元
• overall.css
• mytable.css
• 3.7.3 CSS 課表製作
• 3.7.4 CSS 特殊符號表
• 3.7.5 CSS 鳥哥叢書介紹

• 第四單元
• ex04.7.2 李白人物介紹、詩詞
• ex04.7.4 鳥哥叢書介紹
• ex04.7.5 學經歷表格

• 第五單元
• ex05.5.2 托瓦茲簡介
• ex05.5.3 心理測驗

• 第六單元
• ex06.7.2 彩虹遮罩大頭貼
• ex06.7.3 用底圖搭配清單設定按鈕(橫向)
• ex06.7.4 圖片放大動畫
• ex06.7.5 圖片漸變放大動畫
• ex06.7.6 蜜蜂動畫
• ex06.7.7 輪播動畫

• 第七單元
• ex07.6.2 導覽列樣式
• ex07.6.3 雙層側導覽列樣式
• ex07.6.5 幾所學校的簡易介紹