iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0

從今天開始讓我們提升 tailwind 的熟練度吧,我們可以到 tailwindUI 找尋範例,今天要練習的是 Navbar/images/emoticon/emoticon08.gif


https://ithelp.ithome.com.tw/upload/images/20221009/201522513h8xXzGlS9.png
我們先把架構以及內容做出來

  <body>
    <header class="bg-gray-800">
      <nav class="container">
        <ul>
          <div>
            <img
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li>
            <ul>
              <li><a href="#">Dashboard</a></li>
              <li><a href="#">Team</a></li>
              <li><a href="#">Projects</a></li>
              <li><a href="#">Calendar</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <button type="button"><i class="fa-regular fa-bell"></i></button>
          <li><img src="./img/Navbar/avatar.jpg" alt="" /></li>
        </ul>
      </nav>
    </header>
  </body>

https://ithelp.ithome.com.tw/upload/images/20221009/20152251QHx9dHQURk.png
針對圖中圈選處加上 flex 及相關樣式並給予圖片尺寸 (h-8)

  <body>
    <header class="bg-gray-800">
      <nav class="container flex justify-between">
        <ul class="flex">
          <div>
            <img
              class="h-8"
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li>
            <ul class="flex">
              <li><a href="#">Dashboard</a></li>
              <li><a href="#">Team</a></li>
              <li><a href="#">Projects</a></li>
              <li><a href="#">Calendar</a></li>
            </ul>
          </li>
        </ul>
        <ul class="flex">
          <li>
            <button type="button"><i class="fa-regular fa-bell"></i></button>
          </li>
          <li><img class="h-8" src="./img/Navbar/avatar.jpg" alt="" /></li>
        </ul>
      </nav>
    </header>
  </body>

https://ithelp.ithome.com.tw/upload/images/20221009/201522517sxcaGPOYr.png
加上各元素的 margin 和 padding

  <body>
    <header class="bg-gray-800">
      <nav class="container flex justify-between py-3.5">
        <ul class="flex">
          <div>
            <img
              class="h-8"
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li class="ml-6">
            <ul class="flex">
              <li><a href="#" class="px-3 py-2">Dashboard</a></li>
              <li><a href="#" class="px-3 py-2 ml-4">Team</a></li>
              <li><a href="#" class="px-3 py-2 ml-4">Projects</a></li>
              <li><a href="#" class="px-3 py-2 ml-4">Calendar</a></li>
            </ul>
          </li>
        </ul>
        <ul class="flex ml-6">
          <li>
            <button type="button" class="p-1">
              <i class="fa-regular fa-bell"></i>
            </button>
          </li>
          <li><img class="h-8 ml-3" src="./img/Navbar/avatar.jpg" alt="" /></li>
        </ul>
      </nav>
    </header>
  </body>

https://ithelp.ithome.com.tw/upload/images/20221009/20152251ompJ3MGnhk.png
加上字體顏色以及 hover 樣式

  <body>
    <header class="bg-gray-800">
      <nav class="container flex justify-between py-3.5">
        <ul class="flex">
          <div>
            <img
              class="h-8"
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li class="ml-6">
            <ul class="flex">
              <li>
                <a
                  href="#"
                  class="px-3 py-2 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Dashboard</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Team</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Projects</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Calendar</a
                >
              </li>
            </ul>
          </li>
        </ul>
        <ul class="flex ml-6">
          <li>
            <button type="button" class="p-1 text-gray-400 hover:text-white">
              <i class="fa-regular fa-bell"></i>
            </button>
          </li>
          <li><img class="h-8 ml-3" src="./img/Navbar/avatar.jpg" alt="" /></li>
        </ul>
      </nav>
    </header>
  </body>

https://ithelp.ithome.com.tw/upload/images/20221009/20152251deJdpXFvas.png
調整圖片

  <body>
    <header class="bg-gray-800">
      <nav class="container flex justify-between py-3.5">
        <ul class="flex">
          <div>
            <img
              class="h-8"
              src="./img/Navbar/tailwind-mark.svg"
              alt="tailwind"
              title="tailwind"
            />
          </div>
          <li class="ml-6">
            <ul class="flex">
              <li>
                <a
                  href="#"
                  class="px-3 py-2 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Dashboard</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Team</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Projects</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Calendar</a
                >
              </li>
            </ul>
          </li>
        </ul>
        <ul class="flex ml-6">
          <li>
            <button type="button" class="p-1 text-gray-400 hover:text-white">
              <i class="fa-regular fa-bell"></i>
            </button>
          </li>
          <li>
            <img
              class="h-8 ml-3 rounded-full"
              src="./img/Navbar/avatar.jpg"
              alt=""
            />
          </li>
        </ul>
      </nav>
    </header>
  </body>

https://ithelp.ithome.com.tw/upload/images/20221009/20152251dVKiy8PgdX.png
發現 nav 的文字好像沒有垂直置中,針對 ul 標籤做細微調整

            <ul class="flex items-center h-full">
              <li>
                <a
                  href="#"
                  class="px-3 py-2 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Dashboard</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Team</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Projects</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="px-3 py-2 ml-4 text-gray-300 rounded-md hover:text-white hover:bg-gray-700"
                  >Calendar</a
                >
              </li>
            </ul>

最終成品~
https://ithelp.ithome.com.tw/upload/images/20221009/20152251ooaIL3Qmk5.png


tailwind 學習時搭配實作可以有效掌握哦!鼓勵大家一起將學習到的技能作簡單的輸出~/images/emoticon/emoticon12.gif


上一篇
Day 23:資料輸出【Tailwind – input 篇】
下一篇
Day 25:建立炫砲按鈕【Tailwind – 實作元件(二)】
系列文
【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言