今天要來學習其他用途的HTML標籤和CSS語法

其他用途的HTML標籤
1.<fugure>
<figcaption>~</figcaption>
<fugure>
:標記的區域必須是獨立的，雖然可以用標籤加上說明(caption)，但是不需要這麼做

2.<small>~</small>:使用於習慣縮小顯示的版權、免責事項等，如果單純想縮小文字，請用CSS處理

編寫「整個網頁」及「頁首」的CSS樣式

編寫「整個網頁」的CSS樣式
1.background-image:~;:在值輸入設定的影像位置的url(檔案路徑)，設定整個網頁的背景圖

編寫「頁首」的CSS樣式
1.讓頁首區域置中

header {
  width: 1240px;
  margin: 0 auto 44px;
}

2.讓LOGO置中對齊、上下留白

h1 {
  text-align: center;
  padding: 20px 0px 16px;
}

編寫「全域導覽列」的CSS樣式
1.讓導覽項目(li元素)水平排列並置中對齊

header nav ul {
  display: flex;
}

2.讓導覽項目(li元素)置中對齊

header nav ul {
  display: flex;
  justify-content: center;
}

3.設定導覽列(ul元素)的外觀

header nav ul {
  display: flex;
  justify-content: center;
  border-top: 2px solid #7c5d48;
  border-bottom: 2px solid #7c5d48;
  background-color: rgba(255,255,255,0.42);
  padding: 12px 0px 10px;
}

4.設定導覽項目(li元素)的間距變大

header nav ul li {
 margin: 0 20px;
}

5.裝飾導覽項目(li元素)的文字

header nav ul li a{
font-size: 22px;
font-weight: bold;
color: #7c5d48;
}

設定滑鼠游標移入導覽項目時的效果
text-decoration:~;:在值輸入位置、線種類、設定顏色、線條粗細

   header nav ul li a:hover{
     text-decoration: underline double;
   }

可以設定線條位置的值：
underline:底線 overline:上線 line-through:刪除線 none:無線條

可以設定線條種類的值：
solid:實線 double:雙線 dotted:點線 dashed:虛線 wavy:波浪線

今天先到這裡明天再繼續！