NCC-JavaScript-Week#6

+BWB4DSJQU 8FFL !〵猰㣐玑䒭鏤鎙灇瑖爢 #Z*SFOF$IBOH 5P%P-JTU♧ 1

矦㜡♴鯺 2 IUUQTHPPHMKCK,%O

‣ $44ⰅꟌ ˋ ‣ 5P%P-JTU Ը #PPUTUSBQ矦➝ Ը 5P%P-JTU)UNM$44 Ը
笪갤鏤鎙♶腋♶濼麥涸(SJE4ZTUFN Ը 㸤䧭笪갤卺圓 "HFOEB 3

$44ⰅꟌ 4

$44 $BTDBEJOH4UZMF4IFFUT 5

$44 $44僽♧珏垺䒭铃鎊欽⢵䲾鶤笪갤涸㢫錚垺䒭 ⢿㥶 6 䱖晝鏤鎙胝兞겝蒀俒㶶겝蒀 ⯋稇㣐㼭 ⯋稇꟦騅
✽⹛佪卓酤귇⯋稇矦㋲⹛殥㶶넓隶⻋

$44 )5.- )5.- $44 http://strandsdesignlab.com/ 7

$44 $44 $44 Brandon Mathis 8

$44 铃岁圓䧭 9 鼇乵㐼㿂䚍 ⧩ 4FMFDUPS 1SPQFSUZ 7BMVF 鼇乵ㆭ❉⯋稇銴㤛欽鸏⦐垺䒭
⢿㥶厥⦐垦겗㶶㕮晚䧴俒畎媯衆邍爚銴ꆚ㼩➊랃垺䒭⨞锅侮 ⢿㥶겝蒀㣐㼭䧴⡙縨颭✮䨾鼇㿂䚍♧⦐⧩ ⢿㥶秋蒀QY䧴縨⚥

$44 10 h1 { color: red } 鼇乵㐼㿂䚍 ⧩

5ZQF4FMFDUPST 鼇《乩剤湱ず垦硹涸䨾剤⯋稇 h1 { color: blue } h2 { color:
red } <h1> 嗨！</h1> <h1> 呦！</h1> <h2> 嘿！</h2> )5.- $44 $44 嗨！呦！嘿！ 11

.a { color: blue } .b { color: red }
<h1 class=“a”> 嗨！</h1> <h1 class=“b”> 呦！</h1> <h2 class=“a”> 嘿！</h2> )5.- $44 $44 嗨！呦！嘿！ $MBTT4FMFDUPST 鼇《乩剤湱ず$MBTT涸䨾剤⯋稇 DMBTTOBNF 12

#a { color: blue } #b { color: red }
<h1 id=“a”> 嗨！</h1> <h1 id=“b”> 呦！</h1> <h2 id=“c”> 嘿！</h2> )5.- $44 $44 嗨！呦！嘿！ *%4FMFDUPST 鼇《乩剤暶㹁*%涸㋲♧⯋稇 JEOBNF 13

䌢鋅$44铃岁 14 $44

