From ee2b84c6d7956b375267df942a60334648ada7e1 Mon Sep 17 00:00:00 2001 From: ZhichengChen Date: Mon, 30 Jul 2018 00:23:53 +0800 Subject: [PATCH 1/5] translate applied visual design 1-5 --- .../applied-visual-design.json | 102 +++++++++--------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/01-responsive-web-design/applied-visual-design.json b/01-responsive-web-design/applied-visual-design.json index cf90e72..c4fb75c 100644 --- a/01-responsive-web-design/applied-visual-design.json +++ b/01-responsive-web-design/applied-visual-design.json @@ -8,23 +8,23 @@ "id": "587d7791367417b2b2512ab3", "title": "Create Visual Balance Using the text-align Property", "description": [ - "This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.", - "Text is often a large part of web content. CSS has several options for how to align it with the text-align property.", - "text-align: justify; causes all lines of text except the last line to meet the left and right edges of the line box.", - "text-align: center; centers the text", - "text-align: right; right-aligns the text", - "And text-align: left; (the default) left-aligns the text.", + "这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。", + "web 内容大部分都是文本。CSS 里面的text-align属性可以控制文本的对齐方式。", + "text-align: justify;文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。", + "text-align: center;文本居中对齐。", + "text-align: right;文本右对齐。", + "text-align: left;（默认）文本左对齐。", "
", - "Align the h4 tag's text, which says \"Google\", to the center. Then justify the paragraph tag which contains information about how Google was founded." + "居中对齐h4标签文字，文字内容为“Google”。两端对齐段落标签文字，文字介绍了 Google 的创立。" ], "tests": [ { - "text": "Your code should use the text-align property on the h4 tag to set it to center.", - "testString": "assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the h4 tag to set it to center.');" + "text": "你的代码应该在h4标签上使用 text-align 属性设置文本居中对齐。", + "testString": "assert($('h4').css('text-align') == 'center', '你的代码应该在h4标签上使用 text-align 属性设置文本居中对齐。');" }, { - "text": "Your code should use the text-align property on the p tag to set it to justify.", - "testString": "assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the p tag to set it to justify.');" + "text": "你的代码应该在p标签上使用 text-align 属性设置文本两端对齐。", + "testString": "assert($('p').css('text-align') == 'justify', '你的代码应该在p标签上使用 text-align 属性设置文本两端对齐。');" } ], "solutions": [], @@ -62,11 +62,11 @@ "
", "
", "

Google

", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page", - " Sergey Brin", + " 拉里·佩奇", + " 谢尔盖·布林", "
", "
", "" @@ -80,15 +80,15 @@ "id": "587d7791367417b2b2512ab4", "title": "Adjust the Width of an Element Using the width Property", "description": [ - "You can specify the width of an element using the width property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:", + "你可以使用 CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比宽度。下面这个例子把图片的宽度设置为 220px：", "
img {
  width: 220px;
}
", "
", - "Add a width property to the entire card and set it to an absolute value of 245px. Use the fullCard class to select the element." + "给卡片添加width属性，设置它的值为绝对单位 245px。使用fullCark class 来选择元素。" ], "tests": [ { - "text": "Your code should change the width property of the card to 245 pixels by using the fullCard class selector.", - "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the width property of the card to 245 pixels by using the fullCard class selector.');" + "text": "你的代码应该通过fullCard class 选择器改变卡片的width属性使其值为 245 像素。", + "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), '你的代码应该通过fullCard class 选择器改变卡片的width属性使其值为 245 像素。');" } ], "solutions": [], @@ -127,11 +127,11 @@ "
", "
", "

Google

", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page", - " Sergey Brin", + " 拉里·佩奇", + " 谢尔盖·布林", "
", "
", "" @@ -145,15 +145,15 @@ "id": "587d7791367417b2b2512ab5", "title": "Adjust the Height of an Element Using the height Property", "description": [ - "You can specify the height of an element using the height property in CSS, similar to the width property. Here's an example that changes the height of an image to 20px:", + "和width属性类似，你可以使用 CSS 里面的height属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：", "
img {
  height: 20px;
}
", "
", - "Add a height property to the h4 tag and set it to 25px." + "给h4标签添加height属性并设置值为 25px。" ], "tests": [ { - "text": "Your code should change the h4 height property to a value of 25 pixels.", - "testString": "assert($('h4').css('height') == '25px', 'Your code should change the h4 height property to a value of 25 pixels.');" + "text": "你的代码应该设置h4的height属性，使其值为 25 像素。", + "testString": "assert($('h4').css('height') == '25px', '你的代码应该设置h4的height属性，使其值为 25 像素。');" } ], "solutions": [], @@ -193,11 +193,11 @@ "
", "
", "

Google

", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page", - " Sergey Brin", + " 拉里·佩奇", + " 谢尔盖·布林", "
", "
", "" @@ -211,22 +211,22 @@ "id": "587d781a367417b2b2512ab7", "title": "Use the strong Tag to Make Text Bold", "description": [ - "To make text bold, you can use the strong tag. This is often used to draw attention to text and symbolize that it is important. With the strong tag, the browser applies the CSS of font-weight: bold; to the element.", + "你可以使用strong标签来加粗文字。这通常用来强调文字，表示它很重要。添加了strong标签后，浏览器会给元素应用font-weight:bold;的 CSS 属性。", "
", - "Wrap a strong tag around \"Stanford University\" inside the p tag." + "在p标签里的“斯坦福大学”外面添加strong标签。" ], "tests": [ { - "text": "Your code should add one strong tag to the markup.", - "testString": "assert($('strong').length == 1, 'Your code should add one strong tag to the markup.');" + "text": "你的代码里应该有一个strong标签。", + "testString": "assert($('strong').length == 1, '你的代码里应该有一个strong标签。');" }, { - "text": "The strong tag should be inside the p tag.", - "testString": "assert($('p').children('strong').length == 1, 'The strong tag should be inside the p tag.');" + "text": "strong标签应该在p标签里。", + "testString": "assert($('p').children('strong').length == 1, 'strong标签应该在p标签里。');" }, { - "text": "The strong tag should wrap around the words \"Stanford University\".", - "testString": "assert($('strong').text().match(/^Stanford University$/gi), 'The strong tag should wrap around the words \"Stanford University\".');" + "text": "strong标签应该包围“斯坦福大学”。", + "testString": "assert($('strong').text().match(/^斯坦福大学$/gi), 'strong标签应该包围“斯坦福大学”。');" } ], "solutions": [], @@ -269,11 +269,11 @@ "
", "
", "

Google

", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", "
", "" @@ -287,23 +287,23 @@ "id": "587d781a367417b2b2512ab8", "title": "Use the u Tag to Underline Text", "description": [ - "To underline text, you can use the u tag. This is often used to signify that a section of text is important, or something to remember. With the u tag, the browser applies the CSS of text-decoration: underline; to the element.", + "你可以使用u标签来给文字添加下划线。这通常用来表示这部分文字很重要，或者是一些需要被记住的内容。添加了u标签后，浏览器会给元素应用text-decoration: underline;的 CSS 属性。", "
", - "Wrap the u tag around the text \"Ph.D. students\". It should not include the parent div that has the class of cardText.", - "Note
Try to avoid using the u tag when it could be confused for a link. Anchor tags also have a default underlined formatting." + "在“理工博士”外面添加u标签。不要给整个 class 为cardText的父div添加。", + "注意超链接标签默认给文本添加下划线，如果u标签的下滑线和页面的链接混淆，请避免使用它。" ], "tests": [ { - "text": "Your code should add a u tag to the markup.", - "testString": "assert($('u').length === 1, 'Your code should add a u tag to the markup.');" + "text": "你的代码里应该有一个u标签。", + "testString": "assert($('u').length === 1, '你的代码里应该有一个u标签。');" }, { - "text": "The u tag should wrap around the text \"Ph.D. students\".", - "testString": "assert($('u').text() === 'Ph.D. students', 'The u tag should wrap around the text \"Ph.D. students\".');" + "text": "u标签应该包围“理工博士”。", + "testString": "assert($('u').text() === '理工博士', 'u标签应该包围“理工博士”。');" }, { - "text": "The u tag should not wrap around the parent div tag.", - "testString": "assert($('u').children('div').length === 0, 'The u tag should not wrap around the parent div tag.');" + "text": "u标签不应该嵌套父div。", + "testString": "assert($('u').children('div').length === 0, 'u标签不应该嵌套父div。');" } ], "solutions": [], @@ -346,11 +346,11 @@ "
", "
", "

