域名 AXUM.RS 将于 2025 年 10 月到期。我们无意再对其进行续费,如果你有意接续这个域名,请与我们取得联系。
  • AXUM.RS 现仅需人民币 3000 元(大写:叁仟元整。接受适度议价
  • 按照行业规则,AXUM.RS 到期后,大概率会进入长时间的赎回期,该期间内,如果你想拥有该域名,将要付出高额的费用
  • 我们已启用 AXUM.EU.ORG 域名,并将持续运营
  • 仅接受微信或支付宝交易
如果你对 AXUM.RS 有兴趣,请和我们进行联系:

Tailwind: 撸一个响应式的纯CSS导航栏

你可以点击这里查看代码和效果:

话不多说,直接开撸:

<div class="bg-white shadow" id="navbar-cta">
  <nav class="group container relative mx-auto flex items-center justify-between space-x-4 py-5 px-3" id="navbar">
    <a href="https://axum.rs" class="flex items-center justify-start space-x-2" id="logo">
      <img src="https://file.axum.rs/asset/logo.png" alt="LOGO" class="block w-6 object-cover" />
      <h2>AXUM中文网</h2>
    </a>

    <ul id="navbar-menu" class="absolute right-1 top-[4.05rem] z-10 hidden w-full flex-col items-center justify-center bg-white px-3 shadow-md group-hover:flex md:static md:flex md:w-auto md:flex-row md:space-y-0 md:space-x-4 md:shadow-none">
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">首页</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">专题</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">标签</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">文章</a></li>
      <li class="px-3 py-1 md:p-0"><a href="#" class="block hover:text-red-600 hover:underline hover:decoration-red-600">关于</a></li>
    </ul>

    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
    </svg>
  </nav>
</div>

  • #navbar-cta:导航栏容器,设置了白色背景和阴影
  • #navbar
    • group:启用分组功能
    • container:使用容器类
    • relative:相对定位
    • mx-auto:水平居中
    • flex items-center justify-between space-x-4:flex水平布局,子元素在水平方向两侧分布并垂直居中,水平间隙为4
    • py-5 px-3:垂直内边距为5,水平内边距为3
  • #navbar-menu
    • absolute right-1 top-[4.05rem]
      • 绝对定位
      • 右方1个单位
      • 上方4.05rem。tailwind 允许这种直接传递值的方式。当 tailwind 预置的值不能满足需求时,可以用这种方式
    • z-10z-index 为 10
    • hidden:隐藏元素
    • w-full:宽度占满父容器
    • flex-col:flex 垂直布局
    • items-center justify-center:垂直居中,居中分布
    • bg-white px-3 shadow-md:白色背景,水平方向内边距为3,大小为md的阴影
    • group-hover:flex:监听分组的 hover 事件,使用 flex 布局
    • md:static md:flex md:w-auto md:flex-row md:space-y-0 md:space-x-4 md:shadow-none:在 md 断点设置:
      • 静态定位(top/left/right/bottom将失效)
      • flex 布局
      • flex 水平布局
      • 垂直间隙为0
      • 水平间隙为4
      • 去除阴影
  • #navbar-menu > li:分别设置垂直和水平方向的内边距,在 md 断点取消所有内边距
  • #navbar-menu > li > a:显示为块级元素;鼠标悬停时:
    • 设置文字颜色为600号红色
    • 显示下划线
    • 将下划线的颜色设置为600号红色(如果和文字颜色,这个可以不设置,本如本例)
  • svg:设置高度和宽度;在 md 断点隐藏
  • group:启用分组功能
  • container:使用容器类
  • relative:相对定位
  • mx-auto:水平居中
  • flex items-center justify-between space-x-4:flex水平布局,子元素在水平方向两侧分布并垂直居中,水平间隙为4
  • py-5 px-3:垂直内边距为5,水平内边距为3
  • absolute right-1 top-[4.05rem]
    • 绝对定位
    • 右方1个单位
    • 上方4.05rem。tailwind 允许这种直接传递值的方式。当 tailwind 预置的值不能满足需求时,可以用这种方式
  • z-10z-index 为 10
  • hidden:隐藏元素
  • w-full:宽度占满父容器
  • flex-col:flex 垂直布局
  • items-center justify-center:垂直居中,居中分布
  • bg-white px-3 shadow-md:白色背景,水平方向内边距为3,大小为md的阴影
  • group-hover:flex:监听分组的 hover 事件,使用 flex 布局
  • md:static md:flex md:w-auto md:flex-row md:space-y-0 md:space-x-4 md:shadow-none:在 md 断点设置:
    • 静态定位(top/left/right/bottom将失效)
    • flex 布局
    • flex 水平布局
    • 垂直间隙为0
    • 水平间隙为4
    • 去除阴影
  • 绝对定位
  • 右方1个单位
  • 上方4.05rem。tailwind 允许这种直接传递值的方式。当 tailwind 预置的值不能满足需求时,可以用这种方式
  • 静态定位(top/left/right/bottom将失效)
  • flex 布局
  • flex 水平布局
  • 垂直间隙为0
  • 水平间隙为4
  • 去除阴影
要查看完整内容,请先登录