From 87f8b09066ce227cfe545944e4f2cda85ae8f7be Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Mon, 23 Jul 2018 14:03:59 +0800 Subject: [PATCH 01/12] =?UTF-8?q?add:=20=E5=AE=8C=E6=88=90BasicCSS?= =?UTF-8?q?=E7=9A=84=E5=89=8D4=E4=B8=AA=E6=95=99=E7=A8=8B=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 84 ++++++++++++------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index ee7034d..336475a 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -8,23 +8,23 @@ "id": "bad87fee1348bd9aedf08803", "title": "Change the Color of Text", "description": [ - "Now let's change the color of some of our text.", - "We can do this by changing the style of your h2 element.", - "The property that is responsible for the color of an element's text is the color style property.", - "Here's how you would set your h2 element's text color to blue:", + "现在来让我们修改一下文本的颜色。", + "我们可以改变你的h2元素里面的style。", + "负责文本元素的颜色属性是color属性", + "这里是你改变h2文本元素为蓝色的方法:", "<h2 style=\"color: blue;\">CatPhotoApp</h2>", - "Note that it is a good practice to end inline style declarations with a ; .", + "请注意style行内样式最好以;来结束。", "
", - "Change your h2 element's style so that its text color is red." + "尝试改变h2文本元素的颜色为红色。" ], "tests": [ { - "text": "Your h2 element should be red.", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.');" + "text": "你的h2标签应该为红色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2标签应该为红色。');" }, { - "text": "Your style declaration should end with a ; .", - "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),' Your style declaration should end with a ; .');" + "text": "你的style行内声明应该以;。", + "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'你的style行内声明应该以;。');" } ], "challengeType": 0, @@ -73,35 +73,35 @@ }, { "id": "bad87fee1348bd9aedf08805", - "title": "Use CSS Selectors to Style Elements", + "title": "通过CSS选择器设置样式", "description": [ - "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.", - "When you entered <h2 style=\"color: red\">CatPhotoApp</h2>, you were styling that individual h2 element with inline CSS, which stands for Cascading Style Sheets.", - "That's one way to specify the style of an element, but there's a better way to apply CSS.", - "At the top of your code, create a style block like this:", + "在CSS中, 有上百种properties属性可以让你改变页面样式。", + "当你输入<h2 style=\"color: red\">CatPhotoApp</h2>, 通过使用行内样式设置单独的h2元素样式，属于层叠样式表。", + "这是改变元素样式的一个特别方法, 但是存在着更好的方法来改变层叠样式表(CSS).", + "在代码的顶部，创建一个style区块，如下方所示：", "
<style>
</style>
", - "Inside that style block, you can create a CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, you would add a style rule that looks like this:", + "在style区块内, 你可以为所有h2元素创建一个CSS选择器。例如，如果你想所有h2元素变成红色, 可以添加下方的样式规则:", "
<style>
  h2 {color: red;}