Google

", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", "
", "" From 07360348544b760b3401a72279ef1ce1b96477dc Mon Sep 17 00:00:00 2001 From: Chenzc Date: Fri, 3 Aug 2018 18:11:53 +0800 Subject: [PATCH 2/5] translate applied visual design 6-19 --- .../applied-visual-design.json | 361 +++++++++--------- 1 file changed, 180 insertions(+), 181 deletions(-) diff --git a/01-responsive-web-design/applied-visual-design.json b/01-responsive-web-design/applied-visual-design.json index c4fb75c..52ed8da 100644 --- a/01-responsive-web-design/applied-visual-design.json +++ b/01-responsive-web-design/applied-visual-design.json @@ -6,7 +6,7 @@ "challenges": [ { "id": "587d7791367417b2b2512ab3", - "title": "Create Visual Balance Using the text-align Property", + "title": "用 text-align 属性来设置对齐方式", "description": [ "这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。", "web 内容大部分都是文本。CSS 里面的text-align属性可以控制文本的对齐方式。", @@ -15,7 +15,7 @@ "text-align: right;文本右对齐。", "text-align: left;（默认）文本左对齐。", "
", - "居中对齐h4标签文字，文字内容为“Google”。两端对齐段落标签文字，文字介绍了 Google 的创立。" + "居中对齐h4标签文字，文字内容为 “Google”。两端对齐段落标签文字，文字介绍了 Google 的创立。" ], "tests": [ { @@ -78,7 +78,7 @@ }, { "id": "587d7791367417b2b2512ab4", - "title": "Adjust the Width of an Element Using the width Property", + "title": "用 width 属性来设置元素的宽度", "description": [ "你可以使用 CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比宽度。下面这个例子把图片的宽度设置为 220px：", "
img {
  width: 220px;
}
", @@ -143,7 +143,7 @@ }, { "id": "587d7791367417b2b2512ab5", - "title": "Adjust the Height of an Element Using the height Property", + "title": "用 height 属性来设置元素的高度", "description": [ "和width属性类似，你可以使用 CSS 里面的height属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：", "
img {
  height: 20px;
}
", @@ -209,11 +209,11 @@ }, { "id": "587d781a367417b2b2512ab7", - "title": "Use the strong Tag to Make Text Bold", + "title": "用 strong 标签来加粗文字", "description": [ "你可以使用strong标签来加粗文字。这通常用来强调文字，表示它很重要。添加了strong标签后，浏览器会给元素应用font-weight:bold;的 CSS 属性。", "
", - "在p标签里的“斯坦福大学”外面添加strong标签。" + "在p标签里的 “斯坦福大学” 外面添加strong标签。" ], "tests": [ { @@ -225,8 +225,8 @@ "testString": "assert($('p').children('strong').length == 1, 'strong标签应该在p标签里。');" }, { - "text": "strong标签应该包围“斯坦福大学”。", - "testString": "assert($('strong').text().match(/^斯坦福大学$/gi), 'strong标签应该包围“斯坦福大学”。');" + "text": "strong标签应该包围 “斯坦福大学”。", + "testString": "assert($('strong').text().match(/^斯坦福大学$/gi), 'strong标签应该包围 “斯坦福大学”。');" } ], "solutions": [], @@ -285,11 +285,11 @@ }, { "id": "587d781a367417b2b2512ab8", - "title": "Use the u Tag to Underline Text", + "title": "用 u 标签来给文字添加下划线", "description": [ "你可以使用u标签来给文字添加下划线。这通常用来表示这部分文字很重要，或者是一些需要被记住的内容。添加了u标签后，浏览器会给元素应用text-decoration: underline;的 CSS 属性。", "
", - "在“理工博士”外面添加u标签。不要给整个 class 为cardText的父div添加。", + "在 “理工博士” 外面添加u标签。不要给整个 class 为cardText的父div添加。", "注意超链接标签默认给文本添加下划线，如果u标签的下滑线和页面的链接混淆，请避免使用它。" ], "tests": [ @@ -298,8 +298,8 @@ "testString": "assert($('u').length === 1, '你的代码里应该有一个u标签。');" }, { - "text": "u标签应该包围“理工博士”。", - "testString": "assert($('u').text() === '理工博士', 'u标签应该包围“理工博士”。');" + "text": "u标签应该包围 “理工博士”。", + "testString": "assert($('u').text() === '理工博士', 'u标签应该包围 “理工博士”。');" }, { "text": "u标签不应该嵌套父div。", @@ -362,20 +362,20 @@ }, { "id": "587d781a367417b2b2512ab9", - "title": "Use the em Tag to Italicize Text", + "title": "用 em 标签来把文字变成斜体", "description": [ - "To emphasize text, you can use the em tag. This displays text as italicized, as the browser applies the CSS of font-style: italic; to the element.", + "你可以使用 em 标签来强调文字。由于浏览器会给元素应用font-style: italic;CSS，这时文字会显示为斜体。", "
", - "Wrap an em tag around the contents of the paragraph tag to give it emphasis." + "在段落标签里的文字外面添加em标签来强调段落。" ], "tests": [ { - "text": "Your code should add an em tag to the markup.", - "testString": "assert($('em').length == 1, 'Your code should add an em tag to the markup.');" + "text": "你的代码应该添加一个em标签。", + "testString": "assert($('em').length == 1, '你的代码应该添加一个em标签。');" }, { - "text": "The em tag should wrap around the contents of the p tag but not the p tag itself.", - "testString": "assert($('p').children().length == 1 && $('em').children().length == 2, 'The em tag should wrap around the contents of the p tag but not the p tag itself.');" + "text": "em标签应该在p标签的文字外面而不是在p标签的外面。", + "testString": "assert($('p').children().length == 1 && $('em').children().length == 2, 'em标签应该在p标签的文字外面而不是在p标签的外面。');" } ], "solutions": [], @@ -418,11 +418,11 @@ "
", "
", "

Google

", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", "
", "" @@ -434,24 +434,24 @@ }, { "id": "587d781b367417b2b2512aba", - "title": "Use the s Tag to Strikethrough Text", + "title": "用 s 标签来给文字添加删除线", "description": [ - "To strikethrough text, which is when a horizontal line cuts across the characters, you can use the s tag. It shows that a section of text is no longer valid. With the s tag, the browser applies the CSS of text-decoration: line-through; to the element.", + "你可以用s标签来给文字添加删除线，他的效果是在文字正中间有一条细线。它代表着这段文字不在有效。添加了s标签后，浏览器会给元素应用text-decoration: line-through;CSS 属性。", "
", - "Wrap the s tag around \"Google\" inside the h4 tag and then add the word Alphabet beside it, which should not have the strikethrough formatting." + "在h4标签里的 “Google” 外添加s标签，然后在s标签外面添加单词 Alphabet，Alphabet 不要有删除线格式。" ], "tests": [ { - "text": "Your code should add one s tag to the markup.", - "testString": "assert($('s').length == 1, 'Your code should add one s tag to the markup.');" + "text": "你的代码应该添加一个s标签。", + "testString": "assert($('s').length == 1, '你的代码应该添加一个s标签。');" }, { - "text": "A s tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.", - "testString": "assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), 'A s tag should wrap around the Google text in the h4 tag. It should not contain the word Alphabet.');" + "text": "s标签应该在h4标签内的 Google 文字外面，它不应该包含单词 Alphabet。", + "testString": "assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), 's标签应该在h4标签内的 Google 文字外面，它不应该包含单词 Alphabet。');" }, { - "text": "Include the word Alphabet in the h4 tag, without strikethrough formatting.", - "testString": "assert($('h4').html().match(/Alphabet/gi), 'Include the word Alphabet in the h4 tag, without strikethrough formatting.');" + "text": "h4标签内应该有单词 Alphabet，Alphabet 应该没有删除线格式。", + "testString": "assert($('h4').html().match(/Alphabet/gi), 'h4标签内应该有单词 Alphabet，Alphabet 应该没有删除线格式。');" } ], "solutions": [], @@ -494,11 +494,11 @@ "
", "
", "

