Administrator
发布于 2024-11-02 / 17 阅读
0
0

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” 微信公众号


评论