英文:
Hamburger icon not clickable above relative positioned elements
问题
我正在处理一个网站,并遇到了一个小问题。一切都很正常,但当粘性导航栏位于相对定位的元素(如div-block)之上时,汉堡图标停止工作或无法点击。我正在使用Tailwindcss和一个非常简单的js脚本。希望有人可以帮助我解决这个问题。
以下是导航栏的代码:
<!-- 汉堡图标菜单栏 -->
<div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow">
<button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
<span>
<span class="block bg-black w-8 h-0.5 mb-1 "></span>
<span class="block bg-black w-8 h-0.5 my-1"></span>
<span class="block bg-black w-8 h-0.5 mt-1"></span>
</span>
</button>
<a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif" href="#">Jetzt anfragen!</a>
</div>
<div class="navbar-menu relative z-50 hidden">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
<!-- 移动端侧边菜单 -->
<nav class="fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto">
<div class="flex items-center mb-8">
<button class="navbar-close h-8">
<span class="block">
<span class="block bg-black w-8 h-0.5 rotate-45 translate-y-1"></span>
<span class="block opacity-0 bg-black w-8 h-0.5"></span>
<span class="block bg-black w-8 h-0.5 -rotate-45 "></span>
</span>
</button>
</div>
<div>
<ul class="flex flex-col justify-center items-center">
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Home</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">About Us</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Services</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Pricing</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Contact</a>
</li>
</ul>
</div>
<div class="mt-20">
<p class="my-4 text-xs text-center text-gray-800">
<span class="block my-3"><a href="tel:+12344567">Tel.: +12345678</a></span>
<span class="block my-3"><a href="mailto:info@xyz.de?subject=Hochzeitsplanner gesucht">Email: info@xyz.de</a></span>
</p>
<div class="pt-6 ">
<a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md" href="#">Jetzt anfragen!</a>
</div>
</div>
</nav>
</div>
<!-- 头部 -->
<header class="flex flex-col justify-center items-center bg-white">
<div>
<img class="w-52 h-52 lg:w-80 lg:h-80" src="./assets/img/xyz.png" alt="Logo">
</div>
<div class="flex justify-center gap-8 pt-4 pb-8">
<a href="#"><img src="./assets/img/facebook.png" alt="Facebook" height="20px" width="20px"></a>
<a href="#"><img src="./assets/img/twitter.png" alt="Twitter" height="20px" width="20px"></a>
<a href="#"><img src="./assets/img/instagram.png" alt="Instagram" height="20px" width="20px"></a>
<a href="#"><img src="./assets/img/pinterest.png" alt="Pinterest" height="20px" width="20px"></a>
</div>
</header>
<!-- 桌面菜单 -->
<nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow">
<ul class=" absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Home</a></li>
<li class="text-gray-300"></li>
<li><a class="text-sm text-blue-600 font-bold" href="#">About Us</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Services</a></li>
<li class="text-gray-300">
<details>
<summary>英文:</summary>
I am working on a website and ran into a little problem. Everything works nice but the hamburger icon stops to work or is not clickable when the sticky navbar is above a relative positioned element like a div-block. I am using Tailwindcss and a very simple js script. I hope somebody can help me with that.
Here the navbar code:
<!-- Hambuger Icon Manu Balken-->
<div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow">
<button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
<span>
<span class="block bg-black w-8 h-0.5 mb-1 "></span>
<span class="block bg-black w-8 h-0.5 my-1"></span>
<span class="block bg-black w-8 h-0.5 mt-1"></span>
</span>
</button>
<a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif"
href="#">Jetzt anfragen!</a>
</div>
<div class="navbar-menu relative z-50 hidden">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
<!--mobile side menu-->
<nav
class="fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto">
<div class="flex items-center mb-8">
<button class="navbar-close h-8">
<span class="block">
<span class="block bg-black w-8 h-0.5 rotate-45 translate-y-1"></span>
<span class="block opacity-0 bg-black w-8 h-0.5"></span>
<span class="block bg-black w-8 h-0.5 -rotate-45 "></span>
</span>
</button>
</div>
<div>
<ul class="flex flex-col justify-center items-center">
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">Home</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">About Us</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">Services</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">Pricing</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded"
href="#">Contact</a>
</li>
</ul>
</div>
<div class="mt-20">
<p class="my-4 text-xs text-center text-gray-800">
<span class="block my-3"><a href="tel:+12344567">Tel.: +12345678</a></span>
<span class="block my-3"><a
href="mailto:info@xyz.de?subject=Hochzeitsplanner gesucht">Email:
info@xyz.de</a></span>
</p>
<div class="pt-6 ">
<a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md"
href="#">Jetzt anfragen!</a>
</div>
</div>
</nav>
</div>
<!---- HEADER-->
<header class="flex flex-col justify-center items-center bg-white">
<div class="">
<img class=" w-52 h-52 lg:w-80 lg:h-80" src="./assets/img/xyz.png"
alt="Logo">
</div>
<div class="flex justify-center gap-8 pt-4 pb-8">
<a href="#"><img src="./assets/img/facebook.png" alt="Facebook" height="20px" width="20px"></a>
<a href="#"><img src="./assets/img/twitter.png" alt="Twitter" height="20px" width="20px"></a>
<a href="#"><img src="./assets/img/instagram.png" alt="Instagram" height="20px" width="20px"></a>
<a href="#"><img src="./assets/img/pinterest.png" alt="Pinterest" height="20px" width="20px"></a>
</div>
</header>
<!---Desktop Menu-->
<nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow">
<ul
class=" absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Home</a></li>
<li class="text-gray-300">
</li>
<li><a class="text-sm text-blue-600 font-bold" href="#">About Us</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Services</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Pricing</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Contact</a></li>
</ul>
<a class="hidden lg:inline-block lg:ml-auto lg:mr-3 py-2 px-6 bg-gray-200 hover:bg-gray-100 text-sm text-gray-900 font-bold rounded-sm transition duration-200"
href="#">Jetzt anfragen!</a>
<a class="hidden lg:inline-block py-2 px-6 bg-blue-500 hover:bg-blue-600 text-sm text-white font-bold rounded-xl transition duration-200"
href="#">Sign up</a>
</nav>
And here's the js script:
document.addEventListener('DOMContentLoaded', function () {
// open
const burger = document.querySelectorAll('.navbar-burger');
const menu = document.querySelectorAll('.navbar-menu');
if (burger.length && menu.length) {
for (var i = 0; i < burger.length; i++) {
burger[i].addEventListener('click', function () {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
// close
const close = document.querySelectorAll('.navbar-close');
const backdrop = document.querySelectorAll('.navbar-backdrop');
if (close.length) {
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function () {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
if (backdrop.length) {
for (var i = 0; i < backdrop.length; i++) {
backdrop[i].addEventListener('click', function () {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
});
I tried different z-values but without any effect. It works once I remove the relative class from one of the div blocks, but I definitely need that to position some elements. Something about the overlapping creates problems.
</details>
# 答案1
**得分**: 0
考虑对具有`position: sticky`的元素应用正值的`z-index`,以使它们在堆叠顺序中显示在之后出现的任何`position: relative`元素之上。例如,我已经向具有`sticky`的两个元素添加了`z-50`,并根据您的描述添加了一个半透明的`relative`定位的`<div>`,以演示这样可以解决问题。
```html
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
document.addEventListener('DOMContentLoaded', function() {
// open
const burger = document.querySelectorAll('.navbar-burger');
const menu = document.querySelectorAll('.navbar-menu');
if (burger.length && menu.length) {
for (var i = 0; i < burger.length; i++) {
burger[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
// close
const close = document.querySelectorAll('.navbar-close');
const backdrop = document.querySelectorAll('.navbar-backdrop');
if (close.length) {
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
if (backdrop.length) {
for (var i = 0; i < backdrop.length; i++) {
backdrop[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
});
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow z-50">
<button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
<span>
<span class="block bg-black w-8 h-0.5 mb-1"></span>
<span class="block bg-black w-8 h-0.5 my-1"></span>
<span class="block bg-black w-8 h-0.5 mt-1"></span>
</span>
</button>
<a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif" href="#">Jetzt anfragen!</a>
</div>
<div class="navbar-menu relative z-50 hidden">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
<!--mobile side menu-->
<nav class="fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto">
<div class="flex items-center mb-8">
<button class="navbar-close h-8">
<span class="block">
<span class="block bg-black w-8 h-0.5 rotate-45 translate-y-1"></span>
<span class="block opacity-0 bg-black w-8 h-0.5"></span>
<span class="block bg-black w-8 h-0.5 -rotate-45"></span>
</span>
</button>
</div>
<div>
<ul class="flex flex-col justify-center items-center">
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Home</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">About Us</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Services</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Pricing</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Contact</a>
</li>
</ul>
</div>
<div class="mt-20">
<p class="my-4 text-xs text-center text-gray-800">
<span class="block my-3"><a href="tel:+12344567">Tel.: +12345678</a></span>
<span class="block my-3"><a href="mailto:info@xyz.de?subject=Hochzeitsplanner gesucht">Email: info@xyz.de</a></span>
</p>
<div class="pt-6">
<a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md" href="#">Jetzt anfragen!</a>
</div>
</div>
</nav>
</div>
<!-- HEADER-->
<header class="flex flex-col justify-center items-center bg-white">
<div>
<img class="w-52 h-52 lg:w-80 lg:h-80" src="https://picsum.photos/1000/1000" alt="Logo" />
</div>
<div class="flex justify-center gap-8 pt-4 pb-8">
<a href="#"><img src="https://picsum.photos/20/20" alt="Facebook" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?" alt="Twitter" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?0" alt="Instagram" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?1" alt="Pinterest" height="20px" width="20px" /></a>
</div>
</header>
<!-- Desktop Menu -->
<nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow z-50">
<ul class
<details>
<summary>英文:</summary>
Consider applying a positive `z-index` to the elements that have `position: sticky` so that they appear higher in the stacking order than any `position: relative` elements that appear afterwards in the source order. For example, I have added `z-50` to the two elements that have `sticky`, alongside a translucent `relative`-positioned `<div>` as per your description to demonstrate that this fixes the issue.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
document.addEventListener('DOMContentLoaded', function() {
// open
const burger = document.querySelectorAll('.navbar-burger');
const menu = document.querySelectorAll('.navbar-menu');
if (burger.length && menu.length) {
for (var i = 0; i < burger.length; i++) {
burger[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
// close
const close = document.querySelectorAll('.navbar-close');
const backdrop = document.querySelectorAll('.navbar-backdrop');
if (close.length) {
for (var i = 0; i < close.length; i++) {
close[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
if (backdrop.length) {
for (var i = 0; i < backdrop.length; i++) {
backdrop[i].addEventListener('click', function() {
for (var j = 0; j < menu.length; j++) {
menu[j].classList.toggle('hidden');
}
});
}
}
});
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="sticky top-0 lg:hidden px-4 py-4 flex justify-between items-center bg-white opacity-95 drop-shadow z-50">
<button class="block navbar-burger flex items-center text-blue-600 pt-5 pl-2 pb-2">
<span>
<span class="block bg-black w-8 h-0.5 mb-1"></span>
<span class="block bg-black w-8 h-0.5 my-1"></span>
<span class="block bg-black w-8 h-0.5 mt-1"></span>
</span>
</button>
<a class="block px-4 py-4 leading-loose text-xs text-center leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md font-serif" href="#">Jetzt anfragen!</a>
</div>
<div class="navbar-menu relative z-50 hidden">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
<!--mobile side menu-->
<nav class="fixed top-0 left-0 bottom-0 flex flex-col w-screen md:w-5/6 md:w-4/6 py-6 px-6 bg-white border-r font-serif overflow-y-auto">
<div class="flex items-center mb-8">
<button class="navbar-close h-8">
<span class="block">
<span class="block bg-black w-8 h-0.5 rotate-45 translate-y-1"></span>
<span class="block opacity-0 bg-black w-8 h-0.5"></span>
<span class="block bg-black w-8 h-0.5 -rotate-45"></span>
</span>
</button>
</div>
<div>
<ul class="flex flex-col justify-center items-center">
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Home</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">About Us</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Services</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Pricing</a>
</li>
<li class="mb-1">
<a class="block p-4 text-sm font-serif text-black hover:bg-gray-50 hover:text-gray-600 rounded" href="#">Contact</a>
</li>
</ul>
</div>
<div class="mt-20">
<p class="my-4 text-xs text-center text-gray-800">
<span class="block my-3"><a href="tel:+12344567">Tel.: +12345678</a></span>
<span class="block my-3"><a href="mailto:info@xyz.de?subject=Hochzeitsplanner gesucht">Email: info@xyz.de</a></span>
</p>
<div class="pt-6">
<a class="block px-4 py-3 mb-3 leading-loose text-xs text-center font-semibold leading-none hover:border border hover:border-black hover:bg-white hover:text-black bg-black text-white rounded-md" href="#">Jetzt anfragen!</a>
</div>
</div>
</nav>
</div>
<!---- HEADER-->
<header class="flex flex-col justify-center items-center bg-white">
<div class="">
<img class="w-52 h-52 lg:w-80 lg:h-80" src="https://picsum.photos/1000/1000" alt="Logo" />
</div>
<div class="flex justify-center gap-8 pt-4 pb-8">
<a href="#"><img src="https://picsum.photos/20/20" alt="Facebook" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?" alt="Twitter" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?0" alt="Instagram" height="20px" width="20px" /></a>
<a href="#"><img src="https://picsum.photos/20/20?1" alt="Pinterest" height="20px" width="20px" /></a>
</div>
</header>
<!---Desktop Menu-->
<nav class="hidden sticky top-0 px-4 pt-4 pb-5 lg:flex justify-between items-center bg-white drop-shadow z-50">
<ul class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Home</a></li>
<li class="text-gray-300"></li>
<li><a class="text-sm text-blue-600 font-bold" href="#">About Us</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Services</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Pricing</a></li>
<li class="text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</li>
<li><a class="text-sm text-gray-400 hover:text-gray-500" href="#">Contact</a></li>
</ul>
<a class="hidden lg:inline-block lg:ml-auto lg:mr-3 py-2 px-6 bg-gray-200 hover:bg-gray-100 text-sm text-gray-900 font-bold rounded-sm transition duration-200" href="#">Jetzt anfragen!</a>
<a class="hidden lg:inline-block py-2 px-6 bg-blue-500 hover:bg-blue-600 text-sm text-white font-bold rounded-xl transition duration-200" href="#">Sign up</a>
</nav>
<div class="h-[200vh] relative bg-red-500/50">
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论