HTML__CSS_基礎_.pdf

Transcript

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