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_基礎_.pdf
Search
darrenyaoyaoyao
October 26, 2020
Programming
0
26
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
October 26, 2020
Tweet
Share
More Decks by darrenyaoyaoyao
See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
45
Pug.pdf
darrenyaoyaoyao
0
52
Sass.pdf
darrenyaoyaoyao
0
47
jquery.pdf
darrenyaoyaoyao
1
51
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
63
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
46
Other Decks in Programming
See All in Programming
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
flutterkaigi_2024.pdf
kyoheig3
0
150
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
340
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
subpath importsで始めるモック生活
10tera
0
310
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Thoughts on Productivity
jonyablonski
67
4.3k
What's in a price? How to price your products and services
michaelherold
243
12k
The Invisible Side of Design
smashingmag
298
50k
Adopting Sorbet at Scale
ufuk
73
9.1k
Scaling GitHub
holman
458
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Being A Developer After 40
akosma
87
590k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Transcript
HTML, CSS 基礎⼀ 網站入⾨
HTML, CSS 是網⾴的程式語⾔ Codepen 網站 ⽅便新⼿快速練習
今⽇⽬標
HTML HTML 是⼀套以 <> </> 構成的排版語法
標題 <h1> Google </h1>
⽂字 <p> Google 提供:English </p>
按鈕 <button> Google 搜尋</button>
區塊 <div> <button> Google 搜尋</button> </div>
⽂字輸入 <input/>
CSS CSS 是⼀套以 控制網⾴樣式、美化的語⾔
Border border: 1px solid black
Style 直接將 CSS 寫在 HTML 裡
Color ⽂字顏⾊ color: #757575
Class 將 CSS 模組化 .button { color: #757575; border: 1px
solid black }
Padding 留⽩ padding: 12px
Margin 邊界 margin: 8px
border-radius 圓⾓ border-radius: 8px
Id 專屬的 class #textInput { height:24px; width:300px; }
練習⼀ 更改搜尋匡的邊匡顏⾊與圓⾓ 並與按鈕保持距離
font-size 調整⽂字⼤⼩ font-size: 14px
Html img : 使⽤圖片 <img src=“https://www.google.com/images/ branding/googlelogo/2x/ googlelogo_color_272x92dp.png”/>
中場休息
Position 決定元素的位置 static | absolute | fixed | relative |
sticky | initial | inherit 使⽤ absolute 來試試置中
text-align 選擇⼦元素左對⿑、右對⿑或中間對⿑
display block 會把左右撐滿 inline 會把上下撐滿
float 決定往哪邊對⿑
background-color 背景顏⾊ background-color : #e0e0e0
練習⼆ 複製 Google ⾸⾴的 footer
<a /> 超連結 超連結,讓使⽤者連到別的⾴⾯
練習三 讓 header, footer 的字 都變成超連結
hover 當滑鼠移到元素上⾯時 .class:hover { }
練習四 讓 header, footer 的超連結 在 hover 時都能有底線
練習五 讓搜尋匡在 hover 時有陰影 ⼩提⽰:需要⾃⼰ Google 陰影的語法
練習六 讓搜尋匡在點選時 不要有藍邊
練習七 讓搜尋匡在點選時 左邊留⽩
回家作業 讓 搜尋匡 左邊有 搜尋的圖⽰ 右邊有 麥克風的圖⽰