自己动手搭建导航 Header

发布于 2024-06-05 21:19:57 字数 4130 浏览 0 评论 0 收藏 0

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

准备好…

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

创建一个新的 Header 组件。在位于 <header> 元素内的 <nav> 元素中导入并使用你现有的 Navigation.astro 组件。
给我看看代码！
在 src/components/ 下创建一个名为 Header.astro 的文件。
src/components/Header.astro
```
---
import Navigation from './Navigation.astro';
---
<header>
 <nav>
   <Navigation />
 </nav>
</header>
```

亲自尝试 - 更新你的页面

在每个页面中，使用你的新 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>

检查你的浏览器中的预览，并验证你的 Header 是否显示在每个页面上。虽然它还没有显示出不同的样式，但是如果你使用开发者工具检查预览页面，你会看到你的导航链接周围现在有 <header> 和 <nav> 等元素。

添加响应式样式

在 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>
```

将下面的 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 查询，你的页首对于屏幕尺寸是响应式的。

任务清单

我可以使用 CSS 为我的网站添加响应式元素。

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

自己动手搭建导航 Header

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

亲自尝试 - 更新你的页面

添加响应式样式

任务清单

相关资源

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

自己动手搭建导航 Header

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

亲自尝试 - 更新你的页面

添加响应式样式

任务清单

相关资源

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。