gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: sync english and chinese responsive web design challenges (#38309)

Browse Source
This commit is contained in:
Kristofer Koishigawa
2020-03-03 22:41:15 +09:00
committed by GitHub
parent b3213fc892
commit 0b1ba11959
28 changed files with 126 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
curriculum/challenges/chinese/01-responsive-web-design/basic-css/change-the-color-of-text.chinese.md
View File

@ -26,11 +26,11 @@ localeTitle: 更改文本的颜色
```yml
tests:
- text: '<code>h2</code>元素应该为红色。'
- text: <code>h2</code> 元素应该有一个<code>style</code>声明。
testString: assert($("h2").attr('style'));
- text: '<code>h2</code>元素的<code>style</code>属性值应该以<code>;</code>结束。'
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
- text: '<code>style</code> 声明应该以 <code>;</code> 结尾'
- text: <code>h2</code>元素应该为<code>red</code>。
testString: assert($("h2")[0].style.color === "red");
- text: <code>style</code> 声明应该以 <code>;</code> 结尾。
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
```

2
curriculum/challenges/chinese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.chinese.md
View File

@ -19,7 +19,7 @@ localeTitle: Class 选择器的优先级高于继承样式
在含有<code>pink-text</code>class 的<code>h1</code>元素里面，再添加一个<code>blue-text</code>class，这时候，我们将能看到到底是谁获胜。
HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
<code>class="class1 class2"</code>
注意：HTML 元素里应用的 class 的先后顺序无关紧要。
<strong>注意：</strong> HTML 元素里应用的 class 的先后顺序无关紧要。
但是，在<code>&#60;style&#62;</code>标签里面声明的<code>class</code>顺序十分重要。第二个声明始终优于第一个声明。因为<code>.blue-text</code>在<code>.pink-text</code>的后面声明，所以<code>.blue-text</code>会覆盖<code>.pink-text</code>的样式。
</section>

14
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.chinese.md
View File

@ -25,14 +25,16 @@ localeTitle: 使用顺时针方向指定元素的外边距
```yml
tests:
- text: '<code>blue-box</code> class 的上外边距应为<code>40px</code>。'
- text: <code>blue-box</code> class 的上外边距应为<code>40px</code>。
testString: assert($(".blue-box").css("margin-top") === "40px");
- text: '<code>blue-box</code> class 的右外边距应为<code>20px</code>。'
testString: assert($(".blue-box").css("margin-right") === "20px", '<code>blue-box</code> class 的右外边距应为<code>20px</code>。');
- text: '<code>blue-box</code> class 的下外边距应为<code>20px</code>。'
testString: assert($(".blue-box").css("margin-bottom") === "20px", '<code>blue-box</code> class 的下外边距应为<code>20px</code>。');
- text: '<code>blue-box</code> class 的左外边距应为<code>40px</code>。'
- text: <code>blue-box</code> class 的右外边距应为<code>20px</code>。
testString: assert($(".blue-box").css("margin-right") === "20px");
- text: <code>blue-box</code> class 的下外边距应为<code>20px</code>。
testString: assert($(".blue-box").css("margin-bottom") === "20px");
- text: <code>blue-box</code> class 的左外边距应为<code>40px</code>。
testString: assert($(".blue-box").css("margin-left") === "40px");
- text: 你应该沿顺时针方向设置<code>blue-box</code>的外边距。
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())));
```

12
curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.chinese.md
View File

@ -42,14 +42,16 @@ localeTitle: 使用元素选择器来设置元素的样式
```yml
tests:
- text: '删除<code>h2</code>元素的行内样式。'
- text: 删除<code>h2</code>元素的行内样式。
testString: assert(!$("h2").attr("style"));
- text: '创建一个<code>style</code>样式声明区域。'
- text: 创建一个<code>style</code>样式声明区域。
testString: assert($("style") && $("style").length >= 1);
- text: '<code>h2</code>元素颜色应为蓝色。'
- text: <code>h2</code>元素颜色应为蓝色。
testString: assert($("h2").css("color") === "rgb(0, 0, 255)");
- text: '确保<code>h2</code>选择器的内容被花括号所围绕，并且样式规则以分号结束。'
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));'
- text: 确保<code>h2</code>选择器的内容被花括号所围绕，并且样式规则以分号结束。
testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
- text: 所有<code>style</code>应该是有效的且有一个结束标签。
testString: assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length);
```