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
95
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
310
Google Analytics 分享 1 - 基礎知識篇
winwu
0
350
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
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
Effect の双対、Coeffect
yukikurage
5
1.4k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
WindowInsetsだってテストしたい
ryunen344
1
190
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
120
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
260
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
840
SODA - FACT BOOK
sodainc
1
1.1k
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
280
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
520
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Speed Design
sergeychernyshev
31
1k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Fireside Chat
paigeccino
37
3.5k
Done Done
chrislema
184
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Building Applications with DynamoDB
mza
95
6.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Optimizing for Happiness
mojombo
379
70k
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 !