跳至内容链接

一个3D设计风格的跳转至内容链接组件，采用大地色调的配色方案，适用于复杂度适中的电子商务。它包括响应式设计和黑暗主题支持。

预览

HTML 代码

<a href="#maincontent" class="absolute top-4 left-4 z-50 px-6 py-3 bg-green-700 text-white text-lg font-semibold rounded-xl shadow-lg transform transition-transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50 dark:bg-green-900 dark:hover:bg-green-800 dark:focus:ring-green-700">Skip to main content</a>

相关组件

跳至内容链接组件

一个视觉上吸引人的 3D 风格 Skip to Content 链接，可帮助用户绕过社交媒体界面上的导航菜单。该组件使用互补配色方案（蓝色和橙色），并通过阴影和变换实现 3D 效果。具有响应式设计和深色主题支持。该链接在聚焦或激活时固定在视区的左上角，使其易于键盘导航，同时在不使用时保持不显眼。

打开

跳至内容链接组件

一个视觉上引人入胜的“跳到内容”链接组件，专为仪表板设计，侧重于微交互，通过 Tailwind CSS 利用互补配色方案和深色模式支持。

打开

跳至内容链接

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

打开