Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NCC-JavaScript-Week#6
Search
Irene Chang
November 22, 2015
Education
0
130
NCC-JavaScript-Week#6
NTUST Coding Club JavaScript Course Week#6 (2015.11.27)
For self-study only.
Irene Chang
November 22, 2015
Tweet
Share
More Decks by Irene Chang
See All by Irene Chang
前端初心者談,合作過程與學習經驗
irene84111
0
130
一手打造你的專屬網誌-Hexo 簡介及教學
irene84111
0
480
NCC-JavaScript-Week#7
irene84111
0
120
NCC-JavaScript-Week#5
irene84111
0
50
NCC-SublimeText-InstallationTutorial
irene84111
0
35
NCC-JavaScript-Week#4
irene84111
0
34
NCC-JavaScript-Week#3
irene84111
0
110
NCC-JavaScript-Week#2
irene84111
0
210
NCC-JavaScript-Week#1
irene84111
0
180
Other Decks in Education
See All in Education
Before You Create Something
nandenjin
0
100
Analysis and Validation - Lecture 4 - Information Visualisation (4019538FNR)
signer
PRO
0
1.4k
LTをすべき100の理由
eltociear
1
290
TCA Practice in 5 min
d_date
1
600
情報Iの「縦糸」と「横糸」を意識したプログラム教育の実践
asial_edu
0
210
Digijulkaisut
matleenalaakso
1
8.6k
子どもたち創造的活動機会の必要性に関する提言/creativehub
codeforeveryone
0
270
令和6年度 無料トライアルキャンペーン説明会
asial_edu
0
960
論文の読み方 / How to survey
kaityo256
PRO
177
120k
Поступление в ТОГУ 2024
pnuslide
0
40k
Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)
signer
PRO
0
1.8k
墓までもっていくはずだった話
takuro_nakajima
PRO
0
1.5k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
60
3.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Six Lessons from altMBA
skipperchong
22
3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Product Roadmaps are Hard
iamctodd
45
9.7k
Code Review Best Practice
trishagee
56
15k
Web development in the modern age
philhawksworth
203
10k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
Design by the Numbers
sachag
274
18k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Building Your Own Lightsaber
phodgson
100
5.7k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Transcript
+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
胝兞♶鷴僈䏞 FYGDDDSFEXIJUF 3(#蒀焺䧴蒀そ FYGDDDSFEXIJUF 3(#蒀焺䧴蒀そ FYGDDDSFEXIJUF _⼦ FY 15
$44 俒㶶湱ꡠ铃岁 font-size line-height text-align Ⰹ俒㣐㼭 俒㶶遤넞 俒㶶㼩뢶 QY䧴FN FYQYFN
left、center、right QY䧴FN FYQYFN text-decoration 俒㶶酤귇 underline、line-through 16
$44 鼹呥湱ꡠ铃岁 border-color border-style border-width 㢫呥겝蒀 㢫呥괐呔 㢫呥磧稣 dotted、dashed、solid QY䧴FN
FYQYFN 3(#蒀焺䧴蒀そ FYGDDDSFEXIJUF 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
FYQYFN 3(#蒀焺䧴蒀そ FYGDDDSFEXIJUF 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