做個簡單的並排選單練習

HTML

• 將基本列表完成，使用 <ul> 和 <li>
• 因為是要點擊連結，所以加入 <a>
• 最後將這個設定一個 class="menu"
• 設定 CSS Reset ，CodePen 是在 CSS 區塊左邊的齒輪內設定

<ul class="menu">
  <li><a href="#">首頁</a></li>
  <li><a href="#">政治</a></li>
  <li><a href="#">娛樂</a></li>
  <li><a href="#">論壇</a></li>
  <li><a href="#">財經</a></li>
  <li><a href="#">運動</a></li>
</ul>

顯示結果

CSS

• 將 整個 .menu 設定為 Flex，並且設定置中

.menu{
  width: 600px;
  margin: 0 auto;
  display: flex;
  /* border: 1px solid #000; */
}

顯示結果
可以看到已經置中，border 可以方便確認範圍區塊，確認後再移除

• 接下來將他均分，因為 6 個 <li>，因此每個 width＝600/6
• 將文字置中，text-align: center;
• 增加 <li> 外框線，border: 1px solid #000;

.menu li{
  width: 100px;
  text-align: center;
  border: 1px solid #000;
}

顯示結果，可以看到排版已經接近目標效果

• 將裡面的 <li>、<a> 設定為區塊
• 設定背景色與文字顏色
• 上下留 padding
• 將 <a> 底線去除

.menu li a{
  display: block;
  background: #00ffa2;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
  color: #004466;
}

顯示結果，可以看到幾乎完成了

• 使用 :hover 增加滑鼠滑過去出現的效果，修改被景色與文字顏色

.menu li a:hover{
  background: #004466;
  color: #00ffa2
}

大功告成

範例 CodePen 連結

小技巧

• 排版出狀況時，增加外框線，可比較容易用視覺化的方式確認效果與找問題 (bug)

.classname {
    border: 1px solid #000;
}

• 將全部都加上框線，* 代表全部

* {
    outline: 1px solid #000;
}

參考資料

• CSS text-decoration 屬性

次回

來進行排版的學習吧！

--

看著因為程式碼逐漸增加，效果逐漸呈現時以及參賽不小心過半小感

凡事都是從基礎慢慢起來的，程式也是，學習也是，知道基礎與過程後，如果沒有持續的練習，就只會一直在原地踏步，甚至退步

時間都是擠出來的，就看你把這件事放得多重