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
HTML/CSS 前端基礎講座-3
Search
winwu
September 30, 2016
Programming
0
410
HTML/CSS 前端基礎講座-3
更正:
p14 有錯字 both->為 bottom
winwu
September 30, 2016
Tweet
Share
More Decks by winwu
See All by winwu
Google Data Studio 分享
winwu
0
67
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
59
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
180
Google Analytics 分享 1 - 基礎知識篇
winwu
0
310
HTML_CSS_前端基礎講座-4.pdf
winwu
0
400
HTML/CSS 前端基礎講座-2
winwu
0
440
2016 HTML CSS 前端基礎講座-1
winwu
1
510
2016 中正大學 weic.tw - RWD
winwu
3
860
JSON-LD 簡介
winwu
29
810
Other Decks in Programming
See All in Programming
Polars入門
daikikatsuragawa
1
180
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
110
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Sheets API使ってみた
toshi0383
2
170
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
890
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
Goのエラースタックトレースの歴史と今後
sonatard
10
1.8k
Ruby Function Composition
bkuhlmann
1
340
Implementing Design Systems in Swift
seyfoyun
2
480
Ruby Pattern Matching
bkuhlmann
0
930
Ruby GitHub Packages
bkuhlmann
0
640
Featured
See All Featured
Practical Orchestrator
shlominoach
183
9.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Designing Experiences People Love
moore
136
23k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
How to Ace a Technical Interview
jacobian
273
22k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
How STYLIGHT went responsive
nonsquared
92
4.8k
Clear Off the Table
cherdarchuk
85
310k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Transcript
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)
虻 碘 ӥ 斉 9/9, 9/23, 9/30, 10/7 ᮷ᥝ᯿碝ӥ斉 http://goo.gl/wC5a6l
蝱獈盅牧讨螡ݦӤ薫 Clone or download 簁盅螡䢔 Download ZIP
C O N T E N T M O D
E L Content Model ݈圸傶կ獉秇ࣳ牐 蝢ଉդ蔭礓㮆 HTML زᔰ愊ᶎݢ犥硯犚獉牐 穉斃ଉአ/墋㻌অቘ薹ጱ牧磪 block/inline/inline-block
य़蟂獤ጱ HTML زᔰ”毆戔” 䨝ᤩ稳觊傶 block ฎ inline block <p> <div>
<form> <header> <h1~h6> <ul> <li> 㰍ฎڜ膐
य़蟂獤ጱ HTML زᔰ”毆戔” 䨝ᤩ稳觊傶 block ฎ inline inline <a> <span>
<b> <em> <i> <code> <mark> 㰍ฎڜ膐 <img>
block block 璸羷زᔰ䨝ᛔ㵕皤疻ᛗ向ᶎጱ磧疝 <div> ᘒӬ䨝ᛔ簁瑿ӥӞ㮆زᔰஃӥӞᤈ 矦ᤈ <div> • block زᔰ䢐磪
margin/padding 痀 • block زᔰጱ疝ଶฎᆿزᔰጱ疝ଶ block.html
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/
穉斃墋㻌蚤皞嬝ጱ獤蜣 block 蚤 inline ጱො ဩฎ ࣁ倵薩瑊氥纈碻牧䨝犋䨝矦ᤈ 䨝 block 犋䨝
inline (磪ֵአ CSS 藲碉螂ጱ犋ᓒ)
B L O C K 膏 I N L I
N E ጱ 橕 狌 block inline block 愊ݢ犥硯 block, inline inline 愊犋ݢ犥硯 block
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/
• Float • Position 膏 Layout 磪橕
F L O AT float ݈圸傶ၶ㵕牧ፓጱࣁෝ虏 HTML زᔰ᪡脒毆戔 ጱ矎ڜොୗ牧觊犲ࣁ翥蜉 word
碻ጱ媅瑽ොୗ牐ଉଉአ㬵 粚ᶎ蟴ᗝ牐 薹ᴻ float ᥝአ clear 痀牐Ջ讕碻狡襑ᥝአک薹ᴻ?! 磪አک float ጱ碻狡牐 獡ԪےӤ float 痀ጱزᔰ牧ቘ抷Ӥ犖᮷ᥝ磪 width 痀 牐
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
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 ࢥ圵独㬵究ਧਧ֖牐
P O S I T I O N s t
a t i c static ฎ毆戔独牧ݝᥝ䷱磪粬獨朼䌘 HTML زᔰ戔ਧ position牧 毆戔ጱ position 疰䨝ฎ static牐
P O S I T I O N re l
a t i v e relative चӤ蚤 static 盄猟牧吚֦ࣁӞ㮆زᔰӤےӤ position: relative 眤ݑ犋ڊก氥ጱ癩吖牧֕犢ݢ犥ֵአ top, left, right, bottom 缛痀牧㪔Ӭ䌘ෝৼزᔰ㬵藯ٍ磪ᆿ䍅ਧ֖ጱ硳ຎ牐
P O S I T I O N absolute absolute
ጱਧ֖犥ᆿزᔰ傶च器牐 (藨聲ᇁ究ਧਙࣁߺ愊)
P O S I T I O N f i
x e d ࡅ稭ڬਂࣁ眤ጱ痀牧fixed ጱਧ֖犥憙绯傶च器牐ࢴਧ犋㵕牐
Z - I N D E X 砇蟴 position: relative
| absolute | fixed ֵአ ݢ究ਧ薟荠氥纈ጱض盅殼ଧ牧ℂ 0 , 1, 2… 碍ਁ᩼य़᩼ṛ牐 z-index: 2 z-index: 1 z-index: 0
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 懯ᓒ ࣁ獉牐
Ӟ 犚 穉 斃 磪 蚕 ጱ 愆 獅
愆 獅 • reset • css property prefix for vendors
• facebook meta og https://developers.facebook.com/ docs/sharing/best-practices • Media Query • ૢݦᗝӾ
ૡ ٍ & ॺ կ ѿ 虻 რ Emmet Re:view
PerfectPixel by WellDoneCode Ḙظẹ http://www.getmarkman.com/ Page Ruler WhatFont Web Developer Checklist http://caniuse.com/ http://sharingbuttons.io/
• http://zh-tw.learnlayout.com/ • http://css.maxdesign.com.au/floatutorial/ • http://www.initializr.com/ • http://mediaqueri.es/ ૡ ٍ
& ॺ կ ѿ 虻 რ
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
蝱 ྍ 磧 盠 ጱ ො ဩ ฎ ℂ 䛑
አ ᶎ 樄 ত 牧 Ḓ ض 牧 ֦ ݢ 犥 ग़ ፡ ፡ 獨 Ո ெ 讕 䌃 http://www.awwwards.com/ http://bm.straightline.jp/ http://codepen.io/ 疨ತమᥝ秇ճጱ翕ᒊ牧手茐狶狶፡牧֕妿涢ဩ㳷ฎ牧戔懯᩼墋㻌ጱ 犋憎᩼অ狶牐
T H A N K Y O U !