莊芷瑄的 BootStrap 網頁
崑山科大 資訊傳播系 網頁規劃與設計 PHP練習 \|/
學習 BS 4
基礎學習
導覽列與版面配置
表單與 PHP
HTML & CSS
單純 HTML
搭配 CSS
期中報告前的大練習
學習進展
期中考大站
單頁式網頁製作
期末考網站
網站地圖
關於我
CSS 課程
unit 03
3-3-1 網路線介紹
3-3-2 加入網頁背景圖
3-4-1 使用 Class 以表格展示
3-6-1 使用外部檔案呼叫 CSS
unit 04
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 了解一下繼承
unit 05
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 隱藏/顯示答案
unit 06
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 做會動的圖示 - 方塊的移動
unit 07
7-1-1 單層導覽列
7-1-2 單層導覽列 - 增加 active 功能
7-2-1 雙層導覽列 - 下拉式選單
7-3-1 地圖超連結的按鈕
7-5-1 HTML5 新標籤運用
CSS 作業
ex 03
overall.css
mytable.css
3.7.3 CSS 課表製作
3.7.4 CSS 特殊符號表
3.7.5 CSS 鳥哥叢書介紹
ex 04
ex04.7.2 李白人物介紹、詩詞
ex04.7.4 鳥哥叢書介紹
ex04.7.5 學經歷表格
ex 05
ex05.5.2 托瓦茲簡介
ex05.5.3 心理測驗
ex 06
ex06.7.2 彩虹遮罩大頭貼
ex06.7.3 用底圖搭配清單設定按鈕(橫向)
ex06.7.4 圖片放大動畫
ex06.7.5 圖片漸變放大動畫
ex06.7.6 蜜蜂動畫
ex06.7.7 輪播動畫
ex 07
ex07.6.2 導覽列樣式
ex07.6.3 雙層側導覽列樣式
ex07.6.5 幾所學校的簡易介紹
CSS 學 習 內 容
