Chinese translation of responsive-web-design (#40607)
This commit is contained in:
@ -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--
|
||||
|
||||
|
@ -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--
|
||||
|
||||
|
@ -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--
|
||||
|
||||
|
@ -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--
|
||||
|
||||
|
@ -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--
|
||||
|
||||
|
Reference in New Issue
Block a user