Google

", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", "
", "" @@ -510,21 +510,21 @@ }, { "id": "587d781b367417b2b2512abb", - "title": "Create a Horizontal Line Using the hr Element", + "title": "用 hr 元素创建一条横线", "description": [ - "You can use the hr tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.", + "你可以用hr标签来添加一条宽度撑满父元素的横线。它可以用来表示文档主题的改变，或者用来在视觉上将文档分隔成几个部分。", "
", - "Add an hr tag underneath the h4 which contains the card title.", - "Note
In HTML, hr is a self-closing tag, and therefore doesn't need a separate closing tag." + "在包含卡片标题的h4下面添加一个hr标签。", + "注意
在 HTML 里，hr是自关闭标签，所以不需要一个单独的关闭标签。" ], "tests": [ { - "text": "Your code should add an hr tag to the markup.", - "testString": "assert($('hr').length == 1, 'Your code should add an hr tag to the markup.');" + "text": "你的代码里应该添加一个hr标签。", + "testString": "assert($('hr').length == 1, '你的代码里应该添加一个hr标签。');" }, { - "text": "The hr tag should come between the title and the paragraph.", - "testString": "assert(code.match(/<\\/h4>\\s*?|\\s*?\\/>)\\s*?/gi), 'The hr tag should come between the title and the paragraph.');" + "text": "hr标签应该在标题和段落中间。", + "testString": "assert(code.match(/<\\/h4>\\s*?|\\s*?\\/>)\\s*?

/gi), 'hr标签应该在标题和段落中间。');" } ], "solutions": [], @@ -567,12 +567,11 @@ "

", "
", "

GoogleAlphabet

", - " ", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", "
", "" @@ -584,28 +583,28 @@ }, { "id": "587d781b367417b2b2512abc", - "title": "Adjust the background-color Property of Text", + "title": "改变文字的背景色", "description": [ - "Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a background-color to the element holding the text you want to emphasize. This challenge uses rgba() instead of hex codes or normal rgb().", - "
rgba stands for:
  r = red
  g = green
  b = blue
  a = alpha/level of opacity
", - "The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. rgba() is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.", - "You'll use background-color: rgba(45, 45, 45, 0.1) for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.", + "为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加background-color属性。在本挑战里我们将使用rgba()颜色，而不是之前学到的hex编码或者rgb()颜色。", + "
rgba 代表：
  r = red 红色
  g = green 绿色
  b = blue 蓝色
  a = alpha 透明度
", + "RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。rgba()非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。", + "在本挑战里你将会用到这个代码background-color: rgba(45, 45, 45, 0.1)。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。", "
", - "To make the text stand out more, adjust the background-color of the h4 element to the given rgba() value.", - "Also for the h4, remove the height property and add padding of 10px." + "为了让文字更醒目，设置h4元素的background-color属性值为上面指定的rgba()。", + "同时移除h4的height属性，并添加padding属性，值为 10px。" ], "tests": [ { - "text": "Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).", - "testString": "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), 'Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).');" + "text": "你的代码应该给h4元素添加一个background-color属性并且赋值background-color: rgba(45, 45, 45, 0.1)。", + "testString": "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), '你的代码应该给h4元素添加一个background-color属性并且赋值background-color: rgba(45, 45, 45, 0.1)。');" }, { - "text": "Your code should add a padding property to the h4 element and set it to 10 pixels.", - "testString": "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', 'Your code should add a padding property to the h4 element and set it to 10 pixels.');" + "text": "你的代码应该给h4元素添加一个padding属性并且赋值 10 像素。", + "testString": "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', '你的代码应该给h4元素添加一个padding属性并且赋值 10 像素。');" }, { - "text": "The height property on the h4 element should be removed.", - "testString": "assert(!($('h4').css('height') == '25px'), 'The height property on the h4 element should be removed.');" + "text": "h4元素的height属性应该被移除。", + "testString": "assert(!($('h4').css('height') == '25px'), 'h4元素的height属性应该被移除。');" } ], "solutions": [], @@ -651,11 +650,11 @@ "
", "

Alphabet

", "
", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", " ", "" @@ -667,16 +666,16 @@ }, { "id": "587d781b367417b2b2512abd", - "title": "Adjust the Size of a Header Versus a Paragraph Tag", + "title": "调整标题的大小使之区别于段落标签", "description": [ - "The font size of header tags (h1 through h6) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the font-size property to adjust the size of the text in an element.", + "标题（h1到h6）的文字应该比的段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。你可以使用font-size属性来设置元素内文字的大小。", "
", - "To make the heading significantly larger than the paragraph, change the font-size of the h4 tag to 27 pixels." + "把h4标签的font-size改成27 像素，让标题更醒目。" ], "tests": [ { - "text": "Your code should add a font-size property to the h4 element set to 27 pixels.", - "testString": "assert($('h4').css('font-size') == '27px', 'Your code should add a font-size property to the h4 element set to 27 pixels.');" + "text": "你的代码应该给h4元素添加一个font-size属性并且赋值 27 像素。", + "testString": "assert($('h4').css('font-size') == '27px', '你的代码应该给h4元素添加一个font-size属性并且赋值 27 像素。');" } ], "solutions": [], @@ -722,11 +721,11 @@ "
", "

Alphabet

", "
", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", " ", "" @@ -738,23 +737,23 @@ }, { "id": "587d781b367417b2b2512abe", - "title": "Add a box-shadow to a Card-like Element", + "title": "给卡片式元素添加阴影（box-shadow）", "description": [ - "The box-shadow property applies one or more shadows to an element.", - "The box-shadow property takes values for offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional.", - "Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:", + "box-shadow属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。", + "box-shadow属性的每个阴影依次由下面这些值描述：
  • offset-x阴影的水平偏移量；
  • offset-y阴影的垂直偏移量;
  • blur-radius模糊距离；
  • spread-radius阴影尺寸；
  • 颜色。
其中blur-raduis和spread-raduis是可选的。", + "下面是创建了多个阴影的 CSS 例子，阴影加了模糊效果，颜色是透明度很高的黑色:", "
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
", "
", - "The element now has an id of thumbnail. With this selector, use the example CSS values above to place a box-shadow on the card." + "现在卡片已经添加了 idthumbnail。把上面的box-shadow值赋给卡片。" ], "tests": [ { - "text": "Your code should add a box-shadow property for the thumbnail id.", - "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'Your code should add a box-shadow property for the thumbnail id.');" + "text": "你的代码应该给thumbnailid 添加box-shadow属性。", + "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), '你的代码应该给thumbnailid 添加box-shadow属性。');" }, { - "text": "You should use the given CSS for the box-shadow value.", - "testString": "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'You should use the given CSS for the box-shadow value.');" + "text": "box-shadow值应该是指定的 CSS 值。", + "testString": "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'box-shadow值应该是指定的 CSS 值。');" } ], "solutions": [], @@ -803,11 +802,11 @@ "
", "

Alphabet

