nextjs 实战开发3 Mercury 实现logo和标题部分

书接上回，上回我们以及实现了基础布局，接下来我们这章主要讲如何实现logo图标和标题。
上回修改的内容如下：

export default function Header() {
    return (
        <header className="fixed top-0 left-0 right-0 bg-white z-10 shadow-md">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center py-4">
                    <p>这里是头文件</p>
                    <p>这里是头文件</p>
                    <p>这里是头文件</p>
                </div>
            </div>
        </header>
    );
}

实现logo图标

图标和标题是一个整体，因此我们要使用一个div进行包裹起来，将其放在一个弹性容器当中，并且文字居中，使用Image进行logo显示,logo图标最好使用矢量图，这样不会破坏页面的原来颜色，logo要放在public文件夹里面。

<div className="flex items-center">
    <Image
        src="/logo.png"
        alt="logo"
        width={40}
        height={40}
    />
    <span className="ml-2 text-xl font-bold">
        Mercury DNS System
    </span>
</div>

我们继续优化，让用户点击图标之后跳转回主页的功能，这时候我们使用Link进行包裹即可。

提示

1. Image 组件 和 普通的 <img> 标签的区别？

   • 自动图片优化
   • 自动响应式处理
   • 懒加载
   • 防止布局偏移

2. span 和 p 的区别 ？

   • <span>这是一个行内元素</span>``<span>可以并排显示</span>
   • <p>这是一个块级元素</p> <p>会独占一行</p>

实现超链接和按钮

由于超链接和按钮在页面的右边，跟logo不是一体，因此我们需要创建一个新的div进行包裹。

<div className="hidden md:flex items-center space-x-4">
    <Link
        href="/blog"
        className="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100"
    >
        Blog
    </Link>
    <Link
        href="/about"
        className="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100"
    >
        About Us
    </Link>
</div>

这个div的className意思是，默认情况下隐藏元素中等屏幕断点（768px及以上）显示，给直接子元素之间添加水平间距，4 表示 1rem (16px) 的间距。

然后Link里面的样式意思是一个带有适当内边距的按钮/链接，圆角边框使外观更柔和，默认显示中等灰度的文字，鼠标悬停时文字颜色变深，背景色变浅灰。

添加按钮组件

<button
    className="px-3 py-2 rounded-md text-sm font-medium bg-blue-500 text-white hover:bg-blue-600"
>
    Login
</button>

这样我们就完成了，整个header的静态布局啦，下一章节将会写如何实现google 单点登录，敬请期待吧。

如果喜欢我的文章请百度搜索：曲速引擎 warp drive csdn 在首页找到我的技术博客访问地址，所有内容都将在我的技术博客上展示，比起其他平台更容易搜索完整版本。

更详细内容查看

独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号