week4.md

Please download 網頁設計第四次上課.docx to see the content 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
利用超連結<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的意思