diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.chinese.md index 3f885ea551..c82692c965 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.chinese.md @@ -15,7 +15,7 @@ localeTitle: 固定定位的参照物是浏览器的窗口 ## Instructions
-代码里的导航栏已经添加了值为 navbar 的 id。把它的 position 设置成fixed，设定其 top和 left 为 0 像素。注意观察对 h1 的影响，h1 并没有被导航栏挤下来，而是遮盖住了，为了显示完全需要单独调整h1 的位置。 +代码里的导航栏已经添加了值为 navbar 的 id。把它的 position 设置成fixed，设定其 top和 left 为 0 像素。添加代码之后，滑动预览窗口，观察导航栏的位置。
## Tests diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.chinese.md index 1304c0bf42..5feab08975 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.chinese.md @@ -24,12 +24,10 @@ localeTitle: 使用 u 标签给文本添加下划线 ```yml tests: - - text: '你应该有一个 u 标签。' - testString: assert($('u').length === 1, '你应该有一个 u 标签。'); - - text: 'u 标签应该包围 “理工博士”。' - testString: assert($('u').text() === '理工博士', 'u 标签应该包围 “理工博士”。'); - - text: 'u 标签内不应包含额外的 div 标签。' - testString: assert($('u').children('div').length === 0, 'u 标签内不应包含额外的 div 标签。'); + - text: 你应该有一个 u 标签。 + testString: assert($('u').length === 1); + - text: u 标签应该包围 “理工博士”。 + testString: assert($('u').text() === '理工博士'); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md index 2acc235d94..07e91482f0 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md @@ -26,11 +26,11 @@ localeTitle: 更改文本的颜色 ```yml tests: - - text: 'h2元素应该为红色。' + - text: h2 元素应该有一个style声明。 testString: assert($("h2").attr('style')); - - text: 'h2元素的style属性值应该以;结束。' - testString: assert($("h2").css("color") === "rgb(255, 0, 0)"); - - text: 'style 声明应该以 ; 结尾' + - text: h2元素应该为red。 + testString: assert($("h2")[0].style.color === "red"); + - text: style 声明应该以 ; 结尾。 testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';')); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.chinese.md index b7091b781e..1d9199c975 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.chinese.md @@ -19,7 +19,7 @@ localeTitle: Class 选择器的优先级高于继承样式 在含有pink-textclass 的h1元素里面，再添加一个blue-textclass，这时候，我们将能看到到底是谁获胜。 HTML 同时应用多个 class 属性需以空格来间隔，例子如下: class="class1 class2" -注意：HTML 元素里应用的 class 的先后顺序无关紧要。 +注意： HTML 元素里应用的 class 的先后顺序无关紧要。 但是，在<style>标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。因为.blue-text在.pink-text的后面声明，所以.blue-text会覆盖.pink-text的样式。 diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.chinese.md index 8dd649865f..aee54645fd 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.chinese.md @@ -25,14 +25,16 @@ localeTitle: 使用顺时针方向指定元素的外边距 ```yml tests: - - text: 'blue-box class 的上外边距应为40px。' + - text: blue-box class 的上外边距应为40px。 testString: assert($(".blue-box").css("margin-top") === "40px"); - - text: 'blue-box class 的右外边距应为20px。' - testString: assert($(".blue-box").css("margin-right") === "20px", 'blue-box class 的右外边距应为20px。'); - - text: 'blue-box class 的下外边距应为20px。' - testString: assert($(".blue-box").css("margin-bottom") === "20px", 'blue-box class 的下外边距应为20px。'); - - text: 'blue-box class 的左外边距应为40px。' + - text: blue-box class 的右外边距应为20px。 + testString: assert($(".blue-box").css("margin-right") === "20px"); + - text: blue-box class 的下外边距应为20px。 + testString: assert($(".blue-box").css("margin-bottom") === "20px"); + - text: blue-box class 的左外边距应为40px。 testString: assert($(".blue-box").css("margin-left") === "40px"); + - text: 你应该沿顺时针方向设置blue-box的外边距。 + testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text()))); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.chinese.md index fc9d2000cd..828739d436 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.chinese.md @@ -42,14 +42,16 @@ localeTitle: 使用元素选择器来设置元素的样式 ```yml tests: - - text: '删除h2元素的行内样式。' + - text: 删除h2元素的行内样式。 testString: assert(!$("h2").attr("style")); - - text: '创建一个style样式声明区域。' + - text: 创建一个style样式声明区域。 testString: assert($("style") && $("style").length >= 1); - - text: 'h2元素颜色应为蓝色。' + - text: h2元素颜色应为蓝色。 testString: assert($("h2").css("color") === "rgb(0, 0, 255)"); - - text: '确保h2选择器的内容被花括号所围绕，并且样式规则以分号结束。' - testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));' + - text: 确保h2选择器的内容被花括号所围绕，并且样式规则以分号结束。 + testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g)); + - text: 所有style应该是有效的且有一个结束标签。 + testString: assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(//g) || []).length); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.chinese.md index 80901619aa..d7559c5753 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.chinese.md @@ -23,7 +23,7 @@ localeTitle: 给网站添加图片 ## Instructions
让我们给网站添加图片： -在h2元素前，插入一个img元素 +在main元素里面，给p前面插入一个img元素 现在设置src属性指向这个地址： https://bit.ly/fcc-relaxing-cat 最后不要忘记给图片添加一个alt文本。 @@ -34,11 +34,11 @@ localeTitle: 给网站添加图片 ```yml tests: - - text: '网页应该有一张图片。' + - text: 网页应该有一张图片。 testString: assert($("img").length); - - text: '图片 src 属性应该为 https://bit.ly/fcc-relaxing-cat。' + - text: img 应该有一个src属性，指向猫咪图片。 testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src"))); - - text: '图片必须有alt属性。' + - text: img 元素的alt属性值不应为空。 testString: assert($("img").attr("alt") && $("img").attr("alt").length && /)\S+\1\S*\/?>/.test(code.replace(/\s/g,''))); ``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.chinese.md index 82c82edec1..2c27283a27 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.chinese.md @@ -24,12 +24,14 @@ localeTitle: 给输入框添加占位符文本 ```yml tests: - - text: '给现有的input输入框添加一个placeholder属性。' + - text: 给现有的input输入框添加一个placeholder属性。 testString: assert($("input[placeholder]").length > 0); - - text: '设置placeholder属性的值为 ”猫咪图片地址“。' + - text: 设置placeholder属性的值为 ”猫咪图片地址“。 testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/猫咪图片地址/gi)); - - text: 'input输入框的语法必须正确。' - testString: 'assert($("input[type=text]").length > 0 && code.match(/\s]+))?)+\s*|\s*)\/?>/gi));' + - text: 完整的input元素应有一个结束标签 + testString: assert(!code.match(/.*<\/input>/gi)); + - text: input输入框的语法必须正确。 + testString: assert($("input[type=text]").length > 0); ```
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.chinese.md index 3fa2bf16e1..ff7fbb702f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.chinese.md @@ -33,14 +33,16 @@ HTML 有一个特定的元素用于创建无序列表unordered lists（缩 ```yml tests: - - text: '创建一个ul无序列表。' + - text: 创建一个ul无序列表。 testString: assert($("ul").length > 0); - - text: '你应该在ul无序列表中添加三个li条目。' + - text: 你应该在ul无序列表中添加三个li条目。 testString: assert($("ul li").length > 2); - - text: '确保ul无序列表有结束标记。' + - text: 确保ul无序列表有结束标记。 testString: assert(code.match(/<\/ul>/gi) && code.match(/