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

14
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.chinese.md
View File

@ -23,19 +23,19 @@ localeTitle: 在推文中添加弹性盒子布局
```yml
tests:
- text: '<code>header</code>的<code>display</code>属性应为 flex。'
- text: <code>header</code>的<code>display</code>属性应为 <code>flex</code>。
testString: assert($('header').css('display') == 'flex');
- text: '<code>footer</code>的<code>display</code>属性应为 flex。'
- text: <code>footer</code>的<code>display</code>属性应为 <code>flex</code>。
testString: assert($('footer').css('display') == 'flex');
- text: '<code>h3</code>的<code>display</code>属性应为 flex。'
- text: <code>h3</code>的<code>display</code>属性应为 <code>flex</code>。
testString: assert($('h3').css('display') == 'flex');
- text: '<code>h4</code>的<code>display</code>属性应为 flex。'
- text: <code>h4</code>的<code>display</code>属性应为 <code>flex</code>。
testString: assert($('h4').css('display') == 'flex');
- text: '<code>.profile-name</code>的<code>display</code>属性应为 flex。'
- text: <code>.profile-name</code>的<code>display</code>属性应为 <code>flex</code>。
testString: assert($('.profile-name').css('display') == 'flex');
- text: '<code>.follow-btn</code>的<code>display</code>属性应为 flex。'
- text: <code>.follow-btn</code>的<code>display</code>属性应为 <code>flex</code>。
testString: assert($('.follow-btn').css('display') == 'flex');
- text: '<code>.stats</code>的<code>display</code>属性应为 flex。'
- text: <code>.stats</code>的<code>display</code>属性应为 <code>flex</code>。
testString: assert($('.stats').css('display') == 'flex');
```

4
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.chinese.md
View File

@ -19,7 +19,7 @@ Flex 容器中，与主轴垂直的叫做 <strong>cross axis（交叉轴）</str
## Instructions
<section id='instructions'>
这个例子可以帮助你理解这个属性，在<code>#box-container</code>添加 CSS 属性<code>align-items</code>并将值设为 center。
<strong>提示：</strong><br>在编辑器里试试<code>align-items</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center。
<strong>提示：</strong><br>在编辑器里试试<code>align-items</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 <code>center</code>。
</section>
## Tests
@ -27,7 +27,7 @@ Flex 容器中，与主轴垂直的叫做 <strong>cross axis（交叉轴）</str
```yml
tests:
- text: '<code>#box-container</code>元素应有<code>align-items</code>属性，其值应为 center。'
- text: <code>#box-container</code>元素应有<code>align-items</code>属性，其值应为 <code>center</code>。
testString: assert($('#box-container').css('align-items') == 'center');
```

6
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.chinese.md
View File

@ -19,8 +19,8 @@ flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告
## Instructions
<section id='instructions'>
这个例子可以帮助你理解这个属性，在<code>#box-container</code>元素添加 CSS 属性<code>justify-content</code>，其值为 center。
<strong>提示：</strong><br>在编辑器里试试<code>justify-content</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center.
这个例子可以帮助你理解这个属性，在<code>#box-container</code>元素添加 CSS 属性<code>justify-content</code>，其值为 <code>center</code>。
<strong>提示：</strong><br>在编辑器里试试<code>justify-content</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 <code>center</code>。
</section>
## Tests
@ -28,7 +28,7 @@ flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告
```yml
tests:
- text: '<code>#box-container</code>应有<code>justify-content</code>属性，其值应为 center。'
- text: <code>#box-container</code>应有<code>justify-content</code>属性，其值应为 <code>center</code>。
testString: assert($('#box-container').css('justify-content') == 'center');
```

4
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.chinese.md
View File

@ -15,7 +15,7 @@ localeTitle: '使用 display: flex 定位两个盒子'
## Instructions
<section id='instructions'>
为<code>#box-container</code>添加<code>display</code>属性，设置其值为 flex。
为<code>#box-container</code>添加<code>display</code>属性，设置其值为 <code>flex</code>。
</section>
## Tests
@ -23,7 +23,7 @@ localeTitle: '使用 display: flex 定位两个盒子'
```yml
tests:
- text: '<code>#box-container</code>应有<code>display</code>属性，其值应为 flex。'
- text: <code>#box-container</code>应有<code>display</code>属性，其值应为 <code>flex</code>。
testString: assert($('#box-container').css('display') == 'flex');
```

2
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.chinese.md
View File

@ -22,7 +22,7 @@ localeTitle: 在推文中使用 align-items 属性
```yml
tests:
- text: '<code>.follow-btn</code>应有<code>align-items</code>属性，其值应为 center.'
- text: <code>.follow-btn</code>应有<code>align-items</code>属性，其值应为 <code>center</code>.
testString: assert($('.follow-btn').css('align-items') == 'center');
```

6
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-align-self-property.chinese.md
View File