</style>
", - "Note that it's important to have both opening and closing curly braces ({ and }) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.", + "注意，在每个元素的样式规则周围打开和关闭花括号（{和}）非常重要。你需要确定你定义的样式规则位于花括号之间。最后，请确定每个已定义的元素样式规则的末尾添加分号。", "
", - "Delete your h2 element's style attribute, and instead create a CSS style block. Add the necessary CSS to turn all h2 elements blue." + "删除h2的样式，而不是再创建style区块. 添加CSS样式规则使h2元素变为蓝色。" ], "tests": [ { - "text": "Remove the style attribute from your h2 element.", - "testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your h2 element.');" + "text": "移除h2标签的style行内样式。", + "testString": "assert(!$(\"h2\").attr(\"style\"), '移除h2标签的style行内样式。');" }, { - "text": "Create a style element.", - "testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a style element.');" + "text": "创建一个style区块。", + "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个style区块。');" }, { - "text": "Your h2 element should be blue.", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your h2 element should be blue.');" + "text": "你的h2元素应该为蓝色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", '你的h2元素应该为蓝色。');" }, { - "text": "Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.", - "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.');" + "text": "确保你的样式表里面的h2声明要以花括号包括，和分号结束。", + "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式表里面的h2声明要以花括号包括，和分号结束。');" }, { "text": "Make sure all your style elements are valid and have a closing tag.", @@ -154,35 +154,35 @@ }, { "id": "bad87fee1348bd9aecf08806", - "title": "Use a CSS Class to Style an Element", + "title": "使用CSS类去改变元素样式", "description": [ - "Classes are reusable styles that can be added to HTML elements.", - "Here's an example CSS class declaration:", + "CSS类是可重用的，可以添加到相应的HTML元素使用。", + "这里是一个CSS类声明示例：", "
<style>
  .blue-text {
    color: blue;
  }
</style>
", - "You can see that we've created a CSS class called blue-text within the <style> tag.", - "You can apply a class to an HTML element like this:", + "你可以看到，我们在<style>声明里，创建了一个名为blue-text的CSS类。", + "你可以添加CSS类到一个HTML元素里，如下所示:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "Note that in your CSS style element, class names start with a period. In your HTML elements' class attribute, the class name does not include the period.", + "注意你的style声明，CSS类名以句号开头。在你的HTML元素里的Class属性, CSS类名则不需要包含句号", "
", - "Inside your style element, change the h2 selector to .red-text and update the color's value from blue to red.", - "Give your h2 element the class attribute with a value of 'red-text'." + "在你的style声明里，改变h2选择器名为.red-text的CSS类，同时将颜色从blue变为red。", + "在你的h2html元素里，添加一个class属性，值为'red-text'." ], "tests": [ { - "text": "Your h2 element should be red.", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.');" + "text": "你的h2应该为红色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2应该为红色。');" }, { - "text": "Your h2 element should have the class red-text.", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.');" + "text": "你的h2元素应该包含一个名为red-text的Class属性值。", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2元素应该包含一个名为red-text的Class属性值。');" }, { - "text": "Your stylesheet should declare a red-text class and have its color set to red.", - "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a red-text class and have its color set to red.');" + "text": "你的样式表应该包含一个red-textCSS类声明，并且它的样式应为红色。", + "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的样式表应该包含一个red-textCSS类声明，并且它的样式应为红色。');" }, { - "text": "Do not use inline style declarations like style=\"color: red\" in your h2 element.", - "testString": "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like style=\"color: red\" in your h2 element.');" + "text": "不要使用这样的style=\"color: red\"行内样式声明在你的h2标签里。", + "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要使用这样的style=\"color: red\"行内样式声明在你的h2标签里。');" } ], "challengeType": 0, From 6162385e8e25409a67009115ee69f6df19f36f95 Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Tue, 24 Jul 2018 00:22:13 +0800 Subject: [PATCH 02/12] =?UTF-8?q?alter:=20=E4=BF=AE=E6=94=B9=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E7=BF=BB=E8=AF=91=E4=B8=AD=E6=96=87=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 78 ++++++++++++------------- 1 file changed, 37 insertions(+), 41 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index 336475a..8ab40a6 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -6,16 +6,16 @@ "challenges": [ { "id": "bad87fee1348bd9aedf08803", - "title": "Change the Color of Text", + "title": "改变文本的颜色", "description": [ "现在来让我们修改一下文本的颜色。", - "我们可以改变你的h2元素里面的style。", - "负责文本元素的颜色属性是color属性", - "这里是你改变h2文本元素为蓝色的方法:", + "我们通过修改h2标签里面的样式。", + "负责标签文本的颜色属性是color。", + "这是改变h2标签为蓝色的方法:", "<h2 style=\"color: blue;\">CatPhotoApp</h2>", - "请注意style行内样式最好以;来结束。", + "请注意行内样式最好以;来结束。", "
", - "尝试改变h2文本元素的颜色为红色。" + "尝试改变h2文本标签的颜色为红色。" ], "tests": [ { @@ -23,8 +23,8 @@ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2标签应该为红色。');" }, { - "text": "你的style行内声明应该以;。", - "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'你的style行内声明应该以;。');" + "text": "你的行内样式应该以;结束。", + "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'你的行内样式应该以;结束。');" } ], "challengeType": 0, @@ -75,16 +75,16 @@ "id": "bad87fee1348bd9aedf08805", "title": "通过CSS选择器设置样式", "description": [ - "在CSS中, 有上百种properties属性可以让你改变页面样式。", - "当你输入<h2 style=\"color: red\">CatPhotoApp</h2>, 通过使用行内样式设置单独的h2元素样式，属于层叠样式表。", - "这是改变元素样式的一个特别方法, 但是存在着更好的方法来改变层叠样式表(CSS).", - "在代码的顶部，创建一个style区块，如下方所示：", + "在CSS中, 有上百种属性可以让你改变页面样式。", + "当你输入<h2 style=\"color: red\">CatPhotoApp</h2>, 设置行内样式来改变单独的h2标签的样式，这是改变层叠样式表(CSS)的方法之一。", + "这是改变标签样式的一个特别方法, 不过存在着更好的方法来改变层叠样式表(CSS)。", + "在代码的顶部，创建一个style声明区域，如下方所示：", "
<style>
</style>
", - "在style区块内, 你可以为所有h2元素创建一个CSS选择器。例如，如果你想所有h2元素变成红色, 可以添加下方的样式规则:", + "在style样式声明区域内, 可以创建一个CSS选择器的规则来应用于所有的h2标签。例如，如果你想所有h2标签变成红色, 可以添加下方的样式规则:", "
<style>
  h2 {color: red;}
</style>
", - "注意，在每个元素的样式规则周围打开和关闭花括号（{和}）非常重要。你需要确定你定义的样式规则位于花括号之间。最后，请确定每个已定义的元素样式规则的末尾添加分号。", + "注意，在每个元素的样式声明区域里，打开和关闭花括号（{和}）非常重要。你需要确定你定义的样式规则位于花括号之间。最后，请确定每个已定义的元素样式规则的末尾添加'分号'。", "
", - "删除h2的样式，而不是再创建style区块. 添加CSS样式规则使h2元素变为蓝色。" + "删除h2标签的行内样式，通过创建style样式声明区域. 添加CSS样式规则使h2标签变为蓝色。" ], "tests": [ { @@ -92,20 +92,16 @@ "testString": "assert(!$(\"h2\").attr(\"style\"), '移除h2标签的style行内样式。');" }, { - "text": "创建一个style区块。", - "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个style区块。');" + "text": "创建一个style样式声明区域。", + "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个style样式声明区域。');" }, { - "text": "你的h2元素应该为蓝色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", '你的h2元素应该为蓝色。');" + "text": "h2标签颜色应为蓝色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'h2标签颜色应为蓝色。');" }, { - "text": "确保你的样式表里面的h2声明要以花括号包括，和分号结束。", - "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式表里面的h2声明要以花括号包括，和分号结束。');" - }, - { - "text": "Make sure all your style elements are valid and have a closing tag.", - "testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(//g) || []).length, 'Make sure all your style elements are valid and have a closing tag.');" + "text": "确保你的样式声明里的h2规则需以花括号所包括，和分号结束。", + "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的h2规则需以花括号所包括，和分号结束。');" } ], "challengeType": 0, @@ -154,35 +150,35 @@ }, { "id": "bad87fee1348bd9aecf08806", - "title": "使用CSS类去改变元素样式", + "title": "通过CSS类去改变标签样式", "description": [ - "CSS类是可重用的，可以添加到相应的HTML元素使用。", - "这里是一个CSS类声明示例：", + "CSS的类具有可重用性，可应用于各种HTML标签。", + "一个CSS类声明示例，如下所示：", "
<style>
  .blue-text {
    color: blue;
  }
</style>
", - "你可以看到，我们在<style>声明里，创建了一个名为blue-text的CSS类。", - "你可以添加CSS类到一个HTML元素里，如下所示:", + "可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的CSS类。", + "你可以将CSS类应用到一个HTML元素里，如下所示:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "注意你的style声明，CSS类名以句号开头。在你的HTML元素里的Class属性, CSS类名则不需要包含句号", + "注意你的style样式声明，CSS类名需以句号开头。而在你的HTML标签里的Class属性, CSS类则不需要包含句号", "
", - "在你的style声明里，改变h2选择器名为.red-text的CSS类，同时将颜色从blue变为red。", - "在你的h2html元素里，添加一个class属性，值为'red-text'." + "在style样式声明里，改变h2标签选择器名为.red-text的一个CSS类，同时将颜色blue变为red。", + "在你的h2html标签里，添加一个class属性，且值为'red-text'." ], "tests": [ { - "text": "你的h2应该为红色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2应该为红色。');" + "text": "你的h2标签应该为红色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2标签应该为红色。');" }, { - "text": "你的h2元素应该包含一个名为red-text的Class属性值。", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2元素应该包含一个名为red-text的Class属性值。');" + "text": "你的h2标签应该包含一个名为red-text的class属性值。", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2标签应该包含一个名为red-text的class属性值。');" }, { - "text": "你的样式表应该包含一个red-textCSS类声明，并且它的样式应为红色。", - "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的样式表应该包含一个red-textCSS类声明，并且它的样式应为红色。');" + "text": "你的style样式声明区域里应该包含一个red-textCSS类规则，并且它的样式应为红色。", + "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的style样式声明区域里应该包含一个red-textCSS类规则，并且它的样式应为红色。');" }, { - "text": "不要使用这样的style=\"color: red\"行内样式声明在你的h2标签里。", - "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要使用这样的style=\"color: red\"行内样式声明在你的h2标签里。');" + "text": "不要使用style=\"color: red\"的行内样式，在你的h2标签里。", + "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要使用style=\"color: red\"的行内样式，在你的h2标签里。');" } ], "challengeType": 0, From b2979fa6ceb0e1ef9d44e828f99923f5f8553bb2 Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Tue, 24 Jul 2018 13:31:51 +0800 Subject: [PATCH 03/12] =?UTF-8?q?add:=20=E7=BB=A7=E7=BB=AD=E7=BF=BB?= =?UTF-8?q?=E8=AF=913=E5=B0=8F=E8=8A=82=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 46 ++++++++++++------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index 8ab40a6..ede48b6 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -6,7 +6,7 @@ "challenges": [ { "id": "bad87fee1348bd9aedf08803", - "title": "改变文本的颜色", + "title": "Change the Color of Text", "description": [ "现在来让我们修改一下文本的颜色。", "我们通过修改h2标签里面的样式。", @@ -73,7 +73,7 @@ }, { "id": "bad87fee1348bd9aedf08805", - "title": "通过CSS选择器设置样式", + "title": "Use CSS Selectors to Style Elements", "description": [ "在CSS中, 有上百种属性可以让你改变页面样式。", "当你输入<h2 style=\"color: red\">CatPhotoApp</h2>, 设置行内样式来改变单独的h2标签的样式，这是改变层叠样式表(CSS)的方法之一。", @@ -150,7 +150,7 @@ }, { "id": "bad87fee1348bd9aecf08806", - "title": "通过CSS类去改变标签样式", + "title": "Use a CSS Class to Style an Element", "description": [ "CSS的类具有可重用性，可应用于各种HTML标签。", "一个CSS类声明示例，如下所示：", @@ -235,28 +235,28 @@ "id": "bad87fee1348bd9aefe08806", "title": "Style Multiple Elements with a CSS Class", "description": [ - "Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your red-text class to the first p element." + "通过CSS类,多个HTML标签上可以使用相同的cSS样式规则。你可以将red-textCSS类应用在第一个p标签上。" ], "tests": [ { - "text": "Your h2 element should be red.", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.');" + "text": "你的h2标签应该是红色的。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2标签应该是红色的。');" }, { - "text": "Your h2 element should have the class red-text.", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.');" + "text": "你的h2标签应该含有名为red-text的CSS类。", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2标签应该含有名为red-text的CSS类。');" }, { - "text": "Your first p element should be red.", - "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first p element should be red.');" + "text": "你的第一个p标签应该为红色。", + "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", '你的第一个p标签应该为红色。');" }, { - "text": "Your second and third p elements should not be red.", - "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'Your second and third p elements should not be red.');" + "text": "你的第二和第三个p标签不应该为红色。", + "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), '你的第二和第三个p标签不应该为红色。');" }, { - "text": "Your first p element should have the class red-text.", - "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first p element should have the class red-text.');" + "text": "你的第一个p标签应该包含名为red-text的CSS类。", + "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个p标签应该包含名为red-text的CSS类。');" } ], "challengeType": 0, @@ -313,15 +313,15 @@ "id": "bad87fee1348bd9aedf08806", "title": "Change the Font Size of an Element", "description": [ - "Font size is controlled by the font-size CSS property, like this:", + "字体大小由font-sizeCSS属性控制，如下所示：", "
h1 {
  font-size: 30px;
}
", "
", - "Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px)." + "在包含red-textCSS类的<style>声明区域的里，创建一个p标签样式规则，并设置font-size为16像素(16px)。" ], "tests": [ { - "text": "Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.", - "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.');" + "text": "在style样式声明区域里，设置p元素的font-size为16px。浏览器和文本缩放应设置为100％。", + "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), '在style样式声明区域里，设置p元素的font-size为16px。浏览器和文本缩放应设置为100％。');" } ], "challengeType": 0, @@ -378,16 +378,16 @@ "id": "bad87fee1348bd9aede08807", "title": "Set the Font Family of an Element", "description": [ - "You can set which font an element should use, by using the font-family property.", - "For example, if you wanted to set your h2 element's font to sans-serif, you would use the following CSS:", + "你可以设置标签里面的字体，通过font-family属性。", + "例如，如果你想设置h2标签的字体为sans-serif，你可以用以下的CSS规则：", "
h2 {
  font-family: sans-serif;
}
", "
", - "Make all of your p elements use the monospace font." + "确保你所有的p标签使用monospace字体。" ], "tests": [ { - "text": "Your p elements should use the font monospace.", - "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your p elements should use the font monospace.');" + "text": "你的p标签应该使用monospace字体。", + "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), '你的p标签应该使用monospace字体。');" } ], "challengeType": 0, From f62b7da24265ad8e29f86a984d6fe335fc82ee26 Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Thu, 26 Jul 2018 13:37:11 +0800 Subject: [PATCH 04/12] =?UTF-8?q?fixed:=20=E4=BF=AE=E5=A4=8D=E8=AF=AD?= =?UTF-8?q?=E4=B9=89=EF=BC=8C=E4=BB=A5=E5=8F=8A=E7=BF=BB=E8=AF=91=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 120 ++++++++++++------------ 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index ede48b6..ad74fd8 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -9,23 +9,23 @@ "title": "Change the Color of Text", "description": [ "现在来让我们修改一下文本的颜色。", - "我们通过修改h2标签里面的样式。", - "负责标签文本的颜色属性是color。", - "这是改变h2标签为蓝色的方法:", + "我们通过修改 h2 元素里面的 style。", + "color 属性可以控制文本元素颜色。", + "以下是改变 h2 元素为蓝色的方法：", "<h2 style=\"color: blue;\">CatPhotoApp</h2>", - "请注意行内样式最好以;来结束。", + "请注意行内 style 最好以 ; 来结束。", "
", - "尝试改变h2文本标签的颜色为红色。" + "请把 h2 元素的文本颜色设置为红色。" ], "tests": [ { - "text": "你的h2标签应该为红色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2标签应该为红色。');" + "text": "你的 h2　元素应该为红色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的　h2　元素应该为红色。');" }, { - "text": "你的行内样式应该以;结束。", - "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'你的行内样式应该以;结束。');" - } + "text": "h2 元素 style 属性的值应该以 ; 结束。", + "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'h2 元素 style 属性的值应该以 ; 结束。');" + ], "challengeType": 0, "files": { @@ -75,33 +75,33 @@ "id": "bad87fee1348bd9aedf08805", "title": "Use CSS Selectors to Style Elements", "description": [ - "在CSS中, 有上百种属性可以让你改变页面样式。", - "当你输入<h2 style=\"color: red\">CatPhotoApp</h2>, 设置行内样式来改变单独的h2标签的样式，这是改变层叠样式表(CSS)的方法之一。", - "这是改变标签样式的一个特别方法, 不过存在着更好的方法来改变层叠样式表(CSS)。", - "在代码的顶部，创建一个style声明区域，如下方所示：", + "在CSS中，有上百种　属性　可以让你改变页面样式。", + "通过输入　<h2 style=\"color: red\">CatPhotoApp</h2> 的 行内样式，修改单一的　h2　元素的颜色的方式，配置　层叠样式表（CSS） 的方式之一。", + "这是改变元素样式的一个特别方法，不过存在着更好的方法来设置　层叠样式表（CSS）。", + "在代码的顶部，创建一个　style　声明区域，如下方所示：", "
<style>
</style>
", - "在style样式声明区域内, 可以创建一个CSS选择器的规则来应用于所有的h2标签。例如，如果你想所有h2标签变成红色, 可以添加下方的样式规则:", + "在style样式声明区域内，可以创建一个　CSS 选择器　的规则来应用于所有的　h2　元素。例如，如果你想所有　h2　元素变成红色，可以添加下方的样式规则：", "
<style>
  h2 {color: red;}
