跳转到内容

自己动手搭建导航 Header

由于你的网站将在不同的设备上进行浏览,是时候创建一个能够适应多个屏幕尺寸的页面导航了!

准备好…

  • 为你的网站创建一个包含导航组件的 Header
  • 使导航组件具有响应式能力

亲自尝试 - 构建一个新的 Header 组件

段落标题 亲自尝试 - 构建一个新的 Header 组件
  1. 创建一个新的 Header 组件。在位于 <header> 元素内的 <nav> 元素中导入并使用你现有的 Navigation.astro 组件。

    给我看看代码!

    src/components/ 下创建一个名为 Header.astro 的文件。

    src/components/Header.astro
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
    <nav>
    <Navigation />
    </nav>
    </header>

亲自尝试 - 更新你的页面

段落标题 亲自尝试 - 更新你的页面
  1. 在每个页面中,使用你的新 Header 组件替换现有的 <Navigation/> 组件。

    给我看看代码!
    src/pages/index.astro
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "首页";
    ---
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
    </head>
    <body>
    <Navigation />
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
    </body>
    </html>
  2. 检查你的浏览器中的预览,并验证你的 Header 是否显示在每个页面上。虽然它还没有显示出不同的样式,但是如果你使用开发者工具检查预览页面,你会看到你的导航链接周围现在有 <header><nav> 等元素。

  1. Navigation.astro 中使用 CSS 类来控制你的导航链接。将现有的导航链接包裹在一个带有类名 nav-links<div> 元素中。

    src/components/Navigation.astro
    ---
    ---
    <div class="nav-links">
    <a href="/">首页</a>
    <a href="/about/">关于</a>
    <a href="/blog/">博客</a>
    </div>
  2. 将下面的 CSS 样式复制到 global.css 中。这些样式会:

    • 为移动设备样式和定位导航链接
    • 包括一个 expanded 类,用于在移动设备上显示或隐藏链接
    • 使用 @media 查询来定义不同屏幕尺寸下的样式
    src/styles/global.css
    html {
    background-color: #f1f5f9;
    font-family: sans-serif;
    }
    body {
    margin: 0 auto;
    width: 100%;
    max-width: 80ch;
    padding: 1rem;
    line-height: 1.5;
    }
    * {
    box-sizing: border-box;
    }
    h1 {
    margin: 1rem 0;
    font-size: 2.5rem;
    }
    /* 导航样式 */
    .nav-links {
    width: 100%;
    top: 5rem;
    left: 48px;
    background-color: #ff9776;
    display: none;
    margin: 0;
    }
    .nav-links a {
    display: block;
    text-align: center;
    padding: 10px 0;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    }
    .nav-links a:hover,
    .nav-links a:focus {
    background-color: #ff9776;
    }
    .expanded {
    display: unset;
    }
    @media screen and (min-width: 636px) {
    .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
    }
    .nav-links a {
    display: inline-block;
    padding: 15px 20px;
    }
    }

调整窗口大小,查看在不同屏幕宽度下应用的不同样式。现在,通过使用 @media 查询,你的页首对于屏幕尺寸是响应式的

贡献

你有什么想法?

社区