HTML/CSS 前端基礎講座-3

Transcript

1. 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)

2. 虻 碘 ӥ 斉 9/9, 9/23, 9/30, 10/7 ᮷ᥝ᯿碝ӥ斉 http://goo.gl/wC5a6l

   蝱獈盅牧讨螡ݦӤ薫 Clone or download
 簁盅螡䢔 Download ZIP

3. C O N T E N T M O D

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

4. य़蟂獤ጱ HTML زᔰ”毆戔” 䨝ᤩ稳觊傶 block ౲ฎ inline block <p> <div>

   <form> <header> <h1~h6> <ul> <li> 㰍ฎڜ膐

5. य़蟂獤ጱ HTML زᔰ”毆戔” 䨝ᤩ稳觊傶 block ౲ฎ inline inline <a> <span>

   <b> <em> <i> <code> <mark> 㰍ฎڜ膐 <img>

6. block block 璸羷زᔰ䨝ᛔ㵕皤疻ᛗ向ᶎጱ磧疝 <div> ᘒӬ䨝ᛔ簁瑿಩ӥӞ㮆زᔰஃӥӞᤈ 矦ᤈ <div> • block زᔰ䢐磪

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

7. inline inline 䨝ݻ獉਻Ӟ䰬ᴫےࣁӤӞ㮆ጱ盅ᶎ 牧Ӭ਻瑊य़ੜ憙獉਻ग़ੋᘒਧ <a> • inline 䨝ᤩ஺ኼ疝ṛ (width/ height)

   痀௔ • inline 磪 padding 蚤 border • inline ጱ margin 䨝ᤩ஺ኼک top bottom <a> <a> inline.html https://css-tricks.com/fighting-the-space-between-inline-block-elements/

8. 穉斃墋㻌蚤皞嬝ጱ獤蜣 block 蚤 inline ጱො ဩฎ ࣁ倵薩瑊氥纈碻牧䨝犋䨝矦ᤈ 䨝 block 犋䨝

   inline (磪ֵአ CSS 藲碉螂ጱ犋ᓒ)

9. B L O C K 膏 I N L I

   N E ጱ 橕 狌 block inline block 愊ݢ犥硯 block, inline inline 愊犋ݢ犥硯 block

10. 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/

11. • Float • Position 膏 Layout 磪橕

12. F L O AT float ݈圸傶ၶ㵕牧ፓጱࣁෝ虏 HTML زᔰ᪡脒毆戔 ጱ矎ڜොୗ牧觊犲ࣁ翥蜉 word

    碻ጱ෈媅瑽ොୗ牐ଉଉአ㬵 粚ᶎ蟴ᗝ牐 薹ᴻ float ᥝአ clear 痀௔牐Ջ讕碻狡襑ᥝአک薹ᴻ?!
 磪አک float ጱ碻狡牐 獡ԪےӤ float 痀௔ጱزᔰ牧ቘ抷Ӥ犖᮷ᥝ磪 width 痀௔ 牐

13. 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

14. 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 ࢥ圵独㬵究ਧਧ֖牐

15. P O S I T I O N s t

    a t i c static ฎ毆戔独牧ݝᥝ䷱磪粬獨朼䌘 HTML زᔰ戔ਧ position牧 毆戔ጱ position 疰䨝ฎ static牐

16. P O S I T I O N re l

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

17. P O S I T I O N absolute absolute

    ጱਧ֖犥ᆿزᔰ傶च器牐 (藨聲ᇁ究ਧਙࣁߺ愊)

18. P O S I T I O N f i

    x e d ࡅ稭ڬਂࣁ眤ጱ痀௔牧fixed ጱਧ֖犥憙绯傶च器牐ࢴਧ犋㵕牐

19. Z - I N D E X 砇蟴 position: relative

    | absolute | fixed ֵአ ݢ究ਧ薟荠氥纈ጱض盅殼ଧ牧ℂ 0 , 1, 2… 碍ਁ᩼य़᩼ṛ牐 z-index: 2 z-index: 1 z-index: 0

20. 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 懯ᓒ
 ࣁ獉牐

21. Ӟ 犚 穉 斃 磪 蚕 ጱ 愆 獅

22. 愆 獅 • reset • css property prefix for vendors

    • facebook meta og https://developers.facebook.com/ docs/sharing/best-practices • Media Query • ૢݦᗝӾ

23. ૡ ٍ & ॺ կ ѿ 虻 რ Emmet Re:view

    PerfectPixel by WellDoneCode Ḙظẹ http://www.getmarkman.com/ Page Ruler WhatFont Web Developer Checklist http://caniuse.com/ http://sharingbuttons.io/

24. • http://zh-tw.learnlayout.com/ • http://css.maxdesign.com.au/floatutorial/ • http://www.initializr.com/ • http://mediaqueri.es/ ૡ ٍ

    & ॺ կ ѿ 虻 რ

25. 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

26. 蝱 ྍ 磧 盠 ጱ ො ဩ ฎ ℂ 䛑

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

27. T H A N K Y O U !