20141101簡報(HTML/CSS) day 03

Transcript

1. 
   44 <div class="footer">Sammy</div> $ 傓䶺┮䷐崎峩⻇甒 5COO[.KP 
2. 
   44 <div class="footer">Sammy</div> $ ↫㣆嶓粕 ō 俵%55楯⽅ㇰ肞⢏⻇∽磐⹙ ō 憌䎛⃡⋬⻩礱䥥┮䷐テ粕ㄌ㊦櫩缙㧤&GDWI㢚ㇰ ō ⃮䠉副㐀⅀⛐⇆⌻⃡⋬副副䥥傓䶺 ō ┮䷐テ粕ㄌ嵓㧤䥥テ⑘↬倚
3. 
   44 <div class="footer">Sammy</div> $ 俵%55楯⽅ㇰ肞⢏⻇∽磐⹙ 範例檔：http://bit.ly/11Ecova
4. 
   44 <div class="footer">Sammy</div> $ 俵%55楯⽅ㇰ肞⢏⻇∽磐⹙ 範例檔：http://bit.ly/11Ecova
5. 
   44 <div class="footer">Sammy</div> $ 憌䎛⃡⋬⻩礱䥥┮䷐テ粕ㄌ
 ㊦櫩缙㧤&GDWI㢚㾶
6. 
   44 <div class="footer">Sammy</div> $ 憌䎛⃡⋬⻩礱䥥┮䷐テ粕ㄌ
 ㊦櫩缙㧤&GDWI㢚㾶 ⑗⻇⅀⃮乸&GDWI⡇
7. 
   44 <div class="footer">Sammy</div> $
8. 
   44 <div class="footer">Sammy</div> $
9. 
   44 <div class="footer">Sammy</div> $ 年㓲⋲䧬䧬㋯熝䠉
10. 
    44 <div class="footer">Sammy</div> $ ㇛䶬⋬↛䥥桬䥝䞑⭤ 圖片來源：http://imagebox.com/?p=2166
11. 
    44 <div class="footer">Sammy</div> $
12. 
    44 <div class="footer">Sammy</div> $
13. 
    44 <div class="footer">Sammy</div> $ 缙㋯熝肞㞨❃獑
14. 
    44 <div class="footer">Sammy</div> $ 哋ヒ䧬䥥哳㧮⼒嬭Ⅷ
15. 
    44 <div class="footer">Sammy</div> $ http://bit.ly/11EeYBc
16. 
    44 <div class="footer">Sammy</div> $ http://colorsublime.com/
17. 
    44 <div class="footer">Sammy</div> $ 䰛亥瞗宾
18. 
    44 <div class="footer">Sammy</div> $ 5WDNKOG6GZV6JGOG瞗宾 ō ┮㚱獌ビ瞗宾2CEMCIG%QPVTQN ō 㔴桬▀叞櫦䧏 ō 9KPFQYU獌EVTN UJKHV R ō /CE獌EOF UJKHV R ō 戙⑆KPUVCNN㕟┑2CEMCIG%QPVTQNKPUVCNN2CEMCIG硻⃬'PVGT⫘嬭 ō 㕟┑≁缙䥥6JGOG㓷EQNQTUEJGOG硻⃬'PVGT瞗宾
19. 
    44 <div class="footer">Sammy</div> $ 5WDNKOG6GZV6JGOG崎⹻ ō 2TGHGTGPEGU EQNQTUEJGOG肞㞨≁缙䥥EQNQTUEJGOG %QNQT5EJGOG崎⹻ 6JGOG崎⹻ ō 㔴桬2TGHGTGPEGU 5GVVKPIUł7UGT ō ▁⑆㓷璶㠚≁缙䥥VJGOG
20. 
    44 <div class="footer">Sammy</div> $ 5WDNKOG6GZV⚤勤傓䶺 • 好用的外掛及設定：http://bit.ly/1BP4r6h • 快捷鍵：http://bit.ly/1BP4SgM • Sublime Text 全程指南(簡)：http://bit.ly/1BP5ovj • Sublime Text 手冊(中文)：http://docs.sublimetext.tw/
21. 
    44 <div class="footer">Sammy</div> $ %55❞⛮⚀┨
22. 
    44 <div class="footer">Sammy</div> $ %55❞⛮⚀┨ ō 㧪㏰劊䥥❞⛮ ō JGCFGTOGFKCDCPPGT ō ⛐⚤勤JVVRDKVN[$1;9Z ō ⛐⇆䠉㓷㤐A≧⌻%55⽍㌈幫甙㓷㤐⸱榧⛩❞⛮ ō OGFKCKOIOGFKCADQF[JGCFGTAVKVNG ō ⛐⚤勤11%555/#%55$'/粹%55㪗㲬
23. 
    44 <div class="footer">Sammy</div> $ 糺⃡⛥⺗䋰缧⥉䥥櫱崎⌝
24. 
    44 <div class="footer">Sammy</div> $ http://necolas.github.io/normalize.css/
25. 
    44 <div class="footer">Sammy</div> $ 糺⃡⛥⺗䋰缧⥉䥥櫱崎⌝ ō 甩⇄4GUGVEUU ō ⹻劊㔡㧪䥥␤倁䥥櫱崎⌝ ◦✌*6/.
26. 
    44 <div class="footer">Sammy</div> $ 糺⃡⛥⺗䋰缧⥉䥥櫱崎⌝ ō 㠐㛕䋰缧⥉ ō )QQING%JTQOG NCVGUV  ō /Q\KNNC(KTGHQZ NCVGUV  ō /Q\KNNC(KTGHQZ ō 1RGTC NCVGUV  ō #RRNG5CHCTK  ō +PVGTPGV'ZRNQTGT
27. 
    44 <div class="footer">Sammy</div> $ ▁聋≁⻌%55䥥聋ㆇ
28. 
    44 <div class="footer">Sammy</div> $ http://sass-lang.com
29. 
    44 <div class="footer">Sammy</div> $ 4ZOUBDUJDBMMZ
    "XFTPNF
    4UZMF4IFFUT
30. 
    44 <div class="footer">Sammy</div> $ %55櫱夶䛧⥉ %552TGRTQEGUUQT
31. 
    44 <div class="footer">Sammy</div> $ %55櫱夶䛧⥉ %552TGRTQEGUUQT
32. 
    44 <div class="footer">Sammy</div> $ %55櫱夶䛧⥉ %552TGRTQEGUUQT
33. 
    44 <div class="footer">Sammy</div> $ %55櫱夶䛧⥉ %552TGRTQEGUUQT
34. 
    44 <div class="footer">Sammy</div> $ 4"44
    
    4$44
    $PEF
35. 
    44 <div class="footer">Sammy</div> $ 4"44
    
    4$44
    $PEF
36. 
    44 <div class="footer">Sammy</div> $ 4"44
    
    4$44
    $PEF ᅣᅣ ฤᩄ
37. 
    44 <div class="footer">Sammy</div> $ 4"44
    
    4$44
    $PEF ᅣᅣ ฤᩄ
38. 
    44 <div class="footer">Sammy</div> $ 4"44
    
    4$44
    $PEF $44
    $PEF ᅣᅣ ฤᩄ
39. 
    44 <div class="footer">Sammy</div> $ *OTUBMM
    4"44
40. 
    44 <div class="footer">Sammy</div> $
41. 
    44 <div class="footer">Sammy</div> $ 4"44 䠉儏㙳≧⇄㧠Ⰸ㗍纝 $main_color: #d3a131 $nav_height: 26px ! .menu background: $main_color color: darken($main_color, 12%) ! .menu ul height: $nav_height padding: $nav_height / 2
42. 
    44 <div class="footer">Sammy</div> $ 4$44 惀%55嵿㾶⃡㴄 $main_color: #d3a131; $nav_height: 26px; ! .menu { background: $main_color; color: darken($main_color, 12%); } .menu { ul { height: $nav_height; padding: $nav_height / 2; } }
43. 
    44 <div class="footer">Sammy</div> $ ⧁䎛㓲⻌䥥㤐5%55 㔡⇆㓲揞䠉5%55䰛亥Ⅷ
44. 
    44 <div class="footer">Sammy</div> $ ッ䖡屰┨0GUVGF4WNGU
45. 
    44 <div class="footer">Sammy</div> $ ッ䖡屰┨0GUVGF4WNGU
46. 
    44 <div class="footer">Sammy</div> $ ⚤勤䔗肞㞨万TGHGTGPEGRCTGPVUGNGEVQT
47. 
    44 <div class="footer">Sammy</div> $ ⚤勤䔗肞㞨万TGHGTGPEGRCTGPVUGNGEVQT
48. 
    44 <div class="footer">Sammy</div> $ ⚤勤䔗肞㞨万TGHGTGPEGRCTGPVUGNGEVQT
49. 
    44 <div class="footer">Sammy</div> $ ⚤勤䔗肞㞨万TGHGTGPEGRCTGPVUGNGEVQT
50. 
    44 <div class="footer">Sammy</div> $ ⚤勤䔗肞㞨万TGHGTGPEGRCTGPVUGNGEVQT
51. 
    44 <div class="footer">Sammy</div> $ ⚤勤䔗肞㞨万TGHGTGPEGRCTGPVUGNGEVQT
52. 
    44 <div class="footer">Sammy</div> $ ⚤勤䔗肞㞨万TGHGTGPEGRCTGPVUGNGEVQT
53. 
    44 <div class="footer">Sammy</div> $ 幫磕聴乸XCTKCDNGQRGTCVKQPU
54. 
    44 <div class="footer">Sammy</div> $ 幫磕聴乸XCTKCDNGQRGTCVKQPU
55. 
    44 <div class="footer">Sammy</div> $ /KZKPU
56. 
    44 <div class="footer">Sammy</div> $ 兝㕠GZVGPF
57. 
    44 <div class="footer">Sammy</div> $ 欰啓
58. 
    44 <div class="footer">Sammy</div> $ http://sassme.arc90.com/
59. 
    44 <div class="footer">Sammy</div> $ http://jackiebalzer.com/color
60. 
    44 <div class="footer">Sammy</div> $
61. 
    44 <div class="footer">Sammy</div> $
62. 
    44 <div class="footer">Sammy</div> $ ⧴缩
63. 
    44 <div class="footer">Sammy</div> $ ⧴缩
64. 
    44 <div class="footer">Sammy</div> $ ⧴缩
65. 
    44 <div class="footer">Sammy</div> $ ⧴缩
66. 
    44 <div class="footer">Sammy</div> $ 䈙⽅
67. 
    44 <div class="footer">Sammy</div> $ 䈙⽅
68. 
    44 <div class="footer">Sammy</div> $ 䈙⽅
69. 
    44 <div class="footer">Sammy</div> $ 䈙⽅
70. 
    44 <div class="footer">Sammy</div> $ %QORCUU▀叞 ˖ 䲿⣘㢵珏涸
    .JOJO
    
    IUUQCJUMZYW1:CQ
    ˖ 㕮晚
    4QSJUF
71. 
    44 <div class="footer">Sammy</div> $ http://compass-style.org
72. 
    44 <div class="footer">Sammy</div> $ +%10U
73. 
    44 <div class="footer">Sammy</div> $
75. 
    44 <div class="footer">Sammy</div> $ http://fortawesome.github.io/Font-Awesome/
76. 
    44 <div class="footer">Sammy</div> $ 5IF
    DPNQMFUF
    TFU
    PG
    
    JDPOT
    JO
    'POU
    "XFTPNF
    
77. 
    44 <div class="footer">Sammy</div> $ 㖈
    IFBE
    Ⰹ
    ⸈Ⰵ
    ⢪欽
    $%/ ⢪欽
78. 
    44 <div class="footer">Sammy</div> $ %3: Don't Repeat Yourself
79. 
    44 <div class="footer">Sammy</div> $ HTQPVGPFHTCOGYQTM
80. 
    44 <div class="footer">Sammy</div> $ 資料來源：http://wp.me/p4KNUI-fH
81. 
    44 <div class="footer">Sammy</div> $ http://getbootstrap.com
82. 
    44 <div class="footer">Sammy</div> $ http://aliceui.org
83. 
    44 <div class="footer">Sammy</div> $ 嵇圸䚊䚊䧬
84. 
    44 <div class="footer">Sammy</div> $ %55䈙幫▶䡌 %556TCPUKVKQPU#PKOCVKQP
85. 
    44 <div class="footer">Sammy</div> $
86. 
    44 <div class="footer">Sammy</div> $ ┮傕XGPFQTRTGHKZGU -webkit-transform:rotate(-3deg); /* Chrome Safari */ -moz-transform:rotate(-3deg); /* Firefox */ -ms-transform:rotate(-3deg); /* IE */ -o-transform:rotate(-3deg); /* Opera */ transform:rotate(-3deg);
87. 
    44 <div class="footer">Sammy</div> $ 䰛亥 JVVRDKVN[W*HK+3
88. 
    44 <div class="footer">Sammy</div> $ http://www.justinaguilar.com/animations
89. 
    44 <div class="footer">Sammy</div> $ http://daneden.github.io/animate.css/
90. 
    44 <div class="footer">Sammy</div> $ 䔩㨍亂䛧俜糺
91. 
    44 <div class="footer">Sammy</div> $
92. 
    44 <div class="footer">Sammy</div> $ 圖片來源：http://bit.ly/14Vn0XM
93. 
    44 <div class="footer">Sammy</div> $
94. 
    44 <div class="footer">Sammy</div> $ 8JOEPXT
    
    㸞酤 到 http://msysgit.github.io/ 下載安裝 msysgit .BD
    
    㸞酤 到 http://sourceforge.net/projects/git-osx-installer/ 下載安裝 $ sudo port install git-core +svn +doc +bash_completion +gitweb PS ♶ꐫ涸
    8JOEPXO
    
    .BD
    涸
    (6*
    盘椚䊨Ⱘ SourceTree http://www.sourcetreeapp.com/ 7JTVBM
    4UVEJP
    
    㢫䱦 Git Source Control Provider http://bit.ly/1vkdA2W
95. 
    44 <div class="footer">Sammy</div> $
96. 
    44 <div class="footer">Sammy</div> $ )KV*WD ō 磷㧪⛮䥥)KV䔩㨍㚈┗俜糺ℜ祚 ō 崒⯻1RGP5QWTEG揞峸亂⨉聅 ō ⛐⇆2WNN4GSWGUV ō 磷㧪┊䥥テ∽瞴㹘
97. 
    44 <div class="footer">Sammy</div> $ 倱嶷
98. 
    44 <div class="footer">Sammy</div> $ 倱嶷 磢桴職䥥㉩㋌
99. 
    44 <div class="footer">Sammy</div> $
100. 
     44 <div class="footer">Sammy</div> $
101. 㓲缙甑╼
102. 㓲缙甑╼ 哋ヒ⹙
103. 
     44 <div class="footer">Sammy</div> $ ⚤勤傓䶺傻⃫⹙劳 ˖ $PEF
     4DIPPM
     
     IUUQTXXXDPEFTDIPPMDPN
     ˖ $PEF
     $BEFNZ
     
     IUUQXXXDPEFDBEFNZDPN
     ˖ ⵹畮䊨玑Ꟛ涮㻜⹡來㷸
     
     IUUQGFDMBTTDPN
104. 
     44 <div class="footer">Sammy</div> $ ⚤勤傓䶺権㐀 ˖ 鏤鎙䌌䗳⪔须彂籏⻽
     
     
     IUUQSFTPVSDFTPHEFTJHOUX
     ˖ 鏤鎙䌌涸5XJUUFS
     
     IUUQTESJCCCMFDPN
105. 
     44 <div class="footer">Sammy</div> $ ⚤勤傓䶺⑗↷ ˖ ぐ䒭
     8FC
     ⵹畮Ꟛ涮䊨Ⱘ侮椚
     
     IUUQCJUMZ'"%D
     ˖ ⵹畮须彂䧀➃⺫
     
     IUUQCJUMZ'"'97
106. 
     44 <div class="footer">Sammy</div> $ ⚤勤傓䶺䰟⧹ ˖ 'SPOU&OE
     %FWFMPQFST
     5BJXBO
     ˖ IUUQTXXXGBDFCPPLDPNHSPVQTGFUX
     ˖ )5.-莅$44㖈〵抓
     ˖ IUUQTXXXGBDFCPPLDPNHSPVQTIUNMWF
     ˖ 3(#"
     ˖ IUUQTXXXGBDFCPPLDPNHSPVQTPQFOSHCB
     ˖ $IBOHFF
     -FBSOJOH
     1BUI
     ˖ IUUQTXXXGBDFCPPLDPNHSPVQTDIBOHFFMFBSOJOHQBUI
     ˖ +BWB4DSJQUUX
     ˖ IUUQTXXXGBDFCPPLDPNHSPVQTKBWBTDSJQUUX
107. ⯻⚜⚤哨ⓧ↌䀜▶
108. 
     44 <div class="footer">Sammy</div> $ (TQPV'PF&GXGNQRGTU6CKYCP http://www.f2e.tw/
109. 
     44 <div class="footer">Sammy</div> $
110. 
     44 <div class="footer">Sammy</div> $ 3#
111. 
     44 <div class="footer">Sammy</div> $ 5COO[.KP 㢦⼦⛑甚䥥涹榥↛ ⛑䍄䧢⠧礱㧤羝峫テ粕ㄌ4CKNU9GD&GXGNQRGT #95 #OC\QP9GD5GTXKEG 7UGT)TQWRKP6CKYCP⑒⛭╖抇↛ ! ! 5XJUUFS!4BNNZ-JO5X
     &NBJM
     TBNNZMJOUX!HNBJMDPN
     "CPVU
     .FIUUQBCPVUNFTBNNZMJO
     #-0(IUUQCMPHTBNNZMJOUX
     (JU)VCIUUQTHJUIVCDPN4BNNZ-JO
112. 
     44 <div class="footer">Sammy</div> $ 5COO[.KP 㢦⼦⛑甚䥥涹榥↛ ⛑䍄䧢⠧礱㧤羝峫テ粕ㄌ4CKNU9GD&GXGNQRGT #95 #OC\QP9GD5GTXKEG 7UGT)TQWRKP6CKYCP⑒⛭╖抇↛ ! ! 5XJUUFS!4BNNZ-JO5X
     &NBJM
     TBNNZMJOUX!HNBJMDPN
     "CPVU
     .FIUUQBCPVUNFTBNNZMJO
     #-0(IUUQCMPHTBNNZMJOUX
     (JU)VCIUUQTHJUIVCDPN4BNNZ-JO