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
460
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
110
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
100
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
320
Google Analytics 分享 1 - 基礎知識篇
winwu
0
350
HTML_CSS_前端基礎講座-4.pdf
winwu
0
440
HTML/CSS 前端基礎講座-2
winwu
0
480
2016 HTML CSS 前端基礎講座-1
winwu
1
560
2016 中正大學 weic.tw - RWD
winwu
3
1k
JSON-LD 簡介
winwu
29
980
Other Decks in Programming
See All in Programming
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
500
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
910
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
140
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
15
8k
Infer入門
riru
4
1.6k
兎に角、コードレビュー
mitohato14
0
150
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
580
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
330
為你自己學 Python - 冷知識篇
eddie
1
150
CSC305 Summer Lecture 06
javiergs
PRO
0
100
AIコーディングAgentとの向き合い方
eycjur
0
230
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Site-Speed That Sticks
csswizardry
10
790
YesSQL, Process and Tooling at Scale
rocio
173
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Music & Morning Musume
bryan
46
6.7k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
A better future with KSS
kneath
239
17k
Code Review Best Practice
trishagee
70
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Six Lessons from altMBA
skipperchong
28
4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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 !