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
450
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
100
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
89
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
300
Google Analytics 分享 1 - 基礎知識篇
winwu
0
340
HTML_CSS_前端基礎講座-4.pdf
winwu
0
430
HTML/CSS 前端基礎講座-2
winwu
0
470
2016 HTML CSS 前端基礎講座-1
winwu
1
550
2016 中正大學 weic.tw - RWD
winwu
3
980
JSON-LD 簡介
winwu
29
960
Other Decks in Programming
See All in Programming
Doma で目指す ORM 最適解
nakamura_to
1
160
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
130
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
670
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
1k
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
380
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
670
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.2k
Passkeys for Java Developers
ynojima
0
100
複数アプリケーションを育てていくための共通化戦略
irof
0
540
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
710
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
830
Featured
See All Featured
Building an army of robots
kneath
306
45k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Optimizing for Happiness
mojombo
378
70k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Building Adaptive Systems
keathley
41
2.6k
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 !