之前我們都在講關於排版的東西，現在我們要開始講網站的內容囉，由上至下，我們先從.header開始講起，不管甚麼類型的網站，尤其是商業網站，一定都會有一個 logo 擺放的位置，通常會是整個網頁的左上角為主，而這個 logo 通常也會設為連結，可以連回主網站的首頁，然後它的旁邊會有一列的橫向選單並排，今天我們要來說明一下，這要怎麼製作，先請看 codepen。

我們依然來到了我們熟悉的版型，但我現在在左上方加上了 logo，然後右邊有選單並排，我們先來看看這一段 HTML 程式碼怎麼寫的

<div class=”header”>
 <h1><a href=”https://www.apple.com/tw/">蘋果電腦</a></h1>
 <ul>
  <li><a href=””>Mac</a></li>
  <li><a href=””>iPad</a></li>
  <li><a href=””>iPhone</a></li>
  <li><a href=””>Watch</a></li>
  <li><a href=””>TV</a></li>
  <li><a href=””>Music</a></li>
  <li><a href=””>支援服務</a></li>
 </ul>
</div>

這裡我們看到了幾個熟悉的標籤，有裡面包了標籤，還有有一點熟悉又有一點不熟悉的和，記得他不是用來當作清單列表的嗎？現在和選單又有甚麼關係呢？先不著急，我們一個一個來說明。

關於 logo 隱藏標題

<h1><a href=”https://www.apple.com/tw/">蘋果電腦</a></h1>

你有發現在<h1>的<a>標籤裡面，包覆著一個"蘋果電腦"的文字，但是網頁卻沒有看到他在哪裡嗎？因為我用 CSS 的語法將它隱藏了起來，要開始說怎麼做之前，要先說明為什麼要這麼做？既然要隱藏起來那當初不要就好了啊，是的沒錯，但是這卻不利於網頁 SEO 搜尋，<a>標籤是被<h1>包覆起來，就表示這是這個網站最重要的一個標題欄位，對於 SEO 來說，都會首先搜尋<h1>的內容，但因為網站只看得懂網頁的原始碼，它看不懂圖片，若我們的<h1>內容沒有文字，那搜尋引擎可能就會錯過他，以至於我們的網站就不容易被搜尋到而曝光，但若是打上了文字標題，又可能會不夠美觀，所以才會用隱藏的方式讓他在網頁上不會顯示，但是搜尋引擎在網頁原始碼上又可以搜尋的到，這種一舉兩得的方法。
再來我們看看 CSS 的部分是怎麼寫的

.header h1 a{
  background-image:url(https://upload.cc/i1/2019/09/13/ONnwx7.png);
  width: 128px;
  height: 128px;
  text-indent: 101%;
  overflow:hidden;
  white-space: nowrap;
  float:left; ← 偷偷下了個float在這裡
}

先來看選擇器.header h1 a這個的意思就是選擇.header裡面的<h1>標籤裡的<a>標籤，不同於<img>標籤，圖片我是以 CSS 的方式導入到網頁裡，我下了這個語法{background-image: url()}，url()內指向圖片位置，然後設立width寬與height高與圖片相同，再來重點來了，就是這三個語法

{
  text-indent:101%;
  overflow:hidden;
  white-space: nowrap;
}

text-indent是縮排的意思，縮排101%等於完全縮到原來的寬度之外，overflow是說當原素滿出他原來的框框時要做什麼動作，我們選擇hidden隱藏他，這是看不到文字的主因，再來white-space是決定怎麼處理空白字元，因為就算是空白字元，也還是算佔空間，若超出空間可能會啟動捲軸，所以我們設定為nowrap，就不會有卷軸產生。

這就是怎麼用圖片代替標題文字的小技巧，希望你會喜歡。

選單並排

再來就是選單並排，通常網頁的元素都會按照預設的從上到下從左至右排列，若是不用float技巧，不容易讓選單並排，而且選單的製作方式會使用<ul><li> 方式以清單的方式呈現。

<ul>
  <li><a href=””>Mac</a></li>
  <li><a href=””>iPad</a></li>
  <li><a href=””>iPhone</a></li>
  <li><a href=””>Watch</a></li>
  <li><a href=””>TV</a></li>
  <li><a href=””>Music</a></li>
  <li><a href=””>支援服務</a></li>
</ul>

我們看一下 CSS 怎麼寫的

.header ul{
   float:right;
   margin-top:55px;
   margin-right:20px;
}
.header ul li{
   float:left;
   margin-right:25px;
   font-size:18px;
}
.header ul li a{
   text-decoration: none;
   color:white;
}

這裡的重點就在於float，先回到上一段，圖片隱藏標題文字的段落它的 CSS 看一下的話，會發現我在那邊偷偷下了一個float，但當時我並未做解釋，因為這個float是為了讓選單橫向排列用的，我們來一一做說明。

首先我們將.header h1 a(logo)下了float:left，脫離縱向排列，浮起來靠左邊排，再來將.header ul(整個清單)下了float:right，浮起來靠右邊排，再來直接針對.header ul li(清單的每一個選項)下了float:left，這樣清單也會脫離縱向排列，而全部改為橫向，然後我們在下一些margin來調整一下它的位置就可以囉。

下一次我們來說說表單與表格吧~