自适应页头
header页头(header)由三部分构成分别是Logo区域、搜索区域、导航区域
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!--header-->
<header class="p-4 pb-0 border-b shadow-lg bg-gray-100 md:flex md:items-center md:justify-between md:pb-4">
<!--logo-->
<div class="mb-4 flex items-center justify-between md:mb-0">
<h1 class="leading-none text-2xl text-gray-darkest">
<a href="@" class="no-underline text-gray-darkest hover:text-black">标题</a>
</h1>
<!--bar-->
<a href="#" class="text-black md:hidden hover:text-orange">
<i class="fa fa-2x fa-bars"></i>
</a>
</div>
<!--search-->
<form action="get" class="mb-4 w-full md:mb-0 md:w-1/4">
<label for="search" class="hidden">搜索</label>
<input type="text" class="p-2 border rounded-lg w-full bg-grey-lightest focus:border-orange focus:shadow-inner" placeholder="搜索"/>
<button class="hidden">确定</button>
</form>
<!--nav-->
<nav>
<ul class="list-reset md:flex md:items-center">
<li class="md:ml-4">
<a href="#" class="block py-2 text-grey-darkest no-underline md:border-none md:p-0 hover:underline">菜单</a>
</li>
<li class="md:ml-4">
<a href="#" class="block border-t py-2 no-underline text-grey-darkest hover:underline hover:text-black md:p-0 md:border-none">菜单</a>
</li>
<li class="md:ml-4">
<a href="#" class="block border-t py-2 no-underline text-grey-darkest hover:underline hover:text-black md:p-0 md:border-none">菜单</a>
</li>
</ul>
</nav>
</header>
源码效果查看
https://codepen.io/junchow/pen/BajaeWV?editors=1000
网友评论