Chinese translation of responsive-web-design (#40607)

This commit is contained in:
Xing Liu
2021-01-08 11:20:48 -08:00
committed by GitHub
parent 9770cd0f81
commit 05ba7c3482
193 changed files with 1266 additions and 1273 deletions

View File

@ -1,45 +1,43 @@
---
id: bd7158d8c242eddfaeb5bd13
title: 制作一个个人作品集
title: 制作一个个人作品集展示
challengeType: 3
forumTopicId: 301143
---
# --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。
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。由于目前你只学到了 CSS 课程,所以我们建议你只使用 CSS 来完成这个项目,同时巩固一下你之前所学的内容。你也可以使用 Bootstrap 或者 SASS。我们不推荐你在这个项目中使用其他技术比如 jQurey、React、Angular 或 Vue否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用各种技术栈(比如 React。如果你在使用上述推荐的技术栈编码的过程中发现问题,请提交给我们来处理。祝你编码愉快!
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。由于目前你只学到了 CSS 课程,所以我们建议你只使用 CSS 来完成这个项目,同时巩固一下你之前所学的内容。你也可以使用 Bootstrap 或者 SASS。我们不推荐你在这个项目中使用其他技术比如 jQuery、React、Angular 或 Vue否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用像是 React 等其他技术栈。如果你在使用上述推荐的技术栈过程中遇到问题,请提交给我们来处理。祝你编码愉快!
**需求 1** 我的作品集应该有一个 id`welcome-section`的欢迎区。
**需求 1**此 app 中应存在一个 `id` `welcome-section` 的欢迎区。
**需求 2** 欢迎区内应该有一个包含标题`h1`元素。
**需求 2**欢迎区内应存在一个包含标题文本的 `h1` 元素。
**需求 3** 我的作品集应该有一个 id`projects`的项目区。
**需求 3**此 app 中应存在一个 `id` `projects` 的项目展示区。
**需求 4** 项目区至少包含一个带有`project-tile`的元素来保存项目。
**需求 4**项目展示区应至少包含一个 `class``project-tile` 的元素来展示项目。
**需求 5** 项目区至少包含一个链接到一个项目的超链接元素。
**需求 5**项目展示区应至少包含一个链接到项目的超链接元素。
**需求 6** 我的作品集应有一个 id`navbar`的导航栏。
**需求 6**此 app 中应存在一个 `id` `navbar` 的导航栏。
**需求 7** 导航栏至少包含一个可以跳转到本页另外区域的链接。
**需求 7**导航栏中应包含一个可以滚动到本页面不同区域的链接。
**需求 8** 我的作品集应有一个 id`profile-link`的链接,它在浏览器的新标签页内打开我的 GitHub 或者 FCC 作品集页面。
**需求 8**此 app 中应包含一个 `id` `profile-link` 的链接。点击这个链接时,它在浏览器的新标签页内打开我的 GitHub 或者 FCC 作品集页面。
**需求 9** 我的作品集至少使用一次媒体查询。
**需求 9**在此 app 中,应至少使用一次媒体查询。
**需求 10** 欢迎区的高度应该与视的高度保持一致。
**需求 10**欢迎区的高度应该与视的高度保持一致。
**需求 11** 导航栏应保持在视窗的顶部。
**需求 11**导航栏应始终保持在视顶部。
你可以通过 fork 这个项目 [CodePen](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`
你可以通过 fork [这个项目](http://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接。
完成之后,将你的 URL 提交到相应的项目,并测试通过。
完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接并提交
# --hints--

View File

@ -7,45 +7,45 @@ forumTopicId: 301144
# --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。
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。由于目前你只学到了 CSS 课程,所以我们建议你只使用 CSS 来完成这个项目,同时巩固一下你之前所学的内容。你也可以使用 Bootstrap 或者 SASS。我们不推荐你在这个项目中使用其他技术比如 jQurey、React、Angular 或 Vue否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用各种技术栈(比如 React。如果你在使用上述推荐的技术栈编码的过程中发现问题,请提交给我们来处理。祝你编码愉快!
你可以使用 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`元素中看见至少三个能点击的元素,每个都有类名`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**在表单元素 `form` 中,应存在一个 `id``"email"``input` 输入框供用户填写邮箱。
**需求 9**`#email`输入框内应描述该区域用途的占位符文字。
**需求 9**`#email` 输入框内应存在描述该区域用途的占位符文字`placeholder`
**需求 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** 导航栏应保持在视窗的顶部。
**需求 13**navbar 应保持在视口viewport的顶部。
**需求 14** 我的产品主页应至少有一个媒体查询。
**需求 14**在此 app 中,应至少使用一次媒体查询。
**需求 15** 至少使用一次 flexbox 布局。
**需求 15**在此 app 中,应至少使用一次 CSS 的 flexbox 布局。
你可以通过 fork 这个项目 [CodePen](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`
你可以通过 fork [这个项目](http://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
完成之后,将你的 URL 提交到相应的项目,并测试通过
完成项目并通过所有测试后,请输入你的项目在 CodePen 上的链接并提交
# --hints--

View File

@ -7,49 +7,47 @@ forumTopicId: 301145
# --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。我们不推荐你在这个项目中使用其他技术比如 jQurey、React、Angular 或 Vue否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用各种技术栈(比如 React。如果你在使用上述推荐的技术栈编码的过程中发现问题,请提交给我们来处理。祝你编码愉快!
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。由于目前你只学到了 CSS 课程,所以我们建议你只使用 CSS 来完成这个项目,同时巩固一下你之前所学的内容。你也可以使用 Bootstrap 或者 SASS。我们不推荐你在这个项目中使用其他技术比如 jQuery、React、Angular 或 Vue否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用像是 React 等其他技术栈。如果你在使用上述推荐的技术栈过程中遇到问题,请提交给我们来处理。祝你编码愉快!
**需求 1** 我能看见一个 H1 标签大小`id="title"`属性的标题。
**需求 1**此 app 中应存在一个 `id``"title"``h1` 元素作为标题。
**需求 2** 我能看见一段 P 标签大小且带有`id="description"`属性的简述文字
**需求 2**此 app 中应存在一个 `id``"description"``p` 元素,其中应包含一段简短的介绍
**需求 3** 我能看见一个`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**表单中的姓名、邮箱和数字输入框需有对应的包含描述输入框用途的 `label`。这些 `label``id` 应分别为 `"name-label"``"email-label"``"number-label"`
**需求 11**表单中的名称,邮箱和数字输入框中,我能看到各自的描述文字作为占位符。
**需求 11**表单中的姓名、邮箱和数字输入框需有对应的描述文字作为占位符`placeholder`
**需求 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](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`
你可以通过 fork [这个项目](http://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接。
完成之后,将你的 URL 提交到相应的项目,并测试通过。
完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接并提交
# --hints--

View File

@ -7,47 +7,45 @@ forumTopicId: 301146
# --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。我们不推荐你在这个项目中使用其他技术比如 jQurey、React、Angular 或 Vue否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用各种技术栈(比如 React。如果你在使用上述推荐的技术栈编码的过程中发现问题,请提交给我们来处理。祝你编码愉快!
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。由于目前你只学到了 CSS 课程,所以我们建议你只使用 CSS 来完成这个项目,同时巩固一下你之前所学的内容。你也可以使用 Bootstrap 或者 SASS。我们不推荐你在这个项目中使用其他技术比如 jQuery、React、Angular 或 Vue否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用像是 React 等其他技术栈。如果你在使用上述推荐的技术栈过程中遇到问题,请提交给我们来处理。祝你编码愉快!
**需求 1** 我能看见一个对应`id="main-doc"``main`元素,它包含页面的主要内容(技术文档)。
**需求 1**此 app 中应存在一个 `id``"main-doc"``main` 元素,它包含页面的主要内容(技术文档)。
**需求 2** `#main-doc`元素内,我能看见至少 5 个`section`元素,每个元素都有一个`main-section`类属性
**需求 2**在 `#main-doc` 元素内,应存在至少 5 个 `section` 元素,每个元素的 class 都应为 `main-section`
**需求 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** 我能看见一个对应`id="navbar"``nav`元素。
**需求 8**此 app 中应存在一个 `id``"navbar"``nav` 元素。
**需求 9** navbar 元素应包含一个`header`元素,其中包含描述技术文档主题的文本。
**需求 9**navbar 元素内应有一个 `header` 元素,其中包含描述技术文档主题的内容文本。
**需求 10** 此外,导航栏应包含类名为`nav-link`的链接元素(`a`),每个元素都应该有一个类`main-section`
**需求 10**此外,navbar 元素应包含 `class``nav-link``a` 元素,每个 class 为 `main-section` 的元素都需要有对应的 `a` 元素
**需求 11** 导航栏中的`header`元素必须位于导航栏中的任何链接(`a`元素之前。
**需求 11**navbar 中的 `header` 元素应置于 navbar 中所有 `a` 元素之前。
**需求 12** 具有`nav-link`类的每个元素都应该包含每个部分的标题文本对应的文本例如,如果你有一个“Hello world”部分/标题,你的导航栏应该有一个包含文本“Hello world”的元素
**需求 12**所有 class 为 `nav-link``a` 元素都需要包含与其 `header` 相应的内容文本例如,对于一个文本为 "Hello world" 的 `section``header`你的navbar 中也应存在一个内容文本为 "Hello world" 的 `a` 元素。
**需求 13** 当我点击一个 navbar 元素时,页面应该导航到`main-doc`元素的相应部分例如,如果我单击包含文本 "Hello world" 的`nav-link`元素,页面将导航到一个带有对应 header 和 id section 元素
**需求 13**当点击 navbar 中一个 `a` 元素时,页面应滚动到 `main-doc`的相应部分例如,点击文本 "Hello world" 的 `nav-link` 元素的时候,页面应滚动到包含相同内容的 header 和 id 所处的 `section` 元素。
**需求 14** 在常规尺寸的设备上(笔记本电脑台式机),带有`id="navbar"`的元素应显示在屏幕左侧,且始终对用户可见。
**需求 14**在常规尺寸的设备上(笔记本电脑台式机),`id``"navbar"` 的元素应显示在屏幕左侧,且始终对用户可见。
**需求 15** 我的技术文档页面应该至少使用一次媒体查询。
**需求 15**在此 app 中,应至少使用一次媒体查询。
你可以通过 fork 这个项目 [CodePen](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`
你可以通过 fork [这个项目](http://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接。
完成之后,将你的 URL 提交到相应的项目,并测试通过。
完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接并提交
# --hints--

View File

@ -7,35 +7,33 @@ forumTopicId: 301147
# --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。我们不推荐你在这个项目中使用其他技术比如 jQurey、React、Angular 或 Vue否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用各种技术栈(比如 React。如果你在使用上述推荐的技术栈编码的过程中发现问题,请提交给我们来处理。祝你编码愉快!
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。由于目前你只学到了 CSS 课程,所以我们建议你只使用 CSS 来完成这个项目,同时巩固一下你之前所学的内容。你也可以使用 Bootstrap 或者 SASS。我们不推荐你在这个项目中使用其他技术比如 jQuery、React、Angular 或 Vue否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用像是 React 等其他技术栈。如果你在使用上述推荐的技术栈过程中遇到问题,请提交给我们来处理。祝你编码愉快!
**需求 1** 我的致敬页应有对应`id="main"`的元素,其中包含其他的所有元素
**需求 1**此 app 中应存在一个 `id``"main"` 的元素,页面上的所有元素都应置于这个元素中
**需求 2** 我应该看到一个具有相应`id="title"`的元素,其中包含描述致敬页主题的字符串(即文本,如 "Dr. Norman Borlaug"。
**需求 2**此 app 中应存在一个 `id``"title"` 的元素,其中包含描述致敬页主题的字符串文本,如 "Dr. Norman Borlaug"。
**需求 3** 我应该看到一个带有对应`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** 我应该看见具有对应`id="tribute-info"`的元素,其中包含描述致敬页主题的文本内容。
**需求 6**此 app 中应存在一个 `id``"tribute-info"` 的元素,其中包含描述致敬页主题的内容文本
**需求 7** 我应该看见具有对应`id="tribute-link"`元素,它链接到一个包含有关致敬页主题额外信息的外部网页提示:你必须为元素提供`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](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`
你可以通过 fork [这个项目](http://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接。
完成之后,将你的 URL 提交到相应的项目,并测试通过。
完成项目并通过所有测试后,输入你的项目在 CodePen 上的链接并提交
# --hints--