Head First CSS Layout

Something about CSS Layout.

Transcript

1. Jace Ju 2012 Head First CSS Layout Something you should know Zen of Friends
2. ༈ਂ CSS ʲو෗k photo: www.trickmycredit.com
3. 
   ცࠅ̙ၪᚐ
   ੶ሜႧจʷ
   ޶ৎԸఱ݊ଗ yes
4. 
   ਖ਼ࣩϞࣛ೻Ꮐɢ
   
   &%.
   א೵ಂݺਗ No
5. ணࠇࢪٙʈՈᇌ photo: www.totsandtiddlerstoys.com
6. 1IPUP4IPQ 'JSFXPSLT %SFBNXFBWFS 'MBTI *MMVTUSBUPS வʔ݊͂ᄿѓ photo: www.artofadambetts.com
7. 1IPUP4IPQ 'JSFXPSLT %SFBNXFBWFS ੬ԈٙЪج psd: www.free-psd.com
8. Ӕ֛Ыࠅٙ͜Ҧஔ photo: englishclass.jp
9. ᓭᚎኜ݊ࡈɽਪᕚ
10. 
    һλٙ͜
    $44
    4FMFDUPS
    ෥ԉe௕ᅂe˖οतࣖ
    ௅΅ᅺ๟֠͊ҁΌ̙͜ CSS3 Info: http://www.css3.info/ CSS3 ?
11. 
    ່֛λٙᅵό
    
    (SJE
    4ZTUFN
    ༆Ӕ༨ᓭᚎኜਪᕚ
    +BWB4DSJQU
    )FMQFS
    සԶൖᙂяତٙ
    DMBTT
    ҷوܘ௦๨ CSS Framework ?
12. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
    ୅ৰᓭᚎኜཫணᅵό
    һІٙ͟዁છᅵό
    ࠅІࠈһεٙᅵό YUI CSS Reset: http://yuilibrary.com/yui/docs/cssreset/ CSS Reset ?
13. 
    һՈഐ࿴ʷٙႧج
    ౤ԶᜊᅰאՌό
    ცࠅᇜᙇ SASS: http://sass-lang.com/ LESS: http://lesscss.org/ Meta Language ?
14. ࠫࠦഐ࿴΋Б photo: www.cepolina.com
15. 
    4JUF
    .BQ
    ݴ೻ਗᇞeኬᚎΐ
    
    ˂ήʫ࢙eਜ෯
    ࠫࠦࠬࣸ
    ο᜗ɽʃeЍӻ
    ীሞഐ࿴
16. 
    Ӕ֛˴ࠅਜ෯ٙ
    JE
    ʿ
    DMBTT
    )5.-
    ʩ९൳ˇ൳λ
    Ҧஔ୚ື
    Ӕ֛ HTML ഐ࿴
17. 
    ɓߧٙၣ१ࠬࣸ
    τΌο᜗
    ਜ෯Зໄʿˉʂ
    ልᕏٙߠ౻
    ʫ࢙ೌجַФٙਜ෯ ணࠇوࠦ
18. Grid System <div class="container_12"> <div class="gird_3">...</div> <div class="gird_6">...</div> <div class="gird_3">...</div> </div> 960 Grid System: http://960.gs/
19. 
    ᅁ׌ٙوࠦৣໄ
    ପ͛༨ᓭᚎኜٙ
    )5.-
    ʿ
    $44
    ʔቇΥʩ९༰ልᕏٙوࠦ Layout Generator CSS layout Generator: http://csscreator.com/version2/pagelayout.php
20. ܄˒ഗٙ೥ࠦ ஷ੬࿁
    $44
    ˢ༰ʔᆞ઄ photo: www.trickmycredit.com
21. 
    Ӕ֛
    )5.-
    ഐ࿴
    ʱؓᅵو Ңࡁࠅਂٙԫ ༧ۃࠦɓᅵ
