组件 页眉 材料设计商业头部

材料设计商业头部

灵感来自Material Design的简单头部组件,配有互补色彩方案,适用于商业网站。响应式设计,支持深色主题。

预览

HTML 代码

<header class="bg-blue-500 text-white py-4 shadow-md dark:bg-gray-800">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-xl font-bold">Business Name</div>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Home</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">About</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Services</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

相关组件

暗三元简单商业头部

适用于商业网站的响应式头部组件,支持黑暗模式

打开

拟构标头组件

一个简单且响应式的 header 组件,专为具有拟物化风格的电子商务网站设计,使用灰度配色方案并支持深色模式。

打开

头部组件

一个支持暗模式的响应式头部组件,包含了一个徽标、导航链接和一个号召性操作按钮。设计使用深色背景以减少眼睛疲劳。

打开