Slide 1
Slide 1 text
模組基礎與常用 CSS
Slide 2
Slide 2 text
1. HTML 模組
在 Yahoo! 每⼀一頁都是由許多的模組所構成
Slide 3
Slide 3 text
No content
Slide 8
Slide 8 text
＃yhtw_masthead
＃ykpmt
＃ykpsb
＃ykpimt
＃ykpimqa ＃ykpimr
＃ykpadv
＃ykpug
＃ykpiht
＃ykpiht
Slide 9
Slide 9 text
＃ykpsb
•ykp 為知識+ 的 prefix
•sb 為 search box 的縮寫
•檔案：inc/search_box.php
Slide 10
Slide 10 text
...
...
Slide 11
Slide 11 text
練習 1：HTML 模組 （3 Mins）
http://josephj.com/training/ncu/html-module.html
1. 替此文章模組取個適合的 id
2. 加上 hd, bd, ft 的 class
3. 利用前頁的方法設定 CSS
color:#369;
background:#ffe;
font:bold 16px;
Slide 12
Slide 12 text
2. CSS 浮動
float 是排版的常用技巧
Slide 13
Slide 13 text
過去：常用 來做到下面的版型：
靠左文字 靠右文字
靠左文字
靠右文字
Slide 14
Slide 14 text
現在：使用 CSS 的 float 屬性來做到
靠左文字
靠右文字
靠左文字 靠右文字
Slide 15
Slide 15 text
但 float 之後的區塊是不會佔空間的
實際情況會是：
靠左文字 靠右文字
border 不會被文字的高度給撐開！
Slide 16
Slide 16 text
對 IE 的解法：
對上⼀一層設 zoom:1
靠左文字
靠右文字
Slide 17
Slide 17 text
對其他瀏覽器的解法：
靠左文字
靠右文字
/* 作用是增加了⼀一個有 clear:both 屬性的區塊 */
#masthead:after {
content:’’;
display:block;
clear:both;
}
Slide 18
Slide 18 text
練習 2：CSS 浮動（3 Mins）
http://josephj.com/training/ncu/float.html
1. 標題浮到左邊
2. YUI 圖浮到右邊
3. 替整個模組設 border
4. 用前⼀一頁的方法清除 float
border:solid 5px #ccc;
font:bold 197%;
IE : 在父節點設定 zoom1;
父節點：
父節點:after {
content:’’;
display:block;
clear:both;
}
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
3. CSS 背景圖
適當地將 ![]()
改用 CSS background 可以讓 User 讀取更順暢
Slide 21
Slide 21 text
在 Yahoo! 所有裝飾性的圖都是 CSS 背景圖
Slide 22
Slide 22 text
在 Yahoo! 所有裝飾性的圖都是 CSS 背景圖
Slide 23
Slide 23 text
在網路很慢時
![]()
會把畫面卡住
background-image
則無此問題
Slide 24
Slide 24 text
background:[背景色]
[url(圖檔路徑)]
[x, y 位置]
[重複];
background:#369 url(ico_yui.gif) left top repeat-x;
repeat-y
no-repeat
0 100%
0 -12px
background-color:#369;
background-image:url(ico_yui.gif);
background-position:left top;
background-repeat:repeat-x;
或
Slide 25
Slide 25 text
練習 3：CSS 背景（3 Mins）
http://josephj.com/training/ncu/background.html
1. 設定背景圖為
http://josephj.com/training/ncu/bg_nav.png
Slide 26
Slide 26 text
4. CSS 相對與絕對位置
不管是做圓角、位置微調都會用到
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
• position
Slide 29
Slide 29 text
• position
• position:static; 預設
Slide 30
Slide 30 text
• position
• position:static; 預設
• position:absolute; 絕對定位
Slide 31
Slide 31 text
• position
• position:static; 預設
• position:absolute; 絕對定位
• position:relative; 相對定位
Slide 32
Slide 32 text
• position
• position:static; 預設
• position:absolute; 絕對定位
• position:relative; 相對定位
• position:fixed;
Slide 33
Slide 33 text
• position
• position:static; 預設
• position:absolute; 絕對定位
• position:relative; 相對定位
• position:fixed;
• top, right, bottom, left 的配合
Slide 34
Slide 34 text
• position
• position:static; 預設
• position:absolute; 絕對定位
• position:relative; 相對定位
• position:fixed;
• top, right, bottom, left 的配合
• 在目前的位置往下移 5px
position:relative; top:5px;
Slide 35
Slide 35 text
• position
• position:static; 預設
• position:absolute; 絕對定位
• position:relative; 相對定位
• position:fixed;
• top, right, bottom, left 的配合
• 在目前的位置往下移 5px
position:relative; top:5px;
• 整份文件中的右下角：
position:absolute; right:0;
bottom:0;
Slide 36
Slide 36 text
• position
• position:static; 預設
• position:absolute; 絕對定位
• position:relative; 相對定位
• position:fixed;
• top, right, bottom, left 的配合
• 在目前的位置往下移 5px
position:relative; top:5px;
• 整份文件中的右下角：
position:absolute; right:0;
bottom:0;
• 可視區域的最下方（IE6不支援）：
Slide 37
Slide 37 text
什麼都沒設時（position:static;）
Slide 38
Slide 38 text
當對某個區塊設了 position:absolute; 時
就脫離原有區塊的範圍、不佔空間
Slide 39
Slide 39 text
對母區塊設定 position:relative;
則會限制住 position:absolute; 的子區塊
Slide 40
Slide 40 text
練習 4：CSS 相對與絕對位置
http://josephj.com/training/ncu/position.html
1.將 li 設定為 position:relative;
2.將 img 設定為 position:absolute; 並
利用 top, right 做微調
Slide 41
Slide 41 text
5. CSS Hack 基本
針對不同瀏覽器做樣式處理
Slide 42
Slide 42 text
解決 IE 6,7 與其他瀏覽器
在樣式上的差異
• “bakground:gray \9”;
• ⼀一般瀏覽器
• background:blue;
• IE 6 與 7 都會套用 * 開頭的 CSS Rule
• *background:red;
• IE 6 會套用 _ 開頭的 CSS Rule
IE 7 則不理會
• _background:green;
Slide 43
Slide 43 text
IE 6, IE7, Firefox 會有不同的底色
#article .bd {
background:blue;
*background:green;
_background:red;
}
FF, IE 6, IE 7, Safari...
IE 6, IE 7
IE 6
Slide 44
Slide 44 text
練習 5：CSS Hack 基本
http://josephj.com/training/ncu/css-hack.html
1.讓 #article .bd 在 FF 的底色為 pink,
IE7 為 green, IE6 為 red
Slide 45
Slide 45 text
6. CSS 圓角
最不會干擾到內容的作法
Slide 46
Slide 46 text
CSS Sprites：將多張背景合成⼀一張
http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
Slide 47
Slide 47 text
CSS Sprites：將多張背景合成⼀一張
http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
Slide 48
Slide 48 text
72px
18px
18px
CSS Sprites：將多張背景合成⼀一張
http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
Slide 49
Slide 49 text
72px
18px
background:100% 0;
background:100% -18px;
18px
background:0 -36px;
background:0 -54px;
CSS Sprites：將多張背景合成⼀一張
http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
•待製品：⼀一個普通的模組
http://josephj.com/training/ncu/round-corner.html
•了解原理：替四個角上背景色
http://josephj.com/training/ncu/round-corner-sample.html
•融會貫通：放上圓角圖、定位
http://josephj.com/training/ncu/round-corner-sample-2.html
•完成品：去除背景色
http://josephj.com/training/ncu/round-corner-sample-3.html