Xiu-Juan的網頁設計自學網
姓名:莊秀娟
學號:4050C010
首頁
HTML-課程
class。1
class。2
HTML-作業
class。1
class。2
CSS-課程
class。3
class。4
class。5
class。6
class。7
class。8
class。9
CSS-作業
class。3
class。4
class。5
class。6
class。7
網站地圖
網站設計
Xiu-Juan自學網
> css課程
class。3
3-1-2: span取代font
3-2-1: span取代font2-本系目標
3-2-2: 整體背景
3-3-1: 字體不同
3-3-2: 字體不同+背景圖
3-4-1: 表格-2種tr
3-4-2: 表格+背景圖
3-5-1: id取代class"."→"#"
3-6-1: 外部檔案,呼叫
class。4
4-1-1: 詩
4-1-2: 詩+pdding留白
4-1-4: 詩+myfont.css
4-2-1: 改變超連結效果
4-2-2: 改變超連結效果-區塊
4-3-1: 詩+:hover
4-4-1: 本堂課4.1~4.3的練習連結設計
4-4-2: 本堂課4.1~4.3的練習連結設計+星星
4-5-1: 表格-空氣品質
class。5
5-1-1: 方塊模型-初階
5-1-2: 方塊模型-置中(水平對齊, margin)
5-1-3: 方塊模型-圓角.陰影
5-1-4: 方塊模型-使用圖檔作為框線的來源
5-2-1: 方塊對齊-inline-block
5-2-2: 方塊對齊-外部方塊整合排版
5-2-3: 方塊對齊-內部靠上對齊用 vertical-align
5-2-4: 方塊對齊-內部靠上對齊用 float
5-2-5: 方塊對齊-外部框線補齊用 overflow
5-3-1: 位置探討-正常流向時,使用 margin 調整移動的位置
5-3-2: 位置探討-承上,使用 z-index 搭配 position 來調整圖層
5-3-3: 位置探討-一般排版,使用垂直朝上對齊的效果,分三欄位
5-3-4: 位置探討-使用 position relative 來調整單一方塊移動的效果
5-3-5: 位置探討-使用 position absolute 來調整全部方塊移動的效果
5-3-6: 位置探討-使用 position fixed 來增加一個類似按鈕方塊的功能
5-4-1: 討論不同的 overflow 效果展示
5-4-2: 圓形圖示大頭貼
5-4-3: 小測驗選項:hover出現
class。6
6-1-1: 色彩漸層初體驗
6-1-2: 圓形彩虹漸層
6-2-1: 寧夏的歌詞(三張底圖的處理方式)
6-2-2: 底圖填滿效果(contain vs. cover)
6-2-3: 使用底圖產生假按鈕的效果
6-3-1: 圖示效果變化
6-4-1: 圖示效果變化-旋轉(transform-rotate)
6-4-2: 圖示效果變化-位移(transform-translate.scale)
6-5-1: 圖示效果變化-漸變(transition)<<6.3.1延伸
6-6-1: 讓圖示自己動<<6.5.1延伸
6-6-2: 讓企鵝自己轉圈圈<<6.4.1延伸
6-6-3: 在背景下的蜜蜂會飛來飛去<<6.2.1延伸
6-6-4: ×)首頁旋轉圖示的小動畫<<6.4.2延伸
class。7
7-1-1: 導覽列項目設計改變
7-1-2: 導覽列項目設計改變-顯示活動中項目
7-1-3: 導覽列項目設計改變(按鈕間隔&框線消失)
7-2-1: 第一個下拉式選單
7-2-2: 第一個下拉式選單+transition變化<<7.2.1延伸
7-3-1: 圖片連結網站 coords
7-4-2: 快速版面設置Balsamiq Mockups
7-5-1: :一層一層建置所需要的版型<<7.5.1延伸
class。8
8-2-1: 單欄式設計-使用 vw 的單位
×)8-2-2: 雙欄式設計-讓導覽列固定在左側
class。9
9.1.1: 我的第一個php網頁
9.1.2: 姓氏&名字
9.1.3: 變數相加
9.1.3-a: 網頁色彩-色碼
9.1.3-b: 網頁色彩-色塊
9.1.4: 網頁色彩-色塊(字反白
9.1.5: 時間
9.1.6: 時間+問候語
9.2.1: 時間-include
9.2.2: 時間-function
9.3.1: 網址列貼變數之變化
Xiu-Juan的css課程