Slide 1

Slide 1 text

H T M L / C S S 獮 ᒒ च 器拻 ଷ - 3 W W C O D E TA I P E I F E S T U D Y G R O U P Friday, September 30, 2016  Syntrend 11F    Win.Wu (yiyingwu.1990{{at}}gmail.com)

Slide 2

Slide 2 text

虻碘 ӥ 斉 9/9, 9/23, 9/30, 10/7 ᮷ᥝ᯿碝ӥ斉 http://goo.gl/wC5a6l 蝱獈盅牧讨螡ݦӤ薫 Clone or download  簁盅螡䢔 Download ZIP

Slide 3

Slide 3 text

C O N T E N T M O D E L Content Model ݈圸傶෈կ獉਻秇ࣳ牐  蝢ଉդ蔭礓㮆 HTML زᔰ愊ᶎݢ犥硯犚獉਻牐穉斃ଉአ/墋㻌অቘ薹ጱ牧磪 block/inline/inline-block

Slide 4

Slide 4 text

य़蟂獤ጱ HTML زᔰ”毆戔” 䨝ᤩ稳觊傶 block ౲ฎ inline block

㰍ฎڜ膐

Slide 5

Slide 5 text

य़蟂獤ጱ HTML زᔰ”毆戔” 䨝ᤩ稳觊傶 block ౲ฎ inline inline 㰍ฎڜ膐

Slide 6

Slide 6 text

block block 璸羷زᔰ䨝ᛔ㵕皤疻ᛗ向ᶎጱ磧疝

ᘒӬ䨝ᛔ簁瑿಩ӥӞ㮆زᔰஃӥӞᤈ 矦ᤈ

• block زᔰ䢐磪 margin/padding 痀௔ • block زᔰጱ疝ଶฎᆿزᔰጱ疝ଶ block.html

Slide 7

Slide 7 text

inline inline 䨝ݻ獉਻Ӟ䰬ᴫےࣁӤӞ㮆ጱ盅ᶎ 牧Ӭ਻瑊य़ੜ憙獉਻ग़ੋᘒਧ • inline 䨝ᤩ஺ኼ疝ṛ (width/ height) 痀௔ • inline 磪 padding 蚤 border • inline ጱ margin 䨝ᤩ஺ኼک top bottom inline.html https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Slide 8

Slide 8 text

穉斃墋㻌蚤皞嬝ጱ獤蜣 block 蚤 inline ጱො ဩฎ ࣁ倵薩瑊氥纈碻牧䨝犋䨝矦ᤈ 䨝 block 犋䨝 inline (磪ֵአ CSS 藲碉螂ጱ犋ᓒ)

Slide 9

Slide 9 text

B L O C K 膏 I N L I N E ጱ 橕狌 block inline block 愊ݢ犥硯 block, inline inline 愊犋ݢ犥硯 block

Slide 10

Slide 10 text

C S S ই ֜ 矒 ګ M O D E L ݢ犥ڥአ CSS ጱ display 痀௔牧硬虋扗 HTML زᔰጱ Content Model display: block|inline|inline-block|table|flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Slide 11

Slide 11 text

• Float • Position 膏 Layout 磪橕

Slide 12

Slide 12 text

F L O AT float ݈圸傶ၶ㵕牧ፓጱࣁෝ虏 HTML زᔰ᪡脒毆戔 ጱ矎ڜොୗ牧觊犲ࣁ翥蜉 word 碻ጱ෈媅瑽ොୗ牐ଉଉአ㬵粚ᶎ蟴ᗝ牐薹ᴻ float ᥝአ clear 痀௔牐Ջ讕碻狡襑ᥝአک薹ᴻ?!  磪አک float ጱ碻狡牐獡ԪےӤ float 痀௔ጱزᔰ牧ቘ抷Ӥ犖᮷ᥝ磪 width 痀௔ 牐

Slide 13

Slide 13 text

C L E A R Ӟ෮౯㮉ࣁ殷ᶎӤ磪ֵአک float 矎粚碻牧ԏ盅ጱزᔰ疰䨝  虋౮狅ᆙ瞲ਧጱ float ොݻ (left, right) 媣媲ၶ㵕牐ಅ犥஠殾  ᥝ磪Ӟ㮆Ӿ䥁讨ฎአ㬵薹ᴻ float 硳ຎጱ牧ᘒ薹ᴻ float 疰  襑ᥝֵአ clear 痀௔牐戔ਧ clear زᔰ牧䨝०݄ margin-top牐 TIP: 橕ෝ clear ֦ӞਧᥝᎣ螇 clearfix http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

