iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 18
1
Modern Web

HTML 與 CSS 學習筆記系列 第 18

Day18 - Flex (5) - 並排選單

做個簡單的並排選單練習

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;
}

參考資料

次回

來進行排版的學習吧!

--

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

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

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


上一篇
Day17 - Flex (4) - flex-wrap、flex-flow、內元件
下一篇
Day19 - Position (1) - 相對定位、絕對定位
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言