Slide 1
Slide 1 text
$44
傓䶺┮䷐崎峩⻇甒
5COO[.KP
Slide 2
Slide 2 text
$44
综劳⃬⃡*6/.
Slide 3
Slide 3 text
$44
*6/.倁
GNGOGPV
Slide 11
Slide 11 text
$44
䵛倁GORV[GNGOGPVU
Slide 12
Slide 12 text
$44
䵛倁GORV[GNGOGPVU
Slide 13
Slide 13 text
$44
*6/.㪗㲬
Slide 14
Slide 14 text
$44
XXX
ooo
ooo
㳺峹䥥▀䠉⼒瓞⥉苌㚰耡Ⅷ↬㢝桬瘟㳺峹❭倱㩀㳺峹ℬ┮䥥羝峫Slide 15
Slide 15 text
$44
桬瘟≧給給%55
Slide 16
Slide 16 text
$44
$44
$BTDBEJOH4UZMF4IFFU
Slide 17
Slide 17 text
$44
$44
$BTDBEJOH4UZMF4IFFU
ℓ碉㴄ㇰ孉!
Slide 18
Slide 18 text
$44
$44
$BTDBEJOH4UZMF4IFFU
ℓ碉㴄ㇰ孉!
Slide 19
Slide 19 text
$44
$44
$BTDBEJOH4UZMF4IFFU
ℓ碉㴄ㇰ孉!
Slide 20
Slide 20 text
$44
%55嵿㾶
Slide 21
Slide 21 text
$44
%55嵿㾶
肞㞨⥉ {
!
!
!
}
Slide 22
Slide 22 text
$44
%55嵿㾶
肞㞨⥉ {
!
!
!
}
⽍㌈⛮䴒: ⽍㌈⌝;
..
..
..
Slide 23
Slide 23 text
$44
%55嵿㾶
.main_menu {
color: red;
background: blue;
}
Slide 24
Slide 24 text
$44
%55≠䠉㢚ㇰ
Slide 25
Slide 25 text
$44
%55≠䠉㢚ㇰ
Slide 26
Slide 26 text
$44
%55≠䠉㢚ㇰ
span {
color: red;
}
嵌入套用 &NCFE
Slide 27
Slide 27 text
$44
%55≠䠉㢚ㇰ
外部連結 &YUFSOBM-JOL
Slide 28
Slide 28 text
$44
%55≠䠉㢚ㇰ
@import url(style.css);
匯入套用 *NQPSU
Slide 29
Slide 29 text
$44
肞㞨⥉5GNGEVQT
h1 { border: 1pt
p.content { line-height: 180%;
.menu {
menu_list > li { border-radius: 3px;
hover { color: #FFFFFF;
* { font-si
menu { margin: auto 0;
a:hover { c
.menu_list > li { border-radius: 3px;
#menu { margin: auto 0;
nt-size: 16px }
Slide 30
Slide 30 text
$44
%55肞㞨⥉
瓴⫀肞㞨⥉
)NQDCNUGNGEVQT 㔡㧪倁 \^
倁肞㞨⥉
6[RGUGNGEVQTU 㗨倁 I\^
%NCUU肞㞨⥉
%NCUUUGNGEVQTU 㗨%NCUU
DPOUFOU\^
IIFBEFS\^
+&肞㞨⥉
+&UGNGEVQTU 㗨+& OBWJHBUJPO
劅倥肞㞨⥉
)TQWRUQHUGNGEVQTU 㗨䥥㔡㧪肞㞨⥉ IFBEFS
GPPUFS
I\^
䧕俜肞㞨⥉
%JKNFEQODKPCVQT 㗨䧕俜⸱肞㞨
MJ B\^
NFOV MJ\^
Q UJNF\^
砒⇄肞㞨⥉
&GUEGPFCPVEQODKPCVQT 㔡㧪砒⇄䥥肞㞨⥉
QB\^
DPOUFOUQ\^
䧙聏肞㞨⥉
#FLCEGPVUKDNKPIEQODKPCVQT 㕟ⓛ䧙聏䥥倁 I Q\^
資料來源：http://bit.ly/1AEwkgL
Slide 31
Slide 31 text
$44
ㄙ䠉%55⽍㌈
2TQRGTVKGU
Slide 32
Slide 32 text
$44
┮㥐啓
color : 顏色;
Slide 33
Slide 33 text
$44
綖㥐啓
background: 顏色;
Slide 34
Slide 34 text
$44
㋯熝⨉%55孉䰛欰啓獑
Slide 35
Slide 35 text
$44
藏⻘青⾊色
Slide 36
Slide 36 text
$44
3(#
藏⻘青⾊色
Slide 37
Slide 37 text
$44
3(#
)&9
藏⻘青⾊色
Slide 38
Slide 38 text
$44
3(#
)&9
/BNF
藏⻘青⾊色
Slide 39
Slide 39 text
$44
3(#
)&9
/BNF
耼職俦珮傁珮繷≧孉䰛
藏⻘青⾊色
Slide 40
Slide 40 text
$44
3(#
)&9
/BNF
耼職俦珮傁珮繷≧孉䰛 rgb(95, 158, 160)
藏⻘青⾊色
Slide 41
Slide 41 text
$44
3(#
)&9
/BNF
耼職俦珮傁珮繷≧孉䰛
耼職∮磕䥥聜∮䮝孉䰛
rgb(95, 158, 160)
藏⻘青⾊色
Slide 42
Slide 42 text
$44
3(#
)&9
/BNF
耼職俦珮傁珮繷≧孉䰛
耼職∮磕䥥聜∮䮝孉䰛
rgb(95, 158, 160)
#5f9ea0
藏⻘青⾊色
Slide 43
Slide 43 text
$44
3(#
)&9
/BNF
耼職俦珮傁珮繷≧孉䰛
耼職∮磕䥥聜∮䮝孉䰛
rgb(95, 158, 160)
#5f9ea0
䋰缧⥉㧪⋬櫱崎劊䥥欰啓⛮
藏⻘青⾊色
Slide 44
Slide 44 text
$44
3(#
)&9
/BNF
耼職俦珮傁珮繷≧孉䰛
耼職∮磕䥥聜∮䮝孉䰛
rgb(95, 158, 160)
#5f9ea0
cadetblue
䋰缧⥉㧪⋬櫱崎劊䥥欰啓⛮
藏⻘青⾊色
Slide 45
Slide 45 text
$44
藏⻘青⾊色
Slide 46
Slide 46 text
$44
3(#"
藏⻘青⾊色
Slide 47
Slide 47 text
$44
3(#"
藏⻘青⾊色
藏⻘青⾊色
Slide 48
Slide 48 text
$44
3(#"
㢑⭿耼㣯ㆇ rgb(95, 158, 160, 0.5)
藏⻘青⾊色
藏⻘青⾊色
Slide 49
Slide 49 text
$44
3(#"
㢑⭿耼㣯ㆇ rgb(95, 158, 160, 0.5)
藏⻘青⾊色
藏⻘青⾊色
"MQIB
Slide 50
Slide 50 text
$44
3(#"
㢑⭿耼㣯ㆇ rgb(95, 158, 160, 0.5)
藏⻘青⾊色
藏⻘青⾊色
"MQIB
.panel {
color: rgb(95, 158, 160);
opacity:0.5
}
or
Slide 51
Slide 51 text
$44
欰啓⚤勤傓䶺
ō JVVR YYYHNCVWKEQNQTRKEMGTEQO
ō JVVR EQNQWTEQFG
ō JVVRU EQNQTCFQDGEQO\JETGCVGEQNQTYJGGN
Slide 52
Slide 52 text
$44
&'/1
範例練習：http://bit.ly/116IT4O
Slide 53
Slide 53 text
$44
⸸臶Ⰸ⻰
font-size: 大小;
Slide 54
Slide 54 text
$44
%55⢏∮㤐獑
Slide 55
Slide 55 text
$44
Slide 56
Slide 56 text
$44
QY
Slide 57
Slide 57 text
$44
QY
QU
Slide 58
Slide 58 text
$44
QY
QU
FN
Slide 59
Slide 59 text
$44
QY
QU
FN
Slide 60
Slide 60 text
$44
QY
QU
FN
QD
Slide 61
Slide 61 text
$44
QY
QU
FN
QD
JO
Slide 62
Slide 62 text
$44
QY
QU
FN
QD
JO
FY
Slide 63
Slide 63 text
$44
QY
QU
FN
QD
JO
FY
DN
Slide 64
Slide 64 text
$44
QY
QU
FN
QD
JO
FY
DN
NN
Slide 65
Slide 65 text
$44
QY
QU
FN
QD
JO
FY
DN
NN
SFN
Slide 66
Slide 66 text
$44
嬭悾
line-height: 高度;
Slide 67
Slide 67 text
$44
嬭悾
line-height: 高度;
line-height: 16px;
line-height: 200%;
line-height: 2em;
Slide 68
Slide 68 text
$44
䧮僽俒㶶
line
height
font
size
font-size: 14px;
line-height: 16px;
1px
1px
Slide 69
Slide 69 text
$44
僕劳
範例練習：http://bit.ly/1oGGSGT
Slide 70
Slide 70 text
$44
⻇∽㎦⭤
情境範例：http://bit.ly/1xgjoLu
Slide 71
Slide 71 text
$44
㉩⯻┼⑆桡䥥┮䷐テ
粕ㄌ㧤㊹峹䥥Ⅼ
Slide 72
Slide 72 text
$44
%555GNGEVQT U5RGEKHKEKV[
%55肞㞨⥉ⰸ䠉⚀┨
Slide 73
Slide 73 text
$44
"#$%
Slide 74
Slide 74 text
$44
" # $ %
Slide 75
Slide 75 text
$44
Slide 76
Slide 76 text
$44
"
Slide 77
Slide 77 text
$44
" style屬性
Slide 78
Slide 78 text
$44
" style屬性
Text
Slide 79
Slide 79 text
$44
" style屬性
Text
#Slide 80
Slide 80 text
$44
" style屬性
Text
# ID 屬性Slide 81
Slide 81 text
$44
" style屬性
Text
# ID 屬性 #header { }Slide 82
Slide 82 text
$44
" style屬性
Text
# ID 屬性 #header { } $Slide 83
Slide 83 text
$44
" style屬性
Text
# ID 屬性 #header { } $ Class 屬性Slide 84
Slide 84 text
$44
" style屬性
Text
# ID 屬性 #header { } $ .title { } Class 屬性Slide 85
Slide 85 text
$44
" style屬性
Text
# ID 屬性 #header { } $ .title { } Class 屬性 .title:first-childSlide 86
Slide 86 text
$44
" style屬性
Text
# ID 屬性 #header { } $ .title { } Class 屬性 % .title:first-childSlide 87
Slide 87 text
$44
" style屬性
Text
# ID 屬性 #header { } $ .title { } Class 屬性 % Element Name .title:first-childSlide 88
Slide 88 text
$44
" style屬性
Text
# ID 屬性 #header { } $ .title { } Class 屬性 % h1 { } Element Name .title:first-childSlide 89
Slide 89 text
$44
Slide 90
Slide 90 text
$44
8*/
Slide 91
Slide 91 text
$44
Slide 92
Slide 92 text
$44
8*/
Slide 93
Slide 93 text
$44
%55ⰸ䠉㾶┨峩乸祚
IUUQTQFDJDJUZLFFHBOTU
Slide 94
Slide 94 text
$44
痞㩽#$%&䧙粹
砒≧䥥垬㙪┮橃䥥
Slide 95
Slide 95 text
$44
痞㩽#$%&䧙粹
砒≧䥥垬㙪┮橃䥥
Slide 96
Slide 96 text
$44
ɓ֛ࠅৣ፯ኜࢁ͜ࡡۆ
Slide 97
Slide 97 text
$44
%55肰䠭
榷竅⨉肰䠭∧≁腩⃮桬
Slide 98
Slide 98 text
$44
CONTENT
padding-top
padding-bottom
padding-left
padding-right
border-left
border-right
border-top
border-bottom
margin-left
margin-top
margin-right
margin-bottom
width
height
Slide 99
Slide 99 text
$44
CONTENT
padding-top
padding-bottom
padding-left
padding-right
margin-left
margin-top
margin-right
margin-bottom
width
height
Slide 100
Slide 100 text
$44
⯷肰䠭OCTIKP
margin: 大小;
Slide 101
Slide 101 text
$44
⑈悾RCFFKPI
padding: 大小;
Slide 102
Slide 102 text
$44
margin: 10px;
Slide 103
Slide 103 text
$44
margin: 10px;
上右下左10px
Slide 104
Slide 104 text
$44
margin: 10px;
上右下左10px
margin: 10px 5px;
Slide 105
Slide 105 text
$44
margin: 10px;
上右下左10px
margin: 10px 5px;
上下10px 左右5px
Slide 106
Slide 106 text
$44
margin: 10px;
上右下左10px
margin: 10px 5px 4px;
margin: 10px 5px;
上下10px 左右5px
Slide 107
Slide 107 text
$44
margin: 10px;
上右下左10px
margin: 10px 5px 4px;
上10px 左右5px 下4px
margin: 10px 5px;
上下10px 左右5px
Slide 108
Slide 108 text
$44
margin: 10px;
上右下左10px
margin: 10px 5px 4px;
上10px 左右5px 下4px
margin: 10px 9px 8px 7px;
margin: 10px 5px;
上下10px 左右5px
Slide 109
Slide 109 text
$44
margin: 10px;
上右下左10px
margin: 10px 5px 4px;
上10px 左右5px 下4px
margin: 10px 9px 8px 7px;
上10px 右9px 下8px 左7px
margin: 10px 5px;
上下10px 左右5px
Slide 110
Slide 110 text
$44
margin: 10px;
上右下左10px
margin: 10px 5px 4px;
上10px 左右5px 下4px
margin: 10px 9px 8px 7px;
上10px 右9px 下8px 左7px
margin: 10px 5px;
上下10px 左右5px
Slide 111
Slide 111 text
$44
margin: 10px;
上右下左10px
margin: 10px 5px 4px;
上10px 左右5px 下4px
margin: 10px 9px 8px 7px;
上10px 右9px 下8px 左7px
margin: 10px 5px;
上下10px 左右5px
Slide 112
Slide 112 text
$44
margin: 10px;
上右下左10px
margin: 10px 5px 4px;
上10px 左右5px 下4px
margin: 10px 9px 8px 7px;
上10px 右9px 下8px 左7px
櫧磢曹
margin: 10px 5px;
上下10px 左右5px
Slide 113
Slide 113 text
$44
RCFFKPI
Slide 114
Slide 114 text
$44
RCFFKPI
⛭⃫
Slide 115
Slide 115 text
$44
㬧傻DQTFGT
border: 粗細 顏色 樣式;
2px
0.75em
red
#12fa99
rgb(1,200,29)
solid
dashed
double
dotted
實線
虛線
雙線
點點線
Slide 116
Slide 116 text
$44
margin-
padding-
border-
top
right
bottom
left
Slide 117
Slide 117 text
$44
▶㔬∽
範例練習：http://bit.ly/1tJyIJh
Slide 118
Slide 118 text
$44
䁏▶(NQCV
Slide 119
Slide 119 text
$44
䁏▶
float: 樣式;
right
left
none
Slide 120
Slide 120 text
$44
▶㔬∽
範例練習1：http://bit.ly/1u4dWYp
範例練習2：http://bit.ly/1u4d1Hz
Slide 121
Slide 121 text
$44
⻇∽㎦⭤
情境範例：http://bit.ly/1BdPCd8
Slide 122
Slide 122 text
$44
Slide 123
Slide 123 text
$44
Slide 124
Slide 124 text
$44
(NQCV$WI䥥缷㾶
解法一
新增這行
Slide 125
Slide 125 text
$44
(NQCV$WI䥥缷㾶
解法二
Slide 126
Slide 126 text
$44
(NQCV$WI䥥缷㾶
解法三
新增這行
Slide 127
Slide 127 text
$44
⍞欿肞㞨⥉
⍞倁肞㞨⥉
Slide 128
Slide 128 text
$44
⍞欿肞㞨⥉2UGWFQENCUUGU
BDUJWF 滑鼠點擊時
GPDVT 元素成為焦點時
IPWFS 滑鼠置於元素上方時
MJOL 未訪問過的連結
WJTJUFE 已訪問過的連結
pSTUDIJME 第一個元素
MBOH
當屬性 lang 為某值
Slide 129
Slide 129 text
$44
⍞倁肞㞨⥉2UGWFQGNGOGPVU
pSTUMFUUFS 元素內第一個字元
pSTUMJOF 元素內第一行
CFGPSF 元素前內容
BGUFS 元素後的內容
聆ㄙ㧤㜎搮EQPVGPV⽍㌈
Slide 130
Slide 130 text
$44
▶㔬∽
範例檔1：http://bit.ly/1u4dWYp
範例檔2：http://bit.ly/1u4ixdc
Slide 131
Slide 131 text
$44
歐䰛⽍㌈FKURNC[
Slide 132
Slide 132 text
$44
歐䰛⽍㌈
display: 狀態;
block
inline
inline-block
none
….
Slide 133
Slide 133 text
$44
display: block;
規定元素以區塊方式呈現
Slide 134
Slide 134 text
$44
display: inline;
規定元素以單行方式呈現，不能設定「width」、 「height」 、 「background-image」
display: block;
規定元素以區塊方式呈現
Slide 135
Slide 135 text
$44
display: inline;
規定元素以單行方式呈現，不能設定「width」、 「height」 、 「background-image」
display: block;
規定元素以區塊方式呈現
display: inline-block;
規定元素以單行方式呈現，可以設定「width」、 「height」 、 「background-image」
Slide 136
Slide 136 text
$44
display: inline;
規定元素以單行方式呈現，不能設定「width」、 「height」 、 「background-image」
display: block;
規定元素以區塊方式呈現
display: inline-block;
規定元素以單行方式呈現，可以設定「width」、 「height」 、 「background-image」
display: none;
不顯示
Slide 137
Slide 137 text
$44
▶㔬∽
範例練習：http://bit.ly/1tKIKtB
Slide 138
Slide 138 text
$44
%55崜缷
⃬崜缷㤐䎛Ⅷ恑㧕桘䥥惐
Slide 139
Slide 139 text
$44
單行 //
多行 /* */
聅嬭
Slide 140
Slide 140 text
$44
⻇∽㎦⭤
情境範例：http://bit.ly/1tKOUKl
Slide 141
Slide 141 text
$44
∮RQUKVKQP
倶⻮⃮㤐)25∮
Slide 142
Slide 142 text
$44
∮RQUKVKQP
position: 狀態;
static
absolute
relative
fixed
Slide 143
Slide 143 text
$44
position: static;
預設值，不受 top、bottom、left 和 right 屬性值影響
Slide 144
Slide 144 text
$44
position: absolute;
絕對位置，以父元素為定位
position: static;
預設值，不受 top、bottom、left 和 right 屬性值影響
Slide 145
Slide 145 text
$44
position: absolute;
絕對位置，以父元素為定位
position: static;
預設值，不受 top、bottom、left 和 right 屬性值影響
position: relative;
相對位置，以本身元素為定位
Slide 146
Slide 146 text
$44
position: absolute;
絕對位置，以父元素為定位
position: static;
預設值，不受 top、bottom、left 和 right 屬性值影響
position: relative;
相對位置，以本身元素為定位
position: fixed;
以瀏覽器畫面為定位
Slide 147
Slide 147 text
$44
position: static;
預設值，不受 top、bottom、left 和 right 屬性值影響
Slide 148
Slide 148 text
$44
position: absolute;
絕對位置，以父元素為定位
Slide 149
Slide 149 text
$44
FKXKVGO
䔗倁䎛 DQF[
position: absolute;
絕對位置，以父元素為定位
Slide 150
Slide 150 text
$44
FKXKVGO
䔗倁䎛 DQF[
position: absolute;
絕對位置，以父元素為定位
MFGUQY
UPQQY
Slide 151
Slide 151 text
$44
position: relative;
相對位置，以本身元素為定位
Slide 152
Slide 152 text
$44
position: relative;
相對位置，以本身元素為定位
MFGUQY
UPQQY
Slide 153
Slide 153 text
$44
Slide 154
Slide 154 text
$44
position: fixed;
以瀏覽器畫面為定位
Slide 155
Slide 155 text
$44
MFGUQY
UPQQY
position: fixed;
以瀏覽器畫面為定位
Slide 156
Slide 156 text
$44
&'/1
範例練習：http://bit.ly/1GSgS18
Slide 157
Slide 157 text
$44
⻇∽㎦⭤
情境範例：http://bit.ly/1GSlfJr
Slide 158
Slide 158 text
$44
%55*CEM
肪㤐缙橃⻮
Slide 159
Slide 159 text
$44
Slide 160
Slide 160 text
$44
Slide 161
Slide 161 text
$44
Slide 162
Slide 162 text
$44
Slide 163
Slide 163 text
$44
ⓨ䔩
Slide 164
Slide 164 text
$44
㧟側㓲⇆䎛䠉
!
䡌ℬ砒⛐⇆哋▶䠀ⓛ傓䶺
Slide 165
Slide 165 text
$44
㧟側㓲⇆䎛䠉
!
䡌ℬ砒⛐⇆哋▶䠀ⓛ傓䶺
⌻痋✈
Slide 166
Slide 166 text
$44
ⓨ䔩㕡ト
䠒Ⰸ┑⻰苌㉿⃫┑⃬
Slide 167
Slide 167 text
$44
ⓨ䔩㕡ト
⌻峹纝
畏䠉'OOGV苌㋌⚩㧪㠩
Slide 168
Slide 168 text
$44
ⓨ䔩㕡ト
屰䡌%55䥥≠䠉
Ⅷ缷⟋ⅼ揉⇞缙≠䠉KOCIG㓷㤐EUU崎
Slide 169
Slide 169 text
$44
ⓨ䔩㕡ト
嵿㏰甙倁
⻮㢝5'1㉩㧪ㅌ▊
Slide 170
Slide 170 text
$44
ⓨ䔩㕡ト
畏䠉テ
Slide 171
Slide 171 text
$44
Slide 172
Slide 172 text
$44
Slide 173
Slide 173 text
$44
Slide 174
Slide 174 text
$44
VGORNCVGU
http://sneakpeekit.com/
Slide 175
Slide 175 text
$44
&'/1
Slide 176
Slide 176 text
$44
49&
4GURQPUKXG9GD&GUKIP
Slide 177
Slide 177 text
$44
⧛䔩橃
禵▶䔩橃
Slide 178
Slide 178 text
$44
Slide 179
Slide 179 text
$44
Slide 180
Slide 180 text
$44
Slide 181
Slide 181 text
$44
⃮㤐㺰⋬傓䶺揞肏⛩
Slide 182
Slide 182 text
$44
.FEJB2VFSZ
Slide 183
Slide 183 text
$44
.FEJB2VFSZ
Slide 184
Slide 184 text
$44
Slide 185
Slide 185 text
$44
Slide 186
Slide 186 text
$44
Slide 187
Slide 187 text
$44
49&テ
• 12 種 RWD 工具 http://bit.ly/1tPTJSK
• 檢視不同瀏覽器狀態 http://bit.ly/1v8EifF
• SUSY http://susy.oddbird.net/
Slide 188
Slide 188 text
$44
∽礱
Slide 189
Slide 189 text
$44
∽礱
ō 亥≬傓䶺獌JVVR DKVN[S*ZDL
ō ⃪↛⃡倥
ō 䡌ⓛYKTGHTCOGU
ō ⌻ⓛRTQVQV[RGU䥥*6/.㵵礌
ō ⬒✫㲬㏔苌寞∽禵粕
ⓧ曹