", "
", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", " ", "" @@ -819,18 +818,18 @@ }, { "id": "587d781c367417b2b2512abf", - "title": "Decrease the Opacity of an Element", + "title": "设置元素的透明度", "description": [ - "The opacity property in CSS is used to adjust the opacity, or conversely, the transparency for an item.", - "
A value of 1 is opaque, which isn't transparent at all.
A value of 0.5 is half see-through.
A value of 0 is completely transparent.
", - "The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.", + "CSS 里的opacity属性用来设置元素的透明度。", + "
值 1 代表完全不透明。
值 0.5 代表半透明。
值 0 代表完全透明。
", + "透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。", "
", - "Set the opacity of the anchor tags to 0.7 using links class to select them." + "使用linksclass 选择所有的超链接并设置其opacity值为 0.7。" ], "tests": [ { - "text": "Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.", - "testString": "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, 'Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links.');" + "text": "你的代码应该使用linksclass 选择所有的超链接并设置其opacity值为 0.7。", + "testString": "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, '你的代码应该使用linksclass 选择所有的超链接并设置其opacity值为 0.7。');" } ], "solutions": [], @@ -880,11 +879,11 @@ "
", "

Alphabet

", "
", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", " ", "" @@ -896,22 +895,22 @@ }, { "id": "587d781c367417b2b2512ac0", - "title": "Use the text-transform Property to Make Text Uppercase", + "title": "用 text-transform 属性来改变英文中字母的大小写", "description": [ - "The text-transform property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.", - "The following table shows how the different text-transformvalues change the example text \"Transform me\".", - "
ValueResult
lowercase\"transform me\"
uppercase\"TRANSFORM ME\"
capitalize\"Transform Me\"
initialUse the default value
inheritUse the text-transform value from the parent element
noneDefault: Use the original text
", + "CSS 里面的text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。", + "下面的表格展示了text-transform的不同值对文字 “Transform me” 的影响。", + "
ValueResult
lowercase\"transform me\"
uppercase\"TRANSFORM ME\"
capitalize\"Transform Me\"
initial使用默认值
inherit使用父元素的text-transform值。
noneDefault:不改变文字。
", "
", - "Transform the text of the h4 to be uppercase using the text-transform property." + "使用text-transform属性把h4内的英文的所有字母变成大写。" ], "tests": [ { - "text": "The h4 text should be uppercase.", - "testString": "assert($('h4').css('text-transform') === 'uppercase', 'The h4 text should be uppercase.');" + "text": "h4内的英文的所有字母应该为大写。", + "testString": "assert($('h4').css('text-transform') === 'uppercase', 'h4内的英文的所有字母应该为大写。');" }, { - "text": "The original text of the h4 should not be changed.", - "testString": "assert(($('h4').text() !== $('h4').text().toUpperCase()), 'The original text of the h4 should not be changed.');" + "text": "h4内的原文不能被改变。", + "testString": "assert(($('h4').text() !== $('h4').text().toUpperCase()), 'h4内的原文不能被改变。');" } ], "solutions": [], @@ -962,11 +961,11 @@ "
", "

Alphabet

", "
", - "

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

", + "

Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

", "
", "
", - " Larry Page

", - " Sergey Brin", + " 拉里·佩奇

", + " 谢尔盖·布林", "
", " ", "" @@ -978,36 +977,36 @@ }, { "id": "587d781c367417b2b2512ac2", - "title": "Set the font-size for Multiple Heading Elements", + "title": "设置多个标题元素的文字大小（font-size）", "description": [ - "The font-size property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all h1 through h6 tags to balance the heading sizes.", + "font-size属性用来指定元素内文字的大小。这个规则可以应用到多个元素上，合理的使用，能让页面的文字显示的错落有致。在本挑战里，你将要设置h1到h6的每个标题文字的大小。", "
", - "
  • Set the font-size of the h1 tag to 68px.
  • Set the font-size of the h2 tag to 52px.
  • Set the font-size of the h3 tag to 40px.
  • Set the font-size of the h4 tag to 32px.
  • Set the font-size of the h5 tag to 21px.
  • Set the font-size of the h6 tag to 14px.
" + "
  • 设置h1标签的font-size为 68px。
  • 设置h2标签的font-size为 52px。
  • 设置h3标签的font-size为 40px。
  • 设置h4标签的font-size为 32px。
  • 设置h5标签的font-size为 21px。
  • 设置h6标签的font-size为 14px。
" ], "tests": [ { - "text": "Your code should set the font-size property for the h1 tag to 68 pixels.", - "testString": "assert($('h1').css('font-size') == '68px', 'Your code should set the font-size property for the h1 tag to 68 pixels.');" + "text": "你的代码应该设置h1标签的font-size为 68 像素。", + "testString": "assert($('h1').css('font-size') == '68px', '你的代码应该设置h1标签的font-size为 68 像素。');" }, { - "text": "Your code should set the font-size property for the h2 tag to 52 pixels.", - "testString": "assert($('h2').css('font-size') == '52px', 'Your code should set the font-size property for the h2 tag to 52 pixels.');" + "text": "你的代码应该设置h2标签的font-size为 52 像素。", + "testString": "assert($('h2').css('font-size') == '52px', '你的代码应该设置h2标签的font-size为 52 像素。');" }, { - "text": "Your code should set the font-size property for the h3 tag to 40 pixels.", - "testString": "assert($('h3').css('font-size') == '40px', 'Your code should set the font-size property for the h3 tag to 40 pixels.');" + "text": "你的代码应该设置h3标签的font-size为 40 像素。", + "testString": "assert($('h3').css('font-size') == '40px', '你的代码应该设置h3标签的font-size为 40 像素。');" }, { - "text": "Your code should set the font-size property for the h4 tag to 32 pixels.", - "testString": "assert($('h4').css('font-size') == '32px', 'Your code should set the font-size property for the h4 tag to 32 pixels.');" + "text": "你的代码应该设置h4标签的font-size为 32 像素。", + "testString": "assert($('h4').css('font-size') == '32px', '你的代码应该设置h4标签的font-size为 32 像素。');" }, { - "text": "Your code should set the font-size property for the h5 tag to 21 pixels.", - "testString": "assert($('h5').css('font-size') == '21px', 'Your code should set the font-size property for the h5 tag to 21 pixels.');" + "text": "你的代码应该设置h5标签的font-size为 21 像素。", + "testString": "assert($('h5').css('font-size') == '21px', '你的代码应该设置h6标签的font-size为 21 像素。');" }, { - "text": "Your code should set the font-size property for the h6 tag to 14 pixels.", - "testString": "assert($('h6').css('font-size') == '14px', 'Your code should set the font-size property for the h6 tag to 14 pixels.');" + "text": "你的代码应该设置h6标签的font-size为 14 像素。", + "testString": "assert($('h6').css('font-size') == '14px', '你的代码应该设置h6标签的font-size为 14 像素。');" } ], "solutions": [], @@ -1028,12 +1027,12 @@ " ", " ", "", - "

This is h1 text

", - "

This is h2 text

", - "

This is h3 text

", - "

This is h4 text

", - "
This is h5 text
", - "
This is h6 text
" + "

我是 h1 文字

", + "

我是 h2 文字

", + "

我是 h3 文字

", + "

我是 h4 文字

", + "
我是 h5 文字
", + "
我是 h6 文字
" ], "head": [], "tail": [] @@ -1042,37 +1041,37 @@ }, { "id": "587d781c367417b2b2512ac3", - "title": "Set the font-weight for Multiple Heading Elements", + "title": "设置多个标题元素的文字粗细（font-weight）", "description": [ - "You set the font-size of each heading tag in the last challenge, here you'll adjust the font-weight.", - "The font-weight property sets how thick or thin characters are in a section of text.", + "在上一个挑战里你已经设置了每个标题的font-size，接下来你将设置font-weight。", + "font-weight属性用于设置文本中所用的字体的粗细。", "
", - "
  • Set the font-weight of the h1 tag to 800.
  • Set the font-weight of the h2 tag to 600.
  • Set the font-weight of the h3 tag to 500.
  • Set the font-weight of the h4 tag to 400.
  • Set the font-weight of the h5 tag to 300.
  • Set the font-weight of the h6 tag to 200.
" + "
  • 设置h1标签的font-weight为 800。
  • 设置h2标签的font-weight为 600。
  • 设置h3标签的font-weight为 500。
  • 设置h4标签的font-weight为 400。
  • 设置h5标签的font-weight为 300。
  • 设置h6标签的font-weight为 200。
" ], "tests": [ { - "text": "Your code should set the font-weight property for the h1 tag to 800.", - "testString": "assert($('h1').css('font-weight') == '800', 'Your code should set the font-weight property for the h1 tag to 800.');" + "text": "你的代码应该设置h1标签的font-weight为 800。", + "testString": "assert($('h1').css('font-weight') == '800', '你的代码应该设置h1标签的font-weight为 800。');" }, { - "text": "Your code should set the font-weight property for the h2 tag to 600.", - "testString": "assert($('h2').css('font-weight') == '600', 'Your code should set the font-weight property for the h2 tag to 600.');" + "text": "你的代码应该设置h2标签的font-weight为 600。", + "testString": "assert($('h2').css('font-weight') == '600', '你的代码应该设置h2标签的font-weight为 600。');" }, { - "text": "Your code should set the font-weight property for the h3 tag to 500.", - "testString": "assert($('h3').css('font-weight') == '500', 'Your code should set the font-weight property for the h3 tag to 500.');" + "text": "你的代码应该设置h3标签的font-weight为 500。", + "testString": "assert($('h3').css('font-weight') == '500', '你的代码应该设置h3标签的font-weight为 500。');" }, { - "text": "Your code should set the font-weight property for the h4 tag to 400.", - "testString": "assert($('h4').css('font-weight') == '400', 'Your code should set the font-weight property for the h4 tag to 400.');" + "text": "你的代码应该设置h4标签的font-weight为 400。", + "testString": "assert($('h4').css('font-weight') == '400', '你的代码应该设置h4标签的font-weight为 400。');" }, { - "text": "Your code should set the font-weight property for the h5 tag to 300.", - "testString": "assert($('h5').css('font-weight') == '300', 'Your code should set the font-weight property for the h5 tag to 300.');" + "text": "你的代码应该设置h5标签的font-weight为 300。", + "testString": "assert($('h5').css('font-weight') == '300', '你的代码应该设置h5标签的font-weight为 300。');" }, { - "text": "Your code should set the font-weight property for the h6 tag to 200.", - "testString": "assert($('h6').css('font-weight') == '200', 'Your code should set the font-weight property for the h6 tag to 200.');" + "text": "你的代码应该设置h6标签的font-weight为 200。", + "testString": "assert($('h6').css('font-weight') == '200', '你的代码应该设置h6标签的font-weight为 200。');" } ], "solutions": [], @@ -1111,12 +1110,12 @@ " ", " }", "", - "

This is h1 text

", - "

This is h2 text

", - "

This is h3 text

", - "

This is h4 text

", - "
This is h5 text
", - "
This is h6 text
" + "

我是 h1 文字

", + "

我是 h2 文字

", + "

我是 h3 文字

", + "

我是 h4 文字

", + "
我是 h5 文字
", + "
我是 h6 文字
" ], "head": [], "tail": [] @@ -1125,16 +1124,16 @@ }, { "id": "587d781c367417b2b2512ac4", - "title": "Set the font-size of Paragraph Text", + "title": "设置段落的文字大小（font-size）", "description": [ - "The font-size property in CSS is not limited to headings, it can be applied to any element containing text.", + "CSS 里面的font-size属性不只限于标题，它可以应用于任何包含文字的元素内。", "
", - "Change the value of the font-size property for the paragraph to 16px to make it more visible." + "把段落的font-size设置为 16px 让它看起来更清晰。" ], "tests": [ { - "text": "Your p tag should have a font-size of 16 pixels.", - "testString": "assert($('p').css('font-size') == '16px', 'Your p tag should have a font-size of 16 pixels.');" + "text": "你的p标签应该包含一个font-size属性并且值为 16 像素。", + "testString": "assert($('p').css('font-size') == '16px', '你的p标签应该包含一个font-size属性并且值为 16 像素。');" } ], "solutions": [], @@ -1153,7 +1152,7 @@ " }", "", "

", - " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + " 天地玄黄　宇宙洪荒　日月盈昃　辰宿列张　寒来暑往　秋收冬藏　闰余成岁　律召调阳　云腾致雨　露结为霜　金生丽水　玉出昆冈　剑号巨阙　珠称夜光　果珍李柰　菜重芥姜　海咸河淡　鳞潜羽翔　龙师火帝　鸟官人皇　始制文字　乃服衣裳　推位让国　有虞陶唐　吊民伐罪　周发殷汤　坐朝问道　垂拱平章　爱育黎首　臣伏戎羌　遐迩壹体　率宾归王　鸣凤在树　白驹食场　化被草木　赖及万方　盖此身发　四大五常　恭惟鞠养　岂敢毁伤　女慕贞絜　男效才良　知过必改　得能莫忘　罔谈彼短　靡恃己长　信使可覆　器欲难量　墨悲丝染　诗讃羔羊", "

" ], "head": [], @@ -1163,16 +1162,16 @@ }, { "id": "587d781d367417b2b2512ac5", - "title": "Set the line-height of Paragraphs", + "title": "设置段落的行高（line-height）", "description": [ - "CSS offers the line-height property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.", + "CSS 提供line-height属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。", "
", - "Add a line-height property to the p tag and set it to 25px." + "给p标签添加line-height属性并赋值 25px。" ], "tests": [ { - "text": "Your code should set the line-height of the p tag to 25 pixels.", - "testString": "assert($('p').css('line-height') == '25px', 'Your code should set the line-height of the p tag to 25 pixels.');" + "text": "你的代码应该给p标签添加line-height属性并赋值 25px。", + "testString": "assert($('p').css('line-height') == '25px', '你的代码应该给p标签添加line-height属性并赋值 25px。');" } ], "solutions": [], @@ -1192,7 +1191,7 @@ " }", "", "

", - " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + " 天地玄黄　宇宙洪荒　日月盈昃　辰宿列张　寒来暑往　秋收冬藏　闰余成岁　律召调阳　云腾致雨　露结为霜　金生丽水　玉出昆冈　剑号巨阙　珠称夜光　果珍李柰　菜重芥姜　海咸河淡　鳞潜羽翔　龙师火帝　鸟官人皇　始制文字　乃服衣裳　推位让国　有虞陶唐　吊民伐罪　周发殷汤　坐朝问道　垂拱平章　爱育黎首　臣伏戎羌　遐迩壹体　率宾归王　鸣凤在树　白驹食场　化被草木　赖及万方　盖此身发　四大五常　恭惟鞠养　岂敢毁伤　女慕贞絜　男效才良　知过必改　得能莫忘　罔谈彼短　靡恃己长　信使可覆　器欲难量　墨悲丝染　诗讃羔羊", "