</style>
", - "注意，在每个元素的样式声明区域里，打开和关闭花括号（{和}）非常重要。你需要确定你定义的样式规则位于花括号之间。最后，请确定每个已定义的元素样式规则的末尾添加'分号'。", + "注意，在每个元素的样式声明区域里，左右花括号（{ 和 }）一定要写全。你需要确定你定义的样式规则位于花括号之间。以及，记得在每个元素样式规则的末尾添加分号。", "
", - "删除h2标签的行内样式，通过创建style样式声明区域. 添加CSS样式规则使h2标签变为蓝色。" + "删除　h2　元素的行内样式，创建　style　样式声明区域。添加CSS样式规则使　h2　元素变为蓝色。" ], "tests": [ { - "text": "移除h2标签的style行内样式。", - "testString": "assert(!$(\"h2\").attr(\"style\"), '移除h2标签的style行内样式。');" + "text": "移除　h2　元素的行内样式。", + "testString": "assert(!$(\"h2\").attr(\"style\"), '移除　h2　元素的行内样式。');" }, { - "text": "创建一个style样式声明区域。", - "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个style样式声明区域。');" + "text": "创建一个　style　样式声明区域。", + "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个　style　样式声明区域。');" }, { - "text": "h2标签颜色应为蓝色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'h2标签颜色应为蓝色。');" + "text": "h2　元素颜色应为蓝色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'h2　元素颜色应为蓝色。');" }, { - "text": "确保你的样式声明里的h2规则需以花括号所包括，和分号结束。", - "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的h2规则需以花括号所包括，和分号结束。');" + "text": "确保你的样式声明里的　h2　规则需以花括号所包括，和分号结束。", + "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的　h2　规则需以花括号所包括，和分号结束。');" } ], "challengeType": 0, @@ -152,33 +152,33 @@ "id": "bad87fee1348bd9aecf08806", "title": "Use a CSS Class to Style an Element", "description": [ - "CSS的类具有可重用性，可应用于各种HTML标签。", - "一个CSS类声明示例，如下所示：", + "CSS 的类（class）具有可重用性，可应用于各种 HTML 元素。", + "一个 CSS 类（class）声明示例，如下所示：", "
<style>
  .blue-text {
    color: blue;
  }
</style>
", - "可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的CSS类。", - "你可以将CSS类应用到一个HTML元素里，如下所示:", + "可以看到，我们在　<style>　样式声明区域里，创建了一个名为　blue-text　的 CSS 类（class）。", + "你可以将 CSS 类（class）应用到一个HTML元素里，如下所示：", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "注意你的style样式声明，CSS类名需以句号开头。而在你的HTML标签里的Class属性, CSS类则不需要包含句号", + "注意你的　style　样式区域声明里，CSS 类（class）需以句号开头。而在你的HTML元素里的 class 属性，类名不需要包含句号", "
", - "在style样式声明里，改变h2标签选择器名为.red-text的一个CSS类，同时将颜色blue变为red。", - "在你的h2html标签里，添加一个class属性，且值为'red-text'." + "在　style　样式声明里，h2　元素选择器改为　.red-text　的 CSS 类（class），同时将颜色　blue　变为　red。", + "在你的　h2　html　元素里，添加一个　class　属性，且值为　'red-text'。" ], "tests": [ { - "text": "你的h2标签应该为红色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2标签应该为红色。');" + "text": "你的　h2　元素应该为红色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的　h2　元素应该为红色。');" }, { - "text": "你的h2标签应该包含一个名为red-text的class属性值。", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2标签应该包含一个名为red-text的class属性值。');" + "text": "你的　h2　元素应含有 red-text 类名。", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的　h2　元素应含有 red-text 类名。');" }, { - "text": "你的style样式声明区域里应该包含一个red-textCSS类规则，并且它的样式应为红色。", - "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的style样式声明区域里应该包含一个red-textCSS类规则，并且它的样式应为红色。');" + "text": "你的　style　样式声明区域里应该包含一个　red-text　CSS 类（class）规则，并且它的颜色应为红色。", + "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的　style　样式声明区域里应该包含一个　red-text CSS 类（class）规则，并且它的颜色应为红色。');" }, { - "text": "不要使用style=\"color: red\"的行内样式，在你的h2标签里。", - "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要使用style=\"color: red\"的行内样式，在你的h2标签里。');" + "text": "不要在 h2 元素里使用 style=\"color: red\" 的行内样式 。", + "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要在 h2 元素里使用 style=\"color: red\" 的行内样式 。');" } ], "challengeType": 0, @@ -235,28 +235,28 @@ "id": "bad87fee1348bd9aefe08806", "title": "Style Multiple Elements with a CSS Class", "description": [ - "通过CSS类,多个HTML标签上可以使用相同的cSS样式规则。你可以将red-textCSS类应用在第一个p标签上。" + "通过 CSS 类（class），多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将 red-text CSS 类（class）添加在第一个 p 元素上。" ], "tests": [ { - "text": "你的h2标签应该是红色的。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2标签应该是红色的。');" + "text": "你的 h2 元素应该是红色的。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的 h2 元素应该是红色的。');" }, { - "text": "你的h2标签应该含有名为red-text的CSS类。", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2标签应该含有名为red-text的CSS类。');" + "text": "你的 h2 元素应该含有名为 red-text 的 CSS 类选择器。", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的 h2 元素应该含有名为 red-text 的 CSS 类选择器。');" }, { - "text": "你的第一个p标签应该为红色。", - "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", '你的第一个p标签应该为红色。');" + "text": "你的第一个 p 元素应该为红色。", + "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", '你的第一个 p 元素应该为红色。');" }, { - "text": "你的第二和第三个p标签不应该为红色。", - "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), '你的第二和第三个p标签不应该为红色。');" + "text": "你的第二和第三个 p 元素不应该为红色。", + "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), '你的第二和第三个 p 元素不应该为红色。');" }, { - "text": "你的第一个p标签应该包含名为red-text的CSS类。", - "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个p标签应该包含名为red-text的CSS类。');" + "text": "你的第一个 p 元素应该包含名为 red-text 的 CSS 类（class）。", + "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个 p 元素应该包含名为 red-text 的 CSS 类（class）。');" } ], "challengeType": 0, @@ -313,15 +313,15 @@ "id": "bad87fee1348bd9aedf08806", "title": "Change the Font Size of an Element", "description": [ - "字体大小由font-sizeCSS属性控制，如下所示：", + "字体大小由 font-size 的 CSS 属性控制，如下所示：", "
h1 {
  font-size: 30px;
}
", "
", - "在包含red-textCSS类的<style>声明区域的里，创建一个p标签样式规则，并设置font-size为16像素(16px)。" + "在包含 red-text CSS 类（class）的 <style> 声明区域的里，创建一个 p 元素样式规则，并设置 font-size 为 16 像素(16px)。" ], "tests": [ { - "text": "在style样式声明区域里，设置p元素的font-size为16px。浏览器和文本缩放应设置为100％。", - "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), '在style样式声明区域里，设置p元素的font-size为16px。浏览器和文本缩放应设置为100％。');" + "text": "在 style 样式声明区域里，p 元素的 font-size 的值应为 16px。浏览器和文本缩放应设置为 100％。", + "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), '在 style 样式声明区域里，p 元素的 font-size 的值应为 16px。浏览器和文本缩放应设置为 100％。');" } ], "challengeType": 0, @@ -378,16 +378,16 @@ "id": "bad87fee1348bd9aede08807", "title": "Set the Font Family of an Element", "description": [ - "你可以设置标签里面的字体，通过font-family属性。", - "例如，如果你想设置h2标签的字体为sans-serif，你可以用以下的CSS规则：", + "通过 font-family 属性，可以设置元素里面的字体样式。", + "例如，如果你想设置 h2 元素的字体为 sans-serif，你可以用以下的CSS规则：", "
h2 {
  font-family: sans-serif;
}
", "
", - "确保你所有的p标签使用monospace字体。" + "确保你所有的 p 元素使用 monospace 字体。" ], "tests": [ { - "text": "你的p标签应该使用monospace字体。", - "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), '你的p标签应该使用monospace字体。');" + "text": "你的 p 元素应该使用 monospace 字体。", + "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), '你的 p 元素应该使用 monospace 字体。');" } ], "challengeType": 0, From 571575ae8b946f8fbf359713848eeae8ef0a15ff Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Fri, 27 Jul 2018 13:06:38 +0800 Subject: [PATCH 05/12] =?UTF-8?q?update:=20=E6=9B=BF=E6=8D=A2=E7=A9=BA?= =?UTF-8?q?=E6=A0=BC&=E4=BF=AE=E6=94=B9css=20class=E7=BF=BB=E8=AF=91?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 68 ++++++++++++------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index ad74fd8..eb9b506 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -19,8 +19,8 @@ ], "tests": [ { - "text": "你的 h2　元素应该为红色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的　h2　元素应该为红色。');" + "text": "你的 h2 元素应该为红色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的 h2 元素应该为红色。');" }, { "text": "h2 元素 style 属性的值应该以 ; 结束。", @@ -75,33 +75,33 @@ "id": "bad87fee1348bd9aedf08805", "title": "Use CSS Selectors to Style Elements", "description": [ - "在CSS中，有上百种　属性　可以让你改变页面样式。", - "通过输入　<h2 style=\"color: red\">CatPhotoApp</h2> 的 行内样式，修改单一的　h2　元素的颜色的方式，配置　层叠样式表（CSS） 的方式之一。", - "这是改变元素样式的一个特别方法，不过存在着更好的方法来设置　层叠样式表（CSS）。", - "在代码的顶部，创建一个　style　声明区域，如下方所示：", + "在CSS中，有上百种 属性 可以让你改变页面样式。", + "通过输入 <h2 style=\"color: red\">CatPhotoApp</h2> 的 行内样式，修改单一的 h2 元素的颜色的方式，配置 层叠样式表（CSS） 的方式之一。", + "这是改变元素样式的一个特别方法，不过存在着更好的方法来设置 层叠样式表（CSS）。", + "在代码的顶部，创建一个 style 声明区域，如下方所示：", "
<style>
</style>
", - "在style样式声明区域内，可以创建一个　CSS 选择器　的规则来应用于所有的　h2　元素。例如，如果你想所有　h2　元素变成红色，可以添加下方的样式规则：", + "在style样式声明区域内，可以创建一个 CSS 选择器 的规则来应用于所有的 h2 元素。例如，如果你想所有 h2 元素变成红色，可以添加下方的样式规则：", "
<style>
  h2 {color: red;}
