[英]Fullscreen of nav + cover
I need to have a screen that has top bar as a menu, that is a ul
of my-10
, and the rest of the screen is a div
with a background image.我需要一个屏幕,顶部栏作为菜单,即
my-10
的ul
,屏幕的其余部分是带有背景图像的div
。 Together they should cover h-screen
.他们应该一起覆盖
h-screen
。
What classes should I give to the nav, and what to the div
containing the image?我应该给导航什么类,给包含图像的
div
什么?
Thanks谢谢
You can achieve this by display type of flex
.您可以通过显示类型来实现此目的
flex
。
For your scenario:对于您的场景:
Use a nav
and a div
which is inside the parent element of flex flex-col h-screen
And then give following classes for nav
and div
使用
flex flex-col h-screen
的父元素内的nav
和div
然后为nav
和div
提供以下类
nav -> flex
div -> flex-1
Try the following simple code:试试下面的简单代码:
<div className="flex flex-col h-screen">
<nav class="flex items-center justify-between bg-white h-20 shadow-2xl">
<div class="logo">
<h1 class="text-black ml-4 cursor-pointer text-2xl">Logo here</h1>
</div>
<ul class="flex">
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-home"></i> Home
</a>
</li>
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-question"></i> About
</a>
</li>
<li>
<a
class="text-white mr-4 bg-gray-500 pt-4 p-4 pr-5 pl-5 hover:bg-gray-600 transition-all rounded"
href="#"
>
<i class="fas fa-reply"></i> Contact
</a>
</li>
</ul>
</nav>
<div className="flex-1 bg-black">
<img
src="https://mdbootstrap.com/img/new/slides/041.jpg"
className="min-w-full min-h-full"
alt="..."
/>
</div>
</div>
Output:输出:
For more information about the flex
class refer https://tailwindcss.com/docs/flex有关
flex
类的更多信息,请参阅https://tailwindcss.com/docs/flex
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.