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
46
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
October 26, 2020
Tweet
Share
More Decks by darrenyaoyaoyao
See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
46
Pug.pdf
darrenyaoyaoyao
0
52
Sass.pdf
darrenyaoyaoyao
0
48
jquery.pdf
darrenyaoyaoyao
1
52
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
42
bootstrap.pdf
darrenyaoyaoyao
1
65
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
78
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
26
Other Decks in Programming
See All in Programming
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Docker and Python
trallard
44
3.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Product Roadmaps are Hard
iamctodd
PRO
50
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Being A Developer After 40
akosma
89
590k
Typedesign – Prime Four
hannesfritz
40
2.5k
Automating Front-end Workflow
addyosmani
1367
200k
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 陰影的語法
練習六 讓搜尋匡在點選時 不要有藍邊
練習七 讓搜尋匡在點選時 左邊留⽩
回家作業 讓 搜尋匡 左邊有 搜尋的圖⽰ 右邊有 麥克風的圖⽰