week4.md

download docx note 網頁設計第四次上課.docx

---

---

CSS Combinator

1. 串接樣式

型式 : div+空格+?
div p = (div和p中間的空格代表div以下不論幾層都可以找到，但要包在<div>和</div>中間)

div .abc  = (在div裡找class是abc的)
div #abc  = (在div裡找id是abc的) 

2. 立即子帶

型式 : div > ?
div > p = (一定要在下一層才會收到，如果在div和p之間多一層就不會顯示)

3. 親密兄弟關係(少用)

型式 : div + ?

4.一般兄弟關係(少用)

型式 : div ~ ?

---

CSS Overflow

常用 : scroll , auto

scroll 是不管有沒有超出都會顯示卷軸，auto是有超出才顯示卷軸 

可以指定橫(x)和直(y)要執行的指令

---

Float(浮動)

Clear

Clearfix(自創的Class)

---

Inline-block

這個是CSS DISPLAY裡面的功能	

如果只有block就會如下圖顯示 :

---

Psedo-class(加:)

---

Pseudo-element(加::)

---

Opacity(透明度)

後面的都是利用前面教過的東西再組合而成

---

Navigation bar

最普通的版本
Navbar

把點和邊消除

Vertial Navbar

比較美觀的寫法

Horizontal Navbar

比較美觀的寫法
跟前面Vertial 的寫法差不多，就不贅述了

---

Dropdowns

這個比較複雜一點

功能表大概都是用這個技巧做的

---

Image Gallery

利用超連結<a> 加上img src=””之後再用style來修飾(float,border,margin….)

Image Sprites(小圖片，小動畫)

---

Attr Selector

_blank代表按下去會開新的視窗
_top  代表按下去會直接進網頁

[中夸號表示屬性]，可以設定屬性 = “…”時條件成立

---

Form

利用input和裡面的padding和border，float…製作

---

Website Layout

這裡就是考驗排版能力了

---

CSS Advanced

---

Rounded Corners

---

Transitions

---

Problem:

alt的意思 Q:ALT是圖片不存在時會顯示的字

:after的意思(???)