tags: 選修
HTML & CSS 基礎入門
一、教學網站
二、編輯軟體
三、HTML架構
四、網頁設計評分表
-
完成一個簡易自我介紹的網站
- 在桌面開新資料夾(資料夾名為班級-座號)，至少2頁(首頁index.html、我的寵物pet.html)，上傳至老師主機。
-
以下每項10分。
-
(1) 以Brackets新增html文件，首頁名為index.html。調整html架構。<body></body>內以 div 分成區塊如下
-
(2) 首頁內的主區塊( main )有標題「 h1 」、自己的生活照「 img 」和自我介紹「 p 」。
-
(3) 首頁內的選單區塊( nav )，至少有「回首頁」、「我的寵物」兩個超連結。
- 以「 ul、li 」 呈現超連結的文字，以「 a 」加上超連結。
-
(4) 新增CSS文件，命名為 main.css。首頁連結css檔。
-
(5) h1 標題 CSS 屬性設定。
- color 屬性，將顏色設為紅色。
- font-size 屬性，將大小設為50px。
-
(6) 以 background-image 屬性，讓 main 區塊有背景。
-
(7) 新增 pet.html，從 index.html 複製全部程式碼，將 main 區塊 class 改為 gallery，裏面至少放四張寵物照。
- 以「 figure 」標出圖片區塊，內有圖片「 img 」和圖片說明「 figcaption 」。
-
(8) 讓寵物圖片大小一致且有圓角，自己的生活照變圓形大頭貼。
- 「 width 」、「 height 」屬性讓寵物圖片大小一致。
- 「 border-radius 」屬性，讓寵物圖片有圓角。
- 屬性若設定在「 img 」會套用到全部圖片。
- 寵物圖「 img 」以 class 取名「 thumbnail 」，屬性設定在此。或設定在「 .gallery img 」。
- 自己的照片以 class 取名為「me」，border-radius 超過寬/2
-
(9) 讓 gallery 區塊內的圖片自動換行，並置中顯示。
-
(10) 讓選單置於左欄。
-