$44 겝蒀湱ꡠ铃岁 color background-color border-color Ⰹ俒겝蒀胝兞겝蒀㢫呥겝蒀 3(#蒀焺䧴蒀そ background-opacity
胝兞♶鷴僈䏞 FYGDDDSFEXIJUF 3(#蒀焺䧴蒀そ FYGDDDSFEXIJUF 3(#蒀焺䧴蒀そ FYGDDDSFEXIJUF _⼦꟦ FY 15

$44 俒㶶湱ꡠ铃岁 font-size line-height text-align Ⰹ俒㣐㼭俒㶶遤넞 俒㶶㼩뢶 QY䧴FN FYQYFN
left、center、right QY䧴FN FYQYFN text-decoration 俒㶶酤귇 underline、line-through 16

$44 鼹呥湱ꡠ铃岁 border-color border-style border-width 㢫呥겝蒀㢫呥괐呔㢫呥磧稣 dotted、dashed、solid QY䧴FN
FYQYFN 3(#蒀焺䧴蒀そ FYGDDDSFEXIJUF border-radius 㢫呥磧稣 QY䧴FN䧴 FYQY 17

$44 㽯㼄湱ꡠ铃岁 width height ⯋稇㻫䏞 ⯋稇넞䏞 QY䧴 FYQY QY䧴 FYQY
18

$44 䱖晝湱ꡠ铃岁 padding margin ⯋稇Ⰹ騅 ⯋稇㢫騅 QY䧴 FYQY QY䧴 FYQY
19

$44 20

$44 鼹呥湱ꡠ铃岁 border-color border-style border-width 㢫呥겝蒀㢫呥괐呔㢫呥磧稣 dotted、dashed、solid QY䧴FN
FYQYFN 3(#蒀焺䧴蒀そ FYGDDDSFEXIJUF border-radius 㢫呥磧稣 QY䧴FN䧴 FYQY 21

$44 幢㋲湱ꡠ铃岁 list-style-type list-style-position 幢㋲痘贫垺䒭幢㋲痘贫涸⡙縨 disc、circle、square inside、outside 22

鼩剤䖎㢵鼇乵㐼ㄤ㿂䚍 $44 IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC$443FGFSFODF 䧴僽⿡㉏(PPHMF㣐牟 sӟA  23 IUUQXXXXTDIPPMTDPNDTTSFGDTT@TFMFDUPSTBTQ

24 梖梖溏ゅ

5P%P-JTU)5.-$44 25

5P%P-JTU 䧮⦛銴⨞♧⦐⫹鸏垺涸匌銯剓䖕鼩銴雊➮♳箁㈢ sӟA  26

5P%P-JTU 27 䒊用㼠呪湡ꏗ莅墂呪

#PPUTUSBQ 湡⵹剓剤そ涸笪갤Ꟛ涮呥卺 28

IUUQHFUCPPUTUSBQDPN #PPUTUSBQ 29

笪갤Ꟛ涮呥卺 'SBNFXPSL ➊랃僽 30 

䲿⣘䊺竤㹁纏㥪涸笪呔禺窡 (SJE 4ZTUFN  $44垺䒭갠䥰䒭鏤鎙 38% +BWB4DSJQU 31 'SBNFXPSL 雊⡹〳⟃䘰鸠醢⡲ⴀ♧⦐笪갤涸꧶䕎

笪騟䊺竤剤䖎㢵䖎問涸呥卺㸐⦛剤荈䊹涸鏤鎙齅鱀ㄤ欽岁〳⟃䢩䢩䷬程䪪ⴀ剓黠ざ荈䊹涸㈢ 32 'SBNFXPSL ♶銴荈䪪란撖锞鼚⯝ず儘⢪欽㢵⦐呥卺 IUUQCV[[PSBOHFDPNUFDIPSBOHFDTTGSBNFXPSL 網⾴頁⼯工程師必知：9 個超好⽤用的 CSS 框架

IUUQHFUCPPUTUSBQDPNHFUUJOHTUBSUFE ♴鯺 #PPUTUSBQ 33

#PPUTUSBQ 34

#PPUTUSBQ 35

5P%P-JTU  )5.- 36

5P%P-JTU)5.- 37 4FU6Q

5P%P-JTU)5.- 38 㹁纏㔋⦐⼦㝆

5P%P-JTU)5.- 39 䒊用鱒Ⰵ邍呔

5P%P-JTU)5.- 40 倞㟞ⵅꤑ⼦

5P%P-JTU)5.- 41 #PPUTUSBQ(MZQIJDPOT IUUQHFUCPPUTUSBQDPNDPNQPOFOUTHMZQIJDPOT

42 5P%P-JTU)5.- 溏饱⢵剤럊ˊ_>ˋ

5P%P-JTU  $44 43 #PPUTUSBQ

5P%P-JTU 44 䪾匌銯欽渱㶩酤饱⢵

5P%P-JTU 45 锅侮鱒Ⰵ呔涸垺䒭

5P%P-JTU 46 锅侮鱒Ⰵ呔涸垺䒭

笪呔禺窡 (SJE4ZTUFN 笪갤鏤鎙䌌♶腋♶濼麥涸 47

IUUQHT (SJE4ZTUFN 48

49 (SJE4ZTUFN

IUUQHFUCPPUTUSBQDPNDTTHSJEPQUJPOT 50 #PPUTUSBQ (SJE4ZTUFN

5P%P-JTU 51 ⸈Ⰵ笪呔禺窡

5P%P-JTU 52

5P%P-JTU 53 䗏锅垺䒭

5P%P-JTU 54 )5.-$44䒊用♧⦐眕劥⨞垺䒭涸锅侮

5P%P-JTU 55 IUUQTHPPHMZPYWD

&/% !〵猰㣐玑䒭鏤鎙灇瑖爢 #Z*SFOF$IBOH 56

NCC-JavaScript-Week#6

NCC-JavaScript-Week#6

More Decks by Irene Chang

Other Decks in Education

Featured

Transcript