diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md index efb7a80ba2..82bacd8b4d 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md @@ -9,17 +9,17 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility # --description-- -在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。`alt` 属性中的文本作为备用文字来描述图片的内容，这可以帮助用户在图片加载失败或者图片不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如： +在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。 `alt` 属性中的文本作为备用文字来描述图片内容， 这可以帮助用户在图片加载失败或者图片不可见的情况下理解图片内容， 也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。 例如： `Company logo` -视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别 `alt` 属性，朗读其中的内容，来告知用户图片包含的关键信息。 +视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。 他们无法通过直观的呈现理解信息。 屏幕阅读器可以识别 `alt` 属性，朗读其中的内容，来告知用户图片包含的关键信息。 -`alt` 文本可以为屏幕阅读器提供图片的描述信息，所以你应始终为图片添加 `alt` 属性。另外，根据最新的 HTML5 标准，为图片添加 `alt` 属性是必需的。 +`alt` 文本可以为屏幕阅读器提供图片的描述信息， 所以你应始终为图片添加 `alt` 属性。 另外，根据最新的 HTML5 标准，为图片添加这个属性是必须的。 # --instructions-- -碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他添加了一张展示技能的资料图片，并希望这张图片可以让访问网站的所有用户看到。请给 `img` 标签添加一个 `alt` 属性，说明 Camper Cat 在学习空手道（图片的 `src` 属性指向的是一个不存在的文件，因此你可以看到 `alt` 属性中的文本出现在页面上）。 +碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。 他想要使用的个人资料图片显示了他的技能，应该得到所有网站访问者的赞赏。 请给 `img` 标签添加一个 `alt` 属性，说明 Camper Cat 在学习空手道 （图片的 `src` 属性指向的是一个不存在的文件，因此你可以看到 `alt` 属性中的文本出现在页面上）。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md index 4318298274..b5f187bd03 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md @@ -9,11 +9,11 @@ dashedName: add-an-accessible-date-picker # --description-- -表单中经常出现 `input` 标签，它可以用来创建多种表单控件。它的 `type` 属性指定了所要创建的 `input` 标签类型。 +表单中经常出现 `input` 标签，它可以用来创建多种表单控件。 它的 `type` 属性指定了所要创建的 `input` 标签类型。 -在以前的挑战中，我们已经见过 `text` 与 `submit` 类型的 `input` 标签。HTML5 规范添加了 `date` 类型来创建日期选择器。如果浏览器支持，在点击 `input` 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。 +在以前的挑战中，我们已经见过 `text` 与 `submit` 类型的 input 标签。 HTML5 规范添加了 `date` 类型来创建日期选择器。 如果浏览器支持，在点击 `input` 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。 -对于旧版本的浏览器，由于不支持 `date`，此时 `type` 属性会被浏览器设置为 `text`。这种情况下，我们可以利用 `label` 标签或者占位符文本来提示用户需要输入的日期格式。 +对于较老的浏览器，类型将默认为 `text`， 这样它可以通过 `label` 或 `placeholder` 文本向用户显示预期的日期格式。 举个例子： @@ -24,29 +24,29 @@ dashedName: add-an-accessible-date-picker # --instructions-- -Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个 `input` 标签，其 `type` 属性值为 "date"，`id` 为 "pickdate"，`name` 属性值为 "date"。 +Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。 请为 Camper Cat 的页面添加一个`input` 标签，起 `type` 属性值为 `date`，`id` 属性为 `pickdate`，`name` 属性为 `date`。 # --hints-- -应有 1 个 `input` 标签。 +日期选择器应有一个 `input` 标签。 ```js assert($('input').length == 2); ``` -`input` 标签的 `type` 属性值应该为 date。 +`input` 标签应有一个值为 `date` 的 `type` 属性。 ```js assert($('input').attr('type') == 'date'); ``` -`input` 标签的 `id` 应为 pickdate。 +`input` 标签应有一个值为 `pickdate` 的 `id` 属性。 ```js assert($('input').attr('id') == 'pickdate'); ``` -`input` 标签的 `name` 属性值应该为 date。 +`input` 标签应有一个值为 `date` 的 `name` 属性。 ```js assert($('input').attr('name') == 'date'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md index 5e2410ee99..41348ab426 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md @@ -1,6 +1,7 @@ --- id: 587d778f367417b2b2512aad -title: 考虑色盲用户的需求仔细选择传达信息的颜色 +title: >- + 考虑色盲用户的需求仔细选择传达信息的颜色 challengeType: 0 videoUrl: 'https://scrimba.com/c/c437as3' forumTopicId: 301011 @@ -10,15 +11,15 @@ dashedName: >- # --description-- -色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到完全无法看到颜色。最常见的形式是对绿色的低感知度。 +色盲的形式有很多种， 它的表现可以从对特定波长光波的感知度较低，到完全无法看到颜色。 最常见的形式是对绿色的低感知度。 -例如，如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法区分它们。色轮上距离较近的颜色，特别是相邻的颜色，看起来都会很难区分。在表示重要信息的时候应避免使用这类相近颜色的组合。 +例如，如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法区分它们。 色轮上距离较近的颜色，特别是相邻的颜色，看起来都会很难区分。 在表示重要信息的时候应避免使用这类相近颜色的组合。 -**注意：**一些在线颜色选择器有色盲模拟功能，可以模拟颜色在不同形式的色盲中所呈现的效果。它们和在线对比度检查器一样，都是很好的工具。 +**注意：**一些在线颜色选择器有色盲模拟功能，可以模拟颜色在不同形式的色盲中所呈现的效果。 它们和在线对比度检查器一样，都是很好的工具。 # --instructions-- -Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，用于背景色的黄色（`#FFFF33`）和文字颜色绿色（`#33FF33`）是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的 `color` 修改为深蓝色（`#003366`）。 +Camper Cat 正在测试一个重要按钮的不同样式。 在色轮上，用于 `background-color` 的黄色（`#FFFF33`）和用于 `color` 的绿色（`#33FF33`）是相邻的色调，一些色盲用户几乎无法区分它们 （而且这两个颜色的亮度相近，对比度太小。） 为了解决这两个问题，请将文本的 `color` 修改为深蓝色（`#003366`）。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md index b8f0d1a6c2..1d0981a37e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md @@ -9,17 +9,17 @@ dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast # --description-- -颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以区分它们。 +颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。 首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。 其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以区分它们。 -在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二个问题。WCAG 建议为颜色及灰度组合使用 4.5 : 1 的对比度。 +在之前的挑战中，我们用文本备用方案解决了第一个问题。 在上一个挑战中，我们使用对比度检测工具解决了第二个问题。 WCAG 建议为颜色及灰度组合使用 4.5:1 的对比度。 -色盲用户无法将一些颜色与另一些颜色区分出来，这通常是因为色调，有时候是因为亮度。你可能还记得，对比度是用前景色与背景色的相对亮度计算的。 +色盲用户无法将一些颜色与另一些颜色区分出来，这通常是因为色调，有时候是因为亮度。 你可能还记得，对比度是用前景色与背景色的相对亮度计算的。 -实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5 : 1。在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。 +实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5:1。 在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。 # --instructions-- -Camper Cat 正在尝试为他的博客文本与背景配置颜色。他目前使用的组合是绿色的 `background-color` 与栗色的 `color`，它们的对比度为 2.5 : 1。Camper Cat 使用了 CSS 的 `hsl()`（hsl 为 hue、saturation、lightness 的缩写）属性来设置颜色。这样，通过修改 `hsl()` 属性的第三个参数，我们可以很轻松地调整颜色的亮度。请将 `background-color` 的亮度从 35% 增加到 55%，将 `color` 的亮度从 20% 减少到 15%，这样可以使对比度达到 5.9 : 1。 +Camper Cat 正在尝试为他的博客文本与背景配置颜色。 他目前使用的组合是绿色的 `background-color` 与栗色的 `color`，它们的对比度为 2.5:1。 这样，通过修改 `hsl()` 属性的第三个参数，我们可以很轻松地调整颜色的亮度。 请将 `background-color` 的亮度从 35% 增加到 55%，将 `color` 的亮度从 20% 减少到 15%， 这样可以使对比度达到 5.9:1。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md index c06520f3fb..2546524cd5 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md @@ -9,17 +9,17 @@ dashedName: give-links-meaning-by-using-descriptive-link-text # --description-- -屏幕阅读器用户可以选择其设备读取的内容的类型，包括表示“跳转到”（或“跳过”）的元素，跳转到主要内容，或者从标题中获取页面摘要。用户还可以选择只听取页面中的超链接内容。 +屏幕阅读器用户可以选择其设备读取的内容的类型， 包括表示“跳转到”（或“跳过”）的元素，跳转到主要内容，或者从标题中获取页面摘要。 用户还可以选择只听取页面中的超链接内容。 -屏幕阅读器通过阅读链接文本（即 `a` 标签的内容文本）来完成这个操作。如果我们只在链接中写上 "click here"（点击这里）或者 "read more"（阅读更多），显然帮助有限。相反地，我们应该在 `a` 标签中使用简洁的描述性语言来为用户提供更多信息。 +屏幕阅读器通过阅读链接文本（即 `a` 标签的内容文本）来完成这个操作。 如果我们只在链接中写上 "click here"（点击这里）或者 "read more"（阅读更多），显然帮助有限。 相反地，我们应该在 `a` 标签中使用简洁的描述性语言来为用户提供更多信息。 # --instructions-- -Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。请修改 `a` 标签，将其包含的文本从 "click here" 改为 "information about batteries"。 +Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。 请修改锚点标签（`a`），将其包含的文本从 `Click here` 改为 `information about batteries`。 # --hints-- -你应修改 `a` 标签，将其包含的文本从 "click here" 改为 "information about batteries"。 +应修改 `a` 标签，将其包含的文本从 `Click here` 改为 `information about batteries`。 ```js assert( diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md index 0509c1c8e9..48a28e55b6 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md @@ -9,9 +9,9 @@ dashedName: improve-accessibility-of-audio-content-with-the-audio-element # --description-- -HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语义化特性。可以在 `audio` 上下文中为音频内容添加描述文字或字幕链接，使听觉障碍用户也能获取音频中的信息。 +HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语义化特性。 音频内容也需要备用文本，供聋哑人或听力困难的人使用。 这可以通过页面上的文本或与字幕链接来实现。 -`audio` 支持 `controls` 属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件，而且还支持键盘操作。`controls` 属性是一个布尔属性，即不需要提供属性值。只要这个属性出现在 `audio` 标签中，浏览器就会开启播放控件。 +`audio` 标签支持 `controls` 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。 这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。 举个例子： @@ -22,13 +22,13 @@ HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语 ``` -**注意：**多媒体内容通常同时包含音频与视频部分，它需要同步的字幕与逐字稿，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。 +**注意：**多媒体内容通常同时包含音频与视频部分， 它需要同步的字幕，使视觉或听觉障碍用户可以获取它的内容。 一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。 # --instructions-- -是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验屏幕阅读器的朗读效果，请在 `p` 标签之后添加一个具有 `controls` 属性的 `audio` 标签。然后在 `audio` 标签内添加一个 `source` 标签并设置 `src` 属性值为 "`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`"。同时，请将 `source` 的 `type` 属性值设置为 "audio/mpeg"。 +是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面了。 Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。 为了体验屏幕阅读器的朗读效果，请在 `p` 标签之后添加一个 `audio` 标签， 具有 `controls` 属性。 然后在 `audio` 标签里面放一个带有 `src` 属性的 `source` 标签，属性值为 `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`。将 `type` 属性设置为 `"audio/mpeg"`. -**注意：**音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。 +**注意：**音频片段的播放速度可能会快到令我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md index b319a53401..fb8bc80aaf 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md @@ -9,9 +9,9 @@ dashedName: improve-chart-accessibility-with-the-figure-element # --description-- -HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。 +HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。 -对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。 +对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。 但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。 举个例子，注意 `figcaption` 包含在 `figure` 标签中，并且可以与其他标签组合使用： @@ -27,17 +27,17 @@ HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。它 # --instructions-- -Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他用于呈现图表的 `div` 标签修改为 `figure` 标签；将用于呈现图表标题的 `p` 标签改为 `figcaption` 标签。 +Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。 请帮助完善他的页面，将他用于呈现图表的 `div` 标签修改为 `figure` 标签；将用于呈现图表标题的 `p` 标签改为 `figcaption` 标签。 # --hints-- -应存在 1 个 `figure` 标签。 +应存在一个 `figure` 标签。 ```js assert($('figure').length == 1); ``` -应存在 1 个 `figcaption` 标签。 +应存在一个 `figcaption` 标签。 ```js assert($('figcaption').length == 1); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md index 38d7899fa4..1dfe460a65 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md @@ -9,13 +9,13 @@ dashedName: improve-form-field-accessibility-with-the-label-element # --description-- -合理地使用语义化 HTML 标签和属性可以提升页面的可访问性。在接下来的挑战中，你将会看到在表单中使用属性的场景。 +合理地使用语义化 HTML 标签和属性可以提升页面的可访问性。 在接下来的挑战中，你将会看到在表单中使用属性的场景。 -`label` 标签的文本内容通常会是表单组件的名称或标签。这些文本表明了组件的意义，也提升了表单的可访问性。`label` 标签的 `for` 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 `for` 属性的属性值。 +`label` 标签的文本内容通常会是表单组件的名称或标签。 这些文本表明了组件的意义，也提升了表单的可访问性。 `label` 标签的 `for` 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 `for` 属性的属性值。 -在 HTML 基础章节中，我们已经学习使用了单选按钮标签。在那次挑战中，为了让标签可以在点击的时候也选中输入框，我们将 `input` 标签嵌套在了 `label` 标签里面。在本节课程中，我们会了解到另外一种实现这个功能的方法，那就是使用 `for` 属性。 +在 HTML 基础章节中，我们已经学习使用了单选按钮标签。 在那个挑战中，为了让标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 `label` 标签里面。 在本节课程中，我们会了解到另外一种实现这个功能的方法，那就是使用 `for` 属性。 -`for` 的属性值必须与表单组件的 `id` 属性值相同。举个例子： +`for` 的属性值必须与表单组件的 `id` 属性值相同。 举个例子： ```html
@@ -26,17 +26,17 @@ dashedName: improve-form-field-accessibility-with-the-label-element # --instructions-- -Camper Cat 觉得他的博客文章会有很多人订阅，因此他想添加一个电子邮件注册表单。请为表示电子邮件的 `label` 标签添加 `for` 属性，并将其属性值设置为与 `input` 标签的 `id` 属性值相同。 +Camper Cat 觉得他的博客文章会有很多人订阅，因此他想添加一个电子邮件注册表单。 请为表示电子邮件的 `label` 标签添加 `for` 属性，并将其属性值设置为与 `input` 标签的 `id` 属性值相同。 # --hints-- -`label `标签应该有一个非空的 `for` 属性。 +`label`标签应该有一个非空的 `for` 属性。 ```js assert($('label').attr('for')); ``` -`for` 的属性值应与用于输入邮箱的 `input` 标签 id 属性值相同。 +`for` 的属性值应与用于输入邮箱的 `input` 标签 `id` 属性值相同。 ```js assert($('label').attr('for') == 'email'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md index 43e9812c19..f059ef0f51 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md @@ -9,13 +9,13 @@ dashedName: improve-readability-with-high-contrast-text # --description-- -低对比度的前景色与背景色会使文本难以阅读。足够的对比度可以提高内容的可读性，但是怎样的对比度才算是“足够”的？ +低对比度的前景色与背景色会使文本难以阅读。 足够的对比度可以提高内容的可读性，但是怎样的对比度才算是“足够”的？ -Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的。对于相同颜色来说，对比度是 1 : 1，即无对比度；白色与黑色拥有最高对比度 21 : 1。其他颜色间的对比度都在这个范围之内。网上有很多可以帮助你计算对比度的工具。 +Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。 对比度是通过比较两种颜色的相对亮度值来计算的。 对于相同颜色来说，对比度是 1:1，即无对比度；白色与黑色拥有最高对比度 21:1。 在线可用的对比检查工具很多，可以计算这个比率。 # --instructions-- -Camper Cat 为他的博客选择了白色背景和浅灰色文字，对比度为 1.5 : 1，这使博客文章难以阅读。请将文字的 `color` 从当前的浅灰色（`#D3D3D3`）修改为深灰色（`#636363`），以使对比度提升到 6 : 1。 +Camper Cat 为他的博客选择了白色背景和浅灰色文字，对比度为 1.5:1，这使博客文章难以阅读。 请将文字的 `color` 从当前的浅灰色（`#D3D3D3`）修改为深灰色（`#636363`），以使对比度提升到 6:1。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md index 07df495ed5..e4f5788efe 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md @@ -9,17 +9,17 @@ dashedName: jump-straight-to-the-content-using-the-main-element # --description-- -HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。这不仅为开发人员提供了更多的选择，同时也提升了网页的可访问性。 +HTML5 引入了一些新元素，其中包括无障碍特性，给予开发者更多的选择。 HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。 -默认情况下，浏览器呈现这些新标签的方式与 `div` 相似。但如果我们能合理地使用这些标签，就可以让我们的代码更加语义化且易懂。由于这些标签可以表明其内容的含义，因此辅助工具（如：屏幕阅读器）可以通过这些标签为用户提供更加准确且易于理解的页面信息和导航信息。 +默认情况下，浏览器呈现这些新标签的方式与 `div` 相似。 但是，在适当的地方使用它们，会给标签额外的意义。 仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义。 辅助技术可以获取这种信息，为用户提供更好的页面摘要或导航选项。 -`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。 +`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。 这意味着它只应包含与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。 -`main` 标签的语义化特性可以让辅助工具快速定位到页面的主体。辅助设备会识别 `main` 标签，就好像页面顶部出现一个“跳转到主要内容”的按钮那样。 +`main` 标签的语义化特性可以让辅助工具快速定位到页面的主体。 如果你在页面顶部看到了“跳转到主内容”链接， 使用 main 标签可以自动让辅助设备实现这个功能。 # --instructions-- -Camper Cat 对他的忍者武器页面有一些新的想法，请帮他在 `header` 标签和 `footer` 标签（在接下来的挑战中会详细介绍）之间添加一个 `main` 标签。在这个挑战中，你可以先让 `main` 标签里的内容文本为空。 +Camper Cat 对他的忍者武器页面有一些新的想法。 请帮他在 `header` 标签和 `footer` 标签（在接下来的挑战中会详细介绍）之间添加一个有开始和结束标记的 `main` 标签。 现在保持 `main` 标签为空。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md index 82b056006b..bbbafaf215 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md @@ -9,19 +9,19 @@ dashedName: know-when-alt-text-should-be-left-blank # --description-- -在上一个挑战中，我们了解到 `img` 标签必须有一个 `alt` 属性。不过在图片已经有标题作为文字说明，或者图片仅用作装饰的情况下，`alt` 属性似乎有些多余。 +在上一个挑战中，我们了解到 `img` 标签必须有一个 `alt` 属性。 但是，有时图像通过它们的描述文本被归类，或者只用于装饰。 在这些情况下， `alt` 文本可能是多余的或没有必要的。 -即便如此，我们仍然需要为 `img` 标签添加 `alt` 属性，但这时我们应把它的属性值设为空，例如： +在图像已经用文本内容解释或没有为页面添加内容的情况下， `img` 仍然需要一个 `alt` 属性，但可以设置为空字符串。 例如： `` -比如，背景图片通常起装饰作用。但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。 +比如，背景图片通常起装饰作用。 但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。 **注意：**对于有标题的图片，我们依然需要添加 `alt` 属性，因为这样有助于搜索引擎记录图片内容。 # --instructions-- -Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的 `alt` 属性（注意：这里 `img` 标签的 `src` 属性提供的链接是无效的，因此页面上不会显示任何忍者刀的图片，不用担心）。 +Camper Cat 已经大体写好了博客页面。 他打算在他的两篇文章之间添加一个武士剑装饰图片，作为两篇文章之间的分割线。 为 `img` 标签添加 `alt` 属性，把它的属性值设为空。 （注意：这里图片的 `src` 属性提供的链接是无效的，因此页面上不会显示任何武士刀的图片，不用担心）。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md index eba35cd97a..e2b8fae3cd 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md @@ -9,9 +9,9 @@ dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css # --description-- -到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。 +到目前为止，所有关于可访问性的挑战都没有使用 CSS。 这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。 -但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，此时我们可以用 CSS 来实现。当信息以可视化形式（比如图表）展示，而屏幕阅读器用户需要另一种方式（比如表格）来获取信息时，我们就可以用 CSS 来解决这个问题：只需要把仅供屏幕阅读器使用的信息通过 CSS 定位到浏览器可见区域之外即可。 +但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。 当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下， 使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。 举个例子： @@ -35,29 +35,29 @@ dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css # --instructions-- -Camper Cat 为他的训练页面创建了一个十分酷炫的条形图。考虑到可访问性，他还将数据放入到了一个表格中，供屏幕阅读器用户使用。表格的 `class` 为 `sr-only`，但是还没有添加 CSS 规则。请将 `position` 的值设置为 absolute、`left` 的值设置为 -10000px、`width` 与 `height` 的值均设置为 1px。 +Camper Cat 为他的训练页面创建了一个十分酷炫的条形图。 考虑到可访问性，他还将数据放入到了一个表格中，供屏幕阅读器用户使用。 表格已有一个 `sr-only` class，但是还没有添加 CSS 规则。 设置 `position` 的值为 `absolute`，`left` 的值为 `-10000px`，`width` 和 `height` 的值均为 `1px`。 # --hints-- -`class` 为 `sr-only` 的元素的 `position` 属性值应为 absolute。 +设置 `sr-only` class 的 `position` 属性值为 `absolute`。 ```js assert($('.sr-only').css('position') == 'absolute'); ``` -`class` 为 `sr-only` 的元素的 `left` 属性值应为 -10000px。 +设置 `sr-only` class 的 `left` 属性值为`-10000px`。 ```js assert($('.sr-only').css('left') == '-10000px'); ``` -`class` 为 `sr-only` 的元素的 `width` 属性值应为 1px。 +设置 `sr-only` class 的 `width` 属性值为`1` px。 ```js assert(code.match(/width:\s*?1px/gi)); ``` -`class` 为 `sr-only` 的元素的 `height` 属性值应为 1px。 +设置 `sr-only` class 的 `height` 属性值为 `1` px。 ```js assert(code.match(/height:\s*?1px/gi)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md index 2cdf6d65d7..f5003eae5d 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md @@ -3,15 +3,15 @@ id: 587d7790367417b2b2512aaf title: 通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航 challengeType: 0 videoUrl: 'https://scrimba.com/c/cQvmaTp' -forumTopicId: 1 +forumTopicId: 301021 dashedName: make-links-navigable-with-html-access-keys --- # --description-- -HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。这可以让键盘用户的导航更加便捷。 +HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。 这可以让键盘用户的导航更加便捷。 -HTML5 允许在任何标签上使用这个属性。该属性尤其适用于链接、按钮、表单组件等元素。 +HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按钮、表单组件等元素。 举个例子： @@ -19,29 +19,29 @@ HTML5 允许在任何标签上使用这个属性。该属性尤其适用于链 # --instructions-- -Camper Cat 希望为他两篇博客的标题链接设置快捷键，以使用户可以快速导航到文章的全文。请为这两个链接添加 `accesskey` 属性，并将第一个的属性值设置为 "g"（表示 Garfield），将第二个的属性值设置为 "c"（表示 Chuck Norris）。 +Camper Cat 希望为他两篇博客的标题链接设置快捷键，以使用户可以快速导航到文章的全文。 为两个链接添加一个 `accesskey` 属性，设置第一个的值为 `g`（代表 Garfield），设置第二的值为 `c`（代表 Chuck Norris）。 # --hints-- -`id` 为 "first" 的 `a` 标签应具有 `accesskey` 属性。 +`id` 为 `first` 的 `a` 标签应具有 `accesskey` 属性。 ```js assert($('#first').attr('accesskey')); ``` -`id` 为 "second" 的 `a` 标签应具有 `accesskey` 属性。 +`id` 为 `second` 的 `a` 标签应具有 `accesskey` 属性。 ```js assert($('#second').attr('accesskey')); ``` -`id` 为 "first" 的 `a` 标签的 `accesskey` 属性值应为小写的 "g"。 +`id` 为 `first` 的 `a` 标签的 `accesskey` 属性值应为 `g`。 注意使用小写。 ```js assert($('#first').attr('accesskey') == 'g'); ``` -`id` 为 "second" 的 `a` 标签的 `accesskey` 属性值应为小写的 "c"。 +`id` 为 `second` 的 `a` 标签的 `accesskey` 属性值应为 `c`。 注意使用小写。 ```js assert($('#second').attr('accesskey') == 'c'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md index cfd5ee05fb..e4c672282a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md @@ -9,11 +9,11 @@ dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark # --description-- -与 `header` 和 `nav` 类似，`footer` 元素也具有语义化的特性，可以让辅助工具快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。 +与 `header` 和 `nav` 类似，`footer` 元素也具有语义化的特性，可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接。 # --instructions-- -Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的 `div` 元素更改为 `footer` 元素。 +Camper Cat 的忍者训练页面进展顺利。 请将他在页面底部呈现版权信息的 `div` 元素更改为 `footer` 元素。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md index 143212a0bd..ea9f7a0174 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md @@ -9,15 +9,15 @@ dashedName: make-screen-reader-navigation-easier-with-the-header-landmark # --description-- -`header` 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。 +`header` 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。 与 `main` 类似，`header` 的语义化特性也可以让辅助工具快速定位到它的内容。 -**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。请注意，`header` 标签与包含页面标题、元信息的 `head` 标签本不相同。 +**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。 请注意，这个标签与包含页面标题、元信息的 `head` 标签本不相同。 # --instructions-- -Camper Cat 正在创作一些训练忍者的精彩文章，并打算为这些文章创建一个新的页面。请把包含 `h1` 的 `div` 标签替换为 `header` 标签。 +Camper Cat 正在创作一些训练忍者的精彩文章，并打算为这些文章创建一个新的页面。 请把包含 `h1` 的 `div` 标签替换为 `header` 标签。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md index 5f9777d261..310561c637 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md @@ -9,13 +9,13 @@ dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark # --description-- -`nav` 也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别出页面中的导航信息。 +`nav` 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。 -对于在多个页面底部出现的站点链接，我们不需要使用 `nav` 标签。此时，使用 `footer` 标签会更好。我们将会在下个挑战中学习 `footer` 标签的使用。 +对于在多个页面底部出现的站点链接，我们不需要使用 `nav` 标签。 我们将会在下个挑战中学习 `footer` 标签的使用。 # --instructions-- -Camper Cat 在他的忍者训练页面顶端放置了多个导航链接，但这些链接都写在了 `div` 中。请将 `div` 标签更改为 `nav` 标签，以提升页面的可访问性。 +Camper Cat 在他的忍者训练页面顶端放置了多个导航链接，但这些链接都写在了 `div` 中。 请将 `div` 标签更改为 `nav` 标签，以提升页面的可访问性。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md index d3ec39a2b5..9a5cf80e7e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md @@ -9,7 +9,7 @@ dashedName: standardize-times-with-the-html5-datetime-attribute # --description-- -继续日期主题。HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。`time` 是一个行内标签，用于在页面中呈现日期或时间，而 `datetime` 属性用户设置日期的格式，辅助设备会获取这个值。通过标准化时间格式，即使时间在文本中是以非正式或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。 +继续日期主题。 HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。 这是一个行内元素，用于在页面中呈现日期或时间， 而 `datetime` 属性用于设置日期的格式。 辅助设备可以获取这个值。 即使在文本中以非正式的方式或学术方式撰写，它也有助于避免混乱，因为它规定了时间的标准化版本。 举个例子： @@ -17,7 +17,7 @@ dashedName: standardize-times-with-the-html5-datetime-attribute # --instructions-- -Camper Cat 的比武大会的时间确定了！请使用 `time` 标签包裹文本 "Thursday, September 15<sup>th</sup>"，并将 `datetime` 的属性值设置为 "2016-09-15"。 +Camper Cat 的比武大会的时间确定了！ 用 `time` 标签包裹文本 `Thursday, September 15th`，添加一个 `datetime` 属性，将属性值设置为 `2016-09-15`。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md index cf93d69bcf..56ed31cd76 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md @@ -9,21 +9,21 @@ dashedName: use-headings-to-show-hierarchical-relationships-of-content # --description-- -标题标签（包括 `h1` 到 `h6`）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为了快速了解页面纲要，可以设置让阅读器只朗读页面标题。这意味着我们不应仅仅为了设置不同字号而使用标题，而应让标签本身具有语义化和实质性的含义，同时不同标题之间也应关联（具有层级关系）。 +标题标签（包括 `h1` 到 `h6`）有很高的使用率，它们用于描述内容的主题。 在屏幕阅读器中，用户为了快速了解页面纲要，可以设置让阅读器只朗读页面标题。 这意味着我们不应仅仅为了设置不同字号而使用标题，而应让标签本身具有语义化和实质性的含义，同时不同标题之间也应关联（具有层级关系）。 *语义化*的意思是，标签名能准确地表达它所含内容的信息类型。 -假如你在写一篇含有引言、正文、结论的论文。此时，如果把结论作为正文的一部分显然没有任何意义，因为结论应该是独立的章节。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。 +如果你正在撰写带有导言、主体和结论的论文，在你的概要中把结论作为主体的一部分是没有意义的。 结论应该是单独的一个部分。 类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。 在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。 -比如说，如果我们在一个 `h2` 标签后加上若干由 `h4` 标签引导的页面。此时发生了层级的错位，这会让使用屏幕阅读器的用户感到困惑。尽管在浏览器所显示的页面中，错误地使用这六个标题标签依然可以让它们在视觉效果上看起来很合理。但此时，我们应该按照层级正确地使用标签，然后用 CSS 来调整样式。 +比如说，如果我们在一个 `h2` 标签后加上若干由 `h4` 标签引导的页面。 此时发生了层级的错位，这会让使用屏幕阅读器的用户感到困惑。 尽管在浏览器所显示的页面中，错误地使用这六个标题标签依然可以让它们在视觉效果上看起来很合理。 但此时，我们应该按照层级正确地使用标签，然后用 CSS 来调整样式。 -最后一点，每个页面应只有一个 `h1` 标签，用来概括说明页面的主题。另外，这六个标题标签可以让搜索引擎获取页面的大纲。 +最后一点，每个页面应只有一个 `h1` 标签，用来概括说明页面的主题。 另外，这六个标题标签可以让搜索引擎获取页面的大纲。 # --instructions-- -Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签，使它们语义化且顺序正确。你需要将所有的 `h5` 标题标签调整为恰当的级别（即 `h3` 标题标签），因为它们是 `h2` 标题标签的子级。 +Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。 帮助他修改好标题，以便他的标记使内容具有语义意义，并显示其章节的父级与子级的关系。 你需要将所有的 `h5` 标题标签调整为恰当的级别，来说明它们是 `h2` 标题标签的子级。 调整为 `h3` 标签即可。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md index e92be4bfaa..1ed3a0ccc4 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md @@ -9,18 +9,17 @@ dashedName: use-tabindex-to-add-keyboard-focus-to-an-element # --description-- -HTML 的 `tabindex` 属性是与标签焦点相关的属性，给标签加上 tabindex 表示该标签可以获得焦点。`tabindex` 的值可以是零、负整数或正整数，这些数值分别定义了三种行为。 +HTML 的 `tabindex` 属性有三种与标签焦点相关的功能。 给标签加上 tabindex，表示该标签可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。 -当用户在页面中使用 tab 键时，有些标签（如：链接、表单控件）可以自动获得焦点，它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将其他标签（如 `div`、`span`、`p` 等）的 `tabindex` 属性值设为 0 来让它们实现类似的效果。比如： +当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。 它们获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。 我们可以通过将其他标签（如 `div`、`span`、`p` 等）的 `tabindex` 属性值设为 0 来让它们实现类似的效果。 比如： `
I need keyboard focus!
` -**注意：** -`tabindex` 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：将焦点设置到用 `div` 实现的弹出框上）的场景。只是这部分内容已经超出了当前挑战的范围。 +**注意：** `tabindex` 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。 这种方法通常用于以编程的方式使内容获得焦点（如：将焦点设置到用 `div` 实现的弹出框上）的场景。 只是这部分内容已经超出了当前挑战的范围。 # --instructions-- -Camper Cat 新建了一个用来收集他的用户信息的调查。他知道输入框可以自动获得键盘焦点，但他希望用户使用键盘切换标签时，焦点可以停留在指示文字（Instructions）上。请给 `p` 标签添加 `tabindex` 属性，并将它的属性值设为 0。注意：使用 `tabindex` 属性还可以让 CSS 伪类 `:focus` 在 `p` 标签上生效。 +Camper Cat 新建了一个用来收集他的用户信息的调查。 他知道输入框可以自动获得键盘焦点，但他希望用户使用键盘切换标签时，焦点可以停留在指示文字（Instructions）上。 给 `p` 标签添加一个 `tabindex` 属性，将属性值设置为 `0`。 注意：使用 `tabindex` 属性还可以让 CSS 伪类 `:focus` 在 `p` 标签上生效。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md index eb979592ef..d37f7d42b3 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md @@ -9,11 +9,11 @@ dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elem # --description-- -`tabindex` 属性还可以指定元素的 tab 键焦点顺序，将它的值设置为大于等于 1 的整数就可以实现这个功能。 +`tabindex` 属性还可以指定元素的 tab 键焦点顺序， 将它的值设置为大于等于 1 的整数，就可以实现这个功能。 -在使用键盘导航时，`tabindex` 属性值为 1 的元素会最先聚焦（选中）；之后，焦点将按照 `tabindex` 值（如：2、3 等）的顺序进行移动，最后回到默认（即 `tabindex` 值为 0）的元素上，如此循环。 +给元素设置 `tabindex="1"`，键盘将首先把焦点放在这个元素上。 然后它按照指定的 `tabindex` 值（2、3 等等）顺序循环，再移动到默认值和 `tabindex="0"` 项目。 -需要注意的是，使用这种方式设置 tab 键焦点顺序会覆盖默认顺序，其中默认顺序为标签在文档流中出现的顺序。这可能会让那些希望从页面顶部开始导航的用户感到困惑。使用 `tabindex` 在某些情况下是必要的，但在使用时要充分考虑到页面的可访问性。 +需要注意的是，使用这种方式设置 tab 键焦点顺序会覆盖默认顺序，其中默认顺序为标签在文档流中出现的顺序。 这可能会让那些希望从页面顶部开始导航的用户感到困惑。 使用 tabindex 在某些情况下是必要的，但在使用时要充分考虑到页面的可访问性。 举个例子： @@ -23,29 +23,29 @@ dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elem # --instructions-- -Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 把这个区域定位在页面的右上角。Camper Cat 希望他的搜索（search）`input` 与提交（submit）`input` 表单控件是 tab 键焦点顺序的前两项。请为搜索（search）`input` 添加 `tabindex` 属性，其属性值为 1；为提交（submit）`input` 添加 `tabindex` 属性，其属性值为 2。 +Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 把这个区域定位在页面的右上角。 Camper Cat 希望他的搜索（search）`input` 与提交（submit）`input` 表单控件是 tab 键焦点顺序的前两项。 给 `search` `input` 添加一个 `tabindex` 属性，属性值为 `1`。给 `submit` `input` 添加一个 `tabindex` 属性，属性值为 `2`。 # --hints-- -搜索 `input` 标签应包含 `tabindex` 属性。 +应给 `search` `input` 标签添加一个 `tabindex` 属性。 ```js assert($('#search').attr('tabindex')); ``` -提交 `input` 标签应包含 `tabindex` 属性。 +应给 `submit` `input` 添加一个 `tabindex` 属性。 ```js assert($('#submit').attr('tabindex')); ``` -搜索 `input` 标签的 `tabindex` 属性值应为 1。 +`search` `input` 标签的 `tabindex` 属性值应为 1。 ```js assert($('#search').attr('tabindex') == '1'); ``` -提交 `input` 标签的 `tabindex` 属性值应为 2。 +`submit` `input` 标签的 `tabindex` 属性值应为 2。 ```js assert($('#submit').attr('tabindex') == '2'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md index dae317d580..8f22f5c18f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md @@ -9,34 +9,29 @@ dashedName: wrap-content-in-the-article-element # --description-- -`article` 是另一个具有语义化特性的 HTML5 新标签。`article` 是一个用于表示独立且可复用结构的标签，用于呈现独立及完整的内容。这个标签适用于播客文章、论坛帖子或者新闻文章。 +`article` 是另一个具有语义化特性的 HTML5 新标签。 `article` 是一个用于表示独立且可复用结构的标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。 -有些技巧可以用来判断内容是否独立，像是如果内容脱离了上下文，这些内容是否仍然有意义？类似地，对于文本内容，可否把这些内容放到 RSS 推送里？如果回答是肯定的，那我们就可以认为这些内容是独立的。 +确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。 如果删除了所有周围的上下文，这个内容是否仍然有意义？ 类似地，对于文本内容，可否把这些内容放到 RSS 推送里？ 请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。 -**请注意 `section` 和 `div` 的区别：** -`section` 也是一个 HTML5 新标签，它与 `article` 标签的语义含义略有不同。`article` 用于独立且完整的内容，而 `section` 用于对与主题相关的内容进行分组。它们可以根据需要来嵌套使用。举个例子：如果一本书是一个 `article` 的话，那么每个章节就是 `section`。当内容组之间没有联系时，我们可以使用 `div`。 +**注意：**`section` 元素也是 HTML5 引入的新元素，其语义与 `article` 略有不同。 `article` 用于独立且完整的内容，而 `section` 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 举个例子：如果一本书是一个 `article` 的话，那么每个章节就是 `section`。 当内容组之间没有联系时，我们可以使用 `div`。 -```html -
- groups content -
- groups related content -
- groups independent, self-contained content -``` +`
` - 一组内容 `
` - 几组相关的内容 `
` - 几组独立的内容 # --instructions-- -Camper Cat 打算使用 `article` 标签来呈现他的博客页面里的帖子，但是他还没有加到最上面的帖子上。请使用 `article` 标签来代替 `div` 标签。 +Camper Cat 打算使用 `article` 标签来呈现他的博客页面里的帖子，但是他忘记在顶部的帖子上使用这个标签。 将 `div` 标签改为 `article` 标签。 # --hints-- -应存在 3 个 `article` 标签。 +应有三个 `article` 标签。 ```js assert($('article').length == 3); ``` -不应存在 `div` 标签。 +不应有 `div` 标签。 ```js assert($('div').length == 0); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md index 1d97040997..bcd96bb8b2 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md @@ -9,11 +9,11 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility # --description-- -下一个表单主题与单选按钮的可访问性有关。在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，`for` 的属性值指向相关选项的 `id`。然而单选按钮通常成组出现，而且用户必须选择其中一项。本次挑战介绍一种可以语义化呈现单选按钮组的方法。 +下一个表单主题涵盖单选按钮的可访问性。 在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，这些属性值指向相关选项的 `id`。 然而单选按钮通常成组出现，而且用户必须选择其中一项。 -我们可以使用 `fieldset` 标签将单选按钮组包含在里面，通常还会使用 `legend` 标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。 +`fieldset` 标签包裹整组单选按钮，实现这个功能。 我们可以使用 `fieldset` 标签将单选按钮组包含在里面，通常还会使用 `legend` 标签来为单选按钮组提供文字说明。 屏幕阅读器也可以朗读这些文字。 -当选项的含义很明确时，如“性别选择”，`fieldset` 与 `legend` 标签可以省略。这时，使用包含 `for` 属性的 `label` 标签就足够了。 +当选项的含义很明确时，如“性别选择”，`fieldset` 与 `legend` 标签可以省略。 这时，使用包含 `for` 属性的 `label` 标签就足够了。 举个例子： @@ -33,7 +33,7 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility # --instructions-- -当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。通过上一个挑战的学习，Camper Cat 创建了一组单选按钮，并为每个选项的 `label` 标签添加了 `for` 属性，但是 Camper Cat 的代码依然需要你的帮助。请将包含单选按钮组的 `div` 标签替换为 `fieldset` 标签；将 `p` 标签替换为 `legend` 标签。 +当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。 他添加了一组单选按钮，并从我们之前的课程中吸取了教训，为每个选项使用带有 `for` 属性的 `label` 标签。 Camper Cat 加油！ 然而，他仍然需要一些帮助。 请将包含单选按钮组的 `div` 标签替换为 `fieldset` 标签；将 `p` 标签替换为 `legend` 标签。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md index 83d4f2f360..8bdf13cfcf 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md @@ -18,7 +18,7 @@ dashedName: add-a-box-shadow-to-a-card-like-element
  • offset-y 阴影的垂直偏移量；
  • blur-radius 模糊半径；
  • spread-radius 阴影扩展半径；
    • -
  • 颜色。
    • +
  • color
    • 其中 `blur-radius` 和 `spread-radius` 是可选的。 @@ -33,7 +33,7 @@ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); # --instructions-- -我们把卡片的 `id` 设置成了 `thumbnail`，请把上面的 `box-shadow` 值赋给这个卡片。 +元素现在有一个 `thumbnail` id。 在这个选择器中，使用上面的示例 CSS 值在卡片上加一个 `box-shadow`。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md index 4e055d1d99..fff43ea9c5 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md @@ -9,13 +9,13 @@ dashedName: adjust-the-background-color-property-of-text # --description-- -为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加 `background-color` 属性。在本挑战里我们将使用 `rgba()` 颜色，而不是之前学到的 `hex` 编码或者 `rgb()` 颜色。 +为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加 `background-color` 属性。 在本挑战里我们将使用 `rgba()` 颜色，而不是之前学到的 `hex` 编码或者 `rgb()` 颜色。
    rgba 代表：
      r = red 红色
      g = green 绿色
      b = blue 蓝色
      a = alpha 透明度
    -RGB 值可以取在 0 到 255 之间。alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。`rgba()` 在需要设置颜色透明度时十分有用，这意味着你可以做出一些很漂亮的半透明效果。 +RGB 值可以取在 0 到 255 之间。 alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。 `rgba()` 在需要设置颜色透明度时十分有用， 这意味着你可以做出一些很漂亮的半透明效果。 -在本挑战里你将会用到这个代码 `background-color: rgba(45, 45, 45, 0.1)`。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。 +在本挑战里你将会用到这个代码 `background-color: rgba(45, 45, 45, 0.1)`。 它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。 # --instructions-- @@ -29,13 +29,13 @@ RGB 值可以取在 0 到 255 之间。alpha 值可取在 0 到 1 之间，其 ```js assert( - code.match( - /(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi + /(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test( + code.replace(/\s/g, '') ) ); ``` -`h4` 元素的 `padding` 属性值应为 `10px`。 +`h4` 元素的 `padding` 属性值应为 10px。 ```js assert( diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md index b2446e13e4..29b40b0910 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md @@ -9,33 +9,33 @@ dashedName: adjust-the-color-of-various-elements-to-complementary-colors # --description-- -通过前面关卡的学习，我们知道了补色搭配能形成强列的对比效果，让内容更富生机。但是如果使用不当效果会适得其反：比如将文字背景色和文字颜色设置为互补色，这样文字会很难看清。通常的做法是，一种颜色做为主要颜色，然后使用其补色用来装点那些需要用户特别注意的部分。 +通过前面关卡的学习，我们知道了补色搭配能形成强列的对比效果，让内容更富生机。 但是如果使用不当效果会适得其反：比如将文字背景色和文字颜色设置为互补色，这样文字会很难看清。 通常的做法是，一种颜色做为主要颜色，然后使用其补色用来装点那些需要用户特别注意的部分。 # --instructions-- -使用深青色（`#09A7A1`）做为页面主色，用其补色橙色（`#FF790E`）来装饰登录按钮。把 `header` 和 `footer` 的 `background-color` 从黑色改成深青色。然后把 `h2` 的文字 `color` 也改成深青色。最后，把 `button` 的 `background-color` 改成橙色。 +使用深青色（`#09A7A1`）做为页面主色，用其补色橙色（`#FF790E`）来装饰登录按钮。 把 `header` 和 `footer` 的 `background-color` 从黑色改成深青色。 然后把 `h2` 的文字 `color` 也改成深青色。 最后，把 `button` 的 `background-color` 改成橙色。 # --hints-- -`header` 元素的 `background-color` 属性值应为 `#09A7A1`。 +`header` 元素的 `background-color` 属性值应为 #09A7A1。 ```js assert($('header').css('background-color') == 'rgb(9, 167, 161)'); ``` -`footer` 元素的 `background-color` 属性值应为 `#09A7A1`。 +`footer` 元素的 `background-color` 属性值应为 #09A7A1。 ```js assert($('footer').css('background-color') == 'rgb(9, 167, 161)'); ``` -`h2` 元素的 `color` 属性值应为 `#09A7A1`。 +`h2` 元素的 `color` 属性值应为 #09A7A1。 ```js assert($('h2').css('color') == 'rgb(9, 167, 161)'); ``` -`button` 元素的 `background-color` 属性值应为 `#FF790E`。 +`button` 元素的 `background-color` 属性值应为 #FF790E。 ```js assert($('button').css('background-color') == 'rgb(255, 121, 14)'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md index f31cfc8db0..6c3862416f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md @@ -9,7 +9,7 @@ dashedName: adjust-the-height-of-an-element-using-the-height-property # --description-- -和 `width` 属性类似，你可以使用 CSS 里面的 `height` 属性来指定元素的高度。下面这段代码可以把图片的高度设置为 20px： +和 `width` 属性类似，你可以使用 CSS 里面的 `height` 属性来指定元素的高度。 下面这段代码可以把图片的高度设置为 20px： ```css img { @@ -25,7 +25,7 @@ img { # --hints-- -`h4` 的 `height` 属性值应为 `25px`。 +`h4` 的 `height` 属性值应为 25px。 ```js assert( diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md index 2ddbf5c01a..9b0719ac7b 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md @@ -9,9 +9,9 @@ dashedName: adjust-the-hover-state-of-an-anchor-tag # --description-- -本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。 +本挑战将要涉及到伪类。 伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。 -比如，可以使用 `:hover` 伪类选择器来选取超链接的悬停状态。下面的代码可以改变超链接悬停时的颜色： +比如，可以使用 `:hover` 伪类选择器来选取超链接的悬停状态。 下面的代码可以在鼠标悬停在超链接上时将其 `color` 变成红色： ```css a:hover { @@ -21,7 +21,7 @@ a:hover { # --instructions-- -代码编辑器里面已经有了一个 CSS 规则把所有的 `a` 标签定义成了黑色。请添加一个规则，使得用户悬停在 `a` 标签时，`a` 标签的 `color` 会变成蓝色。 +代码编辑器里面已经有了一个 CSS 规则把所有的 `a` 标签定义成了黑色。 请添加一个规则，使得用户悬停在 `a` 标签时，标签的 `color` 变成蓝色。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md index a714847fe8..2a78858019 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md @@ -9,13 +9,13 @@ dashedName: adjust-the-hue-of-a-color # --description-- -HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了 `hsl()` 做为颜色的描述方式。 +颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 `hsl()` 做为颜色的描述方式。 -**色相**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。 +**色相**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。 -**饱和度**是指色彩的纯度，也就是颜色里灰色的占比。饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。饱和度的取值范围是表示灰色所占百分比的 0 至 100。 +**饱和度**是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。 -**亮度**决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。 +**亮度**决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。 下面是一些使用 `hsl()` 描述颜色的例子，颜色都为满饱和度，中等亮度: @@ -23,41 +23,41 @@ HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标 # --instructions-- -将 class 为 `green`、`cyan` 和 `blue` 的 `div` 的 `background-color` 属性值设置为使用 `hsl()` 表示的颜色。颜色都为满饱和度，亮度中等。 +将 class 为 `green`、`cyan` 和 `blue` 的 `div` 的 `background-color` 属性值设置为使用 `hsl()` 表示的颜色。 颜色都为满饱和度，亮度中等。 # --hints-- -应该使用 `hsl()` 属性来表示绿色。 +应使用 `hsl()` 属性来设置颜色为 `green`。 ```js assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi)); ``` -应该使用 `hsl()` 属性来表示蓝绿色。 +应使用 `hsl()` 属性来设置颜色为 `cyan`。 ```js assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi)); ``` -应该使用 `hsl()` 属性来表示蓝色。 +应使用 `hsl()` 属性来设置颜色为 `blue`。 ```js assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi)); ``` -class 为 `green` 的 `div` 的 `background-color` 属性值应为绿色。 +class 为 `green` 的 `div` 元素的 `background-color` 属性值应为绿色。 ```js assert($('.green').css('background-color') == 'rgb(0, 255, 0)'); ``` -class 为 `cyan` 的 `div` 的 `background-color` 属性值应为蓝绿色。 +class 为 `cyan` 的 `div` 元素的 `background-color` 属性值应为蓝绿色。 ```js assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)'); ``` -class 为 `blue` 的 `div` 的 `background-color` 属性值应为蓝色。 +class 为 `blue` 的 `div` 元素的 `background-color` 属性值应为蓝色。 ```js assert($('.blue').css('background-color') == 'rgb(0, 0, 255)'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md index c82bbcffd2..0c1c056185 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md @@ -9,15 +9,15 @@ dashedName: adjust-the-size-of-a-header-versus-a-paragraph-tag # --description-- -标题（`h1` 到 `h6`）的文字应该比段落的文字大，这样可以让用户更直观的看到页面布局，同时能根据不同元素的层级梳理出页面的结构，更方便用户获取关键的信息。你可以使用 `font-size` 属性来设置元素内文字的大小。 +标题标签的字体大小（从 `h1` 到 `h6`）一般应该大于段落标签的字体大小。 这使用户更容易在视觉上了解页面上所有内容的布局和重要程度。 你可以使用 `font-size` 属性来设置元素内文字的大小。 # --instructions-- -把 `h4` 标签的 `font-size` 的属性值改成 27 像素，让标题更醒目。 +把 `h4` 标签的 `font-size` 的属性值改成 27px，让标题更醒目。 # --hints-- -应给 `h4` 元素添加一个 `font-size` 属性并将属性值设置为 `27px`。 +应给 `h4` 元素添加一个 `font-size` 属性并将属性值设置为 27px。 ```js assert($('h4').css('font-size') == '27px'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md index 733044072d..75a7cf980e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md @@ -9,11 +9,11 @@ dashedName: adjust-the-tone-of-a-color # --description-- -`hsl()` 使 CSS 更改颜色色调更加方便。比如，给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 `hsl()` 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。饱和度代表灰色的占比，亮度代表白色和黑色的占比。`hsl()` 在你想获取一个基准色的变种的情景下会十分有用。 +`hsl()` 使 CSS 更改颜色色调更加方便。 比如，给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。 另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。 回忆下 `hsl()` 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。 饱和度代表灰色的占比，亮度代表白色和黑色的占比。 这在你想获取一个基准色的变种的情景下会十分有用。 # --instructions-- -所有元素的默认 `background-color` 都是透明色。当前页面的导航栏 `nav` 背景色之所以看起来是蓝绿色，是因为它背后的 `header` 的 `background-color` 属性值为 `cyan`。请将 `nav` 的 `background-color` 也设置为 `cyan`，但把它的饱和度调整为 80%，亮度调整为 25%。 +所有元素的默认 `background-color` 都是 `transparent`。 当前页面的导航栏 `nav` 背景色之所以看起来是蓝绿色，是因为它背后的 `header` 的 `background-color` 属性值为 `cyan`。 请将 `nav` 的 `background-color` 也设置为 `cyan`，但把它的饱和度调整为 `80% saturation`，亮度调整为 `25% lightness`。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md index 48c26c04f9..85415afea9 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md @@ -9,7 +9,7 @@ dashedName: adjust-the-width-of-an-element-using-the-width-property # --description-- -你可以使用 CSS 里的 `width` 属性来指定元素的宽度。属性值可以是相对单位（比如 em）、绝对单位（比如 px）、或者其父元素宽度的百分比。下面这段代码可以把图片的宽度设置为 220px： +你可以使用 CSS 里的 `width` 属性来指定元素的宽度。 属性值可以是相对单位（比如 `em`），绝对单位（比如 `px`），或者包含块（父元素）宽度的百分比。 下面这段代码可以把图片的宽度设置为 220px： ```css img { @@ -19,7 +19,7 @@ img { # --instructions-- -请使用 `fullCard` class 来选择卡片元素，为它添加 `width` 属性，并将它的宽度设置为 245px。 +为卡片元素添加 `width` 属性，并将它的宽度设置为 245px。 使用 `fullCard` class 来选择卡片元素。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md index b23098e5e7..ea2805c674 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md @@ -9,9 +9,9 @@ dashedName: animate-elements-at-variable-rates # --description-- -改变相似元素的动画频率的方法有很多。目前我们接触到的就有 `animation-iteration-count` 和 `@keyframes`。 +改变相似元素的动画频率的方法有很多。 目前我们接触到的就有 `animation-iteration-count` 和 `@keyframes`。 -举例说明，右边的动画包含了两个小星星，每个小星星都在 20% `@keyframes` 处变小并且 opacity 变为 20%，也就是一闪一闪的动画效果。你可以通过改变其中一个星星的 `@keyframes` 规则以使两个小星星以不同的频率闪烁。 +举例说明，右边的动画包含了两个小星星，每个小星星都在 `@keyframes` 为 20% 处变小并且透明度变低，也就是一闪一闪的动画效果。 你可以通过改变其中一个元素的 `@keyframes` 规则以使两个小星星以不同的频率闪烁。 # --instructions-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md index aa5f253869..c05c57a42f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md @@ -9,19 +9,19 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count # --description-- -之前的关卡里介绍了一些动画属性以及 `@keyframes` 规则的用法。还有一个常用的动画属性是 `animation-iteration-count`，这个属性允许你控制动画循环的次数。下面是一个例子： +之前的关卡里介绍了一些动画属性以及 `@keyframes` 规则的用法。 还有一个常用的动画属性是 `animation-iteration-count`，这个属性允许你控制动画循环的次数。 下面是一个例子： `animation-iteration-count: 3;` -在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 infinite。 +在这种情况下，动画将在运行 3 次后停止，但可以通过设置该值为 `infinite` 来继续运行动画。 # --instructions-- -把 `animation-iteration-count` 属性值改成 infinite，以使右边的球持续跳跃。 +把 `animation-iteration-count` 属性值改成 `infinite`，以使右边的球持续跳跃。 # --hints-- -`animation-iteration-count` 属性值应该为 infinite。 +`animation-iteration-count` 属性应有一个值 `infinite`。 ```js assert($('#ball').css('animation-iteration-count') == 'infinite'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md index fdaaa48dbe..492ced7125 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md @@ -9,9 +9,9 @@ dashedName: animate-multiple-elements-at-variable-rates # --description-- -在前面的关卡里，我们通过修改 `@keyframes` 改变了两个相似动画元素的频率。你也可以通过改变多个元素的 `animation-duration` 来达到同样的效果。 +在前面的关卡里，我们通过修改 `@keyframes` 改变了两个相似动画元素的频率。 你也可以通过改变多个元素的 `animation-duration` 来达到同样的效果。 -在编辑器代码运行的动画里，天空中有三个以同样频率不停闪烁的星星。你可以设置每一个星星的 `animation-duration` 属性为不同的值来使其具有不同的闪烁频率。 +在代码编辑器里运行的动画中，天空中有三颗以同样频率不停闪烁的星星。 你可以设置每一个星星的 `animation-duration` 属性为不同的值，以使其具有不同的闪烁频率。 # --instructions-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md index 52a1f350ca..e8dd42839e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md @@ -9,17 +9,17 @@ dashedName: center-an-element-horizontally-using-the-margin-property # --description-- -在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的 `margin` 值设置为 `auto`。 +在应用设计中经常需要把一个块级元素水平居中显示。 一种常见的实现方式是把块级元素的 `margin` 值设置为 auto。 -同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其 `display` 属性为 `block` 来把它变成块级元素。 +同样的，这个方法也对图片奏效。 图片默认是内联元素，但是可以通过设置其 `display` 属性为 `block`来把它变成块级元素。 # --instructions-- -通过将页面中 `div` 的 `margin` 属性值设置为 `auto` 来让它居中显示。 +通过添加一个值为 `auto` 的 `margin` 属性，将 `div` 在页面居中。 # --hints-- -`div` 的 `margin` 属性值应为 `auto`。 +`div` 应有一个 `margin`，设置为 `auto`。 ```js assert(code.match(/margin:\s*?auto;/g)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md index dab41d0978..299d3df98b 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md @@ -9,9 +9,9 @@ dashedName: change-an-elements-relative-position # --description-- -在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。 +在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。 块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。 元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。 -当元素的 position 设置为 `relative` 时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。CSS 里控制各个方向偏移量的属性是 `left`、`right`、`top` 和 `bottom`。它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。下面的例子展示了段落向上偏移 10 像素： +当元素的定位设置为 `relative` 时，它允许你通过 CSS 指定该元素在当前文档流页面下的*相对*偏移量。 CSS 里控制各个方向偏移量的属性是 `left`、`right`、`top` 和 `bottom`。 它们代表从原来位置向远离该方向*偏移*指定的像素、百分比或者 em。 下面的例子展示了段落向上偏移 10px： ```css p { @@ -20,21 +20,23 @@ p { } ``` -把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。 **注意：**定位可以让你在页面布局上更灵活、高效。注意不管元素的定位是怎样，内部的 HTML 代码阅读起来应该是整洁、有意义的。这样也可以让视障人员（他们重度依赖辅助设备比如屏幕阅读软件）也能够无障碍地浏览你的网页。 +把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。 + +**注意：**定位可以使页面布局更灵活、高效。 不管元素的定位是怎样的，HTML 标记在从上到下阅读起来时应该是整洁的、有意义的。 这样可以让视障人士（重度依赖辅助设备比如屏幕阅读软件的人们）也能够无障碍地浏览你的网页。 # --instructions-- -把 `h2` 的 `position` 属性值设置成 `relative`，使用相应的 CSS 属性调整 `h2` 的位置，使其相对原本的位置向下偏移 15 像素。注意不要对 h1 和 p 元素的位置产生影响。 +把 `h2` 的 `position` 设置成 `relative`，使用相应的 CSS 属性调整它的位置，使其相对 `top` 偏移 15px，同时还在文档流中处于原来的位置。 这不会对 h1 和 p 元素的位置产生影响。 # --hints-- -`h2` 元素应该添加 `position` 属性，其属性值应为 `relative`。 +`h2` 元素应有一个值为 `relative` 的 `position` 属性。 ```js assert($('h2').css('position') == 'relative'); ``` -你应该使用 CSS 属性调整 `h2` 的位置使其从原来的位置向下偏移 `15px`。 +你应该使用 CSS 属性调整 `h2` 的位置，使其从原来的位置相对 `top` 偏移 15px。 ```js assert($('h2').css('top') == '15px'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md index e6833e5e9c..cb398bd6b1 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md @@ -9,31 +9,31 @@ dashedName: change-animation-timing-with-keywords # --description-- -在 CSS 动画里，`animation-timing-function` 用来定义动画的速度曲线。速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（`animation-duration`）从 A 运动到 B，那么 `animation-timing-function` 表述的就是车在运动中的加速和减速等过程。 +在 CSS 动画里，`animation-timing-function` 用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。 如果要描述的动画是一辆车在指定时间内（`animation-duration`）从 A 运动到 B，那么 `animation-timing-function` 表述的就是车在运动中的加速和减速等过程。 -对于常用的选项，CSS 提供了内置的关键字方便我们调用。比如，默认的值是 `ease`：动画以低速开始，然后加快，在结束前变慢；其它常用的值包括 `ease-out`：动画以高速开始，以低速结束；`ease-in`，动画以低速开始，以高速结束；`linear`：动画从头到尾的速度是相同的。 +有一些预定义的关键字可用于常见的选项。 比如，默认值是 `ease`，动画以低速开始，然后加快，在结束前变慢。 其它常用的值包括 `ease-out`：动画以高速开始，以低速结束；`ease-in`，动画以低速开始，以高速结束；`linear`：动画从头到尾的速度是相同的。 # --instructions-- -给 id 为 `ball1` 和 `ball2` 的元素添加 `animation-timing-function`，`ball1` 的属性值为 `linear`，`ball2` 的属性值为 `ease-out`。它们的 `animation-duration` 都为 2 秒，注意观察它们在开始和结束时的不同。 +给 id 为 `ball1` 和 `ball2` 的元素添加 `animation-timing-function`，`ball1` 的属性值为 `linear`，`ball2` 的属性值为 `ease-out`。 它们的 `animation-duration` 都为 2 秒，注意观察它们在开始和结束时的不同。 # --hints-- -id 为 `ball1` 的元素的 `animation-timing-function` 属性值应为 linear。 +id 为 `ball1` 的元素的 `animation-timing-function` 属性值应为 `linear`。 ```js -const ball1Animation = $('#ball1') - .css('animation-timing-function') - .replace(/\s/g, ''); +const ball1Animation = __helpers.removeWhiteSpace( + $('#ball1').css('animation-timing-function') +); assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)'); ``` -id 为 `ball2` 的元素的 `animation-timing-function` 属性值应为 ease-out。 +id 为 `ball2` 的元素的 `animation-timing-function` 属性值为 `ease-out`。 ```js -const ball2Animation = $('#ball2') - .css('animation-timing-function') - .replace(/\s/g, ''); +const ball2Animation = __helpers.removeWhiteSpace( + $('#ball2').css('animation-timing-function') +); assert( ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)' ); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md index ed0cbc155f..49c4ffd5de 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md @@ -9,7 +9,7 @@ dashedName: change-the-position-of-overlapping-elements-with-the-z-index-propert # --description-- -当一些元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用 `z-index` 属性指定元素的堆叠次序。`z-index` 的取值是整数，数值大的元素会叠放到数值小的元素上面。 +当一些元素在位置上重叠时（例如，使用 `position: absolute | relative | fixed | sticky` 时），在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。 你可以使用 `z-index` 属性指定元素的堆叠次序。 `z-index` 的取值是整数，数值大的元素会叠放到数值小的元素上面。 # --instructions-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md index 30214d8391..3c6512524f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md @@ -9,11 +9,11 @@ dashedName: create-a-gradual-css-linear-gradient # --description-- -HTML 元素的背景色并不局限于单色。CSS 还为我们提供了颜色渐变。可以通过 `background` 里的 `linear-gradient()` 来实现线性渐变，以下是它的语法： +HTML 元素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。 可通过 `background` 里的 `linear-gradient()` 实现线性渐变， 以下是它的语法： -`background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);` +`background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);` -第一个参数用来表明颜色渐变的初始方向。它的值是一个角度，比如 `90deg` 代表水平渐变（从左到右），再比如 `45deg` 代表对角线方向的渐变（从左下到右上）。后续的参数指定了渐变颜色的顺序。 +第一个参数用来表明颜色渐变的初始方向。 它的值是一个角度，比如 `90deg` 代表水平渐变（从左到右），再比如 `45deg` 代表对角线方向的渐变（从左下到右上）。 后续的参数指定了渐变颜色的顺序。 例如： diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md index ca22929c39..9f17344fc7 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md @@ -9,19 +9,17 @@ dashedName: create-a-graphic-using-css # --description-- -术语表：blur-radius => 模糊半径，spread-radius => 辐射半径，transparent => 透明的，border-radius => 圆角边框。 +通过使用不同的选择器和属性，你可以做出有趣的形状， 一个简单的例子是新月形状。 在这个挑战中，我们会学习如何使用 `box-shadow` 属性来设置元素的阴影，以及使用 `border-radius` 属性控制元素的圆角边框。 -通过使用不同的选择器和属性，你可以做出有趣的形状，比如新月形状。在这个挑战中，我们会学习如何使用 `box-shadow` 属性来设置元素的阴影，以及使用 `border-radius` 属性控制元素的圆角边框。 - -首先我们来创建一个圆的、透明的图形，它具有模糊阴影并略微向两边递减。如你所见，这个阴影其实就是新月形狀。 +首先我们来创建一个圆的、透明的图形，它具有模糊阴影并略微向两边递减。 如你所见，这个阴影其实就是新月形狀。 为了创建一个圆形的对象，`border-radius` 应该被设置成 50%。 -你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和颜色值。其中 `blur-radius` 和 `spread-radius` 是可选的。 +你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和颜色值。 其中 `blur-radius` 和 `spread-radius` 是可选的。 # --instructions-- -把编辑器里的正方形元素变成新月形状。首先，把 `background-color` 改为 transparent，接着把 `border-radius` 属性值设置成 50%，以创建一个圆形。最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px、`offset-y` 为 10px、`blur-radius` 为 0、`spread-radius` 为 0、`color` 为 blue。 +把编辑器里的正方形元素变成新月形状。 首先，把 `background-color` 改为 `transparent`，接着把 `border-radius` 属性设置成 50%，以创建一个圆形。 最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，颜色为 `blue`。 # --hints-- @@ -31,13 +29,13 @@ dashedName: create-a-graphic-using-css assert(code.match(/background-color:\s*?transparent;/gi)); ``` -`border-radius` 属性值应为 `50%`。 +`border-radius` 属性的值应该设置为 `50%`。 ```js assert(code.match(/border-radius:\s*?50%;/gi)); ``` -`box-shadow` 的 `offset-x`、`offset-y`、`blur-radius`、`spread-radius`、`color` 属性值应依次为 `25px`、`10px`、`0`、`0`、`blue`。 +更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，颜色为 `blue`。 ```js assert( diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md index 940d85a442..897a428d5a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md @@ -9,9 +9,7 @@ dashedName: create-a-horizontal-line-using-the-hr-element # --description-- -术语：Horizontal Rule => hr => 水平线。 - -你可以用 `hr` 标签来创建一条宽度撑满父元素的水平线。这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。 +你可以用 `hr` 标签来创建一条宽度撑满父元素的水平线。 这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。 # --instructions-- @@ -27,7 +25,7 @@ dashedName: create-a-horizontal-line-using-the-hr-element assert($('hr').length == 1); ``` -`hr` 标签应该在标题和段落之间。 +`hr` 应在标题和段落之间。 ```js assert(code.match(/<\/h4>\s*?|\s*?\/>)\s*?

    /gi)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md index 21f513bc0e..d472236fe8 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md @@ -9,7 +9,7 @@ dashedName: create-a-more-complex-shape-using-css-and-html # --description-- -世界上最流行的形状非心形莫属了，在本挑战中我们将用纯 CSS 创建一个心形。但是首先你需要了解伪元素 `::before` 和 `::after`。伪元素可以在所选元素之前或之后添加一些内容。在下面的代码中，`::before` 伪元素用来给 class 为 `heart` 的元素添加一个正方形： +世界上最流行的形状非心形莫属了，在本挑战中我们将用纯 CSS 创建一个心形。 但是首先你需要了解伪元素 `::before` 和 `::after`。 伪元素可以在所选元素之前或之后添加一些内容。 在下面的代码中，`::before` 伪元素用来给 class 为 `heart` 的元素添加一个正方形： ```css .heart::before { @@ -24,23 +24,24 @@ dashedName: create-a-more-complex-shape-using-css-and-html } ``` -`::before` 和 `::after` 必须配合 `content` 来使用。这个属性通常用来给元素添加内容诸如图片或者文字。尽管有时 `::before` 和 `::after` 是用来实现形状而非文字，但 `content` 属性仍然是必需的，此时它的值可以是空字符串。在上面的例子里，我们用 `::before` 为 class 是 `heart` 的元素添加了一个黄色的矩形，矩形的 `height` 和 `width` 分别为 50px 和 70px。由于设置了其边框半径为 25%，所以它会呈现出圆角矩形的样子。同时其相对位置为向右偏移 5px、向上偏移 50px。 +`::before` 和 `::after` 必须配合 `content` 来使用。 这个属性通常用来给元素添加内容诸如图片或者文字。 尽管有时 `::before` 和 `::after` 是用来实现形状而非文字，但 `content` 属性仍然是必需的，此时它的值可以是空字符串。 在上面的例子里，class 为 `heart` 元素的 `::before` 伪类添加了一个黄色的长方形，长方形的高和宽分别为 `50px` 和 `70px`。 这个矩形有圆角，因为它的 `border-radius` 为 25%，它的位置是绝对位置，位于离元素左边和顶部分别是 `5px`、`50px` 的位置。 # --instructions-- -把屏幕里的元素变成心形。在 `heart::after` 选择器里面，把 `background-color` 改成粉色（pink），把 `border-radius` 的属性值改成 50%。 +把屏幕里的元素变成心形。 在 `heart::after` 选择器里，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。 -接下来，用类选择器选取 class 为 `heart` 的元素，为它添加 `transform` 属性。使用 `rotate()` 函数并设置角度为 -45 度。 +接下来，用类选择器选取 class 为 `heart`（只是 `heart`）的元素，为它添加 `transform` 属性。 使用 `rotate()` 函数并设置角度为 -45 度。 最后，在 `heart::before` 选择器里面，设置 `content` 属性值为空字符串。 # --hints-- -`heart::after` 伪元素的 `background-color` 属性值应为粉色。 +`heart::after` 选择器的 `background-color` 属性值应为 `pink`。 ```js +const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0]; assert( - code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi) + /({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter) ); ``` @@ -50,7 +51,7 @@ assert( assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2); ``` -class 为 `heart` 的元素的 `transform` 属性应使用 `rotate()` 函数并传入参数 `-45deg`。 +class 为 `heart` 的元素的 `transform` 属性应使用 `rotate()` 函数并传入参数 -45 度。 ```js assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md index a09a39b5e3..a8890dc9d4 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md @@ -11,7 +11,7 @@ dashedName: create-movement-using-css-animation 在元素的 `position` 已有指定值（如 `fixed` 或者 `relative`）时，CSS 偏移属性 `right`、`left`、`top`、`bottom` 可以用在动画规则里创建动作。 -就像下面的例子展示的那样，你可以在 `50%` keyframe 处设置 `top` 属性为 50px，在开始（0%）和最后（100%）keyframe 处设置为 0px，以实现元素先向下运动，然后返回的动作效果。 +就像下面的例子展示的那样，你可以在 `50%` keyframe 处设置 `top` 属性为 50px，在开始（`0%`）和结束（`100%`）keyframe 处设置为 0px，以实现元素先向下运动，然后返回的动作效果。 ```css @keyframes rainbow { @@ -32,38 +32,26 @@ dashedName: create-movement-using-css-animation # --instructions-- -请实现让 `div` 水平运动的效果。使用 `left` 偏移属性，添加 `@keyframes` 规则，让 rainbow 在 `0%` 的 `keyframe` 下从偏移 0 像素开始；在 `50%` 时偏移 25 像素；在 `100%` 时偏移 -25 像素。不要修改编辑器里的 `top` 属性，元素应该同时在水平和竖直方向运动。 +请实现让 `div` 水平运动的效果。 使用 `left` 偏移属性，添加 `@keyframes` 规则，让 rainbow 在 `0%` 处偏移 0px，在 `50%` 处偏移 25px，在 `100%` 处偏移 -25px。 不要修改编辑器里的 `top` 属性，元素应该同时在水平和竖直方向运动。 # --hints-- -`0%` 的 `@keyframes` 规则应为向 `left` 偏移 `0px`。 +`0%` 的 `@keyframes` 规则应为向 `left` 偏移 0px。 ```js -assert( - code.match( - /0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi - ) -); +assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi)); ``` -`50%` 的 `@keyframes` 规则应为向 `left` 偏移 `25px`。 +`50%` 的 `@keyframes` 规则应为向 `left` 偏移 25px。 ```js -assert( - code.match( - /50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi - ) -); +assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi)); ``` -`100%` 的 `@keyframes` 规则应为向 `left` 偏移 `-25px`。 +`100%` 的 `@keyframes` 规则应为向 `left` 偏移 -25px。 ```js -assert( - code.match( - /100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi - ) -); +assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi)); ``` # --seed-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md index 80a9fd93f9..5770bfae9f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md @@ -9,7 +9,7 @@ dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image # --description-- -为了增加背景图的质感，我们可以为它添加一个不那么明显的纹理图案，这样可以让页面更讨喜。但关键在于，我们需要找到一个平衡点，因为我们不希望背景图抢占了内容的风头，造成喧宾夺主的结果。`background` 属性支持使用 `url()` 函数作为属性值，这让我们可以通过链接的方式引入纹理或样式的图片。图片链接的地址应写在括号内，一般会用引号包起来。 +为了增加背景图的质感，我们可以为它添加一个不那么明显的纹理图案，这样可以让页面更讨喜。 但关键在于，我们需要找到一个平衡点，因为我们不希望背景图抢占了内容的风头，造成喧宾夺主的结果。 `background` 属性支持使用 `url()` 函数作为属性值，这让我们可以通过链接的方式引入纹理或样式的图片。 图片链接的地址应写在括号内，一般会用引号包起来。 # --instructions-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md index d227857056..75b0757993 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md @@ -9,9 +9,9 @@ dashedName: create-visual-balance-using-the-text-align-property # --description-- -这部分课程的主题是应用视觉设计。开始的挑战基于美化一个卡片组件的外观，借此展示了若干核心原则。 +这部分课程的主题是应用视觉设计。 开始的挑战基于美化一个卡片组件的外观，借此展示了若干核心原则。 -web 内容大部分都是文本。CSS 里面的 `text-align` 属性可以控制文本的对齐方式。 +web 内容大部分都是文本。 CSS 里面的 `text-align` 属性可以控制文本的对齐方式。 `text-align: justify;` 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。 @@ -19,21 +19,21 @@ web 内容大部分都是文本。CSS 里面的 `text-align` 属性可以控制 `text-align: right;` 可以让文本右对齐。 -`text-align: left;` 是 `text-align` 的默认值，它可以让文本左对齐。 +`text-align: left;` 是默认值，它可以让文本左对齐。 # --instructions-- -请让内容文本为 `"Google"` 的 `h4` 标签居中对齐；让介绍了 Google 创立历程的段落文本两端对齐。 +请让内容文本为 “Google” 的 `h4` 标签居中对齐， 然后将介绍 Google 创立历程的段落文本两端对齐。 # --hints-- -应在 `h4` 标签上使用 text-align 属性设置文本居中对齐。 +`h4` 标签应有值为 `center` 的 text-align 属性。 ```js assert($('h4').css('text-align') == 'center'); ``` -应在 `p` 标签上使用 text-align 属性设置文本两端对齐。 +`p` 标签应有值为 `justify` 的 text-align 属性。 ```js assert($('p').css('text-align') == 'justify'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md index 1184697d5d..e7aefe99b5 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md @@ -15,7 +15,7 @@ dashedName: create-visual-direction-by-fading-an-element-from-left-to-right # --instructions-- -使用 id 选择器选择 id 为 `ball` 的元素，在 `@keyframes` 为 `50%` 的节点里添加 `opacity` 属性并设置属性值为 0.1，使其在向右移动时渐隐。 +使用 id 选择器选择 id 为 `ball` 的元素，在 @keyframes 为 `50%` 的节点里添加 `opacity` 属性并设置属性值为 0.1，使其在向右移动时渐隐。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md index eea313d582..1d1af5dc55 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md @@ -1,6 +1,6 @@ --- id: 587d781c367417b2b2512abf -title: 降低元素的 opactiy +title: 降低元素的透明度 challengeType: 0 videoUrl: 'https://scrimba.com/c/c7aKqu4' forumTopicId: 301055 @@ -11,7 +11,7 @@ dashedName: decrease-the-opacity-of-an-element CSS 里的 `opacity` 属性用来设置元素的透明度。 -

    属性值为 1 代表完全不透明。
    属性值为 0.5 代表半透明。
    属性值为 0 代表完全透明。
    +
    属性值为 1 代表完全不透明。
    属性值为 0.5 代表半透明。
    属性值为 0 代表完全透明。
    透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。 diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md index fade880ded..4fca618a76 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md @@ -9,31 +9,33 @@ dashedName: learn-about-complementary-colors # --description-- -色彩理论以及设计色彩学很复杂，这里将只涉及基础部分。在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。 +色彩理论以及设计色彩学很复杂，这里将只涉及基础部分。 在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。 不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。 -一半是科学，一半是艺术，色环是我们认识颜色关系的好工具。它是一个近色相邻、异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色就互为补色。在绘画中，两个互为补色的颜色会在混合后变成灰色。补色搭配能形成强烈的对比效果，传达出活力、能量、兴奋等意义。 +色环是我们认识颜色关系的好工具。它是一个近色相邻、异色相离的圆环。 当两个颜色恰好在色环的两端时，这两个颜色就互为补色。 两个互为补色的颜色会在混合后变成灰色。 然而，补色搭配能形成强烈的视觉对比效果。 下面是一些以 hex 形式表示的补色例子：
    红色（#FF0000）和蓝绿色 (#00FFFF)
    绿色（#00FF00）和品红色（#FF00FF）
    蓝色（#0000FF）和黄色（#FFFF00）
    +这与我们许多人在学校学的过时的 RYB 色彩模式不同，RYB 有不同的原色和补色。 现代色彩理论使用 RGB 模型（如在计算机屏幕上）和 CMY（K）模型（如在印刷中）。 在[这里](https://en.wikipedia.org/wiki/Color_model)阅读了解更多有关这个复杂主题的信息。 + 现在，很多在线选色工具也为我们提供了寻找补色的功能。 -**注意：**对于颜色相关的挑战：颜色搭配是提起用户兴趣或吸引用户注意的重要方式之一。但我们不应让颜色作为传达重要信息的唯一方式，因为视觉障碍用户可能无法像其他人一样看出其中的含义。我们将会在应用无障碍章节进行详细介绍。 +**注意：**对于颜色相关的挑战：颜色搭配是提起用户兴趣或吸引用户注意的重要方式之一。 但我们不应让颜色作为传达重要信息的唯一方式，因为视觉障碍用户可能无法像其他人一样看出其中的含义。 我们将会在应用无障碍章节进行详细介绍。 # --instructions-- -把 class 为 `blue` 和 `yellow` 的元素的 `background-color` 属性改成相应的颜色。注意观察这两个颜色的搭配效果，以及对比白色背景的视觉效果。 +把 class 为 `blue` 和 `yellow` 的元素的 `background-color` 属性改成相应的颜色。 注意观察这两个颜色的搭配效果，以及对比白色背景的视觉效果。 # --hints-- -class 为 `blue` 的 `div` 元素的 `background-color` 属性值应为 `blue`。 +class 为 `blue` 的 `div` 元素应有一个 `background-color`，颜色为蓝色。 ```js assert($('.blue').css('background-color') == 'rgb(0, 0, 255)'); ``` -class 为 `yellow` 的 `div` 元素的 `background-color` 属性值应为 `yellow`。 +class 为 `yellow` 的 `div` 元素的 `background-color` 属性，颜色为黄色。 ```js assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md index d865db58cd..1abff66b10 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md @@ -1,19 +1,18 @@ --- id: 587d78a4367417b2b2512ad2 -title: 了解三原色 +title: 了解三次色 challengeType: 0 -videoUrl: 'https://scrimba.com/c/c3bRDAb' forumTopicId: 301057 dashedName: learn-about-tertiary-colors --- # --description-- -电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光，这种模式叫做三原色光模式（RGB Color Model）。如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G），我们在上一个挑战里已经见过这些颜色了。这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。例如，品红色是红色和蓝色相加产生，它是绿色的补色。 +电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光。 这在现代色彩理论中叫作三原色光模式（RGB Color Model）。 红色（R）、绿色（G）和蓝色（B）叫作三原色。 如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）， 我们在上一个挑战里已经见过这些颜色了。 这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。 例如，品红色是红色和蓝色相加产生，它是绿色的补色。 -三次色是由原色和二次色相加产生的颜色，例如红色（原色）和黄色（二次色）相加产生橙色。将这六种颜色中相邻的颜色相加，便产生了十二色色环。 +三次色是由原色和二次色相加产生的颜色， 例如，在 RGB 颜色模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。 将这六种颜色中相邻的颜色相加，便产生了十二色色环。 -设计里面有很多种颜色搭配方法。涉及到三次色的一种配色方法是分裂补色搭配法。选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。此种搭配既有对比，又不失和谐。 +设计里面有很多种颜色搭配方法。 涉及到三次色的一种配色方法是分裂补色搭配法。 选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。 此种搭配既有对比，又不失和谐。 下面是使用分裂补色搭配法创建的三个颜色： @@ -21,7 +20,7 @@ dashedName: learn-about-tertiary-colors # --instructions-- -把 class 为 `orange`、`cyan` 和 `raspberry` 的 `background-color` 改成其对应的颜色。在这个挑战中，请使用颜色的十六进制符号（即 hex code）来表示。 +把 class 为 `orange`、`cyan` 和 `raspberry` 的 `background-color` 改成其对应的颜色。 在这个挑战中，请使用颜色的十六进制符号（即 hex code）来表示。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md index a6b4796074..f6698cfa09 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md @@ -9,23 +9,23 @@ dashedName: learn-how-bezier-curves-work # --description-- -上一个挑战中，我们介绍了 `animation-timing-function` 以及它的一些预设值，这些值定义了不同时间内的动画速度。除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更细致地控制动画的速度曲线。 +上一个挑战中，我们介绍了 `animation-timing-function` 以及它的一些预设值，这些值定义了不同时间内的动画速度。 除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更细致地控制动画的速度曲线。 -在 CSS 动画里，我们可以用 `cubic-bezier` 来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 `1 * 1` 的坐标系统内，其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。 +在 CSS 动画里，我们可以用 `cubic-bezier` 来定义贝塞尔曲线。 曲线的形状代表了动画的速度。 曲线在 1 * 1 的坐标系统内， 其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。 -`cubic-bezier` 函数包含了 `1 * 1` 网格里的4个点：`p0`、`p1`、`p2`、`p3`。其中 `p0` 和 `p3` 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过 `(x1, y1, x2, y2)` 来确定 `p1` 和 `p2`。以下就是 CSS 贝塞尔曲线的例子： +`cubic-bezier` 函数包含了 1 * 1 网格里的4个点：`p0`、`p1`、`p2`、`p3`。 其中 `p0` 和 `p3` 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。 你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。 在 CSS 里面通过 `(x1, y1, x2, y2)` 来确定 `p1` 和 `p2`。 以下就是 CSS 贝塞尔曲线的例子： `animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);` -在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性，效果和 `linear` 一致。换言之，元素会匀速运动。 +在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。 动画速度呈线性，效果和 `linear` 一致。 换言之，元素会匀速运动。 # --instructions-- -对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 `linear` 变成等价的 `cubic-bezier` 函数值。也就是使用上面例子给的值。 +对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 `linear` 变成等价的 `cubic-bezier` 函数值。 也就是使用上面例子给的值。 # --hints-- -id 为 `ball1` 的元素的 `animation-timing-function` 属性值应该为和 linear 预定值等价的贝塞尔函数值。 +对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 linear 变成等价的 `cubic-bezier` 函数值。也就是使用上面例子给的值。 ```js assert( @@ -37,9 +37,9 @@ assert( id 为 `ball2` 的元素的 `animation-timing-function` 属性值应该保持不变。 ```js -const ball2Animation = $('#ball2') - .css('animation-timing-function') - .replace(/\s/g, ''); +const ball2Animation = __helpers.removeWhiteSpace( + $('#ball2').css('animation-timing-function') +); assert( ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)' ); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md index 3595413330..b9c3d28628 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md @@ -9,13 +9,13 @@ dashedName: learn-how-the-css-keyframes-and-animation-properties-work # --description-- -如果要给元素添加动画，你需要了解 `animation` 属性以及 `@keyframes` 规则。`animation` 属性控制动画的外观，`@keyframes` 规则控制动画中各阶段的变化。总共有 8 个 `animation` 属性。为了便于理解，本挑战中我们只会暂时涉及到两个最常用的属性。 +如果要给元素添加动画，你需要了解 animation 属性以及 `@keyframes` 规则。 animation 属性控制动画的外观，`@keyframes` 规则控制动画中各阶段的变化。 总共有 8 个 animation 属性。 为了便于理解，本挑战中我们只会暂时涉及到两个最常用的属性。 `animation-name` 用来设置动画的名称，也就是我们稍后要在 `@keyframes` 里用到的名称。 `animation-duration` 设置动画所花费的时间。 -`@keyframes` 可以通过设置特定时间点的行为来创建动画。为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。如果用一部电影来做类比，那么 CSS 里面的 0% 关键帧就像是电影里面的开场镜头；100% 关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。下面举例说明 `@keyframes` 和动画属性的用法： +`@keyframes` 可以通过设置特定时间点的行为来创建动画。 为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。 如果用一部电影来做类比，那么 CSS 里面的 0% 关键帧就像是电影里面的开场镜头；100% 关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。 在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。 100% 位置的 CSS 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。 然后CSS 应用魔法来在给定的时间内转换元素以使其脱离场景。 下面举例说明 `@keyframes` 和动画属性的用法： ```css #anim { @@ -33,15 +33,15 @@ dashedName: learn-how-the-css-keyframes-and-animation-properties-work } ``` -id 为 `anim` 的元素，我们在代码中将它的 `animation-name` 设置为 `colorful`，同时设置 `animation-duration` 为 3 秒。然后我们把 `@keyframes` 规则添加到名为 `colorful` 的动画属性上。`colorful` 在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。 +id 为 `anim` 的元素，我们在代码中将它的 `animation-name` 设置为 `colorful`，同时设置 `animation-duration` 为 3 秒。 然后我们把 `@keyframes` 规则添加到名为 `colorful` 的动画属性上。 在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。 注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。 # --instructions-- -给 id 为 `rect` 的元素添加动画，设置其 `animation-name` 为 rainbow，`animation-duration` 为 4 秒。然后声明 `@keyframes` 规则，设置动画开始时（0%）的 `background-color` 为蓝色，动画中间时（50%）为绿色，动画结束时（100%）为为黄色。 +给 id 为 `rect` 的元素添加动画，设置其 `animation-name` 为 `rainbow`，设置其 `animation-duration` 为 4 秒。 然后声明 `@keyframes` 规则，设置动画开始时（`0%`）的 `background-color` 为蓝色，动画中间时（`50%`）为绿色，动画结束时（`100%`）为为黄色。 # --hints-- -id 为 `rect` 的元素应该有一个值为 rainbow 的 `animation-name` 属性。 +id 为 `rect` 的元素应该有一个值为 `rainbow` 的 `animation-name` 属性。 ```js assert($('#rect').css('animation-name') == 'rainbow'); @@ -53,25 +53,25 @@ id 为 `rect` 的元素应该有一个值为 4s 的 `animation-duration` 属性 assert($('#rect').css('animation-duration') == '4s'); ``` -`@keyframes` 规则的 `animation-name` 应该为 rainbow。 +`@keyframes` 规则的 `animation-name` 应为 `rainbow`。 ```js assert(code.match(/@keyframes\s+?rainbow\s*?{/g)); ``` -`@keyframes` 规则的 rainbow 在 0% 时的 `background-color` 应该为蓝色。 +`@keyframes` 规则的 `rainbow` 在 0% 时的 `background-color` 应为 `blue`。 ```js assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi)); ``` -`@keyframes` 规则的 rainbow 在 50% 时的 `background-color` 应该为绿色。 +`@keyframes` 规则的 `rainbow` 在 50% 时的 `background-color` 应为 `green`。 ```js assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi)); ``` -`@keyframes` 规则的 rainbow 在 100% 时的 `background-color` 应该为黄色。 +`@keyframes` 规则的 rainbow 在 100% 时的 `background-color` 应为 `yellow`。 ```js assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md index d04b5ec4a1..5aec0c58fb 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md @@ -9,13 +9,13 @@ dashedName: lock-an-element-to-its-parent-with-absolute-positioning # --description-- -接下来要介绍 CSS `position` 属性的取值选项 `absolute`：`absolute` 的含义是相对于其包含块定位。和 `relative` 定位不一样，`absolute` 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。这样我们就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。 +接下来要介绍 CSS `position` 属性的取值选项 `absolute`，它的含义是相对于其包含块定位。 和 `relative` 定位不一样，绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。 这样我们就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。 -`absolute` 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是 `position:relative;`）,浏览器会继续寻找直到默认的 body 标签。 +绝对定位比较特殊的一点是元素的定位参照于最近的 *positioned* 祖先元素。 如果它的父元素没有添加定位规则（默认是 `position: relative;`），浏览器会继续寻找直到默认的 `body` 标签。 # --instructions-- -通过设置 `position` 属性值为 `absolute`，将 `#searchbar` 元素固定到它的父元素 `section` 的右上角。即设定其 `top` 和 `right` 为 50 像素。 +通过设置 `position` 属性值为 `absolute`，将 `#searchbar` 元素固定到它的父元素 `section` 的右上角。 即设定其 `top` 和 `right` 为 50 像素。 # --hints-- @@ -25,13 +25,13 @@ dashedName: lock-an-element-to-its-parent-with-absolute-positioning assert($('#searchbar').css('position') == 'absolute'); ``` -`#searchbar` 元素的 `top` 属性值应为 `50px`。 +`#searchbar` 元素的 `top` 属性值应为 50px。 ```js assert($('#searchbar').css('top') == '50px'); ``` -`#searchbar` 元素的 `right` 属性值应为 `50px`。 +`#searchbar` 元素的 `right` 属性值应为 50px。 ```js assert($('#searchbar').css('right') == '50px'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md index 9672ca4d25..004c385d77 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md @@ -9,13 +9,13 @@ dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning # --description-- -接下来要介绍的是 `fixed` 定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，在 `fixed` 定位的元素中，我们也可以使用 top、bottom、left、right 属性来调整元素的位置，并且也会将元素从当前的文档流里面移除，其它元素会忽略它的存在。 +接下来要介绍的是 `fixed` 定位，它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。 类似于绝对位置，它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在，这样也许需要调整其他位置的布局。 -但 `fixed` 和 `absolute` 的最明显的区别在于，`fixed` 定位元素不会随着屏幕滚动而移动。 +但 `fixed` 和 `absolute` 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动。 # --instructions-- -我们已经将代码里导航栏的 id 设置为了 `navbar`。请把它的 `position` 设置成 `fixed`，同时分别设定其 `top` 和 `left` 属性值为 0 像素。修改后，你可以滑动预览窗口，观察导航栏的位置。 +我们已经将代码里导航栏的 id 设置为了 `navbar`。 请把它的 `position` 设置成 `fixed`，同时分别设定其 `top` 和 `left` 属性值为 0 像素。 修改后，你可以滑动预览窗口，观察导航栏的位置。 # --hints-- @@ -25,13 +25,13 @@ dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning assert($('#navbar').css('position') == 'fixed'); ``` -`#navbar` 元素的 `top` 属性值应为 `0px`。 +`#navbar` 元素的 `top` 属性值应为 0px。 ```js assert($('#navbar').css('top') == '0px'); ``` -`#navbar` 元素的 `left` 属性值应为 `0px`。 +`#navbar` 元素的 `left` 属性值应为 0px。 ```js assert($('#navbar').css('left') == '0px'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md index 3b5ea79f98..34cb396e11 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md @@ -11,21 +11,21 @@ dashedName: make-a-css-heartbeat-using-an-infinite-animation-count 这也是一个用 `animation-iteration-count` 属性创造持续动画的例子，它基于我们在前面挑战中创建的心形。 -心跳动画的每一秒包含两个部分。`heart` 元素（包括 `:before` 和 `:after`）使用 `transform` 属性改变其大小，背景 `div` 使用 `background` 属性改变其颜色。 +心跳动画的每一秒包含两个部分。 `heart` 元素（包括 `:before` 和 `:after`）使用 `transform` 属性改变其大小，背景 `div` 使用 `background` 属性改变其颜色。 # --instructions-- -请将 class 为 `back` 和 `heart` 的元素的 `animation-iteration-count` 属性值设置为 infinite，使心形可以持续跳动。`heart:before` 和 `heart:after` 所选择的元素则不需要添加动画属性。 +给 `back` class 和 the `heart` class 添加 `animation-iteration-count` 属性，将属性值设置为 `infinite`，使心保持跳动。 `heart:before` 和 `heart:after` 所选择的元素则不需要添加动画属性。 # --hints-- -class 为 `heart` 的元素的 `animation-iteration-count` 属性值应为 infinite。 +`heart` class 的 `animation-iteration-count` 的属性值应为 `infinite`。 ```js assert($('.heart').css('animation-iteration-count') == 'infinite'); ``` -class 为 `back` 的元素的 `animation-iteration-count` 属性值应为 infinite。 +`back` class 的 `animation-iteration-count` 的属性值应为 `infinite`。 ```js assert($('.back').css('animation-iteration-count') == 'infinite'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md index 474e3ee6d9..48bd1239e1 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md @@ -9,15 +9,15 @@ dashedName: make-motion-more-natural-using-a-bezier-curve # --description-- -在这个挑战中，我们需要给元素添加动画来模拟杂耍中被抛接的球。之前的挑战中，我们学习了 `linear` 和 `ease-out` 的贝塞尔曲线描述，但这两个都无法完美地描述杂耍球的运动。在本关里你需要定制贝塞尔曲线。 +在这个挑战中，我们需要给元素添加动画来模拟杂耍中被抛接的球。 之前的挑战中，我们学习了 `linear` 和 `ease-out` 的贝塞尔曲线描述，但这两个都无法完美地描述杂耍球的运动。 在本关里你需要定制贝塞尔曲线。 -当 `animation-iteration-count` 值为 infinite 时，`animation-timing-function` 会自动循环 keyframe。由于我们是在动画周期的中间点（50% 处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。 +当 `animation-iteration-count` 值为 infinite 时，`animation-timing-function` 会自动循环 keyframe。 由于我们是在动画周期的中间点（`50%` 处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。 下面的例子模拟了杂耍球运动： `cubic-bezier(0.3, 0.4, 0.5, 1.6);` -注意 y2 的值是大于 1 的。虽然贝塞尔曲线是在 `1 * 1` 的坐标系统内 x 值只能取 0 到 1，但是 y 值是可以大于 1 的。这样我们才能模拟杂耍球运动。 +注意 y2 的值是大于 1 的。 虽然贝塞尔曲线是在 1 * 1 的坐标系统内 x 值只能取 0 到 1，但是 y 值是可以大于 1 的。 这样我们才能模拟杂耍球运动。 # --instructions-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md index afbfad66c6..74c0e137fe 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md @@ -9,15 +9,15 @@ dashedName: modify-fill-mode-of-an-animation # --description-- -太棒了，但是现在还不完美。注意动画在 `500ms` 之后重置了，所以按钮又变成了之前的颜色。而我们想要的效果是按钮在悬停时始终高亮。 +太棒了，但是现在还不完美。 注意动画在 `500ms` 之后重置了，所以按钮又变成了之前的颜色。 而我们想要的效果是按钮在悬停时始终高亮。 -为此，我们可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。`animation-fill-mode` 指定了在动画结束时元素的样式： +为此，我们可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。 `animation-fill-mode` 指定了在动画结束时元素的样式： 你可以这样设置： `animation-fill-mode: forwards;` # --instructions-- -修改 `button:hover` 的 `animation-fill-mode`，使按钮悬停时保持高亮。 +修改 `button:hover` 的 `animation-fill-mode` 属性值为 `forwards`，使按钮悬停时保持高亮。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md index 3044e42d00..d491928b68 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md @@ -9,9 +9,9 @@ dashedName: move-a-relatively-positioned-element-with-css-offsets # --description-- -CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方位的偏移距离。元素将从当前位置向属性相反的方向偏移。就像你在上一个挑战看到的，`top` 属性使 `h2` 向下移动。`left` 属性使元素向右移动。 +CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方位的偏移距离。 元素将从当前位置向属性相反的方向偏移。 就像你在上一个挑战看到的，`top` 属性使 `h2` 向下移动。 同样，使用 `left` 将项目移动到右边。 - + # --instructions-- @@ -19,13 +19,13 @@ CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方 # --hints-- -应使用 CSS 属性使 `h2` 相对当前位置向上移动 `10px`。也就是说，从 `h2` 当前位置远离 `bottom` `10px`。 +应使用 CSS 属性使 `h2` 相对当前位置向上移动 10px。 也就是说，从当前位置相对于 `bottom` 移动 10px。 ```js assert($('h2').css('bottom') == '10px'); ``` -应使用 CSS 属性使 `h2` 相对当前位置向右移动 `15px`。也就是说，从 `h2` 当前位置远离 `left` `15px`。 +应使用 CSS 属性使 `h2` 相对当前位置向右移动 15px。 也就是说，从当前位置相对于 `left` 移动 15px。 ```js assert($('h2').css('left') == '15px'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md index 56bc6149da..f3ccd8995d 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md @@ -9,11 +9,11 @@ dashedName: push-elements-left-or-right-with-the-float-property # --description-- -接下来要介绍的定位机制并不是 `position` 属性的选项，而是通过元素的 `float` 属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用 `width` 属性来指定浮动元素占据的水平空间。 +接下来要介绍的定位机制并不是 `position` 属性的选项，而是通过元素的 `float` 属性来设置。 浮动元素不在文档流中，它向 `left` 或 `right` 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通常需要用 `width` 属性来指定浮动元素占据的水平空间。 # --instructions-- -设置 `#left` 元素的 `float` 属性值为 `left`，设置 `#right` 元素的 `float` 属性值为 `right`。使这两个元素按两列布局，`section` 和 `aside` 左右排列。 +使这两个元素按两列布局，`section` 和 `aside` 左右排列。 设置 `#left` 元素的 `float` 属性值为 `left`，设置 `#right` 元素的 `float` 属性值为 `right`。 # --hints-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md index d5c326e4b5..eccfaf61c8 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md @@ -9,11 +9,9 @@ dashedName: set-the-font-size-for-multiple-heading-elements # --description-- -`font-size` 属性用来指定元素内文字的大小。我们可以为多个元素添加 `font-size` 规则，这样做可以让页面内不同元素的文字大小得以统一。在本挑战里，你需要设置从 `h1` 到 `h6` 的文字大小。 +`font-size` 属性用来指定元素内文字的大小。 我们可以为多个元素添加这个规则，让页面内不同元素的文字大小得以统一。 在本挑战里，你需要设置从 `h1` 到 `h6` 的文字大小。 -# --instructions-- - -

    在 style 标签中, 对各元素的 font-size 进行如下设置：

    +# --instructions--

    在 style 标签中, 对各元素的 font-size 进行如下设置：

    ``` -将会创建一个包含牛奶和奶酪的无序列表。 +会创建一个要点列表，包括 `milk` 和 `cheese`。 # --instructions-- diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md index dbabd644b1..e33afb5a00 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md @@ -2,22 +2,25 @@ id: bad87fee1348bd9aede08830 title: 创建一个表单 challengeType: 0 -videoUrl: 'https://scrimba.com/p/pVMPUv/cmQ3Kfa' forumTopicId: 16817 dashedName: create-a-form-element --- # --description-- -我们可以只通过 HTML 来实现发送数据给服务器的表单，只需要给 `form` 元素添加 `action` 属性即可。 +我们可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 `form` 元素添加 `action` 属性即可。 -例如: +例如： -`` +```html +
    + +
    +``` # --instructions-- -把现有的 `input` 输入框放到一个新建的 `form` 表单里，然后设置表单的 `action` 属性为 `"https://freecatphotoapp.com/submit-cat-photo"`。 +把现有的 `input` 输入框放到一个新建的表单 `form` 里，然后设置 `form` 元素的 `action` 属性值为 `"https://freecatphotoapp.com/submit-cat-photo"`。 # --hints-- @@ -31,7 +34,7 @@ assert( ); ``` -表单的 `action` 属性值应设置为 `https://freecatphotoapp.com/submit-cat-photo`。 +`form` 的 `action` 属性值应设置为 `https://freecatphotoapp.com/submit-cat-photo`。 ```js assert( diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md index d88a379cf7..316899fe64 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md @@ -9,15 +9,15 @@ dashedName: create-a-set-of-checkboxes # --description-- -`checkboxes`（复选框）就好比多项选择题，正确答案有多个。 +checkboxes（复选框）就好比多项选择题，正确答案有多个。 复选框是 `input` 选择框的一种类型。 -每一个复选框都应该嵌套在它自己的 `label`（标签）元素中。这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。 +每一个复选框都应该嵌套在它自己的 `label`（标签）元素中。 这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。 所有关联的复选框应该拥有相同的 `name` 属性。 -使得 `input` 与 `label` 关联的最佳实践是在 `label` 元素上设置 `for` 属性，让其值与复选框的 `id` 属性值相同。 +使得 `input` 与 `label` 关联的最佳实践是在 `label` 元素上设置 `for` 属性，让其值与相关联的 `input` 复选框的 `id` 属性值相同。 下面是一个复选框的例子： @@ -25,7 +25,7 @@ dashedName: create-a-set-of-checkboxes # --instructions-- -请给表单添加三个复选框，每个复选框都被嵌套进 `label` 元素中，并且它的 `name` 属性均为 `personality`。你可以随意指定每个复选框的内容文本。 +请给表单添加三个复选框， 每个复选框都被嵌套进 `label` 元素中， 并且它们的 `name` 属性均为 `personality`。 # --hints-- @@ -103,9 +103,9 @@ assert($('label').parent().get(0).tagName.match('FORM'));

    CatPhotoApp

    Click here to view more cat photos.

    - + A cute orange cat lying on its back. - +

    Things cats love:

    • cat nip
      • diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md index 6f91bdded9..2a9e918c9e 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md @@ -2,20 +2,19 @@ id: bad87fee1348bd9aedf08834 title: 创建一组单选按钮 challengeType: 0 -videoUrl: 'https://scrimba.com/p/pVMPUv/cNWKvuR' forumTopicId: 16822 dashedName: create-a-set-of-radio-buttons --- # --description-- -`radio buttons`（单选按钮）就好比单项选择题，正确答案只有一个。 +radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。 单选按钮是 `input` 选择框的一种类型。 -每一个单选按钮都应该嵌套在它自己的 `label`（标签）元素中。这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。 +每一个单选按钮都应该嵌套在它自己的 `label`（标签）元素中。 这样，我们相当于给 `input` 元素和包裹它的 `label` 元素建立起了对应关系。 -所有关联的单选按钮应该拥有相同的 `name` 属性。 +所有关联的单选按钮应该拥有相同的 `name` 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。 下面是一个单选按钮的例子： @@ -25,7 +24,7 @@ dashedName: create-a-set-of-radio-buttons ``` -使得 `input` 与 `label` 关联的最佳实践是在 `label` 元素上设置 `for` 属性，让其值与单选按钮的 `id` 属性值相同。 +最佳实践是在 `label` 元素上设置 `for` 属性，让其值与相关联的 `input` 单选按钮的 `id` 属性值相同。 这使得辅助技术能够在标签和子项 `input` 元素之间建立关联关系。 例如： ```html
    +``` + +# --solutions-- + +```html + + + +
    +

    CatPhotoApp

    + +

    Click here for cat photos.

    + + A cute orange cat lying on its back. + + Three kittens running towards the camera. + +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    + + + + + + + +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md new file mode 100644 index 0000000000..2cf8ce1aff --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md @@ -0,0 +1,176 @@ +--- +id: bad87fee1348cd8acdf08812 +title: Create a Bootstrap Button +challengeType: 0 +forumTopicId: 16811 +dashedName: create-a-bootstrap-button +--- + +# --description-- + +Bootstrap has its own styles for `button` elements, which look much better than the plain HTML ones. + +Create a new `button` element below your large kitten photo. Give it the `btn` and `btn-default` classes, as well as the text of "Like". + +# --hints-- + +You should create a new `button` element with the text "Like". + +```js +assert( + new RegExp('like', 'gi').test($('button').text()) && + $('img.img-responsive + button.btn').length > 0 +); +``` + +Your new button should have two classes: `btn` and `btn-default`. + +```js +assert($('button').hasClass('btn') && $('button').hasClass('btn-default')); +``` + +All of your `button` elements should have closing tags. + +```js +assert( + code.match(/<\/button>/g) && + code.match(/ + +
    +``` + +# --solutions-- + +```html + + + + + + + +
    +

    CatPhotoApp

    + +

    Click here for cat photos.

    + + A cute orange cat lying on its back. + + Three kittens running towards the camera. + + + + +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    + + + + + + + +
    +
    + +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md new file mode 100644 index 0000000000..074aa2fc92 --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md @@ -0,0 +1,65 @@ +--- +id: bad87fee1348bd9aec908846 +title: Create a Bootstrap Headline +challengeType: 0 +forumTopicId: 16812 +dashedName: create-a-bootstrap-headline +--- + +# --description-- + +Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills. + +We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges. + +To start with, create an `h3` element, with the text `jQuery Playground`. + +Color your `h3` element with the `text-primary` Bootstrap class, and center it with the `text-center` Bootstrap class. + +# --hints-- + +You should add an `h3` element to your page. + +```js +assert($('h3') && $('h3').length > 0); +``` + +Your `h3` element should have a closing tag. + +```js +assert( + code.match(/<\/h3>/g) && + code.match(/

    /g).length === code.match(/

    jQuery Playground

    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md new file mode 100644 index 0000000000..3a5ff315bb --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md @@ -0,0 +1,68 @@ +--- +id: bad87fee1348bd9bec908846 +title: Create a Bootstrap Row +challengeType: 0 +forumTopicId: 16813 +dashedName: create-a-bootstrap-row +--- + +# --description-- + +Now we'll create a Bootstrap row for our inline elements. + +Create a `div` element below the `h3` tag, with a class of `row`. + +# --hints-- + +You should add a `div` element below your `h3` element. + +```js +assert( + $('div').length > 1 && + $('div.row h3.text-primary').length == 0 && + $('div.row + h3.text-primary').length == 0 && + $('h3.text-primary + div.row').length > 0 +); +``` + +Your `div` element should have the class `row` + +```js +assert($('div').hasClass('row')); +``` + +Your `row div` should be nested inside the `container-fluid div` + +```js +assert($('div.container-fluid div.row').length > 0); +``` + +Your `div` element should have a closing tag. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    +

    jQuery Playground

    + +
    +``` + +# --solutions-- + +```html +
    +

    jQuery Playground

    +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md new file mode 100644 index 0000000000..eaea933735 --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md @@ -0,0 +1,71 @@ +--- +id: bad87fee1348bd9aec908852 +title: Create a Class to Target with jQuery Selectors +challengeType: 0 +forumTopicId: 16815 +dashedName: create-a-class-to-target-with-jquery-selectors +--- + +# --description-- + +Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery. + +Give each of your `button` elements the class `target`. + +# --hints-- + +You should apply the `target` class to each of your `button` elements. + +```js +assert($('.target').length > 5); +``` + +# --seed-- + +## --seed-contents-- + +```html +
    +

    jQuery Playground

    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    +``` + +# --solutions-- + +```html +
    +

    jQuery Playground

    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-custom-heading.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-custom-heading.md new file mode 100644 index 0000000000..646afcbe0f --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-a-custom-heading.md @@ -0,0 +1,177 @@ +--- +id: bad87fee1348bd9aede08845 +title: Create a Custom Heading +challengeType: 0 +forumTopicId: 16816 +dashedName: create-a-custom-heading +--- + +# --description-- + +We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row. + +Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a `div` element. + +Nest your first image and your `h2` element within a single `
    ` element. Nest your `h2` element within a `
    ` and your image in a `
    ` so that they are on the same line. + +Notice how the image is now just the right size to fit along the text? + +# --hints-- + +Your `h2` element and topmost `img` element should both be nested together within a `div` element with the class `row`. + +```js +assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0); +``` + +Your topmost `img` element should be nested within a `div` with the class `col-xs-4`. + +```js +assert( + $('div.col-xs-4:has(img)').length > 0 && + $('div.col-xs-4:has(div)').length === 0 +); +``` + +Your `h2` element should be nested within a `div` with the class `col-xs-8`. + +```js +assert( + $('div.col-xs-8:has(h2)').length > 0 && + $('div.col-xs-8:has(div)').length === 0 +); +``` + +All of your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    + + + +
    +

    CatPhotoApp

    + + A cute orange cat lying on its back. + + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    + + + + + + + +
    +
    +``` + +# --solutions-- + +```html + + + + +
    +
    +
    +

    CatPhotoApp

    +
    +
    + A cute orange cat lying on its back. +
    +
    + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    + + + + + + + +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-bootstrap-wells.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-bootstrap-wells.md new file mode 100644 index 0000000000..6e79e8f12e --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/create-bootstrap-wells.md @@ -0,0 +1,71 @@ +--- +id: bad87fee1348bd9aec908848 +title: Create Bootstrap Wells +challengeType: 0 +forumTopicId: 16825 +dashedName: create-bootstrap-wells +--- + +# --description-- + +Bootstrap has a class called `well` that can create a visual sense of depth for your columns. + +Nest one `div` element with the class `well` within each of your `col-xs-6` `div` elements. + +# --hints-- + +You should add a `div` element with the class `well` inside each of your `div` elements with the class `"col-xs-6"` + +```js +assert($('div.col-xs-6').not(':has(>div.well)').length < 1); +``` + +Both of your `div` elements with the class `"col-xs-6"` should be nested within your `div` element with the class `"row"`. + +```js +assert($('div.row > div.col-xs-6').length > 1); +``` + +All your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    +

    jQuery Playground

    +
    +
    + +
    +
    + +
    +
    +
    +``` + +# --solutions-- + +```html +
    +

    jQuery Playground

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md new file mode 100644 index 0000000000..543e90d7a2 --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md @@ -0,0 +1,188 @@ +--- +id: bad87fee1347bd9aedf08845 +title: Ditch Custom CSS for Bootstrap +challengeType: 0 +forumTopicId: 17565 +dashedName: ditch-custom-css-for-bootstrap +--- + +# --description-- + +We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier. + +Don't worry - there will be plenty of time to customize our CSS later. + +Delete the `.red-text`, `p`, and `.smaller-image` CSS declarations from your `style` element so that the only declarations left in your `style` element are `h2` and `thick-green-border`. + +Then delete the `p` element that contains a dead link. Then remove the `red-text` class from your `h2` element and replace it with the `text-primary` Bootstrap class. + +Finally, remove the "smaller-image" class from your first `img` element and replace it with the `img-responsive` class. + +# --hints-- + +Your h2 element should no longer have the class `red-text`. + +```js +assert(!$('h2').hasClass('red-text')); +``` + +Your h2 element should now have the class `text-primary`. + +```js +assert($('h2').hasClass('text-primary')); +``` + +Your paragraph elements should no longer use the font `Monospace`. + +```js +assert( + !$('p') + .css('font-family') + .match(/monospace/i) +); +``` + +The `smaller-image` class should be removed from your top image. + +```js +assert(!$('img').hasClass('smaller-image')); +``` + +You should add the `img-responsive` class to your top image. + +```js +assert($('.img-responsive').length > 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +
    +

    CatPhotoApp

    + +

    Click here for cat photos.

    + + A cute orange cat lying on its back. + + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    + + + + + + + +
    +
    +``` + +# --solutions-- + +```html + + + +
    +

    CatPhotoApp

    + + A cute orange cat lying on its back. + + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    + + + + + + + +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md new file mode 100644 index 0000000000..290766d634 --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md @@ -0,0 +1,125 @@ +--- +id: bad87fee1348bd9aec908855 +title: Give Each Element a Unique id +challengeType: 0 +forumTopicId: 18191 +dashedName: give-each-element-a-unique-id +--- + +# --description-- + +We will also want to be able to use jQuery to target each button by its unique id. + +Give each of your buttons a unique id, starting with `target1` and ending with `target6`. + +Make sure that `target1` to `target3` are in `#left-well`, and `target4` to `target6` are in `#right-well`. + +# --hints-- + +One `button` element should have the id `target1`. + +```js +assert( + $('#left-well').children('#target1') && + $('#left-well').children('#target1').length > 0 +); +``` + +One `button` element should have the id `target2`. + +```js +assert( + $('#left-well').children('#target2') && + $('#left-well').children('#target2').length > 0 +); +``` + +One `button` element should have the id `target3`. + +```js +assert( + $('#left-well').children('#target3') && + $('#left-well').children('#target3').length > 0 +); +``` + +One `button` element should have the id `target4`. + +```js +assert( + $('#right-well').children('#target4') && + $('#right-well').children('#target4').length > 0 +); +``` + +One `button` element should have the id `target5`. + +```js +assert( + $('#right-well').children('#target5') && + $('#right-well').children('#target5').length > 0 +); +``` + +One `button` element should have the id `target6`. + +```js +assert( + $('#right-well').children('#target6') && + $('#right-well').children('#target6').length > 0 +); +``` + +# --seed-- + +## --seed-contents-- + +```html +
    +

    jQuery Playground

    +
    +
    +

    #left-well

    +
    + + + +
    +
    +
    +

    #right-well

    +
    + + + +
    +
    +
    +
    +``` + +# --solutions-- + +```html +
    +

    jQuery Playground

    +
    +
    +

    #left-well

    +
    + + + +
    +
    +
    +

    #right-well

    +
    + + + +
    +
    +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md new file mode 100644 index 0000000000..452f52ab47 --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md @@ -0,0 +1,53 @@ +--- +id: bad87fee1348bd9aec908746 +title: House our page within a Bootstrap container-fluid div +challengeType: 0 +forumTopicId: 18198 +dashedName: house-our-page-within-a-bootstrap-container-fluid-div +--- + +# --description-- + +Now let's make sure all the content on your page is mobile-responsive. + +Let's nest your `h3` element within a `div` element with the class `container-fluid`. + +# --hints-- + +Your `div` element should have the class `container-fluid`. + +```js +assert($('div').hasClass('container-fluid')); +``` + +Each of your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    0); +``` + +# --seed-- + +## --seed-contents-- + +```html +

    jQuery Playground

    +``` + +# --solutions-- + +```html +
    +

    jQuery Playground

    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md new file mode 100644 index 0000000000..06e1b6f63b --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md @@ -0,0 +1,105 @@ +--- +id: bad87fee1348bd9aec908856 +title: Label Bootstrap Buttons +challengeType: 0 +forumTopicId: 18222 +dashedName: label-bootstrap-buttons +--- + +# --description-- + +Just like we labeled our wells, we want to label our buttons. + +Give each of your `button` elements text that corresponds to its `id`'s selector. + +# --hints-- + +Your `button` element with the id `target1` should have the text `#target1`. + +```js +assert(new RegExp('#target1', 'gi').test($('#target1').text())); +``` + +Your `button` element with the id `target2` should have the text `#target2`. + +```js +assert(new RegExp('#target2', 'gi').test($('#target2').text())); +``` + +Your `button` element with the id `target3` should have the text `#target3`. + +```js +assert(new RegExp('#target3', 'gi').test($('#target3').text())); +``` + +Your `button` element with the id `target4` should have the text `#target4`. + +```js +assert(new RegExp('#target4', 'gi').test($('#target4').text())); +``` + +Your `button` element with the id `target5` should have the text `#target5`. + +```js +assert(new RegExp('#target5', 'gi').test($('#target5').text())); +``` + +Your `button` element with the id `target6` should have the text `#target6`. + +```js +assert(new RegExp('#target6', 'gi').test($('#target6').text())); +``` + +# --seed-- + +## --seed-contents-- + +```html +
    +

    jQuery Playground

    +
    +
    +

    #left-well

    +
    + + + +
    +
    +
    +

    #right-well

    +
    + + + +
    +
    +
    +
    +``` + +# --solutions-- + +```html +
    +

    jQuery Playground

    +
    +
    +

    #left-well

    +
    + + + +
    +
    +
    +

    #right-well

    +
    + + + +
    +
    +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/label-bootstrap-wells.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/label-bootstrap-wells.md new file mode 100644 index 0000000000..cae4c4837f --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/label-bootstrap-wells.md @@ -0,0 +1,101 @@ +--- +id: bad87fee1348bd9aec908854 +title: Label Bootstrap Wells +challengeType: 0 +forumTopicId: 18223 +dashedName: label-bootstrap-wells +--- + +# --description-- + +For the sake of clarity, let's label both of our wells with their ids. + +Above your left-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#left-well`. + +Above your right-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#right-well`. + +# --hints-- + +You should add an `h4` element to each of your `
    ` elements. + +```js +assert( + $('.col-xs-6').children('h4') && $('.col-xs-6').children('h4').length > 1 +); +``` + +One `h4` element should have the text `#left-well`. + +```js +assert(new RegExp('#left-well', 'gi').test($('h4').text())); +``` + +One `h4` element should have the text `#right-well`. + +```js +assert(new RegExp('#right-well', 'gi').test($('h4').text())); +``` + +All of your `h4` elements should have closing tags. + +```js +assert( + code.match(/<\/h4>/g) && + code.match(/

    /g).length === code.match(/

    +

    jQuery Playground

    +
    +
    + +
    + + + +
    +
    +
    + +
    + + + +
    +
    +
    +
    +``` + +# --solutions-- + +```html +
    +

    jQuery Playground

    +
    +
    +

    #left-well

    +
    + + + +
    +
    +
    +

    #right-well

    +
    + + + +
    +
    +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md new file mode 100644 index 0000000000..b6037f8333 --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md @@ -0,0 +1,215 @@ +--- +id: bad87fee1348bd9aec908845 +title: Line up Form Elements Responsively with Bootstrap +challengeType: 0 +forumTopicId: 18225 +required: + - + link: >- + https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css + raw: true +dashedName: line-up-form-elements-responsively-with-bootstrap +--- + +# --description-- + +Now let's get your form `input` and your submission `button` on the same line. We'll do this the same way we have previously: by using a `div` element with the class `row`, and other `div` elements within it using the `col-xs-*` class. + +Nest both your form's text `input` and submit `button` within a `div` with the class `row`. Nest your form's text `input` within a div with the class of `col-xs-7`. Nest your form's submit `button` in a `div` with the class `col-xs-5`. + +This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design! + +# --hints-- + +Your form submission button and text input should be nested in a div with class `row`. + +```js +assert( + $('div.row:has(input[type="text"])').length > 0 && + $('div.row:has(button[type="submit"])').length > 0 +); +``` + +Your form text input should be nested in a div with the class `col-xs-7`. + +```js +assert($('div.col-xs-7:has(input[type="text"])').length > 0); +``` + +Your form submission button should be nested in a div with the class `col-xs-5`. + +```js +assert($('div.col-xs-5:has(button[type="submit"])').length > 0); +``` + +All of your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    + + +
    +
    +
    +

    CatPhotoApp

    +
    +
    + A cute orange cat lying on its back. +
    +
    + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + +
    +
    +``` + +# --solutions-- + +```html + + + +
    +
    +
    +

    CatPhotoApp

    +
    +
    + A cute orange cat lying on its back. +
    +
    + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md new file mode 100644 index 0000000000..54c1ec8e26 --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md @@ -0,0 +1,176 @@ +--- +id: bad87fee1348bd9acde08812 +title: Make Images Mobile Responsive +challengeType: 0 +forumTopicId: 18232 +dashedName: make-images-mobile-responsive +--- + +# --description-- + +First, add a new image below the existing one. Set its `src` attribute to `https://bit.ly/fcc-running-cats`. + +It would be great if this image could be exactly the width of our phone's screen. + +Fortunately, with Bootstrap, all we need to do is add the `img-responsive` class to your image. Do this, and the image should perfectly fit the width of your page. + +# --hints-- + +You should have a total of two images. + +```js +assert($('img').length === 2); +``` + +Your new image should be below your old one and have the class `img-responsive`. + +```js +assert($('img:eq(1)').hasClass('img-responsive')); +``` + +Your new image should not have the class `smaller-image`. + +```js +assert(!$('img:eq(1)').hasClass('smaller-image')); +``` + +Your new image should have a `src` of `https://bit.ly/fcc-running-cats`. + +```js +assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats'); +``` + +Your new `img` element should have a closing angle bracket. + +```js +assert( + code.match(//g).length === 2 && + code.match(/ + + +
    +

    CatPhotoApp

    + +

    Click here for cat photos.

    + + A cute orange cat lying on its back. + +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    + + + + + + + +
    +
    +``` + +# --solutions-- + +```html + + + +
    +

    CatPhotoApp

    + +

    Click here for cat photos.

    + + A cute orange cat lying on its back. + + +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    + + + + + + + +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md new file mode 100644 index 0000000000..8fcf0774c8 --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md @@ -0,0 +1,192 @@ +--- +id: bad87fee1348bd9aeda08845 +title: Responsively Style Checkboxes +challengeType: 0 +forumTopicId: 18269 +required: + - + link: >- + https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css + raw: true +dashedName: responsively-style-checkboxes +--- + +# --description-- + +Since Bootstrap's `col-xs-*` classes are applicable to all `form` elements, you can use them on your checkboxes too! This way, the checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is. + +# --instructions-- + +Nest all three of your checkboxes in a `
    ` element. Then nest each of them in a `
    ` element. + +# --hints-- + +All of your checkboxes should be nested inside one `div` with the class `row`. + +```js +assert($('div.row:has(input[type="checkbox"])').length > 0); +``` + +Each of your checkboxes should be nested inside its own `div` with the class `col-xs-4`. + +```js +assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2); +``` + +All of your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    + + +
    +
    +
    +

    CatPhotoApp

    +
    +
    + A cute orange cat lying on its back. +
    +
    + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    +
    +
    + +
    +
    + +
    +
    + + + + + +
    +
    +``` + +# --solutions-- + +```html + + + +
    +
    +
    +

    CatPhotoApp

    +
    +
    + A cute orange cat lying on its back. +
    +
    + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + + +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md new file mode 100644 index 0000000000..3541d7fead --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md @@ -0,0 +1,176 @@ +--- +id: bad87fee1348bd9aedb08845 +title: Responsively Style Radio Buttons +challengeType: 0 +forumTopicId: 18270 +required: + - + link: >- + https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css + raw: true +dashedName: responsively-style-radio-buttons +--- + +# --description-- + +You can use Bootstrap's `col-xs-*` classes on `form` elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is. + +Nest both your radio buttons within a `
    ` element. Then nest each of them within a `
    ` element. + +**Note:** As a reminder, radio buttons are `input` elements of type `radio`. + +# --hints-- + +All of your radio buttons should be nested inside one `div` with the class `row`. + +```js +assert($('div.row:has(input[type="radio"])').length > 0); +``` + +Each of your radio buttons should be nested inside its own `div` with the class `col-xs-6`. + +```js +assert($('div.col-xs-6:has(input[type="radio"])').length > 1); +``` + +All of your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    + + +
    +
    +
    +

    CatPhotoApp

    +
    +
    + A cute orange cat lying on its back. +
    +
    + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    + + + + + + + +
    +
    +``` + +# --solutions-- + +```html + + + +
    +
    +
    +

    CatPhotoApp

    +
    +
    + A cute orange cat lying on its back. +
    +
    + Three kittens running towards the camera. +
    +
    + +
    +
    + +
    +
    + +
    +
    +

    Things cats love:

    +
      +
    • cat nip
      • +
    • laser pointers
      • +
    • lasagna
      • +
    +

    Top 3 things cats hate:

    +
      +
    1. flea treatment
      2. +
    2. thunder
      3. +
    3. other cats
      4. +
    +
    +
    +
    + +
    +
    + +
    +
    + + + + + +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md new file mode 100644 index 0000000000..440c9a7740 --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md @@ -0,0 +1,57 @@ +--- +id: bad87fee1348bd9aec908847 +title: Split Your Bootstrap Row +challengeType: 0 +forumTopicId: 18306 +dashedName: split-your-bootstrap-row +--- + +# --description-- + +Now that we have a Bootstrap Row, let's split it into two columns to house our elements. + +Create two `div` elements within your row, both with the class `col-xs-6`. + +# --hints-- + +Two `div class="col-xs-6"` elements should be nested within your `div class="row"` element. + +```js +assert($('div.row > div.col-xs-6').length > 1); +``` + +All your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    +

    jQuery Playground

    +
    + + +
    +
    +``` + +# --solutions-- + +```html +
    +

    jQuery Playground

    +
    +
    +
    +
    +
    +``` diff --git a/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md new file mode 100644 index 0000000000..513456f26c --- /dev/null +++ b/curriculum/challenges/espanol/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md @@ -0,0 +1,202 @@ +--- +id: bad87fee1348bd9aed908845 +title: Style Text Inputs as Form Controls +challengeType: 0 +forumTopicId: 18312 +required: + - + link: >- + https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css + raw: true +dashedName: style-text-inputs-as-form-controls +--- + +# --description-- + +You can add the `fa-paper-plane` Font Awesome icon by adding `` within your submit `button` element. + +Give your form's text input field a class of `form-control`. Give your form's submit button the classes `btn btn-primary`. Also give this button the Font Awesome icon of `fa-paper-plane`. + +All textual ``, `