" ], "head": [], @@ -1202,22 +1201,22 @@ }, { "id": "587d781d367417b2b2512ac8", - "title": "Adjust the Hover State of an Anchor Tag", + "title": "设置超链接的鼠标滑过（Hover）状态", "description": [ - "This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.", - "For example, the styling of an anchor tag can be changed for its hover state using the :hover pseudo-class selector. Here's the CSS to change the color of the anchor tag to red during its hover state:", + "本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。", + "比如，超链接可以使用:hover伪类选择器定义它的鼠标滑过状态样式。下面是鼠标滑过超链接时改变超链接颜色的 CSS：", "
a:hover {
  color: red;
}
", "
", - "The code editor has a CSS rule to style all a tags black. Add a rule so that when the user hovers over the a tag, the color is blue." + "代码编辑器里面已经有了一个 CSS 规则把所有的a标签定义成了黑色。添加一个规则，满足如下，当用户鼠标滑过a标签时，把color变成蓝色。" ], "tests": [ { - "text": "The anchor tag color should remain black, only add CSS rules for the :hover state.", - "testString": "assert($('a').css('color') == 'rgb(0, 0, 0)', 'The anchor tag color should remain black, only add CSS rules for the :hover state.');" + "text": "超链接的color应该保持黑色，只添加:hover CSS 规则。", + "testString": "assert($('a').css('color') == 'rgb(0, 0, 0)', '超链接的color应该保持黑色，只添加:hover CSS 规则。');" }, { - "text": "The anchor tag should have a color of blue on hover.", - "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), 'The anchor tag should have a color of blue on hover.');" + "text": "鼠标滑过超链接时超链接color应该变成蓝色。", + "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), '鼠标滑过超链接时超链接color应该变成蓝色。');" } ], "solutions": [], @@ -1238,7 +1237,7 @@ " ", " ", "", - "CatPhotoApp" + "猫咪相册 App" ], "head": [], "tail": [] @@ -1247,24 +1246,24 @@ }, { "id": "587d781e367417b2b2512ac9", - "title": "Change an Element's Relative Position", + "title": "改变元素的相对位置（Relative Position）", "description": [ - "CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the normal flow of a document, but CSS offers the position property to override it.", - "When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:", + "在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。", + "当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：", "
p {
  position: relative;
  bottom: 10px;
}
", - "Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.", - "Note
Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.", + "把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。", + "注意
定位可以让你在页面布局上更灵活、高效。注意不管元素的定位是怎样，内部的 HTML 代码阅读起来应该是整洁、有意义的。这样也可以让视障人员（他们重度依赖辅助设备比如屏幕阅读软件）能够浏览你的网页。", "
", - "Change the position of the h2 to relative, and use a CSS offset to move it 15 pixels away from the top of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements." + "把h2的position设置成relative，使用相应的 CSS 属性调整h2的位置，使其向上偏移 15 像素，同时还在普通流中占据原来的位置。注意不要对 h1 和 p 元素的位置产生影响。" ], "tests": [ { - "text": "The h2 element should have a position property set to relative.", - "testString": "assert($('h2').css('position') == 'relative', 'The h2 element should have a position property set to relative.');" + "text": "h2元素应该添加position属性并赋值relative。", + "testString": "assert($('h2').css('position') == 'relative', 'h2元素应该添加position属性并赋值relative。');" }, { - "text": "Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.", - "testString": "assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits.');" + "text": "你的代码应该使用 CSS 属性调整h2的位置使其从原来的位置向上偏移 15 像素。", + "testString": "assert($('h2').css('top') == '15px', '你的代码应该使用 CSS 属性调整h2的位置使其从原来的位置向上偏移 15 像素。');" } ], "solutions": [], @@ -1284,9 +1283,9 @@ " }", "", "", - "

On Being Well-Positioned

", - "

Move me!

", - "

I still think the h2 is where it normally sits.

", + "

论如何优雅定位

", + "

我要离 h1 近一点！

", + "

我觉得 h2 没变，还是在它原来的位置，相离莫相忘，且行且珍惜。

", "" ], "head": [], From 4e2cac08ec416d95c72d7014c204f693b0cfafb4 Mon Sep 17 00:00:00 2001 From: Chenzc Date: Mon, 6 Aug 2018 11:31:12 +0800 Subject: [PATCH 3/5] revise --- .../applied-visual-design.json | 132 +++++++++--------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/01-responsive-web-design/applied-visual-design.json b/01-responsive-web-design/applied-visual-design.json index 52ed8da..bbf05de 100644 --- a/01-responsive-web-design/applied-visual-design.json +++ b/01-responsive-web-design/applied-visual-design.json @@ -6,16 +6,16 @@ "challenges": [ { "id": "587d7791367417b2b2512ab3", - "title": "用 text-align 属性来设置对齐方式", + "title": "Create Visual Balance Using the text-align Property", "description": [ "这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。", "web 内容大部分都是文本。CSS 里面的text-align属性可以控制文本的对齐方式。", "text-align: justify;文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。", "text-align: center;文本居中对齐。", - "text-align: right;文本右对齐。", - "text-align: left;（默认）文本左对齐。", + "text-align: right;可以让文本右对齐。", + "text-align: left;是text-align的默认值，它可以让文本左对齐。", "
", - "居中对齐h4标签文字，文字内容为 “Google”。两端对齐段落标签文字，文字介绍了 Google 的创立。" + "居中对齐h4标签文本，文本内容为 “Google”。两端对齐段落标签文本，文本介绍了 Google 的创立。" ], "tests": [ { @@ -78,17 +78,17 @@ }, { "id": "587d7791367417b2b2512ab4", - "title": "用 width 属性来设置元素的宽度", + "title": "Adjust the Width of an Element Using the width Property", "description": [ - "你可以使用 CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比宽度。下面这个例子把图片的宽度设置为 220px：", + "你可以使用 CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。下面这个例子把图片的宽度设置为 220px：", "
img {
  width: 220px;
}
", "
", "给卡片添加width属性，设置它的值为绝对单位 245px。使用fullCark class 来选择元素。" ], "tests": [ { - "text": "你的代码应该通过fullCard class 选择器改变卡片的width属性使其值为 245 像素。", - "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), '你的代码应该通过fullCard class 选择器改变卡片的width属性使其值为 245 像素。');" + "text": "你的代码应该通过fullCard class 选择器改变卡片的width属性使其值为245px。", + "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), '你的代码应该通过fullCard class 选择器改变卡片的width属性使其值为245px。');" } ], "solutions": [], @@ -143,7 +143,7 @@ }, { "id": "587d7791367417b2b2512ab5", - "title": "用 height 属性来设置元素的高度", + "title": "Adjust the Height of an Element Using the height Property", "description": [ "和width属性类似，你可以使用 CSS 里面的height属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：", "
img {
  height: 20px;
}
", @@ -152,8 +152,8 @@ ], "tests": [ { - "text": "你的代码应该设置h4的height属性，使其值为 25 像素。", - "testString": "assert($('h4').css('height') == '25px', '你的代码应该设置h4的height属性，使其值为 25 像素。');" + "text": "你的代码应该设置h4的height属性，使其值为25px。", + "testString": "assert($('h4').css('height') == '25px', '你的代码应该设置h4的height属性，使其值为25px。');" } ], "solutions": [], @@ -209,7 +209,7 @@ }, { "id": "587d781a367417b2b2512ab7", - "title": "用 strong 标签来加粗文字", + "title": "Use the strong Tag to Make Text Bold", "description": [ "你可以使用strong标签来加粗文字。这通常用来强调文字，表示它很重要。添加了strong标签后，浏览器会给元素应用font-weight:bold;的 CSS 属性。", "
", @@ -285,12 +285,12 @@ }, { "id": "587d781a367417b2b2512ab8", - "title": "用 u 标签来给文字添加下划线", + "title": "Use the u Tag to Underline Text", "description": [ - "你可以使用u标签来给文字添加下划线。这通常用来表示这部分文字很重要，或者是一些需要被记住的内容。添加了u标签后，浏览器会给元素应用text-decoration: underline;的 CSS 属性。", + "你可以使用u标签来给文字添加下划线。这通常用来表示这部分文字很重要，或者是一些值得注意的内容。添加了u标签后，浏览器会给元素应用text-decoration: underline;的 CSS 属性。", "
", "在 “理工博士” 外面添加u标签。不要给整个 class 为cardText的父div添加。", - "注意超链接标签默认给文本添加下划线，如果u标签的下滑线和页面的链接混淆，请避免使用它。" + "注意超链接标签默认给文本添加下划线，如果u标签的下滑线和页面的链接混淆，请避免使用它。" ], "tests": [ { @@ -302,8 +302,8 @@ "testString": "assert($('u').text() === '理工博士', 'u标签应该包围 “理工博士”。');" }, { - "text": "u标签不应该嵌套父div。", - "testString": "assert($('u').children('div').length === 0, 'u标签不应该嵌套父div。');" + "text": "u标签内不应包含额外的div标签。", + "testString": "assert($('u').children('div').length === 0, 'u标签内不应包含额外的div标签。');" } ], "solutions": [], @@ -362,7 +362,7 @@ }, { "id": "587d781a367417b2b2512ab9", - "title": "用 em 标签来把文字变成斜体", + "title": "Use the em Tag to Italicize Text", "description": [ "你可以使用 em 标签来强调文字。由于浏览器会给元素应用font-style: italic;CSS，这时文字会显示为斜体。", "
", @@ -374,8 +374,8 @@ "testString": "assert($('em').length == 1, '你的代码应该添加一个em标签。');" }, { - "text": "em标签应该在p标签的文字外面而不是在p标签的外面。", - "testString": "assert($('p').children().length == 1 && $('em').children().length == 2, 'em标签应该在p标签的文字外面而不是在p标签的外面。');" + "text": "em标签应该包围p标签里的文本，而不是包围整个p标签。", + "testString": "assert($('p').children().length == 1 && $('em').children().length == 2, 'em标签应该包围p标签里的文本，而不是包围整个p标签。');" } ], "solutions": [], @@ -434,9 +434,9 @@ }, { "id": "587d781b367417b2b2512aba", - "title": "用 s 标签来给文字添加删除线", + "title": "Use the s Tag to Strikethrough Text", "description": [ - "你可以用s标签来给文字添加删除线，他的效果是在文字正中间有一条细线。它代表着这段文字不在有效。添加了s标签后，浏览器会给元素应用text-decoration: line-through;CSS 属性。", + "你可以用s标签来给文字添加删除线，他的效果是在文字正中间有一条细线。它代表着这段文字不再有效。添加了s标签后，浏览器会给元素应用text-decoration: line-through;CSS 属性。", "
", "在h4标签里的 “Google” 外添加s标签，然后在s标签外面添加单词 Alphabet，Alphabet 不要有删除线格式。" ], @@ -510,7 +510,7 @@ }, { "id": "587d781b367417b2b2512abb", - "title": "用 hr 元素创建一条横线", + "title": "Create a Horizontal Line Using the hr Element", "description": [ "你可以用hr标签来添加一条宽度撑满父元素的横线。它可以用来表示文档主题的改变，或者用来在视觉上将文档分隔成几个部分。", "
", @@ -523,8 +523,8 @@ "testString": "assert($('hr').length == 1, '你的代码里应该添加一个hr标签。');" }, { - "text": "hr标签应该在标题和段落中间。", - "testString": "assert(code.match(/<\\/h4>\\s*?|\\s*?\\/>)\\s*?

/gi), 'hr标签应该在标题和段落中间。');" + "text": "hr标签应该在标题和段落之间。", + "testString": "assert(code.match(/<\\/h4>\\s*?|\\s*?\\/>)\\s*?

/gi), 'hr标签应该在标题和段落之间。');" } ], "solutions": [], @@ -583,7 +583,7 @@ }, { "id": "587d781b367417b2b2512abc", - "title": "改变文字的背景色", + "title": "Adjust the background-color Property of Text", "description": [ "为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加background-color属性。在本挑战里我们将使用rgba()颜色，而不是之前学到的hex编码或者rgb()颜色。", "

