模組基礎與常用 CSS.pdf

Transcript

1. 模組基礎與常用 CSS
2. 1. HTML 模組 在 Yahoo! 每⼀一頁都是由許多的模組所構成
4. <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> 模組的結構
5. <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> 模組的結構
6. <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> 模組的結構 ⼀一個 ID 代表⼀一個模組 不能重複
7. <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> <div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div> </div> 模組的結構 ⼀一個 ID 代表⼀一個模組 不能重複 .hd, .bd, .ft 分別代表模組的 header、body、footer
8. ＃yhtw_masthead ＃ykpmt ＃ykpsb ＃ykpimt ＃ykpimqa ＃ykpimr ＃ykpadv ＃ykpug ＃ykpiht ＃ykpiht
9. ＃ykpsb •ykp 為知識+ 的 prefix •sb 為 search box 的縮寫 •檔案：inc/search_box.php
10. <div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div class=”extra”> ... </div> </div> </div> form .extra [HTML] <style> #ykpsb { margin-bottom:10px; } #ykpsb form { float:left; } #ykpsb .extra { float:right; } </style> [CSS] 因每個模組有 id，所以 CSS 可以寫得很 namespace 好處就是很安全，不同模組不會互相干擾
11. 練習 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;
12. 2. CSS 浮動 float 是排版的常用技巧
13. 過去：常用 <table> 來做到下面的版型： 靠左文字 靠右文字 <table border=”1”> <tr> <td align=”left”>靠左文字</td> <td align=”right”>靠右文字</td> </tr> </table>
14. 現在：使用 CSS 的 float 屬性來做到 <div id=”masthead” style=”border:solid 1px #000”> <span style=”float:left”> 靠左文字 </span> <span style=”float:right”> 靠右文字 </span> </div> 靠左文字 靠右文字
15. 但 float 之後的區塊是不會佔空間的 實際情況會是： 靠左文字 靠右文字 border 不會被文字的高度給撐開！
16. 對 IE 的解法： 對上⼀一層設 zoom:1 <div id=”masthead” style=”zoom:1;border:solid 1px #000”> <span style=”float:left”> 靠左文字 </span> <span style=”float:right”> 靠右文字 </span> </div>
17. 對其他瀏覽器的解法： <div id=”masthead” style=”zoom:1;border:solid 1px #000”> <span style=”float:left”> 靠左文字 </span> <span style=”float:right”> 靠右文字 </span> </div> <style> /* 作用是增加了⼀一個有 clear:both 屬性的區塊 */ #masthead:after { content:’’; display:block; clear:both; } </style>
18. 練習 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; }
20. 3. CSS 背景圖 適當地將 <img> 改用 CSS background 可以讓 User 讀取更順暢
21. 在 Yahoo! 所有裝飾性的圖都是 CSS 背景圖
22. 在 Yahoo! 所有裝飾性的圖都是 CSS 背景圖
23. 在網路很慢時 <img> 會把畫面卡住 background-image 則無此問題
24. 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; 或
25. 練習 3：CSS 背景（3 Mins） http://josephj.com/training/ncu/background.html 1. 設定背景圖為 http://josephj.com/training/ncu/bg_nav.png
26. 4. CSS 相對與絕對位置 不管是做圓角、位置微調都會用到
28. • position
29. • position • position:static; 預設
30. • position • position:static; 預設 • position:absolute; 絕對定位
31. • position • position:static; 預設 • position:absolute; 絕對定位 • position:relative; 相對定位
32. • position • position:static; 預設 • position:absolute; 絕對定位 • position:relative; 相對定位 • position:fixed;
33. • position • position:static; 預設 • position:absolute; 絕對定位 • position:relative; 相對定位 • position:fixed; • top, right, bottom, left 的配合
34. • position • position:static; 預設 • position:absolute; 絕對定位 • position:relative; 相對定位 • position:fixed; • top, right, bottom, left 的配合 • 在目前的位置往下移 5px position:relative; top:5px;
35. • position • position:static; 預設 • position:absolute; 絕對定位 • position:relative; 相對定位 • position:fixed; • top, right, bottom, left 的配合 • 在目前的位置往下移 5px position:relative; top:5px; • 整份文件中的右下角： position:absolute; right:0; bottom:0;
36. • 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不支援）：
37. <div/> <div/> <div/> <div/> 什麼都沒設時（position:static;）
38. <div/> <div/> <div/> <div style=”position:absolute; bottom:0;right:0;”> 當對某個區塊設了 position:absolute; 時 就脫離原有區塊的範圍、不佔空間
39. <div style=”position:relative;” /> <div/> <div/> <div style=”position:absolute; bottom:0;right:0;”> 對母區塊設定 position:relative; 則會限制住 position:absolute; 的子區塊
40. 練習 4：CSS 相對與絕對位置 http://josephj.com/training/ncu/position.html 1.將 li 設定為 position:relative; 2.將 img 設定為 position:absolute; 並 利用 top, right 做微調
41. 5. CSS Hack 基本 針對不同瀏覽器做樣式處理
42. 解決 IE 6,7 與其他瀏覽器 在樣式上的差異 • “bakground:gray \9”; • ⼀一般瀏覽器 • background:blue; • IE 6 與 7 都會套用 * 開頭的 CSS Rule • *background:red; • IE 6 會套用 _ 開頭的 CSS Rule IE 7 則不理會 • _background:green;
43. IE 6, IE7, Firefox 會有不同的底色 #article .bd { background:blue; *background:green; _background:red; } FF, IE 6, IE 7, Safari... IE 6, IE 7 IE 6
44. 練習 5：CSS Hack 基本 http://josephj.com/training/ncu/css-hack.html 1.讓 #article .bd 在 FF 的底色為 pink, IE7 為 green, IE6 為 red
45. 6. CSS 圓角 最不會干擾到內容的作法
46. CSS Sprites：將多張背景合成⼀一張 http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
47. CSS Sprites：將多張背景合成⼀一張 http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
48. 72px 18px 18px CSS Sprites：將多張背景合成⼀一張 http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
49. 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
51. •待製品：⼀一個普通的模組 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