22. ʱؓᅵو psd: www.free-psd.com
23. Ӕ֛Ⴇจഐ࿴ਜ෯ᇍఖ
24. Ҭ̈ո֛ਜ෯
25. Ҭַ̈Фਜ෯
26. ˉʂ / Ѝӻ
27. ʲྡ photo: www.zoom-comics.com
28. ༈ܣჿʲk
    1/(
    
    +1&(
    
    (*'
    ࠠᛌྡᄴ
    4QSJUFT
    
    ٜۧe˥̻ߠ౻
    
    ఊॱٙЍ෯
    ᗙ࣪ ྡʲ੻൳ˇe൳ʃe൳λ
29. રوɧᄏ܄ Box Model Float Position photo: www.onlylink.net
30. Box Model Box Model: http://www.jaceju.net/blog/archives/17/
    NBSHJO
    CPSEFS
    QBEEJOH
    
    DPOUFOU
    
    ɪe̛eɨe̸
    XJEUI
    ̥০࿁
    DPOUFOU
31. Position
    BCTPMVUF
    ί
    BS
    ˨ʩ९ʕٙഒ࿁֛З
    SFMBUJWF
    ࡡЗໄٙ޴࿁֛З
    
    TUBUJD
    ཫண࠽dᜫરوݴ೻Ӕ֛֛З
    GJYFE
    ո֛׵
    WJFXQPSU
    ֛ٙЗ
    GJYFE
    ί
    *&
    ɪӚЪ͜ Position: http://www.jaceju.net/blog/archives/15/
32. Float Float: http://www.jaceju.net/blog/archives/18/
    ͦۃ͜Ըτર
    DPMVNO
    ٙ੬Ԉ˙ό
    ɨɓࡈʩ९͜
    DMFBS
    CPUI
    ˸ഐҼओਗ
    ͜
    PWFSGMPX
    IJEEFO
    ᜫ˨ʩ९̈ତ
    
    ءจ
    #PY
    .PEFM
    ౛౥
    'MPBU
    ఱ౛౥
    $44
    -BZPVU
    ݔԬᓭᚎኜί
    'MPBU
    ዚՓɪึܘग़փٙତ൥ ఱ݊ίႭ
    *&
33. ๟௪ʈЪ photo: minimediaguy.org
34. LiveReload
    ᕐፃ࿇
    8FC
    4FSWFS
    .BD
    
    3VCZ LiveReload: http://livereload.com/
39. ̒ீ׼˴ྡ
    ̙͜Ը࿁ᄁਜ෯
    ˢ࿁֠͊રوٙਜ෯
    ʔ̙ঐ
    
    ๟ᆽ <div id="tracing-paper"></div> #tracing-paper position: absolute top: 0 left: 50% width: 540px margin: 0 auto margin-left: -270px height: 100% z-index: 9999 background: url(img/_tracing-paper.png) no-repeat center 0
40. Initializr Initializr: http://www.initializr.com/
    ପ͛༨ᓭᚎኜ
    )5.-
    ᅵو
    ཫ༱ͦۃ੬͜Ҧஔ
    ࿁อ˓ԸႭ˄੶ɽə ɓ߆ఱǚǚ
41. Compass
    ౤Զ஢ε੶ɽٙ
    NJYJO
    ཫ༱ͦۃ੬͜Ҧஔ
    ͜əఱΫʔ̘ə
    ცࠅτༀ
    3VCZ $ compass create <project> --syntax sass \ --sass-dir "sass" \ --css-dir "css" \ --javascripts-dir "js" \ --images-dir "img" Іࠈਖ਼ࣩͦ፽ Compass: http://compass-style.org
42. ྼ኷ː੻ photo: virtualofficeangels.com.au
43. װක CSS
    л͜
    4"44
    ٙ
    !JNQPSU
    ࠫࠦ
    
    ਜ෯ʱйϞІʉٙᅵόڌ
    л͜ᜊᅰ၍ଣᕙЍၾˉʂ
    ცࠅኪ୦
    4"44
44. ഛ͜ʩ९
    ਗ਼ᅵό̋׵ʊᆽ֛ٙʩ९ɪ
    ኋ̙ঐ͜
    CFGPSF
    
    BGUFS
    ႧจᎴ΋
    ೌፗٙ
    EJW
    
    TQBO
    JOMJOF
    TUZMF
45. ʔࠅ৛Ӌҁߕ
    ΢࢕ᓭᚎኜίᅵόɪεˇϞࢨମ
    Դ͜٫Չྼʔί˷ҁʔҁߕ
    Ҫːܠڀίਗᇞၾ̌ঐɪ
    Ꮃˣ˲፺ɦഗ੻εٙ܄˒ʔቇ͜
46. IE ܣჿ፬k
    ୋɓӉjՇࡈο׳૝
    ୋɚӉj͜ݴඎʱؓʈՈӔ֛
    ୋɧӉjঐ޶ఱλd෥ԉʔࠠࠅ
    ୋ̬Ӊj
    $POEJUJPOBM
    $PNNFOUT
    ୋʞӉj࿁̴㌷ᛪ༑
47. Live Demo
48. q & a
49. thank you