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
31
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
October 26, 2020
Tweet
Share
More Decks by darrenyaoyaoyao
See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
darrenyaoyaoyao
0
52
Pug.pdf
darrenyaoyaoyao
0
59
Sass.pdf
darrenyaoyaoyao
0
52
jquery.pdf
darrenyaoyaoyao
1
59
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
darrenyaoyaoyao
0
49
bootstrap.pdf
darrenyaoyaoyao
1
74
Javasrcipt_基礎一.pdf
darrenyaoyaoyao
0
87
Javascript_基礎二.pdf
darrenyaoyaoyao
0
110
HTML__CSS_基礎_.pdf
darrenyaoyaoyao
0
51
Other Decks in Programming
See All in Programming
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.1k
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
Kiroで始めるAI-DLC
kaonash
2
580
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
800
個人軟體時代
ethanhuang13
0
320
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
240
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
210
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
Improving my own Ruby thereafter
sisshiki1969
1
160
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Unsuck your backbone
ammeep
671
58k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Optimizing for Happiness
mojombo
379
70k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
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 陰影的語法
練習六 讓搜尋匡在點選時 不要有藍邊
練習七 讓搜尋匡在點選時 左邊留⽩
回家作業 讓 搜尋匡 左邊有 搜尋的圖⽰ 右邊有 麥克風的圖⽰