@ -15,7 +15,7 @@ flex 子项目的最后一个属性是<code>align-self</code>。这个属性允
## Instructions
<section id='instructions'>
在<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>align-self</code>。<code>#box-1</code>设为 center，<code>#box-2</code>设为 flex-end。
在<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>align-self</code>。<code>#box-1</code>设为 center，<code>#box-2</code>设为 <code>flex-end</code>。
</section>
## Tests
@ -23,9 +23,9 @@ flex 子项目的最后一个属性是<code>align-self</code>。这个属性允
```yml
tests:
- text: '<code>#box-1</code>元素应有<code>align-self</code>属性，其值应为 center。'
- text: <code>#box-1</code>元素应有<code>align-self</code>属性，其值应为 <code>center</code>。
testString: assert($('#box-1').css('align-self') == 'center');
- text: '<code>#box-2</code>元素应有<code>align-self</code>属性，其值应为 flex-end。'
- text: <code>#box-2</code>元素应有<code>align-self</code>属性，其值应为 <code>flex-end</code>。
testString: assert($('#box-2').css('align-self') == 'flex-end');
```

4
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.chinese.md
View File

@ -14,7 +14,7 @@ localeTitle: 使用 flex-direction 属性创建一列
## Instructions
<section id='instructions'>
给<code>#box-container</code>元素添加 CSS 属性<code>flex-direction</code>，赋值为 column。
给<code>#box-container</code>元素添加 CSS 属性<code>flex-direction</code>，赋值为 <code>column</code>。
</section>
## Tests
@ -22,7 +22,7 @@ localeTitle: 使用 flex-direction 属性创建一列
```yml
tests:
- text: '<code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 column。'
- text: <code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 column。
testString: assert($('#box-container').css('flex-direction') == 'column');
```

8
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.chinese.md
View File

@ -10,12 +10,12 @@ localeTitle: 使用 flex-grow 属性扩展项目
## Description
<section id='description'>
与<code>flex-shrink</code>相对的是<code>flex-grow</code>。你应该还记得，<code>flex-shrink</code>会在容器太小时对元素作出调整。相应地，<code>flex-grow</code>会在容器太大时对元素作出调整。
例子与上一个挑战相似，如果一个项目的<code>flex-grow</code>属性值为 1，另一个项目的<code>flex-grow</code>属性值为 3，那么后者会较前者扩大三倍。
例子与上一个挑战相似，如果一个项目的<code>flex-grow</code>属性值为 <code>1</code>，另一个项目的<code>flex-grow</code>属性值为 <code>3</code>，那么后者会较前者扩大 3 倍。
</section>
## Instructions
<section id='instructions'>
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-grow</code>，<code>#box-1</code>的值设为 1，<code>#box-2</code>的值设为 2。
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-grow</code>，<code>#box-1</code>的值设为 <code>1</code>，<code>#box-2</code>的值设为 <code>2</code>。
</section>
## Tests
@ -23,9 +23,9 @@ localeTitle: 使用 flex-grow 属性扩展项目
```yml
tests:
- text: '<code>#box-1</code>元素应有<code>flex-grow</code>属性，其值应为 1。'
- text: <code>#box-1</code>元素应有<code>flex-grow</code>属性，其值应为 <code>1</code>。
testString: assert($('#box-1').css('flex-grow') == '1');
- text: '<code>#box-2</code>元素应有<code>flex-grow</code>属性，其值应为 2。'
- text: <code>#box-2</code>元素应有<code>flex-grow</code>属性，其值应为 <code>2</code>。
testString: assert($('#box-2').css('flex-grow') == '2');
```

8
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.chinese.md
View File

@ -16,7 +16,7 @@ localeTitle: 使用 flex 短方法属性
## Instructions
<section id='instructions'>
在<code>#box-1</code>和<code>#box-2</code>添加<code>flex</code>属性。为<code>#box-1</code>设置<code>flex-grow</code>属性值为 2，<code>flex-shrink</code>属性值为 2，<code>flex-basis</code>属性值为 150px。为<code>#box-2</code>设置<code>flex-grow</code>属性值为 1，<code>flex-shrink</code>属性值为 1，<code>flex-basis</code>属性值为 150px。
在<code>#box-1</code>和<code>#box-2</code>添加<code>flex</code>属性。为<code>#box-1</code>设置<code>flex-grow</code>属性值为 <code>2</code>，<code>flex-shrink</code>属性值为 <code>2</code>，<code>flex-basis</code>属性值为 <code>150px</code>。为<code>#box-2</code>设置<code>flex-grow</code>属性值为 <code>1</code>，<code>flex-shrink</code>属性值为 <code>1</code>，<code>flex-basis</code>属性值为 <code>150px</code>。
通过上面的设置，在容器大于 300px 时，<code>#box-1</code>扩大的空间是<code>#box-2</code>扩大空间的两倍；在容器小于 300px 时，<code>#box-1</code>缩小的空间<code>#box-2</code>缩小空间的两倍。300px 是两个盒子的<code>flex-basis</code>的值之和。
</section>
@ -25,11 +25,11 @@ localeTitle: 使用 flex 短方法属性
```yml
tests:
- text: '<code>#box-1</code>元素应有<code>flex</code>属性，其值应为 2 2 150px。'
- text: <code>#box-1</code>元素应有<code>flex</code>属性，其值应为 <code>2 2 150px</code>。
testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px');
- text: '<code>#box-2</code>元素应有<code>flex</code>属性，其值应为 1 1 150px。'
- text: <code>#box-2</code>元素应有<code>flex</code>属性，其值应为 <code>1 1 150px</code>。
testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px');
- text: '应对<code>#box-1</code>和<code>#box-2</code>使用<code>flex</code>属性。'
- text: <code>#box-1</code>和<code>#box-2</code>应具有<code>flex</code>属性。
testString: assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
```