rgba 代表：
  r = red 红色
  g = green 绿色
  b = blue 蓝色
  a = alpha 透明度
", @@ -595,12 +595,12 @@ ], "tests": [ { - "text": "你的代码应该给h4元素添加一个background-color属性并且赋值background-color: rgba(45, 45, 45, 0.1)。", - "testString": "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), '你的代码应该给h4元素添加一个background-color属性并且赋值background-color: rgba(45, 45, 45, 0.1)。');" + "text": "你的代码应该给h4元素添加一个background-color属性并且赋值rgba(45, 45, 45, 0.1)。", + "testString": "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), '你的代码应该给h4元素添加一个background-color属性并且赋值rgba(45, 45, 45, 0.1)。');" }, { - "text": "你的代码应该给h4元素添加一个padding属性并且赋值 10 像素。", - "testString": "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', '你的代码应该给h4元素添加一个padding属性并且赋值 10 像素。');" + "text": "你的代码应该给h4元素添加一个padding属性并且赋值10px。", + "testString": "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', '你的代码应该给h4元素添加一个padding属性并且赋值10px。');" }, { "text": "h4元素的height属性应该被移除。", @@ -666,16 +666,16 @@ }, { "id": "587d781b367417b2b2512abd", - "title": "调整标题的大小使之区别于段落标签", + "title": "Adjust the Size of a Header Versus a Paragraph Tag", "description": [ "标题（h1到h6）的文字应该比的段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。你可以使用font-size属性来设置元素内文字的大小。", "
", - "把h4标签的font-size改成27 像素，让标题更醒目。" + "把h4标签的font-size改成 27 像素，让标题更醒目。" ], "tests": [ { - "text": "你的代码应该给h4元素添加一个font-size属性并且赋值 27 像素。", - "testString": "assert($('h4').css('font-size') == '27px', '你的代码应该给h4元素添加一个font-size属性并且赋值 27 像素。');" + "text": "你的代码应该给h4元素添加一个font-size属性并且赋值27px。", + "testString": "assert($('h4').css('font-size') == '27px', '你的代码应该给h4元素添加一个font-size属性并且赋值27px。');" } ], "solutions": [], @@ -737,7 +737,7 @@ }, { "id": "587d781b367417b2b2512abe", - "title": "给卡片式元素添加阴影（box-shadow）", + "title": "Add a box-shadow to a Card-like Element", "description": [ "box-shadow属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。", "box-shadow属性的每个阴影依次由下面这些值描述：
  • offset-x阴影的水平偏移量；
  • offset-y阴影的垂直偏移量;
  • blur-radius模糊距离；
  • spread-radius阴影尺寸；
  • 颜色。