</style>
", "注意，在每个元素的样式声明区域里，左右花括号（{ 和 }）一定要写全。你需要确定你定义的样式规则位于花括号之间。以及，记得在每个元素样式规则的末尾添加分号。", "
", - "删除　h2　元素的行内样式，创建　style　样式声明区域。添加CSS样式规则使　h2　元素变为蓝色。" + "删除 h2 元素的行内样式，创建 style 样式声明区域。添加CSS样式规则使 h2 元素变为蓝色。" ], "tests": [ { - "text": "移除　h2　元素的行内样式。", - "testString": "assert(!$(\"h2\").attr(\"style\"), '移除　h2　元素的行内样式。');" + "text": "移除 h2 元素的行内样式。", + "testString": "assert(!$(\"h2\").attr(\"style\"), '移除 h2 元素的行内样式。');" }, { - "text": "创建一个　style　样式声明区域。", - "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个　style　样式声明区域。');" + "text": "创建一个 style 样式声明区域。", + "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个 style 样式声明区域。');" }, { - "text": "h2　元素颜色应为蓝色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'h2　元素颜色应为蓝色。');" + "text": "h2 元素颜色应为蓝色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'h2 元素颜色应为蓝色。');" }, { - "text": "确保你的样式声明里的　h2　规则需以花括号所包括，和分号结束。", - "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的　h2　规则需以花括号所包括，和分号结束。');" + "text": "确保你的样式声明里的 h2 规则需以花括号所包括，和分号结束。", + "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的 h2 规则需以花括号所包括，和分号结束。');" } ], "challengeType": 0, @@ -152,29 +152,29 @@ "id": "bad87fee1348bd9aecf08806", "title": "Use a CSS Class to Style an Element", "description": [ - "CSS 的类（class）具有可重用性，可应用于各种 HTML 元素。", - "一个 CSS 类（class）声明示例，如下所示：", + "CSS 的 class 具有可重用性，可应用于各种 HTML 元素。", + "一个 CSS class 声明示例，如下所示：", "
<style>
  .blue-text {
    color: blue;
  }
</style>
", - "可以看到，我们在　<style>　样式声明区域里，创建了一个名为　blue-text　的 CSS 类（class）。", - "你可以将 CSS 类（class）应用到一个HTML元素里，如下所示：", + "可以看到，我们在 <style> 样式声明区域里，创建了一个名为 blue-text 的 class 选择器。", + "你可以将 CSS class 选择器应用到一个HTML元素里，如下所示：", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "注意你的　style　样式区域声明里，CSS 类（class）需以句号开头。而在你的HTML元素里的 class 属性，类名不需要包含句号", + "注意你的 style 样式区域声明里，class 需以句号开头。而在你的HTML元素里的 class 属性的类名，不需要包含句号", "
", - "在　style　样式声明里，h2　元素选择器改为　.red-text　的 CSS 类（class），同时将颜色　blue　变为　red。", - "在你的　h2　html　元素里，添加一个　class　属性，且值为　'red-text'。" + "在 style 样式声明里，h2 元素选择器改为 .red-text 的 CSS class 选择器，同时将颜色 blue 变为 red。", + "在你的 h2 html 元素里，添加一个 class 属性，且值为 'red-text'。" ], "tests": [ { - "text": "你的　h2　元素应该为红色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的　h2　元素应该为红色。');" + "text": "你的 h2 元素应该为红色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的 h2 元素应该为红色。');" }, { - "text": "你的　h2　元素应含有 red-text 类名。", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的　h2　元素应含有 red-text 类名。');" + "text": "你的 h2 元素应含有 red-text class 选择器。", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的 h2 元素应含有 red-text class 选择器。');" }, { - "text": "你的　style　样式声明区域里应该包含一个　red-text　CSS 类（class）规则，并且它的颜色应为红色。", - "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的　style　样式声明区域里应该包含一个　red-text CSS 类（class）规则，并且它的颜色应为红色。');" + "text": "你的 style 样式声明区域里应该包含一个 red-text class 选择器，并且它的颜色应为红色。", + "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的 style 样式声明区域里应该包含一个 red-text CSS 类（class）规则，并且它的颜色应为红色。');" }, { "text": "不要在 h2 元素里使用 style=\"color: red\" 的行内样式 。", @@ -235,7 +235,7 @@ "id": "bad87fee1348bd9aefe08806", "title": "Style Multiple Elements with a CSS Class", "description": [ - "通过 CSS 类（class），多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将 red-text CSS 类（class）添加在第一个 p 元素上。" + "通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将 red-text class 选择器应用在第一个 p 元素上。" ], "tests": [ { @@ -243,8 +243,8 @@ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的 h2 元素应该是红色的。');" }, { - "text": "你的 h2 元素应该含有名为 red-text 的 CSS 类选择器。", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的 h2 元素应该含有名为 red-text 的 CSS 类选择器。');" + "text": "你的 h2 元素应该含有名为 red-text 的 class 选择器。", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的 h2 元素应该含有名为 red-text 的 class 选择器。');" }, { "text": "你的第一个 p 元素应该为红色。", @@ -255,8 +255,8 @@ "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), '你的第二和第三个 p 元素不应该为红色。');" }, { - "text": "你的第一个 p 元素应该包含名为 red-text 的 CSS 类（class）。", - "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个 p 元素应该包含名为 red-text 的 CSS 类（class）。');" + "text": "你的第一个 p 元素应该包含名为 red-text 的 class 选择器。", + "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个 p 元素应该包含名为 red-text 的 class 选择器。');" } ], "challengeType": 0, From 1ac9cbfe0754d3836fbf9b5b5345cceda20d0f56 Mon Sep 17 00:00:00 2001 From: huluoyang Date: Sat, 28 Jul 2018 17:11:07 +0800 Subject: [PATCH 06/12] remove extra whitespace --- 01-responsive-web-design/basic-css.json | 114 ++++++++++++------------ 1 file changed, 57 insertions(+), 57 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index eb9b506..e949b39 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -9,21 +9,21 @@ "title": "Change the Color of Text", "description": [ "现在来让我们修改一下文本的颜色。", - "我们通过修改 h2 元素里面的 style。", - "color 属性可以控制文本元素颜色。", - "以下是改变 h2 元素为蓝色的方法：", + "我们通过修改h2元素里面的 style。", + "color属性可以控制文本元素颜色。", + "以下是改变h2元素为蓝色的方法：", "<h2 style=\"color: blue;\">CatPhotoApp</h2>", - "请注意行内 style 最好以 ; 来结束。", + "请注意行内style最好以;来结束。", "
", - "请把 h2 元素的文本颜色设置为红色。" + "请把h2元素的文本颜色设置为红色。" ], "tests": [ { - "text": "你的 h2 元素应该为红色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的 h2 元素应该为红色。');" + "text": "你的h2元素应该为红色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2元素应该为红色。');" }, { - "text": "h2 元素 style 属性的值应该以 ; 结束。", + "text": "h2元素的style 属性的值应该以;结束。", "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'h2 元素 style 属性的值应该以 ; 结束。');" ], @@ -75,33 +75,33 @@ "id": "bad87fee1348bd9aedf08805", "title": "Use CSS Selectors to Style Elements", "description": [ - "在CSS中，有上百种 属性 可以让你改变页面样式。", - "通过输入 <h2 style=\"color: red\">CatPhotoApp</h2> 的 行内样式，修改单一的 h2 元素的颜色的方式，配置 层叠样式表（CSS） 的方式之一。", - "这是改变元素样式的一个特别方法，不过存在着更好的方法来设置 层叠样式表（CSS）。", + "在CSS中，有上百种属性可以让你改变页面样式。", + "通过输入 <h2 style=\"color: red\">CatPhotoApp</h2> 的行内样式，修改单一的h2元素的颜色的方式，配置 层叠样式表（CSS） 的方式之一。", + "这是改变元素样式的一个特别方法，不过存在着更好的方法来设置层叠样式表（CSS。", "在代码的顶部，创建一个 style 声明区域，如下方所示：", "
<style>
</style>
", - "在style样式声明区域内，可以创建一个 CSS 选择器 的规则来应用于所有的 h2 元素。例如，如果你想所有 h2 元素变成红色，可以添加下方的样式规则：", + "在style样式声明区域内，可以创建一个CSS 选择器的规则来应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：", "
<style>
  h2 {color: red;}
