20141101簡報(HTML/CSS) day 03

Slide 1

Slide 1 text

Sammy

$ 傓䶺┮䷐崎峩⻇甒 5COO[.KP

Slide 2

Slide 2 text

Sammy

$ ↫㣆嶓粕 ō 俵%55楯⽅ㇰ肞⢏⻇∽磐⹙ ō 憌䎛⃡⋬⻩礱䥥┮䷐テ粕ㄌ㊦櫩缙㧤&GDWI㢚ㇰ ō ⃮䠉副㐀⅀⛐⇆⌻⃡⋬副副䥥傓䶺 ō ┮䷐テ粕ㄌ嵓㧤䥥テ⑘↬倚

Slide 3

Slide 3 text

Sammy

$ 俵%55楯⽅ㇰ肞⢏⻇∽磐⹙ 範例檔：http://bit.ly/11Ecova

Slide 4

Slide 4 text

Sammy

$ 俵%55楯⽅ㇰ肞⢏⻇∽磐⹙ 範例檔：http://bit.ly/11Ecova

Slide 5

Slide 5 text

Sammy

$ 憌䎛⃡⋬⻩礱䥥┮䷐テ粕ㄌ  ㊦櫩缙㧤&GDWI㢚㾶

Slide 6

Slide 6 text

Sammy

$ 憌䎛⃡⋬⻩礱䥥┮䷐テ粕ㄌ  ㊦櫩缙㧤&GDWI㢚㾶 ⑗⻇⅀⃮乸&GDWI⡇

Slide 7

Slide 7 text

Sammy

Slide 8

Slide 8 text

Sammy

Slide 9

Slide 9 text

Sammy

$ 年㓲⋲䧬䧬㋯熝䠉

Slide 10

Slide 10 text

Sammy

$ ㇛䶬⋬↛䥥桬䥝䞑⭤ 圖片來源：http://imagebox.com/?p=2166

Slide 11

Slide 11 text

Sammy

Slide 12

Slide 12 text

Sammy

Slide 13

Slide 13 text

Sammy

$ 缙㋯熝肞㞨❃獑

Slide 14

Slide 14 text

Sammy

$ 哋ヒ䧬䥥哳㧮⼒嬭Ⅷ

Slide 15

Slide 15 text

Sammy

$ http://bit.ly/11EeYBc

Slide 16

Slide 16 text

Sammy

$ http://colorsublime.com/

Slide 17

Slide 17 text

Sammy

$ 䰛亥瞗宾

Slide 18

Slide 18 text

Sammy

$ 5WDNKOG6GZV6JGOG瞗宾 ō ┮㚱獌ビ瞗宾2CEMCIG%QPVTQN ō 㔴桬▀叞櫦䧏 ō 9KPFQYU獌EVTN UJKHV R ō /CE獌EOF UJKHV R ō 戙⑆KPUVCNN㕟┑2CEMCIG%QPVTQNKPUVCNN2CEMCIG硻⃬'PVGT⫘嬭 ō 㕟┑≁缙䥥6JGOG㓷EQNQTUEJGOG硻⃬'PVGT瞗宾

Slide 19

Slide 19 text

Sammy

$ 5WDNKOG6GZV6JGOG崎⹻ ō 2TGHGTGPEGU EQNQTUEJGOG肞㞨≁缙䥥EQNQTUEJGOG %QNQT5EJGOG崎⹻ 6JGOG崎⹻ ō 㔴桬2TGHGTGPEGU 5GVVKPIUł7UGT ō ▁⑆㓷璶㠚≁缙䥥VJGOG

Slide 20

Slide 20 text

Sammy

$ 5WDNKOG6GZV⚤勤傓䶺 • 好用的外掛及設定：http://bit.ly/1BP4r6h • 快捷鍵：http://bit.ly/1BP4SgM • Sublime Text 全程指南(簡)：http://bit.ly/1BP5ovj • Sublime Text 手冊(中文)：http://docs.sublimetext.tw/

Slide 21

Slide 21 text

Sammy

$ %55❞⛮⚀┨

Slide 22

Slide 22 text

Sammy

$ %55❞⛮⚀┨ ō 㧪㏰劊䥥❞⛮ ō JGCFGTOGFKCDCPPGT ō ⛐⚤勤JVVRDKVN[$1;9Z ō ⛐⇆䠉㓷㤐A≧⌻%55⽍㌈幫甙㓷㤐⸱榧⛩❞⛮ ō OGFKCKOIOGFKCADQF[JGCFGTAVKVNG ō ⛐⚤勤11%555/#%55$'/粹%55㪗㲬

Slide 23

Slide 23 text

Sammy

$ 糺⃡⛥⺗䋰缧⥉䥥櫱崎⌝

Slide 24

Slide 24 text

Sammy

$ http://necolas.github.io/normalize.css/

Slide 25

Slide 25 text

Sammy

$ 糺⃡⛥⺗䋰缧⥉䥥櫱崎⌝ ō 甩⇄4GUGVEUU ō ⹻劊㔡㧪䥥␤倁䥥櫱崎⌝ ◦✌*6/.

Slide 26

Slide 26 text

Sammy

$ 糺⃡⛥⺗䋰缧⥉䥥櫱崎⌝ ō 㠐㛕䋰缧⥉ ō )QQING%JTQOG NCVGUV ō /Q\KNNC(KTGHQZ NCVGUV ō /Q\KNNC(KTGHQZ ō 1RGTC NCVGUV ō #RRNG5CHCTK ō +PVGTPGV'ZRNQTGT

Slide 27

Slide 27 text

Sammy

$ ▁聋≁⻌%55䥥聋ㆇ

Slide 28

Slide 28 text

Sammy

$ http://sass-lang.com

Slide 29

Slide 29 text

Sammy

$ 4ZOUBDUJDBMMZ"XFTPNF4UZMF4IFFUT

Slide 30

Slide 30 text

Sammy

$ %55櫱夶䛧⥉ %552TGRTQEGUUQT

Slide 31

Slide 31 text

Sammy

$ %55櫱夶䛧⥉ %552TGRTQEGUUQT

Slide 32

Slide 32 text

Sammy

$ %55櫱夶䛧⥉ %552TGRTQEGUUQT

Slide 33

Slide 33 text

Sammy

$ %55櫱夶䛧⥉ %552TGRTQEGUUQT

Slide 34

Slide 34 text

Sammy

$ 4"444$44 $PEF

Slide 35

Slide 35 text

Sammy

$ 4"444$44 $PEF

Slide 36

Slide 36 text

Sammy

$ 4"444$44 $PEF ᅣᅣ ฤᩄ

Slide 37

Slide 37 text

Sammy

$ 4"444$44 $PEF ᅣᅣ ฤᩄ

Slide 38

Slide 38 text

Sammy

$ 4"444$44 $PEF $44$PEF ᅣᅣ ฤᩄ

Slide 39

Slide 39 text

Sammy

$ *OTUBMM4"44

Slide 40

Slide 40 text

Sammy

Slide 41

Slide 41 text

Sammy

$ 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

Slide 42

Slide 42 text

Sammy

$ 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; } }

Slide 43

Slide 43 text

Sammy

$ ⧁䎛㓲⻌䥥㤐5%55 㔡⇆㓲揞䠉5%55䰛亥Ⅷ

Slide 44

Slide 44 text

Sammy

$ ッ䖡屰┨0GUVGF4WNGU

Slide 45

Slide 45 text

Sammy

$ ッ䖡屰┨0GUVGF4WNGU