week4.md

Please download 網頁設計第四次上課.docx to see the content picture of homework, thanks.

---

---

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

利用超連結 加上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的意思