Slide 14

Slide 14 text

P O S I T I O N s t a t i c re l a t i v e absolute f i x e d CSS ጱ position 痀௔牧మ蕣֢斃蕦褾ጱ戔懯牧犋మ ݑ褖ෝ HTML ܻ๜ጱ矎ڜ殼ଧ牧疰襑ᥝֵአ position牐砇蟴 top, right, both, left ࢥ圵独㬵究ਧਧ֖牐

Slide 15

Slide 15 text

P O S I T I O N s t a t i c static ฎ毆戔独牧ݝᥝ䷱磪粬獨朼䌘 HTML زᔰ戔ਧ position牧毆戔ጱ position 疰䨝ฎ static牐

Slide 16

Slide 16 text

P O S I T I O N re l a t i v e relative च๜Ӥ蚤 static 盄猟牧吚֦ࣁӞ㮆زᔰӤےӤ position: relative 眤ݑ犋ڊก氥ጱ癩吖牧֕犢ݢ犥ֵአ top, left, right, bottom 缛痀௔牧㪔Ӭ䌘ෝৼزᔰ㬵藯ٍ磪ᆿ䍅ਧ֖ጱ硳ຎ牐

Slide 17

Slide 17 text

P O S I T I O N absolute absolute ጱਧ֖犥ᆿزᔰ傶च器牐 (藨聲ᇁ究ਧਙࣁߺ愊)

Slide 18

Slide 18 text

P O S I T I O N f i x e d ࡅ稭ڬਂࣁ眤ጱ痀௔牧fixed ጱਧ֖犥憙绯傶च器牐ࢴਧ犋㵕牐

Slide 19

Slide 19 text

Z - I N D E X 砇蟴 position: relative | absolute | fixed ֵአ ݢ究ਧ薟荠氥纈ጱض盅殼ଧ牧ℂ 0 , 1, 2… 碍ਁ᩼य़᩼ṛ牐 z-index: 2 z-index: 1 z-index: 0

Slide 20

Slide 20 text

B O X S I Z I N G • box-sizing ฎ CSS 憒ਧ Box Model ጱ薹ຉොୗ • content-box 毆戔ጱොୗ牧懯ᓒ width/height 碻犋۱珀   padding/border • border-box牧懯ᓒ width/height ฎ಩ padding/border 懯ᓒ  ࣁ獉牐

Slide 21

Slide 21 text

Ӟ 犚穉斃磪蚕 ጱ 愆獅

Slide 22

Slide 22 text

愆獅 • reset • css property prefix for vendors • facebook meta og https://developers.facebook.com/ docs/sharing/best-practices • Media Query • ૢݦᗝӾ

Slide 23

Slide 23 text

ૡ ٍ & ॺ կ ѿ 虻 რ Emmet Re:view PerfectPixel by WellDoneCode Ḙظẹ http://www.getmarkman.com/ Page Ruler WhatFont Web Developer Checklist http://caniuse.com/ http://sharingbuttons.io/

Slide 24

Slide 24 text

• http://zh-tw.learnlayout.com/ • http://css.maxdesign.com.au/floatutorial/ • http://www.initializr.com/ • http://mediaqueri.es/ ૡ ٍ & ॺ կ ѿ 虻 რ

Slide 25

Slide 25 text

C S S G E N E R AT O R … 膐 ֺ 皃㮆 http://www.colorzilla.com/gradient-editor/ http://apps.eky.hk/css-triangle-generator/ http://bennettfeely.com/clippy/ 橕棎ਁ: css _____ generator

Slide 26

Slide 26 text

蝱 ྍ 磧盠 ጱ ො ဩ ฎ ℂ 䛑 አ ᶎ 樄 ত 牧 Ḓ ض 牧 ֦ ݢ 犥 ग़ ፡ ፡ 獨 Ո ெ 讕䌃 http://www.awwwards.com/ http://bm.straightline.jp/ http://codepen.io/ 疨ತమᥝ秇ճጱ翕ᒊ牧手茐狶狶፡牧֕妿涢ဩ㳷ฎ牧戔懯᩼墋㻌ጱ 犋憎஑᩼অ狶牐

Slide 27

Slide 27 text

T H A N K Y O U !