自己动手搭建导航 Header
由于你的网站将在不同的设备上进行浏览,是时候创建一个能够适应多个屏幕尺寸的页面导航了!
准备好…
- 为你的网站创建一个包含导航组件的 Header
- 使导航组件具有响应式能力
亲自尝试 - 构建一个新的 Header 组件
段落标题 亲自尝试 - 构建一个新的 Header 组件-
创建一个新的 Header 组件。在位于
<header>
元素内的<nav>
元素中导入并使用你现有的Navigation.astro
组件。给我看看代码!
在
src/components/
下创建一个名为Header.astro
的文件。
亲自尝试 - 更新你的页面
段落标题 亲自尝试 - 更新你的页面-
在每个页面中,使用你的新 Header 组件替换现有的
<Navigation/>
组件。给我看看代码!
-
检查你的浏览器中的预览,并验证你的 Header 是否显示在每个页面上。虽然它还没有显示出不同的样式,但是如果你使用开发者工具检查预览页面,你会看到你的导航链接周围现在有
<header>
和<nav>
等元素。
添加响应式样式
段落标题 添加响应式样式-
在
Navigation.astro
中使用 CSS 类来控制你的导航链接。将现有的导航链接包裹在一个带有类名nav-links
的<div>
元素中。 -
将下面的 CSS 样式复制到
global.css
中。这些样式会:- 为移动设备样式和定位导航链接
- 包括一个
expanded
类,用于在移动设备上显示或隐藏链接 - 使用
@media
查询来定义不同屏幕尺寸下的样式
首先定义在较小屏幕尺寸上应该渲染的布局!较小的屏幕尺寸需要更简单的布局,然后,调整你的样式以适应较大的设备。如果你先设计复杂情况,那么接下来你反而要努力将其简化。
调整窗口大小,查看在不同屏幕宽度下应用的不同样式。现在,通过使用 @media
查询,你的页首对于屏幕尺寸是响应式的。
任务清单
段落标题 任务清单相关资源
段落标题 相关资源- 基于组件的设计 外部链接
- 语义化的 HTML 标签 外部链接
- 移动优先设计 外部链接