Slide 1
Slide 1 text
HTML, CSS 基礎⼀
網站入⾨
Slide 2
Slide 2 text
HTML, CSS
是網⾴的程式語⾔
Codepen 網站
⽅便新⼿快速練習
Slide 3
Slide 3 text
今⽇⽬標
Slide 4
Slide 4 text
HTML
HTML 是⼀套以
<> 構成的排版語法
Slide 5
Slide 5 text
標題
Google
Slide 6
Slide 6 text
⽂字
Google 提供：English
Slide 7
Slide 7 text
按鈕
Google 搜尋
Slide 8
Slide 8 text
區塊
Google 搜尋
Slide 9
Slide 9 text
⽂字輸入
Slide 10
Slide 10 text
CSS
CSS 是⼀套以
控制網⾴樣式、美化的語⾔
Slide 11
Slide 11 text
Border
border: 1px solid black
Slide 12
Slide 12 text
Style
直接將 CSS 寫在 HTML 裡
Slide 13
Slide 13 text
Color ⽂字顏⾊
color: #757575
Slide 14
Slide 14 text
Class 將 CSS 模組化
.button {
color: #757575;
border: 1px solid black
}
Slide 15
Slide 15 text
Padding 留⽩
padding: 12px
Slide 16
Slide 16 text
Margin 邊界
margin: 8px
Slide 17
Slide 17 text
border-radius 圓⾓
border-radius: 8px
Slide 18
Slide 18 text
Id 專屬的 class
#textInput {
height:24px;
width:300px;
}
Slide 19
Slide 19 text
練習⼀
更改搜尋匡的邊匡顏⾊與圓⾓
並與按鈕保持距離
Slide 20
Slide 20 text
font-size 調整⽂字⼤⼩
font-size: 14px
Slide 21
Slide 21 text
Html img : 使⽤圖片
Slide 22
Slide 22 text
中場休息
Slide 23
Slide 23 text
Position 決定元素的位置
static | absolute | fixed |
relative | sticky | initial | inherit
使⽤ absolute 來試試置中
Slide 24
Slide 24 text
text-align
選擇⼦元素左對⿑、右對⿑或中間對⿑
Slide 25
Slide 25 text
display
block 會把左右撐滿
inline 會把上下撐滿
Slide 26
Slide 26 text
float
決定往哪邊對⿑
Slide 27
Slide 27 text
background-color 背景顏⾊
background-color : #e0e0e0
Slide 28
Slide 28 text
練習⼆
複製 Google ⾸⾴的 footer
Slide 30
Slide 30 text
練習三
讓 header, footer 的字
都變成超連結
Slide 31
Slide 31 text
hover 當滑鼠移到元素上⾯時
.class:hover {
}
Slide 32
Slide 32 text
練習四
讓 header, footer 的超連結
在 hover 時都能有底線
Slide 33
Slide 33 text
練習五
讓搜尋匡在 hover 時有陰影
⼩提⽰：需要⾃⼰ Google 陰影的語法
Slide 34
Slide 34 text
練習六
讓搜尋匡在點選時
不要有藍邊
Slide 35
Slide 35 text
練習七
讓搜尋匡在點選時
左邊留⽩
Slide 36
Slide 36 text
回家作業
讓 搜尋匡 左邊有 搜尋的圖⽰
右邊有 麥克風的圖⽰