[DAY3]如何製作導航列?

2023 iThome 鐵人賽

DAY 3

Modern Web

從前端到後端，設計出屬於自己的購物網站系列第 3 篇

15th鐵人賽

小赤

團隊隊伍名稱還再想

2023-09-03 12:41:21

459 瀏覽

分享至

NAV是什麼?

HTML 元素代表一個 HTML 文檔中的導航部分，通常用來包含網站的主要導航連結。這些連結可以用於導航到網站的不同頁面，例如首頁、關於我們、聯繫方式等等。元素通常放置在頁面的頁眉（header）或頁腳（footer）中，或者可以在網站的側邊欄中使用。

一個簡單的範例：

📌 <body>
      <nav>
          <ul>
               <li><a href="/">首頁</a></li>
               <li><a href="/about">通知</a></li>
               <li><a href="/services">登入</a></li>
               <li><a href="/contact">註冊</a></li>
          </ul>
       </nav>
   </body>

那要如何讓他好看一點呢?

我們可以加上一點點的魔法

像是:

📌nav
  {
      height: 70px;
      width:80vw;
      margin-left: 10vw;
      background: white;
      position: sticky;
      top:0;
      font-weight:bold;
      font-size:200%;
      display:flex;
      align-items: center;
      border-left:1px solid rgb(202, 201, 201);
      border-right:1px solid rgb(202, 201, 201);
      border-bottom:1px solid rgb(202, 201, 201);
      border-radius:0 0 0.5em 0.5em;
  }

猜對了嗎?

就是CSS

設置大小

📌height: 70px;
  width:80vw;
  margin-left: 10vw;

讓他固定在網頁中

📌position: sticky;
  top:0;

垂直置中

📌display:flex;
  align-items: center;

圓角

📌border-left:1px solid rgb(202, 201, 201);
  border-right:1px solid rgb(202, 201, 201);
  border-bottom:1px solid rgb(202, 201, 201);
  border-radius:0 0 0.5em 0.5em;

這樣以來我們就有了可愛的導航列了

程式碼收錄:https://github.com/chyhhwen/shopping-system