</style>
", "注意，在每个元素的样式声明区域里，左右花括号（{ 和 }）一定要写全。你需要确定你定义的样式规则位于花括号之间。以及，记得在每个元素样式规则的末尾添加分号。", "
", - "删除 h2 元素的行内样式，创建 style 样式声明区域。添加CSS样式规则使 h2 元素变为蓝色。" + "删除h2元素的行内样式，创建style样式声明区域。添加CSS样式规则使h2元素变为蓝色。" ], "tests": [ { - "text": "移除 h2 元素的行内样式。", - "testString": "assert(!$(\"h2\").attr(\"style\"), '移除 h2 元素的行内样式。');" + "text": "移除h2元素的行内样式。", + "testString": "assert(!$(\"h2\").attr(\"style\"), '移除h2元素的行内样式。');" }, { - "text": "创建一个 style 样式声明区域。", - "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个 style 样式声明区域。');" + "text": "创建一个style样式声明区域。", + "testString": "assert($(\"style\") && $(\"style\").length > 1, '创建一个style样式声明区域。');" }, { - "text": "h2 元素颜色应为蓝色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'h2 元素颜色应为蓝色。');" + "text": "h2元素颜色应为蓝色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'h2元素颜色应为蓝色。');" }, { - "text": "确保你的样式声明里的 h2 规则需以花括号所包括，和分号结束。", - "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的 h2 规则需以花括号所包括，和分号结束。');" + "text": "确保你的样式声明里的h2规则需以花括号所包括，和分号结束。", + "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), '确保你的样式声明里的h2规则需以花括号所包括，和分号结束。');" } ], "challengeType": 0, @@ -152,33 +152,33 @@ "id": "bad87fee1348bd9aecf08806", "title": "Use a CSS Class to Style an Element", "description": [ - "CSS 的 class 具有可重用性，可应用于各种 HTML 元素。", - "一个 CSS class 声明示例，如下所示：", + "CSS 的class具有可重用性，可应用于各种 HTML 元素。", + "一个 CSSclass声明示例，如下所示：", "
<style>
  .blue-text {
    color: blue;
  }
</style>
", - "可以看到，我们在 <style> 样式声明区域里，创建了一个名为 blue-text 的 class 选择器。", - "你可以将 CSS class 选择器应用到一个HTML元素里，如下所示：", + "可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。", + "你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "注意你的 style 样式区域声明里，class 需以句号开头。而在你的HTML元素里的 class 属性的类名，不需要包含句号", + "注意你的style样式区域声明里，class需以句号开头。而在你的HTML元素里的class属性的类名，不需要包含句号", "
", - "在 style 样式声明里，h2 元素选择器改为 .red-text 的 CSS class 选择器，同时将颜色 blue 变为 red。", - "在你的 h2 html 元素里，添加一个 class 属性，且值为 'red-text'。" + "在style样式声明里，h2元素选择器改为.red-text的 CSS class 择器，同时将颜色blue变为red。", + "在你的h2元素里，添加一个class属性，且值为'red-text'。" ], "tests": [ { - "text": "你的 h2 元素应该为红色。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的 h2 元素应该为红色。');" + "text": "你的h2元素应该为红色。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2元素应该为红色。');" }, { - "text": "你的 h2 元素应含有 red-text class 选择器。", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的 h2 元素应含有 red-text class 选择器。');" + "text": "你的h2元素应含有red-text class 选择器。", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2元素应含有red-text class 选择器。');" }, { - "text": "你的 style 样式声明区域里应该包含一个 red-text class 选择器，并且它的颜色应为红色。", - "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的 style 样式声明区域里应该包含一个 red-text CSS 类（class）规则，并且它的颜色应为红色。');" + "text": "你的style样式声明区域里应该包含一个red-text class 选择器，并且它的颜色应为红色。", + "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的style样式声明区域里应该包含一个red-text class 选择器，并且它的颜色应为红色。');" }, { - "text": "不要在 h2 元素里使用 style=\"color: red\" 的行内样式 。", - "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要在 h2 元素里使用 style=\"color: red\" 的行内样式 。');" + "text": "不要在h2元素里使用style=\"color: red\"的行内样式 。", + "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要在h2元素里使用style=\"color: red\"的行内样式 。');" } ], "challengeType": 0, @@ -235,28 +235,28 @@ "id": "bad87fee1348bd9aefe08806", "title": "Style Multiple Elements with a CSS Class", "description": [ - "通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将 red-text class 选择器应用在第一个 p 元素上。" + "通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。你可以将red-text class 选择器应用在第一个p元素上。" ], "tests": [ { - "text": "你的 h2 元素应该是红色的。", - "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的 h2 元素应该是红色的。');" + "text": "你的h2元素应该是红色的。", + "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2元素应该是红色的。');" }, { - "text": "你的 h2 元素应该含有名为 red-text 的 class 选择器。", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的 h2 元素应该含有名为 red-text 的 class 选择器。');" + "text": "你的h2元素应该含有名为red-text 的 class 选择器。", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的h2元素应该含有名为red-text 的 class 选择器。');" }, { - "text": "你的第一个 p 元素应该为红色。", - "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", '你的第一个 p 元素应该为红色。');" + "text": "你的第一个p元素应该为红色。", + "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", '你的第一个p元素应该为红色。');" }, { - "text": "你的第二和第三个 p 元素不应该为红色。", - "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), '你的第二和第三个 p 元素不应该为红色。');" + "text": "你的第二和第三个p元素不应该为红色。", + "testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), '你的第二和第三个p元素不应该为红色。');" }, { - "text": "你的第一个 p 元素应该包含名为 red-text 的 class 选择器。", - "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个 p 元素应该包含名为 red-text 的 class 选择器。');" + "text": "你的第一个p元素应该包含名为red-text的 class 选择器。", + "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), '你的第一个p 元素应该包含名为red-text的 class 选择器。');" } ], "challengeType": 0, @@ -313,15 +313,15 @@ "id": "bad87fee1348bd9aedf08806", "title": "Change the Font Size of an Element", "description": [ - "字体大小由 font-size 的 CSS 属性控制，如下所示：", + "字体大小由font-size的 CSS 属性控制，如下所示：", "
h1 {
  font-size: 30px;
}
", "
", - "在包含 red-text CSS 类（class）的 <style> 声明区域的里，创建一个 p 元素样式规则，并设置 font-size 为 16 像素(16px)。" + "在包含red-text class 的<style>声明区域的里，创建一个p元素样式规则，并设置font-size为 16 像素(16px)。" ], "tests": [ { - "text": "在 style 样式声明区域里，p 元素的 font-size 的值应为 16px。浏览器和文本缩放应设置为 100％。", - "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), '在 style 样式声明区域里，p 元素的 font-size 的值应为 16px。浏览器和文本缩放应设置为 100％。');" + "text": "在style样式声明区域里，p元素的font-size的值应为16px，浏览器和文本缩放应设置为 100％。", + "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), '在style样式声明区域里，p元素的font-size的值应为16px，浏览器和文本缩放应设置为 100％。');" } ], "challengeType": 0, @@ -378,16 +378,16 @@ "id": "bad87fee1348bd9aede08807", "title": "Set the Font Family of an Element", "description": [ - "通过 font-family 属性，可以设置元素里面的字体样式。", - "例如，如果你想设置 h2 元素的字体为 sans-serif，你可以用以下的CSS规则：", + "通过font-family属性，可以设置元素里面的字体样式。", + "例如，如果你想设置h2元素的字体为sans-serif，你可以用以下的 CSS 规则：", "
h2 {
  font-family: sans-serif;
}
", "
", - "确保你所有的 p 元素使用 monospace 字体。" + "确保你所有的p元素使用monospace字体。" ], "tests": [ { - "text": "你的 p 元素应该使用 monospace 字体。", - "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), '你的 p 元素应该使用 monospace 字体。');" + "text": "你的p元素应该使用monospace字体。", + "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), '你的p元素应该使用monospace字体。');" } ], "challengeType": 0, @@ -4395,4 +4395,4 @@ } } ] -} \ No newline at end of file +} From 4c6fc35b730c4b167c903a4c22c9e8720869dc53 Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Tue, 31 Jul 2018 14:02:08 +0800 Subject: [PATCH 07/12] =?UTF-8?q?add:=20=E7=BF=BB=E8=AF=91=E4=B8=80?= =?UTF-8?q?=E9=83=A8=E5=88=86=E5=AD=97=E4=BD=93=E6=95=99=E7=A8=8B=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 52 ++++++++++++------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index e949b39..586ce1d 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -23,7 +23,7 @@ "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", '你的h2元素应该为红色。');" }, { - "text": "h2元素的style 属性的值应该以;结束。", + "text": "h2元素的style属性的值应该以;结束。", "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'h2 元素 style 属性的值应该以 ; 结束。');" ], @@ -76,9 +76,9 @@ "title": "Use CSS Selectors to Style Elements", "description": [ "在CSS中，有上百种属性可以让你改变页面样式。", - "通过输入 <h2 style=\"color: red\">CatPhotoApp</h2> 的行内样式，修改单一的h2元素的颜色的方式，配置 层叠样式表（CSS） 的方式之一。", + "通过输入<h2 style=\"color: red\">CatPhotoApp</h2>的行内样式，修改单一的h2元素的颜色的方式，配置层叠样式表（CSS）的方式之一。", "这是改变元素样式的一个特别方法，不过存在着更好的方法来设置层叠样式表（CSS。", - "在代码的顶部，创建一个 style 声明区域，如下方所示：", + "在代码的顶部，创建一个style声明区域，如下方所示：", "
<style>
</style>
", "在style样式声明区域内，可以创建一个CSS 选择器的规则来应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：", "
<style>
  h2 {color: red;}
</style>
", @@ -158,7 +158,7 @@ "可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。", "你可以将 CSSclass选择器应用到一个HTML元素里，如下所示：", "<h2 class=\"blue-text\">CatPhotoApp</h2>", - "注意你的style样式区域声明里，class需以句号开头。而在你的HTML元素里的class属性的类名，不需要包含句号", + "注意你的style样式区域声明里，class需以句号开头。而在你的HTML元素里的class属性的类名，不需要包含句号。", "
", "在style样式声明里，h2元素选择器改为.red-text的 CSS class 择器，同时将颜色blue变为red。", "在你的h2元素里，添加一个class属性，且值为'red-text'。" @@ -177,7 +177,7 @@ "testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), '你的style样式声明区域里应该包含一个red-text class 选择器，并且它的颜色应为红色。');" }, { - "text": "不要在h2元素里使用style=\"color: red\"的行内样式 。", + "text": "不要在h2元素里使用style=\"color: red\"的行内样式。", "testString": "assert($(\"h2\").attr(\"style\") === undefined, '不要在h2元素里使用style=\"color: red\"的行内样式 。');" } ], @@ -448,33 +448,33 @@ "id": "bad87fee1348bd9aedf08807", "title": "Import a Google Font", "description": [ - "In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are various sources for web fonts on the internet but, for this example we will focus on the Google Fonts library.", - "Google Fonts is a free library of web fonts that you can use in your CSS by referencing the font's URL.", - "So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).", - "To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the Lobster font. To do this, copy the following code snippet and paste it into the top of your code editor(before the opening style element):", + "除了大多数系统提供的默认字体以外，我们也可以在我们的网站上使用自定义的字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用Google字体库。", + "Google 字体 是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。", + "因此，下一步，我们将引入和使用Google字体（注意：如果你所在国家禁止使用Google，则可以跳过这个挑战）。", + "引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到你的代码编辑器顶部。（在style标签之前）。", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", - "Now you can use the Lobster font in your CSS by using Lobster as the FAMILY_NAME as in the following example:
font-family: FAMILY_NAME, GENERIC_NAME;.", - "The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.", - "Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the \"Open Sans\" font, but not to use the Lobster font.", + "现在你可以设置font-family属性为Lobster，来使用Lobster字体。例子如下：
font-family: FAMILY_NAME, GENERIC_NAME;.", + "GENERIC_NAME是可选的，其他字体不可用时便作为后备字体。在下一个挑战中可以得到体现。", + "字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用\"Open Sans\"字体需要添加引号，而Lobster字体则不需要", "
", - "Create a font-family CSS rule that uses the Lobster font, and ensure that it will be applied to your h2 element." + "创建一个CSS规则，font-family属性里设置为Lobster字体，并确保适用于你所有的h2元素。" ], "tests": [ { - "text": "Import the Lobster font.", - "testString": "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'Import the Lobster font.');" + "text": "引入Lobster字体。", + "testString": "assert(new RegExp(\"googleapis\", \"gi\").test(code), '引入Lobster字体。');" }, { - "text": "Your h2 element should use the font Lobster.", - "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your h2 element should use the font Lobster.');" + "text": "你的h2元素必须适用Lobster字体。", + "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), '你的h2元素必须适用Lobster字体。');" }, { - "text": "Use an h2 CSS selector to change the font.", - "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an h2 CSS selector to change the font.');" + "text": "使用h2选择器去改变字体样式。", + "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), '使用h2选择器去改变字体样式。');" }, { - "text": "Your p element should still use the font monospace.", - "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your p element should still use the font monospace.');" + "text": "你的p元素应该保持使用monospace字体。", + "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), '你的p元素应该保持使用monospace字体。');" } ], "challengeType": 0, @@ -536,13 +536,13 @@ "id": "bad87fee1348bd9aedf08808", "title": "Specify How Fonts Should Degrade", "description": [ - "There are several default fonts that are available in all browsers. These generic font families include monospace, serif and sans-serif", - "When one font isn't available, you can tell the browser to \"degrade\" to another font.", - "For example, if you wanted an element to use the Helvetica font, but degrade to the sans-serif font when Helvetica wasn't available, you will specify it as follows:", + "所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif", + "当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。", + "例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，可使用以下方法：", "
p {
  font-family: Helvetica, sans-serif;
}
", - "Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.", + "通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。", "
", - "To begin with, apply the monospace font to the h2 element, so that it now has two fonts - Lobster and monospace.", + "首先，将monospace字体添加到h2元素里，同时拥有Lobster字体和 monospace字体。", "In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your h2 element degrades to the monospace font.", "Note
If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font." ], From dd439c2c3ca9f8165dbe331ea66cdfc5a054faff Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Wed, 1 Aug 2018 13:47:32 +0800 Subject: [PATCH 08/12] =?UTF-8?q?add:=20=E6=B7=BB=E5=8A=A0=E4=B8=89?= =?UTF-8?q?=E4=B8=AA=E7=BF=BB=E8=AF=91=E5=8C=BA=E6=AE=B5=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 66 ++++++++++++------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index 586ce1d..f4aa724 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -542,26 +542,26 @@ "
p {
  font-family: Helvetica, sans-serif;
}
", "通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。", "
", - "首先，将monospace字体添加到h2元素里，同时拥有Lobster字体和 monospace字体。", - "In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your h2 element degrades to the monospace font.", - "Note
If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font." + "首先，添加monospace字体到h2元素里，它现在拥有着Lobster和 monospace两种字体。", + "在上一个挑战里，你通过link标签引入Lobster字体。现在让我们注释掉Lobster谷歌字体的引入（使用我们之前学过的HTML注释）,使字体失效。你会发现你的h2元素降级到了monospace字体。", + "注意
如果你的电脑已经安装了Lobster字体，你将看不到这个降级过程，因为你的浏览器会找到该字体。" ], "tests": [ { - "text": "Your h2 element should use the font Lobster.", - "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font Lobster.');" + "text": "你的h2元素应该含有Lobster字体。", + "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), '你的h2元素应该含有Lobster字体。');" }, { - "text": "Your h2 element should degrade to the font monospace when Lobster is not available.", - "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Your h2 element should degrade to the font monospace when Lobster is not available.');" + "text": "Lobster字体失效时，你的h2元素应该降级为monospace字体。", + "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Lobster字体失效时，你的h2元素应该降级为monospace字体。');" }, { - "text": "Comment out your call to Google for the Lobster font by putting <!-- in front of it.", - "testString": "assert(new RegExp(\"\", \"gi\").test(code), 'Be sure to close your comment by adding -->.');" + "text": "确保注释要以-->结束。", + "testString": "assert(new RegExp(\"[^fc]-->\", \"gi\").test(code), '确保注释要以-->结束。');" } ], "challengeType": 0, @@ -628,21 +628,21 @@ "id": "bad87fee1348bd9acdf08812", "title": "Size Your Images", "description": [ - "CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", - "For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use:", + "CSS 的width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值。", + "假如，你想创建一个 CSS class 叫larger-image来控制 HTML 元素的宽度为 500px，我们可以这样：", "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", "
", - "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.", - "Note
Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge." + "创建一个CSS classsmaller-image，设置图片的宽度为 100px。", + "注意
由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。" ], "tests": [ { - "text": "Your img element should have the class smaller-image.", - "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your img element should have the class smaller-image.');" + "text": "你的img元素应该含有smaller-imageclass。", + "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", '你的img元素应该含有smaller-imageclass。');" }, { - "text": "Your image should be 100 pixels wide. Browser zoom should be at 100%.", - "testString": "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide. Browser zoom should be at 100%.');" + "text": "你的图片应为 100px（像素），且浏览器缩放应为 100%。", + "testString": "assert($(\"img\").width() === 100, '你的图片应为 100px（像素），且浏览器缩放应为 100%。');" } ], "challengeType": 0, @@ -709,34 +709,34 @@ "id": "bad87fee1348bd9bedf08813", "title": "Add Borders Around Your Elements", "description": [ - "CSS borders have properties like style, color and width", - "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:", + "CSS 边框具有style，color和width属性。", + "假如，我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：", "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", "
", - "Create a class called thick-green-border. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.", - "Remember that you can apply multiple classes to an element using its class attribute, by separating each class name with a space. For example:", + "创建一个thick-green-border CSS class，该 class 应可在 HTML 元素周围添加一个 10px 的绿色实线边框。将它应用在你的猫咪照片上。", + "记得，在一个元素上可以同时应用多个class，通过使用空格来分隔。例子如下：", "<img class=\"class1 class2\">" ], "tests": [ { - "text": "Your img element should have the class smaller-image.", - "testString": "assert($(\"img\").hasClass(\"smaller-image\"), 'Your img element should have the class smaller-image.');" + "text": "你的img元素应该含有smaller-imageclass。", + "testString": "assert($(\"img\").hasClass(\"smaller-image\"), '你的img元素应该含有smaller-imageclass。');" }, { - "text": "Your img element should have the class thick-green-border.", - "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your img element should have the class thick-green-border.');" + "text": "同时，你的img元素应该含有thick-green-borderclass。", + "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), '同时，你的img元素应该含有thick-green-borderclass。');" }, { - "text": "Give your image a border width of 10px.", - "testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'Give your image a border width of 10px.');" + "text": "设置你的图片边框为10px。", + "testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, '设置你的图片边框为10px。');" }, { - "text": "Give your image a border style of solid.", - "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of solid.');" + "text": "设置你的图片样式为solid实线。", + "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", '设置你的图片样式为solid实线。');" }, { - "text": "The border around your img element should be green.", - "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your img element should be green.');" + "text": "你img元素的边框颜色应该为绿色。", + "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", '你img元素的边框颜色应该为绿色。');" } ], "challengeType": 0, From f6f71552a726d38aa074add386f8bb53c892c48c Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Tue, 7 Aug 2018 00:55:42 +0800 Subject: [PATCH 09/12] =?UTF-8?q?add:=20=E7=BB=A7=E7=BB=AD=E7=BF=BB?= =?UTF-8?q?=E8=AF=9110=E4=B8=AA=E5=B0=8F=E8=8A=82=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 165 ++++++++++++------------ 1 file changed, 83 insertions(+), 82 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index f4aa724..7fb69d6 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -808,19 +808,19 @@ "id": "bad87fee1348bd9aedf08814", "title": "Add Rounded Corners with border-radius", "description": [ - "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", + "你的猫咪图片边角很尖锐，我们可以使用border-radius属性来让它变得圆润。", "
", - "You can specify a border-radius with pixels. Give your cat photo a border-radius of 10px.", - "Note: this challenge allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or the .smaller-image class." + "border-radius可以用px像素单位来赋值。 给你的猫咪图片设置 10px 的border-radius。", + "注意：这个挑战有多个解决方法。例如，添加border-radius属性到.thick-green-borderclass 或.smaller-imageclass 里都是可行的。" ], "tests": [ { - "text": "Your image element should have the class \"thick-green-border\".", - "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".');" + "text": "你的图片元素应具有 \"thick-green-border\" class 属性。", + "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), '你的图片元素应具有 \"thick-green-border\" class 属性。');" }, { - "text": "Your image should have a border radius of 10px", - "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of 10px');" + "text": "你的图片应含有10px的边框圆角。", + "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, '你的图片应含有10px的边框圆角。');" } ], "challengeType": 0, @@ -898,18 +898,18 @@ "id": "bad87fee1348bd9aedf08815", "title": "Make Circular Images with a border-radius", "description": [ - "In addition to pixels, you can also specify the border-radius using a percentage.", + "除像素外，你也可以使用百分比来指定border-radius的值。", "
", - "Give your cat photo a border-radius of 50%." + "将border-radius的值设置为50%。" ], "tests": [ { - "text": "Your image should have a border radius of 50%, making it perfectly circular.", - "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of 50%, making it perfectly circular.');" + "text": "你图片的边框圆角应设置为50%，让它看起来就像一个完整的圆。", + "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, '你图片的边框圆角应设置为50%，让它看起来就像一个完整的圆。');" }, { - "text": "Be sure to use a percentage value of 50%.", - "testString": "assert(code.match(/50%/g), 'Be sure to use a percentage value of 50%.');" + "text": "请确保百分值为50%。", + "testString": "assert(code.match(/50%/g), '请确保百分值为50%。');" } ], "challengeType": 0, @@ -987,20 +987,20 @@ "id": "bad87fed1348bd9aede07836", "title": "Give a Background Color to a div Element", "description": [ - "You can set an element's background color with the background-color property.", - "For example, if you wanted an element's background color to be green, you'd put this within your style element:", + "background-color属性可以设置元素的背景颜色。", + "例如，你想将一个元素的背景颜色改为green，可以在你的style里面这样写：", "
.green-background {
  background-color: green;
}
", "
", - "Create a class called silver-background with the background-color of silver. Assign this class to your div element." + "创建一个silver-backgroundclass 并设置background-color为silver。 并用在div元素上。" ], "tests": [ { - "text": "Give your div element the class silver-background.", - "testString": "assert($(\"div\").hasClass(\"silver-background\"), 'Give your div element the class silver-background.');" + "text": "给你的div元素添加silver-backgroundclass。", + "testString": "assert($(\"div\").hasClass(\"silver-background\"), '给你的div元素添加silver-backgroundclass。');" }, { - "text": "Your div element should have a silver background.", - "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'Your div element should have a silver background.');" + "text": "div元素背景颜色应设置为silver。", + "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'div元素背景颜色应设置为silver。');" } ], "challengeType": 0, @@ -1078,18 +1078,18 @@ "id": "bad87eee1348bd9aede07836", "title": "Set the id of an Element", "description": [ - "In addition to classes, each HTML element can also have an id attribute.", - "There are several benefits to using id attributes: You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.", - "id attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id attribute.", - "Here's an example of how you give your h2 element the id of cat-photo-app:", + "除了class属性，每一个 HTML 元素也都有id属性。", + "使用id有几个好处：你可以通过id选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过id来选择元素和操作元素。", + "id属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的id属性。", + "设置h2元素的 id 为cat-photo-app的方法如下：", "<h2 id=\"cat-photo-app\">", "
", - "Give your form element the id cat-photo-form." + "设置form元素的 id 为cat-photo-form。" ], "tests": [ { - "text": "Give your form element the id of cat-photo-form.", - "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form element the id of cat-photo-form.');" + "text": "你的form元素的 id 应为cat-photo-form。", + "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", '你的form元素的 id 应为cat-photo-form。');" } ], "challengeType": 0, @@ -1171,30 +1171,30 @@ "id": "bad87dee1348bd9aede07836", "title": "Use an id Attribute to Style an Element", "description": [ - "One cool thing about id attributes is that, like classes, you can style them using CSS.", - "However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.", - "Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element:", + "通过id属性，你可以做一些很酷的事情，例如，就像 class 一样，你可以使用CSS来设置他们的样式", + "可是，id不可以重用，只应用于一个元素上。同时，在 CSS 里，id的优先级要高于 class，如果一个元素同时应用了 class 和 id，并设置样式有冲突，会优先应用 id 的样式。", + "选择id为cat-photo-element的元素，并设置它的背景样式为green，可以在你的style标签里这样写：", "
#cat-photo-element {
  background-color: green;
}
", - "Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.", + "注意在style标签里，声明 class 的时候必须在名字前插入.符号。同样，在声明 id 的时候，也必须在名字前插入#符号。", "
", - "Try giving your form, which now has the id attribute of cat-photo-form, a green background." + "尝试给含有cat-photo-formid属性的form表单的背景颜色设置为green。" ], "tests": [ { - "text": "Give your form element the id of cat-photo-form.", - "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form element the id of cat-photo-form.');" + "text": "设置form元素的 id 为cat-photo-form。", + "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", '设置form元素的 id 为cat-photo-form。');" }, { - "text": "Your form element should have the background-color of green.", - "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your form element should have the background-color of green.');" + "text": "你的form元素应该含有background-colorcss 属性并且值为 green。", + "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", '你的form元素应该含有background-colorcss 属性并且值为 green。');" }, { - "text": "Make sure your form element has an id attribute.", - "testString": "assert(code.match(//gi) && code.match(//gi).length > 0, 'Make sure your form element has an id attribute.');" + "text": "确保你的form元素含有id属性。", + "testString": "assert(code.match(//gi) && code.match(//gi).length > 0, '确保你的form元素含有id属性。');" }, { - "text": "Do not give your form any class or style attributes.", - "testString": "assert(!code.match(//gi) && !code.match(//gi), 'Do not give your form any class or style attributes.');" + "text": "不要在form元素上添加其他class属性或者style行内样式。", + "testString": "assert(!code.match(//gi) && !code.match(//gi), '不要在form元素上添加其他class属性或者style行内样式。');" } ], "challengeType": 0, @@ -1276,19 +1276,19 @@ "id": "bad88fee1348bd9aedf08825", "title": "Adjust the Padding of an Element", "description": [ - "Now let's put our Cat Photo App away for a little while and learn more about styling HTML.", - "You may have already noticed this, but all HTML elements are essentially little rectangles.", - "Three important properties control the space that surrounds each HTML element: padding, margin, and border.", - "An element's padding controls the amount of space between the element's content and its border.", - "Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more padding than the blue box.", - "When you increase the blue box's padding, it will increase the distance(padding) between the text and the border around it.", + "我们先暂时把猫咪图片放在一边，让我们去学习更多 HTML 相关样式。", + "你可能已经注意到了，所有的 HTML 元素基本都是以矩形为基础。", + "每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）。", + "padding控制着元素内容与border之间的空隙大小。", + "在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里面。可以发现，红色盒子比蓝色盒子有着更多的padding填充空间。", + "当你增加蓝色盒子的padding值，文本内容与边框的距离会逐渐拉大。", "
", - "Change the padding of your blue box to match that of your red box." + "蓝色的盒子padding的值要跟红色盒子的一样大小。" ], "tests": [ { - "text": "Your blue-box class should give elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your blue-box class should give elements 20px of padding.');" + "text": "你的blue-boxclass 的padding值应为20px。", + "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", '你的blue-boxclass 的padding值应为20px。');" } ], "challengeType": 0, @@ -1345,16 +1345,16 @@ "id": "bad87fee1348bd9aedf08822", "title": "Adjust the Margin of an Element", "description": [ - "An element's margin controls the amount of space between an element's border and surrounding elements.", - "Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger margin than the blue box, making it appear smaller.", - "When you increase the blue box's margin, it will increase the distance between its border and surrounding elements.", + "margin（外边距）控制元素边框与其他元素之间的距离大小。", + "在这里，我们可以看到蓝色盒子和红色盒子都在黄色盒子里。请注意，红色盒子的margin值要比蓝色盒子的大，让它看起来比蓝色盒子要小。", + "当你增加蓝色的margin值，它会增加元素边框到其他周围元素的距离。", "
", - "Change the margin of the blue box to match that of the red box." + "蓝色的盒子margin的值要跟红色盒子的一样大小。" ], "tests": [ { - "text": "Your blue-box class should give elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your blue-box class should give elements 20px of margin.');" + "text": "你的blue-boxclass 的margin值应为20px。", + "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", '你的blue-boxclass 的margin值应为20px。');" } ], "challengeType": 0, @@ -1413,16 +1413,16 @@ "id": "bad87fee1348bd9aedf08823", "title": "Add a Negative Margin to an Element", "description": [ - "An element's margin controls the amount of space between an element's border and surrounding elements.", - "If you set an element's margin to a negative value, the element will grow larger.", + "元素的margin（外边距）控制元素边框与其他周围元素之间的距离大小。", + "如果你设置元素margin为负值，元素会变得更大。", "
", - "Try to set the margin to a negative value like the one for the red box.", - "Change the margin of the blue box to -15px, so it fills the entire horizontal width of the yellow box around it." + "尝试设置蓝色盒子的margin为负值，跟红色盒子一样大小。", + "蓝色盒子的margin设置为-15px，它会填满与黄色盒子之间的距离。" ], "tests": [ { - "text": "Your blue-box class should give elements -15px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your blue-box class should give elements -15px of margin.');" + "text": "你的blue-box class的margin应该设置为-15px。", + "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", '你的blue-box class的margin应该设置为-15px。');" } ], "challengeType": 0, @@ -1480,27 +1480,27 @@ "id": "bad87fee1348bd9aedf08824", "title": "Add Different Padding to Each Side of an Element", "description": [ - "Sometimes you will want to customize an element so that it has different amounts of padding on each of its sides.", - "CSS allows you to control the padding of all four individual sides of an element with the padding-top, padding-right, padding-bottom, and padding-left properties.", + "有时候，你会想给一个元素每个方向的padding都设置成一个特定的值", + "CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值。", "
", - "Give the blue box a padding of 40px on its top and left side, but only 20px on its bottom and right side." + "蓝色盒子的顶部和左侧的padding值设置为40px，底部和右侧设置为20px。" ], "tests": [ { - "text": "Your blue-box class should give the top of the elements 40px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box class should give the top of the elements 40px of padding.');" + "text": "你的blue-boxclass 的顶部padding值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", '你的blue-boxclass 的顶部padding值应为40px。');" }, { - "text": "Your blue-box class should give the right of the elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box class should give the right of the elements 20px of padding.');" + "text": "你的blue-boxclass 的右侧padding值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", '你的blue-boxclass 的右侧padding值应为40px。');" }, { - "text": "Your blue-box class should give the bottom of the elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box class should give the bottom of the elements 20px of padding.');" + "text": "你的blue-boxclass 的底部padding值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", '你的blue-boxclass 的底部padding值应为40px。');" }, { - "text": "Your blue-box class should give the left of the elements 40px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box class should give the left of the elements 40px of padding.');" + "text": "你的blue-boxclass 的左侧padding值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", '你的blue-boxclass 的左侧padding值应为40px。');" } ], "challengeType": 0, @@ -1559,27 +1559,28 @@ "id": "bad87fee1248bd9aedf08824", "title": "Add Different Margins to Each Side of an Element", "description": [ + "有时候，你会想给一个元素每个方向的margin都设置成一个特定的值。", "Sometimes you will want to customize an element so that it has a different margin on each of its sides.", - "CSS allows you to control the margin of all four individual sides of an element with the margin-top, margin-right, margin-bottom, and margin-left properties.", + "CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。", "
", - "Give the blue box a margin of 40px on its top and left side, but only 20px on its bottom and right side." + "蓝色盒子的顶部和左侧的margin值设置为40px，底部和右侧设置为20px。" ], "tests": [ { - "text": "Your blue-box class should give the top of elements 40px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of margin.');" + "text": "你的blue-boxclass 的顶部margin值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", '你的blue-boxclass 的顶部margin值应为40px。');" }, { - "text": "Your blue-box class should give the right of elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of margin.');" + "text": "你的blue-boxclass 的右侧margin值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", '你的blue-boxclass 的右侧margin值应为40px。');" }, { - "text": "Your blue-box class should give the bottom of elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of margin.');" + "text": "你的blue-boxclass 的底部margin值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", '你的blue-boxclass 的底部margin值应为40px。');" }, { - "text": "Your blue-box class should give the left of elements 40px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of margin.');" + "text": "你的blue-boxclass 的左侧margin值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", '你的blue-boxclass 的左侧margin值应为40px。');" } ], "challengeType": 0, From 2e77ff4b838a79b11be253f57be63f8b86b0a97f Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Tue, 7 Aug 2018 13:31:18 +0800 Subject: [PATCH 10/12] =?UTF-8?q?add:=20=20=E7=BB=A7=E7=BB=AD=E7=BF=BB?= =?UTF-8?q?=E8=AF=912=E5=B0=8F=E8=8A=82=EF=BC=8C=E8=BF=9B=E5=BA=A622/43?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 58 ++++++++++++------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index 7fb69d6..5eb7bd6 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -1487,20 +1487,20 @@ ], "tests": [ { - "text": "你的blue-boxclass 的顶部padding值应为40px。", - "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", '你的blue-boxclass 的顶部padding值应为40px。');" + "text": "你的blue-boxclass 的顶部padding（上内边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", '你的blue-boxclass 的顶部padding（上内边距）值应为40px。');" }, { - "text": "你的blue-boxclass 的右侧padding值应为40px。", - "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", '你的blue-boxclass 的右侧padding值应为40px。');" + "text": "你的blue-boxclass 的右侧padding（右内边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", '你的blue-boxclass 的右侧padding（右内边距）值应为40px。');" }, { - "text": "你的blue-boxclass 的底部padding值应为40px。", - "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", '你的blue-boxclass 的底部padding值应为40px。');" + "text": "你的blue-boxclass 的底部padding（下内边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", '你的blue-boxclass 的底部padding（下内边距）值应为40px。');" }, { - "text": "你的blue-boxclass 的左侧padding值应为40px。", - "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", '你的blue-boxclass 的左侧padding值应为40px。');" + "text": "你的blue-boxclass 的左侧padding（左内边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", '你的blue-boxclass 的左侧padding（左内边距）值应为40px。');" } ], "challengeType": 0, @@ -1567,20 +1567,20 @@ ], "tests": [ { - "text": "你的blue-boxclass 的顶部margin值应为40px。", - "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", '你的blue-boxclass 的顶部margin值应为40px。');" + "text": "你的blue-boxclass 的右侧margin（右外边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", '你的blue-boxclass 的右侧margin（右外边距）值应为40px。');" }, { - "text": "你的blue-boxclass 的右侧margin值应为40px。", - "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", '你的blue-boxclass 的右侧margin值应为40px。');" + "text": "你的blue-boxclass 的右侧margin（右外边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", '你的blue-boxclass 的右侧margin（右外边距）值应为40px。');" }, { - "text": "你的blue-boxclass 的底部margin值应为40px。", - "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", '你的blue-boxclass 的底部margin值应为40px。');" + "text": "你的blue-boxclass 的底部margin（下外边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", '你的blue-boxclass 的底部margin（下外边距）值应为40px。');" }, { - "text": "你的blue-boxclass 的左侧margin值应为40px。", - "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", '你的blue-boxclass 的左侧margin值应为40px。');" + "text": "你的blue-boxclass 的左侧margin（左外边距）值应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", '你的blue-boxclass 的左侧margin（左外边距）值应为40px。');" } ], "challengeType": 0, @@ -1638,32 +1638,32 @@ "id": "bad87fee1348bd9aedf08826", "title": "Use Clockwise Notation to Specify the Padding of an Element", "description": [ - "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties individually, you can specify them all in one line, like this:", + "如果不想每次都要分别声明padding-top，padding-right，padding-bottom和padding-left属性，可以把它们汇总在padding属性里面声明，如下：", "padding: 10px 20px 10px 20px;", - "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.", + "这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。", "
", - "Use Clockwise Notation to give the \".blue-box\" class a padding of 40px on its top and left side, but only 20px on its bottom and right side." + "按照顺时针顺序，给\".blue-box\" class的上内边距以及左内边距设置为40px，右内边距和下内边距则设置为20px。" ], "tests": [ { - "text": "Your blue-box class should give the top of elements 40px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of padding.');" + "text": "blue-boxclass 的上内边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'blue-boxclass 的上内边距应为40px。');" }, { - "text": "Your blue-box class should give the right of elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of padding.');" + "text": "blue-boxclass 的右内边距应为20px。", + "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'blue-boxclass 的右内边距应为40px。');" }, { - "text": "Your blue-box class should give the bottom of elements 20px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of padding.');" + "text": "blue-boxclass 的下内边距应为20px。", + "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'blue-boxclass 的下内边距应为20px。);" }, { - "text": "Your blue-box class should give the left of elements 40px of padding.", - "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of padding.');" + "text": "blue-boxclass 的左内边距应为20px。", + "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'blue-boxclass 的左内边距应为20px。');" }, { - "text": "You should use the clockwise notation to set the padding of blue-box class.", - "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of blue-box class.');" + "text": "你应该按照顺时针排序，汇总声明的方式来设置blue-box的padding值。", + "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), '你应该按照顺时针排序，汇总声明的方式来设置blue-box的padding值。');" } ], "challengeType": 0, From 4ffe17b1bd47192acf5516724fff1b48976b4c13 Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Tue, 7 Aug 2018 13:36:27 +0800 Subject: [PATCH 11/12] =?UTF-8?q?fixed:=20=E4=BF=AE=E5=A4=8D=E8=AF=AF?= =?UTF-8?q?=E5=88=A0=E9=99=A4=E7=9A=84=E2=80=9C{=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 26 ++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index 5eb7bd6..8c90d6e 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -25,7 +25,7 @@ { "text": "h2元素的style属性的值应该以;结束。", "testString": "assert(code.match(/\\s*CatPhotoApp\\s*<\\/h2>/),'h2 元素 style 属性的值应该以 ; 结束。');" - + } ], "challengeType": 0, "files": { @@ -1718,29 +1718,29 @@ "id": "bad87fee1348bd9afdf08726", "title": "Use Clockwise Notation to Specify the Margin of an Element", "description": [ - "Let's try this again, but with margin this time.", - "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties individually, you can specify them all in one line, like this:", + "让我们再试一次，不过这一次轮到margin了。", + "同样，每个方向的外边距值可以在margin属性里面汇总声明，来代替分别声明margin-top，margin-right，margin-bottom和margin-left属性的方式，代码如下：", "margin: 10px 20px 10px 20px;", - "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.", + "这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的margin。", "
", - "Use Clockwise Notation to give the element with the blue-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side." + "按照顺时针顺序，给\".blue-box\" class的上外边距以及左外边距设置为40px，右外边距和下外边距则设置为20px。" ], "tests": [ { - "text": "Your blue-box class should give the top of elements 40px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your blue-box class should give the top of elements 40px of margin.');" + "text": "blue-boxclass 的上外边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'blue-boxclass 的上外边距应为40px。');" }, { - "text": "Your blue-box class should give the right of elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your blue-box class should give the right of elements 20px of margin.');" + "text": "blue-boxclass 的右外边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Yblue-boxclass 的右外边距应为40px。');" }, { - "text": "Your blue-box class should give the bottom of elements 20px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your blue-box class should give the bottom of elements 20px of margin.');" + "text": "blue-boxclass 的下外边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'blue-boxclass 的下外边距应为40px。');" }, { - "text": "Your blue-box class should give the left of elements 40px of margin.", - "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your blue-box class should give the left of elements 40px of margin.');" + "text": "blue-boxclass 的左外边距应为40px。", + "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'blue-boxclass 的左外边距应为40px。');" } ], "challengeType": 0, From 5c4d48851914aeb8dea834f983c41df6d68f5b4c Mon Sep 17 00:00:00 2001 From: wu_ze_qing Date: Wed, 8 Aug 2018 13:17:55 +0800 Subject: [PATCH 12/12] =?UTF-8?q?fixed:=20=E4=BF=AE=E6=AD=A3=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01-responsive-web-design/basic-css.json | 45 ++++++++++++------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/01-responsive-web-design/basic-css.json b/01-responsive-web-design/basic-css.json index e7ad437..96895c8 100644 --- a/01-responsive-web-design/basic-css.json +++ b/01-responsive-web-design/basic-css.json @@ -449,15 +449,15 @@ "title": "Import a Google Font", "description": [ "除了大多数系统提供的默认字体以外，我们也可以在我们的网站上使用自定义的字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用Google字体库。", - "Google 字体 是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。", + "Google 字体是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。", "因此，下一步，我们将引入和使用Google字体（注意：如果你所在国家禁止使用Google，则可以跳过这个挑战）。", - "引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到你的代码编辑器顶部。（在style标签之前）。", + "引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。在这个挑战中，我们需要引入Lobster字体。因此，请复制以下代码段，并粘贴到你的代码编辑器顶部，即放到style标签之前。", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "现在你可以设置font-family属性为Lobster，来使用Lobster字体。例子如下：
font-family: FAMILY_NAME, GENERIC_NAME;.", "GENERIC_NAME是可选的，其他字体不可用时便作为后备字体。在下一个挑战中可以得到体现。", "字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用\"Open Sans\"字体需要添加引号，而Lobster字体则不需要", "
", - "创建一个CSS规则，font-family属性里设置为Lobster字体，并确保适用于你所有的h2元素。" + "创建一个 CSS 规则，font-family属性里设置为Lobster字体，并把这个字体应用到所有的h2元素。" ], "tests": [ { @@ -536,15 +536,15 @@ "id": "bad87fee1348bd9aedf08808", "title": "Specify How Fonts Should Degrade", "description": [ - "所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif", + "所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。", "当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体。", - "例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，可使用以下方法：", + "例如，如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：", "
p {
  font-family: Helvetica, sans-serif;
}
", "通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。", "
", "首先，添加monospace字体到h2元素里，它现在拥有着Lobster和 monospace两种字体。", - "在上一个挑战里，你通过link标签引入Lobster字体。现在让我们注释掉Lobster谷歌字体的引入（使用我们之前学过的HTML注释）,使字体失效。你会发现你的h2元素降级到了monospace字体。", - "注意
如果你的电脑已经安装了Lobster字体，你将看不到这个降级过程，因为你的浏览器会找到该字体。" + "在上一个挑战里，你通过link标签引入Lobster字体。现在让我们注释掉Lobster谷歌字体的引入（使用我们之前学过的HTML注释），使字体失效。你会发现你的h2元素降级到了monospace字体。", + "注意：
如果你的电脑已经安装了Lobster字体，你将看不到这个降级过程，因为你的浏览器会找到该字体。" ], "tests": [ { @@ -556,8 +556,8 @@ "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Lobster字体失效时，你的h2元素应该降级为monospace字体。');" }, { - "text": "通过添加<!--在Lobster引入的前方来注释该字体。", - "testString": "assert(new RegExp(\"