chore(i8n,learn): processed translations (#41197)
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
Randell Dawson
GitHub
@ -29,7 +29,7 @@ assert($('strong').length == 1);
|
||||
assert($('p').children('strong').length == 1);
|
||||
```
|
||||
|
||||
The `strong` tag should wrap around the words `Stanford University`.
|
||||
`strong` 标签的文本应为 `Stanford University`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -31,7 +31,7 @@ dashedName: override-class-declarations-by-styling-id-attributes
|
||||
}
|
||||
```
|
||||
|
||||
**Note:** 无论在 pink-text class 之前或者之后声明，id 选择器的优先级总是高于 class 选择器。
|
||||
**注意：** 无论在 `pink-text` class 之前或者之后声明，`id` 选择器的优先级总是高于 class 选择器。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -19,12 +19,12 @@ dashedName: declare-the-doctype-of-an-html-document
|
||||
|
||||
所有的 HTML 代码都必须位于 `html` 标签中。 其中 `<html>` 位于 `<!DOCTYPE html>` 之后，`</html>` 位于网页的结尾。
|
||||
|
||||
以下是网页结构的一个例子：
|
||||
这是一个网页结构的列子。 你的 HTML 代码会在两个 `html` 标签之间。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Your HTML code goes here -->
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@ -17,21 +17,33 @@ dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
</p>
|
||||
```
|
||||
|
||||
我们来分解一下这个示例：普通文本被包裹在 `p` 元素中，例如
|
||||
`<p> Here's a ... for you to follow. </p>` 然后是 *anchor* 元素 `<a>`（要求有一个结束标签 `</a>`）：
|
||||
`<a> ... </a>` `target` 是一个锚点标签属性，用来指定在哪里打开链接，`_blank` 值指定在一个新的窗口打开链接，`href` 是一个锚点标签属性，包含链接的 URL 地址
|
||||
`<a href="http://freecodecamp.org"> ... </a>`。`a` 元素中的文本，**“链接到 freecodecamp.org”**，叫作 `anchor text`，将显示一个可点击的链接：
|
||||
`<a href=" ... ">link to freecodecamp.org</a>`。 这个示例最后输出的结果像这样：
|
||||
让我们来拆解一下这个例子。 通常，文本是被包裹在 `p` 元素内：
|
||||
|
||||
你可以点击这个 [freecodecamp.org 链接](http://freecodecamp.one)。
|
||||
`<p> Here's a ... for you to follow. </p>`
|
||||
|
||||
接下来是*锚点*元素 `<a>`（它需要结束标签 `</a>`）：
|
||||
|
||||
`<a> ... </a>`
|
||||
|
||||
`target` 锚点元素的一个属性，它用来指定链接的打开方式。 属性值 `_blank` 表示链接会在新标签页打开。 `href` 是锚点元素的另一个属性，它用来指定链接的 URL：
|
||||
|
||||
`<a href="http://freecodecamp.org"> ... </a>`
|
||||
|
||||
`a` 元素内的内容文本 `link to freecodecamp.org` 叫作 `anchor text`（锚文本），会显示为一个可以点击的链接：
|
||||
|
||||
`<a href=" ... ">link to freecodecamp.org</a>`
|
||||
|
||||
此示例的最终输出结果是这样：
|
||||
|
||||
你可以访问 [link to freecodecamp.org](http://freecodecamp.org)。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个新的段落（`p`）标签来包裹 `main` 元素里的 `a` 节点。 新段落应有文本 `View more cat photos`，其中 `cat photos` 是一个链接，其余是纯文本。
|
||||
创建一个新的段落 `p` 元素来包裹 `a` 元素。 新段落标签的内容为 `View more cat photos`，其中 `cat photos` 是一个链接，其余的是纯文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
应包含一个链接到 "`https://freecatphotoapp.com`" 的 `a` 元素。
|
||||
应包含一个链接到 `https://freecatphotoapp.com` 的 `a` 元素。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +52,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素应有锚文本 `cat photos`。
|
||||
`a` 元素的内容文本应为 `cat photos`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -65,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`p` 元素应有文本 `View more`（后面有一个空格）。
|
||||
`p` 元素应该包含文本 `View more`（请注意，more 之后有一个空格）。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -80,7 +92,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素 <em>不</em> 应有文本 `View more`。
|
||||
`a` 元素中 <em>不</em> 应包含文本 `View more`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,33 +8,33 @@ dashedName: build-a-personal-portfolio-webpage
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：**在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/zNBOYG>。
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/zNBOYG>。
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。 我们不推荐你在这个项目中使用其他技术（比如 jQuery、React、Angular 或 Vue）。 在后续的其他项目中，你将有机会使用像是 React 等其他技术栈。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 祝你编码愉快！
|
||||
|
||||
**需求 1：**此 app 中应存在一个 id 为 `welcome-section` 的欢迎区。
|
||||
**需求 1：** 此 app 中应存在一个 id 为 `welcome-section` 的欢迎区。
|
||||
|
||||
**需求 2：**欢迎区内应存在一个包含标题文本的 `h1` 元素。
|
||||
**需求 2：** 欢迎区内应存在一个包含标题文本的 `h1` 元素。
|
||||
|
||||
**需求 3：**此 app 中应存在一个 id 为 `projects` 的项目展示区。
|
||||
**需求 3：** 此 app 中应存在一个 id 为 `projects` 的项目展示区。
|
||||
|
||||
**需求 4：**项目展示区应至少包含一个 class 为 `project-tile` 的元素来展示项目。
|
||||
**需求 4：** 项目展示区应至少包含一个 class 为 `project-tile` 的元素来展示项目。
|
||||
|
||||
**需求 5：**项目展示区应至少包含一个链接到项目的超链接元素。
|
||||
**需求 5：** 项目展示区应至少包含一个链接到项目的超链接元素。
|
||||
|
||||
**需求 6：**此 app 中应存在一个 id 为 `navbar` 的导航栏。
|
||||
**需求 6：** 此 app 中应存在一个 id 为 `navbar` 的导航栏。
|
||||
|
||||
**需求 7：**导航栏中应包含一个可以滚动到本页面不同区域的链接。
|
||||
**需求 7：** 导航栏中应包含一个可以滚动到本页面不同区域的链接。
|
||||
|
||||
**需求 8：**此 app 中应包含一个 id 为 `profile-link` 的链接。 点击这个链接时，它应在浏览器的新标签页内打开我的 GitHub 或者 FCC 作品集页面。
|
||||
**需求 8：** 此 app 中应包含一个 id 为 `profile-link` 的链接。 点击这个链接时，它应在浏览器的新标签页内打开我的 GitHub 或者 FCC 作品集页面。
|
||||
|
||||
**需求 9：**在此 app 中，应至少使用一次媒体查询。
|
||||
**需求 9：** 在此 app 中，应至少使用一次媒体查询。
|
||||
|
||||
**需求 10：**欢迎区的高度应该与视口的高度保持一致。
|
||||
**需求 10：** 欢迎区的高度应该与视口的高度保持一致。
|
||||
|
||||
**需求 11：**导航栏应始终保持在视口顶部。
|
||||
**需求 11：** 导航栏应始终保持在视口顶部。
|
||||
|
||||
你可以通过 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目， 也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
|
||||
@ -8,41 +8,41 @@ dashedName: build-a-product-landing-page
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：**在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/RKRbwL>。
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/RKRbwL>。
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。 我们不推荐你在这个项目中使用其他技术（比如 jQuery、React、Angular 或 Vue）。 在后续的其他项目中，你将有机会使用像是 React 等其他技术栈。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 祝你编码愉快！
|
||||
|
||||
**需求 1：**产品登陆页应存在 `id="header"` 的 `header` 元素。
|
||||
**需求 1：** 产品登陆页应存在 `id="header"` 的 `header` 元素。
|
||||
|
||||
**需求 2：**在 `header` 元素内应存在 `id="header-img"` 的图像， 这里通常用来放置公司的 logo。
|
||||
**需求 2：** 在 `header` 元素内应存在 `id="header-img"` 的图像， 这里通常用来放置公司的 logo。
|
||||
|
||||
**需求 3：**在 `#header` 元素内，应存在一个 `id="nav-bar"` 的 `nav` 元素。
|
||||
**需求 3：** 在 `#header` 元素内，应存在一个 `id="nav-bar"` 的 `nav` 元素。
|
||||
|
||||
**需求 4：**`nav` 元素中应至少包含三个 class 为 `nav-link` 且可点击的元素。
|
||||
**需求 4：** `nav` 元素中应至少包含三个 class 为 `nav-link` 且可点击的元素。
|
||||
|
||||
**需求 5：**当点击 `nav` 内的 `.nav-link` 按钮时，应滚动到产品主页上相应的部分。
|
||||
**需求 5：** 当点击 `nav` 内的 `.nav-link` 按钮时，应滚动到产品主页上相应的部分。
|
||||
|
||||
**需求 6：**页面上应存在 `id="video"` 的嵌入式视频播放区域。
|
||||
**需求 6：** 页面上应存在 `id="video"` 的嵌入式视频播放区域。
|
||||
|
||||
**需求 7：**产品登陆页应存在一个 `id="form"` 的 `form` 元素。
|
||||
**需求 7：** 产品登陆页应存在一个 `id="form"` 的 `form` 元素。
|
||||
|
||||
**需求 8：**在表单中，应存在一个 `id="email"` 的 `input` 输入框供用户填写邮箱。
|
||||
**需求 8：** 在表单中，应存在一个 `id="email"` 的 `input` 输入框供用户填写邮箱。
|
||||
|
||||
**需求 9：**`#email` 输入框内应存在描述该区域用途的占位符文字。
|
||||
**需求 9：** `#email` 输入框内应存在描述该区域用途的占位符文字。
|
||||
|
||||
**需求 10：**`#email` 输入框应使用 HTML5 验证来确认输入的内容是否为邮箱。
|
||||
**需求 10：** `#email` 输入框应使用 HTML5 验证来确认输入的内容是否为邮箱。
|
||||
|
||||
**需求 11：**在表单中，应存在一个 `id="submit"` 的 `input` 提交按钮。
|
||||
**需求 11：** 在表单中，应存在一个 `id="submit"` 的 `input` 提交按钮。
|
||||
|
||||
**需求 12：**当点击 `#submit` 元素时，应将邮箱信息提交到一个静态页面（请使用这个模拟的 URL：<https://www.freecodecamp.com/email-submit>）。
|
||||
**需求 12：** 当点击 `#submit` 元素时，应将邮箱信息提交到一个静态页面（请使用这个模拟的 URL：<https://www.freecodecamp.com/email-submit>）。
|
||||
|
||||
**需求 13：**navbar 应保持在视口（viewport）的顶部。
|
||||
**需求 13：** navbar 应保持在视口（viewport）的顶部。
|
||||
|
||||
**需求 14：**在此 app 中，应至少使用一次媒体查询。
|
||||
**需求 14：** 在此 app 中，应至少使用一次媒体查询。
|
||||
|
||||
**需求 15：**在此 app 中，应至少使用一次 CSS 的 flexbox 布局。
|
||||
**需求 15：** 在此 app 中，应至少使用一次 CSS 的 flexbox 布局。
|
||||
|
||||
你可以通过 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目， 也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
|
||||
@ -8,43 +8,43 @@ dashedName: build-a-survey-form
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：**在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/VPaoNP>。
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/VPaoNP>。
|
||||
|
||||
在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。 我们不推荐你在这个项目中使用其他技术（比如 jQuery、React、Angular 或 Vue）。 在后续的其他项目中，你将有机会使用像是 React 等其他技术栈。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 祝你编码愉快！
|
||||
|
||||
**需求 1：**此 app 中应存在一个 `id="title"` 的大小为 H1 的标题。
|
||||
**需求 1：** 此 app 中应存在一个 `id="title"` 的大小为 H1 的标题。
|
||||
|
||||
**需求 2：**此 app 中应存在一段 `id="description"` 的大小为 P 的短小的描述。
|
||||
**需求 2：** 此 app 中应存在一段 `id="description"` 的大小为 P 的短小的描述。
|
||||
|
||||
**需求 3：**此 app 中应存在一个 `id="survey-form"` 的 `form` 元素。
|
||||
**需求 3：** 此 app 中应存在一个 `id="survey-form"` 的 `form` 元素。
|
||||
|
||||
**需求 4：**在表单元素内，应存在 `id="name"` 的输入框（必填项），以便用户输入姓名。
|
||||
**需求 4：** 在表单元素内，应存在 `id="name"` 的输入框（必填项），以便用户输入姓名。
|
||||
|
||||
**需求 5：**在表单元素内，应存在 `id="email"` 的输入框（必填项），以便用户输入邮箱。
|
||||
**需求 5：** 在表单元素内，应存在 `id="email"` 的输入框（必填项），以便用户输入邮箱。
|
||||
|
||||
**需求 6：**如果用户输入了格式不正确的邮箱，则应出现来自 HTML5 表单数据校验的错误信息。
|
||||
**需求 6：** 如果用户输入了格式不正确的邮箱，则应出现来自 HTML5 表单数据校验的错误信息。
|
||||
|
||||
**需求 7：**在表单内，用户应可以在 `id="number"` 的输入框中输入数字。
|
||||
**需求 7：** 在表单内，用户应可以在 `id="number"` 的输入框中输入数字。
|
||||
|
||||
**需求 8：**如果用户在数字输入框内输入非数字内容，则应出现来自 HTML5 表单数据校验的错误信息。
|
||||
**需求 8：** 如果用户在数字输入框内输入非数字内容，则应出现来自 HTML5 表单数据校验的错误信息。
|
||||
|
||||
**需求 9：**如果用户输入的数字超出了使用 `min` 和 `max` 属性定义的范围，则应出现来自 HTML5 表单数据校验的错误信息。
|
||||
**需求 9：** 如果用户输入的数字超出了使用 `min` 和 `max` 属性定义的范围，则应出现来自 HTML5 表单数据校验的错误信息。
|
||||
|
||||
**需求 10：**表单中的姓名、邮箱和数字输入框需有对应的包含描述输入框用途的标签。这些标签的 id 应分别为 `id="name-label"`、`id="email-label"` 和 `id="number-label"`。
|
||||
**需求 10：** 表单中的姓名、邮箱和数字输入框需有对应的包含描述输入框用途的标签。这些标签的 id 应分别为 `id="name-label"`、`id="email-label"` 和 `id="number-label"`。
|
||||
|
||||
**需求 11：**表单中的姓名、邮箱和数字输入框需有对应的描述文字作为占位符。
|
||||
**需求 11：** 表单中的姓名、邮箱和数字输入框需有对应的描述文字作为占位符。
|
||||
|
||||
**需求 12：**在表单元素内，应存在一个 `id="dropdown"` 的下拉列表，用户可以从中选取一个选项。
|
||||
**需求 12：** 在表单元素内，应存在一个 `id="dropdown"` 的下拉列表，用户可以从中选取一个选项。
|
||||
|
||||
**需求 13：**在表单元素内，应至少存在一组单选按钮，用户可以从中选取一个选项。 每组应使用 `name` 属性进行分组。
|
||||
**需求 13：** 在表单元素内，应至少存在一组单选按钮，用户可以从中选取一个选项。 每组应使用 `name` 属性进行分组。
|
||||
|
||||
**需求 14：**在表单元素内，应存在几个复选框，且每个复选框都应有 `value` 属性。
|
||||
**需求 14：** 在表单元素内，应存在几个复选框，且每个复选框都应有 `value` 属性。
|
||||
|
||||
**需求 15：**在表单元素的最后，应存在一个 `textarea` 元素，以便用户输入额外的批注。
|
||||
**需求 15：** 在表单元素的最后，应存在一个 `textarea` 元素，以便用户输入额外的批注。
|
||||
|
||||
**需求 16：**在表单元素内，应存在一个 `id="submit"` 的按钮，以便用户提交表单。
|
||||
**需求 16：** 在表单元素内，应存在一个 `id="submit"` 的按钮，以便用户提交表单。
|
||||
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO)来创建你的项目。 也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
|
||||
@ -8,41 +8,41 @@ dashedName: build-a-technical-documentation-page
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：**在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/NdrKKL>。
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/NdrKKL>。
|
||||
|
||||
在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。 我们不推荐你在这个项目中使用其他技术（比如 jQuery、React、Angular 或 Vue）。 在后续的其他项目中，你将有机会使用像是 React 等其他技术栈。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 祝你编码愉快！
|
||||
|
||||
**需求 1：**此 app 中应存在一个 `id="main-doc"` 的 `main` 元素，它包含页面的主要内容（技术文档）。
|
||||
**需求 1：** 此 app 中应存在一个 `id="main-doc"` 的 `main` 元素，它包含页面的主要内容（技术文档）。
|
||||
|
||||
**需求 2：**在 `#main-doc` 元素内，应有一些 `section` 元素，每个元素的 class 都应为 `main-section`。 应存在至少 5 个这样的元素。
|
||||
**需求 2：** 在 `#main-doc` 元素内，应有一些 `section` 元素，每个元素的 class 都应为 `main-section`。 应存在至少 5 个这样的元素。
|
||||
|
||||
**需求 3：**每个 `.main-section` 内的第一个元素应为 `header` 元素，其中包含描述该部分主题的内容文本。
|
||||
**需求 3：** 每个 `.main-section` 内的第一个元素应为 `header` 元素，其中包含描述该部分主题的内容文本。
|
||||
|
||||
**需求 4：**类名为 `main-section` 的每个 `section` 元素都应有一个与包含在其中的每个 `header` 的文本相对应的 id， 所有空格都应该被替换为下划线（例如，包含标题 “JavaScript and Java” 的 `section` 应有一个相应的 `id="JavaScript_and_Java"`）。
|
||||
**需求 4：** 类名为 `main-section` 的每个 `section` 元素都应有一个与包含在其中的每个 `header` 的文本相对应的 id， 所有空格都应该被替换为下划线（例如，包含标题 “JavaScript and Java” 的 `section` 应有一个相应的 `id="JavaScript_and_Java"`）。
|
||||
|
||||
**需求 5：**所有 `.main-section` 元素内总计应有至少 10 个 `p` 元素。
|
||||
**需求 5：** 所有 `.main-section` 元素内总计应有至少 10 个 `p` 元素。
|
||||
|
||||
**需求 6：**所有 `.main-section` 元素内总计应有至少 5 个 `code` 元素。
|
||||
**需求 6：** 所有 `.main-section` 元素内总计应有至少 5 个 `code` 元素。
|
||||
|
||||
**需求 7：**所有 `.main-section` 元素内总计应有至少 5 个 `li` 元素。
|
||||
**需求 7：** 所有 `.main-section` 元素内总计应有至少 5 个 `li` 元素。
|
||||
|
||||
**需求 8：**此 app 中应存在一个 `id` 为 `"navbar"` 的 `nav` 元素。
|
||||
**需求 8：** 此 app 中应存在一个 `id="navbar"` 的 `nav` 元素。
|
||||
|
||||
**需求 9：**navbar 元素内应有一个 `header` 元素，其中包含描述技术文档主题的内容文本。
|
||||
**需求 9：** navbar 元素内应有一个 `header` 元素，其中包含描述技术文档主题的内容文本。
|
||||
|
||||
**需求 10：**此外，navbar 元素应包含 class 为 `nav-link` 的 `a` 元素， 每个 class 为 `main-section` 的元素都需要有一个。
|
||||
**需求 10：** 此外，navbar 元素应包含 class 为 `nav-link` 的 `a` 元素， 每个 class 为 `main-section` 的元素都需要有一个。
|
||||
|
||||
**需求 11：**navbar 中的 `header` 元素应置于 navbar 中所有 `a` 元素之前。
|
||||
**需求 11：** navbar 中的 `header` 元素应置于 navbar 中所有 `a` 元素之前。
|
||||
|
||||
**需求 12：**所有 class 为 `nav-link` 的元素都需要包含与 `section` 中 `header` 相应的内容文本。例如，对于一个文本为 "Hello world" 的一节或标题，你的 navbar 中也应存在一个内容文本为 "Hello world" 的元素。
|
||||
**需求 12：** 所有 class 为 `nav-link` 的元素都需要包含与 `section` 中 `header` 相应的内容文本。例如，对于一个文本为 "Hello world" 的一节或标题，你的 navbar 中也应存在一个内容文本为 "Hello world" 的元素。
|
||||
|
||||
**需求 13：**当点击 navbar 中一个元素时，页面应滚动到 `main-doc` 中的相应部分。例如，点击文本为 "Hello world" 的 `nav-link` 元素的时候，页面应滚动到包含相同内容的 `header` 和 id 所处的 `section` 元素。
|
||||
**需求 13：** 当点击 navbar 中一个元素时，页面应滚动到 `main-doc` 中的相应部分。例如，点击文本为 "Hello world" 的 `nav-link` 元素的时候，页面应滚动到包含相同内容的 `header` 和 id 所处的 `section` 元素。
|
||||
|
||||
**需求 14：**在常规尺寸的设备上（如笔记本电脑和台式机），`id="navbar"` 的元素应显示在屏幕左侧，且始终对用户可见。
|
||||
**需求 14：** 在常规尺寸的设备上（如笔记本电脑和台式机），`id="navbar"` 的元素应显示在屏幕左侧，且始终对用户可见。
|
||||
|
||||
**需求 15：**在此 app 中，应至少使用一次媒体查询。
|
||||
**需求 15：** 在此 app 中，应至少使用一次媒体查询。
|
||||
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。 也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
|
||||
@ -8,29 +8,29 @@ dashedName: build-a-tribute-page
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：**在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/zNqgVx>。
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上创建一个与这个功能类似的 app：<https://codepen.io/freeCodeCamp/full/zNqgVx>。
|
||||
|
||||
在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 你可以根据自己的喜好来美化你的 app。
|
||||
|
||||
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。 由于目前你只学到了 CSS 课程，所以我们建议你只使用 CSS 来完成这个项目，同时巩固一下你之前所学的内容。 你也可以使用 Bootstrap 或者 SASS。 我们不推荐你在这个项目中使用其他技术（比如 jQuery、React、Angular 或 Vue）。 在后续的其他项目中，你将有机会使用像是 React 等其他技术栈。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 祝你编码愉快！
|
||||
|
||||
**需求 1：**此 app 中应存在一个 `id="main"` 的元素，页面上的所有元素都应置于这个元素中。
|
||||
**需求 1：** 此 app 中应存在一个 `id="main"` 的元素，页面上的所有元素都应置于这个元素中。
|
||||
|
||||
**需求 2：**此 app 中应存在一个 `id="title"` 的元素，其中包含描述致敬页主题的字符串文本，如 "Dr. Norman Borlaug"。
|
||||
**需求 2：** 此 app 中应存在一个 `id="title"` 的元素，其中包含描述致敬页主题的字符串文本，如 "Dr. Norman Borlaug"。
|
||||
|
||||
**需求 3：**此 app 中应存在一个 `id="img-div"` 的 `div` 元素。
|
||||
**需求 3：** 此 app 中应存在一个 `id="img-div"` 的 `div` 元素。
|
||||
|
||||
**需求 4：**在 `img-div` 元素内，应存在一个 `id="image"` 的 `img` 元素。
|
||||
**需求 4：** 在 `img-div` 元素内，应存在一个 `id="image"` 的 `img` 元素。
|
||||
|
||||
**需求 5：**在 `img-div` 元素内，应存在一个相应的 `id="img-caption"` 的元素，其中包含对 `img-div` 中图像的描述文本。
|
||||
**需求 5：** 在 `img-div` 元素内，应存在一个相应的 `id="img-caption"` 的元素，其中包含对 `img-div` 中图像的描述文本。
|
||||
|
||||
**需求 6：**此 app 中应存在一个 `id="tribute-info"` 的元素，其中应包含描述致敬页主题的内容文本。
|
||||
**需求 6：** 此 app 中应存在一个 `id="tribute-info"` 的元素，其中应包含描述致敬页主题的内容文本。
|
||||
|
||||
**需求 7：**此 app 中应存在一个 `id="tribute-link"` 的 `a` 元素，它应链接到一个包含有关致敬页主题额外信息的外部网页。 提示：你必须为 a 元素提供 `target` 属性，并将其属性值设置为 `_blank`（即 `target="_blank"`），这样才可以在新选项卡中打开链接。
|
||||
**需求 7：** 此 app 中应存在一个 `id="tribute-link"` 的 `a` 元素，它应链接到一个包含有关致敬页主题额外信息的外部网页。 提示：你必须为 a 元素提供 `target` 属性，并将其属性值设置为 `_blank`（即 `target="_blank"`），这样才可以在新选项卡中打开链接。
|
||||
|
||||
**需求 8：**`img` 元素应相对于其父元素的宽度自动调整大小，但不超过图片的原始大小。
|
||||
**需求 8：** `img` 元素应相对于其父元素的宽度自动调整大小，但不超过图片的原始大小。
|
||||
|
||||
**需求 9：**`img` 应在其父元素内居中。
|
||||
**需求 9：** `img` 应在其父元素内居中。
|
||||
|
||||
你可以 fork [这个 CodePen 项目](https://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。 也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user