其中blur-raduis和spread-raduis是可选的。", @@ -748,8 +748,8 @@ ], "tests": [ { - "text": "你的代码应该给thumbnailid 添加box-shadow属性。", - "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), '你的代码应该给thumbnailid 添加box-shadow属性。');" + "text": "你的代码应该给 id 为thumbnail的元素添加box-shadow属性。", + "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), '你的代码应该给 id 为thumbnail的元素添加box-shadow属性。');" }, { "text": "box-shadow值应该是指定的 CSS 值。", @@ -818,7 +818,7 @@ }, { "id": "587d781c367417b2b2512abf", - "title": "设置元素的透明度", + "title": "Decrease the Opacity of an Element", "description": [ "CSS 里的opacity属性用来设置元素的透明度。", "
值 1 代表完全不透明。
值 0.5 代表半透明。
值 0 代表完全透明。
", @@ -895,7 +895,7 @@ }, { "id": "587d781c367417b2b2512ac0", - "title": "用 text-transform 属性来改变英文中字母的大小写", + "title": "Use the text-transform Property to Make Text Uppercase", "description": [ "CSS 里面的text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。", "下面的表格展示了text-transform的不同值对文字 “Transform me” 的影响。", @@ -977,7 +977,7 @@ }, { "id": "587d781c367417b2b2512ac2", - "title": "设置多个标题元素的文字大小（font-size）", + "title": "Set the font-size for Multiple Heading Elements", "description": [ "font-size属性用来指定元素内文字的大小。这个规则可以应用到多个元素上，合理的使用，能让页面的文字显示的错落有致。在本挑战里，你将要设置h1到h6的每个标题文字的大小。", "
", @@ -985,28 +985,28 @@ ], "tests": [ { - "text": "你的代码应该设置h1标签的font-size为 68 像素。", - "testString": "assert($('h1').css('font-size') == '68px', '你的代码应该设置h1标签的font-size为 68 像素。');" + "text": "你的代码应该设置h1标签的font-size为68px。", + "testString": "assert($('h1').css('font-size') == '68px', '你的代码应该设置h1标签的font-size为68px。');" }, { - "text": "你的代码应该设置h2标签的font-size为 52 像素。", - "testString": "assert($('h2').css('font-size') == '52px', '你的代码应该设置h2标签的font-size为 52 像素。');" + "text": "你的代码应该设置h2标签的font-size为52px。", + "testString": "assert($('h2').css('font-size') == '52px', '你的代码应该设置h2标签的font-size为52px。');" }, { - "text": "你的代码应该设置h3标签的font-size为 40 像素。", - "testString": "assert($('h3').css('font-size') == '40px', '你的代码应该设置h3标签的font-size为 40 像素。');" + "text": "你的代码应该设置h3标签的font-size为40px。", + "testString": "assert($('h3').css('font-size') == '40px', '你的代码应该设置h3标签的font-size为40px。');" }, { - "text": "你的代码应该设置h4标签的font-size为 32 像素。", - "testString": "assert($('h4').css('font-size') == '32px', '你的代码应该设置h4标签的font-size为 32 像素。');" + "text": "你的代码应该设置h4标签的font-size为32px。", + "testString": "assert($('h4').css('font-size') == '32px', '你的代码应该设置h4标签的font-size为32px。');" }, { - "text": "你的代码应该设置h5标签的font-size为 21 像素。", - "testString": "assert($('h5').css('font-size') == '21px', '你的代码应该设置h6标签的font-size为 21 像素。');" + "text": "你的代码应该设置h5标签的font-size为21px。", + "testString": "assert($('h5').css('font-size') == '21px', '你的代码应该设置h6标签的font-size为21px。');" }, { - "text": "你的代码应该设置h6标签的font-size为 14 像素。", - "testString": "assert($('h6').css('font-size') == '14px', '你的代码应该设置h6标签的font-size为 14 像素。');" + "text": "你的代码应该设置h6标签的font-size为14px。", + "testString": "assert($('h6').css('font-size') == '14px', '你的代码应该设置h6标签的font-size为14px。');" } ], "solutions": [], @@ -1041,7 +1041,7 @@ }, { "id": "587d781c367417b2b2512ac3", - "title": "设置多个标题元素的文字粗细（font-weight）", + "title": "Set the font-weight for Multiple Heading Elements", "description": [ "在上一个挑战里你已经设置了每个标题的font-size，接下来你将设置font-weight。", "font-weight属性用于设置文本中所用的字体的粗细。", @@ -1124,7 +1124,7 @@ }, { "id": "587d781c367417b2b2512ac4", - "title": "设置段落的文字大小（font-size）", + "title": "Set the font-size of Paragraph Text", "description": [ "CSS 里面的font-size属性不只限于标题，它可以应用于任何包含文字的元素内。", "
", @@ -1132,8 +1132,8 @@ ], "tests": [ { - "text": "你的p标签应该包含一个font-size属性并且值为 16 像素。", - "testString": "assert($('p').css('font-size') == '16px', '你的p标签应该包含一个font-size属性并且值为 16 像素。');" + "text": "你的p标签应该包含一个font-size属性并且值为16px。", + "testString": "assert($('p').css('font-size') == '16px', '你的p标签应该包含一个font-size属性并且值为16px。');" } ], "solutions": [], @@ -1162,7 +1162,7 @@ }, { "id": "587d781d367417b2b2512ac5", - "title": "设置段落的行高（line-height）", + "title": "Set the line-height of Paragraphs", "description": [ "CSS 提供line-height属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。", "
", @@ -1170,8 +1170,8 @@ ], "tests": [ { - "text": "你的代码应该给p标签添加line-height属性并赋值 25px。", - "testString": "assert($('p').css('line-height') == '25px', '你的代码应该给p标签添加line-height属性并赋值 25px。');" + "text": "你的代码应该给p标签添加line-height属性并赋值25px。", + "testString": "assert($('p').css('line-height') == '25px', '你的代码应该给p标签添加line-height属性并赋值25px。');" } ], "solutions": [], @@ -1201,13 +1201,13 @@ }, { "id": "587d781d367417b2b2512ac8", - "title": "设置超链接的鼠标滑过（Hover）状态", + "title": "Adjust the Hover State of an Anchor Tag", "description": [ "本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。", - "比如，超链接可以使用:hover伪类选择器定义它的鼠标滑过状态样式。下面是鼠标滑过超链接时改变超链接颜色的 CSS：", + "比如，超链接可以使用:hover伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS：", "
a:hover {
  color: red;
}
", "
", - "代码编辑器里面已经有了一个 CSS 规则把所有的a标签定义成了黑色。添加一个规则，满足如下，当用户鼠标滑过a标签时，把color变成蓝色。" + "代码编辑器里面已经有了一个 CSS 规则把所有的a标签定义成了黑色。添加一个规则，满足如下，当用户悬停a标签时，把color变成蓝色。" ], "tests": [ { @@ -1215,8 +1215,8 @@ "testString": "assert($('a').css('color') == 'rgb(0, 0, 0)', '超链接的color应该保持黑色，只添加:hover CSS 规则。');" }, { - "text": "鼠标滑过超链接时超链接color应该变成蓝色。", - "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), '鼠标滑过超链接时超链接color应该变成蓝色。');" + "text": "悬停超链接时超链接color应该变成蓝色。", + "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), '悬停超链接时超链接color应该变成蓝色。');" } ], "solutions": [], @@ -1262,8 +1262,8 @@ "testString": "assert($('h2').css('position') == 'relative', 'h2元素应该添加position属性并赋值relative。');" }, { - "text": "你的代码应该使用 CSS 属性调整h2的位置使其从原来的位置向上偏移 15 像素。", - "testString": "assert($('h2').css('top') == '15px', '你的代码应该使用 CSS 属性调整h2的位置使其从原来的位置向上偏移 15 像素。');" + "text": "你的代码应该使用 CSS 属性调整h2的位置使其从原来的位置向上偏移15px。", + "testString": "assert($('h2').css('top') == '15px', '你的代码应该使用 CSS 属性调整h2的位置使其从原来的位置向上偏移15px。');" } ], "solutions": [], From 0782925f5247220f273b2bcc6ca9af253b213882 Mon Sep 17 00:00:00 2001 From: Chenzc Date: Mon, 6 Aug 2018 11:40:59 +0800 Subject: [PATCH 4/5] revise --- 01-responsive-web-design/applied-visual-design.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/01-responsive-web-design/applied-visual-design.json b/01-responsive-web-design/applied-visual-design.json index bbf05de..04b1928 100644 --- a/01-responsive-web-design/applied-visual-design.json +++ b/01-responsive-web-design/applied-visual-design.json @@ -10,8 +10,8 @@ "description": [ "这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。", "web 内容大部分都是文本。CSS 里面的text-align属性可以控制文本的对齐方式。", - "text-align: justify;文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。", - "text-align: center;文本居中对齐。", + "text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。", + "text-align: center;可以让文本居中对齐。", "text-align: right;可以让文本右对齐。", "text-align: left;是text-align的默认值，它可以让文本左对齐。", "
", @@ -83,7 +83,7 @@ "你可以使用 CSS 里面的width属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。下面这个例子把图片的宽度设置为 220px：", "
img {
  width: 220px;
}
", "
", - "给卡片添加width属性，设置它的值为绝对单位 245px。使用fullCark class 来选择元素。" + "给卡片添加width属性，设置它的宽度为 245px。使用fullCark class 来选择元素。" ], "tests": [ { From f6b7a3f38be546a4ccb750c23d738b2b19336ba8 Mon Sep 17 00:00:00 2001 From: Chenzc Date: Mon, 6 Aug 2018 11:54:13 +0800 Subject: [PATCH 5/5] revise --- 01-responsive-web-design/applied-visual-design.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/01-responsive-web-design/applied-visual-design.json b/01-responsive-web-design/applied-visual-design.json index 04b1928..7e95eb1 100644 --- a/01-responsive-web-design/applied-visual-design.json +++ b/01-responsive-web-design/applied-visual-design.json @@ -1246,7 +1246,7 @@ }, { "id": "587d781e367417b2b2512ac9", - "title": "改变元素的相对位置（Relative Position）", + "title": "Change an Element's Relative Position", "description": [ "在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。", "当元素的 position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：",