组件 跳至内容链接 跳转到内容链接组件 - 立体感灰度

跳转到内容链接组件 - 立体感灰度

一个简单、响应式的 “跳到内容” 链接,带有灰度的拟物化设计,用于博客内容。包括深色模式支持。

预览

HTML 代码

<a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-gray-200 focus:text-gray-900 focus:px-4 focus:py-2 focus:rounded focus:shadow-lg dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:focus:shadow-xl">Skip to content</a>

<main id="main-content" class="p-4">
  <!-- Your main content goes here -->
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Main Content Area</h1>
  <p class="text-gray-700 dark:text-gray-300">This is the main content of the page. The "Skip to content" link will bring you here.</p>
</main>

相关组件

Skeuomorphic_Autumn_Skip_to_Content_Link

一个简单的拟物化“跳到内容”链接组件,采用秋季配色方案设计,适用于教育平台,通过深色模式支持提供可访问性和响应能力。

打开

跳至内容链接组件

一个简单、可访问的跳到内容链接组件,专为旅行/旅游网站设计,具有棕褐色/棕色配色方案和深色模式支持,以减少眼睛疲劳。

打开

跳至内容链接

用于辅助功能的“跳至内容”链接组件,专为具有灰度配色方案的深色模式仪表板而设计。由于响应式和深色模式样式,它比较复杂。不使用 JavaScript。使用带有 dark: 前缀的 Tailwind CSS 来支持深色主题。

打开