8
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.chinese.md
View File

@ -11,12 +11,12 @@ localeTitle: 使用 flex-shrink 属性收缩项目
<section id='description'>
目前为止，挑战里的提到的属性都应用于 flex 容器（flex 子元素的父元素）。除此之外，flex 子元素也有很多实用属性。
首先介绍的是<code>flex-shrink</code>属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。
项目的<code>flex-shrink</code>属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的<code>flex-shrink</code>属性值为 1 ，另一个项目的<code>flex-shrink</code>属性值为 3，那么后者相比前者会受到 3 倍压缩。
项目的<code>flex-shrink</code>属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的<code>flex-shrink</code>属性值为 <code>1</code>，另一个项目的<code>flex-shrink</code>属性值为 <code>3</code>，那么后者相比前者会受到 <code>3</code> 倍压缩。
</section>
## Instructions
<section id='instructions'>
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-shrink</code>，<code>#box-1</code>的值设为 1，<code>#box-2</code>的值设为 2。
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-shrink</code>，<code>#box-1</code>的值设为 <code>1</code>，<code>#box-2</code>的值设为 <code>2</code>。
</section>
## Tests
@ -24,9 +24,9 @@ localeTitle: 使用 flex-shrink 属性收缩项目
```yml
tests:
- text: '<code>#box-1</code>元素应有<code>flex-shrink</code>属性，其值应为 1.'
- text: <code>#box-1</code>元素应有<code>flex-shrink</code>属性，其值应为 <code>1</code>.
testString: assert($('#box-1').css('flex-shrink') == '1');
- text: '<code>#box-2</code>元素应有<code>flex-shrink</code>属性，其值应为 2.'
- text: <code>#box-2</code>元素应有<code>flex-shrink</code>属性，其值应为 <code>2</code>.
testString: assert($('#box-2').css('flex-shrink') == '2');
```

4
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.chinese.md
View File

@ -17,7 +17,7 @@ CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性
## Instructions
<section id='instructions'>
现在的布局一行里面元素太多了，在<code>#box-container</code>元素添加 CSS 属性<code>flex-wrap</code>，把值设为 wrap。
现在的布局一行里面元素太多了，在<code>#box-container</code>元素添加 CSS 属性<code>flex-wrap</code>，把值设为 <code>wrap</code>。
</section>
## Tests
@ -25,7 +25,7 @@ CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性
```yml
tests:
- text: '<code>#box-container</code>元素应有<code>flex-wrap</code>属性，其值应为 wrap。'
- text: <code>#box-container</code>元素应有<code>flex-wrap</code>属性，其值应为 <code>wrap</code>。
testString: assert($('#box-container').css('flex-wrap') == 'wrap');
```

6
curriculum/challenges/chinese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.chinese.md
View File

@ -14,7 +14,7 @@ localeTitle: 使用 order 属性重新排列项目
## Instructions
<section id='instructions'>
给<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>order</code>，<code>#box-1</code>的<code>order</code>属性值设为 2，<code>#box-2</code>的<code>order</code>属性值设为 1。
给<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>order</code>，<code>#box-1</code>的<code>order</code>属性值设为 <code>2</code>，<code>#box-2</code>的<code>order</code>属性值设为 <code>1</code>。
</section>
## Tests
@ -22,9 +22,9 @@ localeTitle: 使用 order 属性重新排列项目
```yml
tests:
- text: '<code>#box-1</code>元素应有<code>order</code>属性，其值应为 2。'
- text: <code>#box-1</code>元素应有<code>order</code>属性，其值应为 <code>2</code>。
testString: assert($('#box-1').css('order') == '2');
- text: '<code>#box-2</code>元素应有<code>order</code>属性，其值应为 1。'
- text: <code>#box-2</code>元素应有<code>order</code>属性，其值应为 <code>1</code>。
testString: assert($('#box-2').css('order') == '1');
```