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
93
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
300
Google Analytics 分享 1 - 基礎知識篇
winwu
0
340
HTML_CSS_前端基礎講座-4.pdf
winwu
0
430
HTML/CSS 前端基礎講座-2
winwu
0
480
2016 HTML CSS 前端基礎講座-1
winwu
1
550
2016 中正大學 weic.tw - RWD
winwu
3
990
JSON-LD 簡介
winwu
29
970
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
190
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
200
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
540
XSLTで作るBrainfuck処理系
makki_d
0
190
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
590
Perlで痩せる
yuukis
1
680
エラーって何種類あるの?
kajitack
5
140
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
640
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
350
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
920
Parallel::Pipesの紹介
skaji
2
910
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Fireside Chat
paigeccino
37
3.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
650
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Music & Morning Musume
bryan
46
6.6k
Thoughts on Productivity
jonyablonski
69
4.7k
Optimizing for Happiness
mojombo
379
70k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
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 !