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

fix(i18n): update Chinese translation of css grid (#37924)

Browse Source
This commit is contained in:
ZhichengChen
2020-02-11 21:39:15 +08:00
committed by GitHub
parent e873b388da
commit 81e751d88b
22 changed files with 588 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.chinese.md
View File

@ -2,23 +2,38 @@
id: 5a9036d038fddaf9a66b5d32 id: 5a9036d038fddaf9a66b5d32
title: Add Columns with grid-template-columns title: Add Columns with grid-template-columns
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
localeTitle: 使用grid-template-columns添加列 forumTopicId: 301117
localeTitle: 使用 grid-template-columns 添加多列
--- ---
## Description ## Description
<section id="description">简单地创建一个网格元素并不会让你走得太远。您还需要定义网格的结构。要向网格添加一些列，请在网格容器上使用<code>grid-template-columns</code>属性，如下所示： <blockquote> 。容器 { <br>显示：网格; <br> grid-template-columns：50px 50px; <br> } </blockquote>这将为您的网格提供两列，每列50px宽。给<code>grid-template-columns</code>属性的参数数量表示<code>grid-template-columns</code>数，每个参数的值表示每列的宽度。 </section> <section id='description'>
简单地添加一个网格元素并不会有任何明显的效果。你还需要明确网格的结构。在一个网格容器中使用<code>grid-template-columns</code>属性可以添加一些列，示例如下：
```css
.container {
display: grid;
grid-template-columns: 50px 50px;
}
```
上面的代码可以在网格容器中添加两列，宽度均为 50px。
<code>grid-template-columns</code>属性值的个数表示网格的列数，而每个值表示对应列的宽度。
</section>
## Instructions ## Instructions
<section id="instructions">为网格容器提供三列，每列<code>100px</code>宽。 </section> <section id='instructions'>
给网格容器设置三个列，每列宽度均为<code>100px</code>。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该有一个<code>grid-template-columns</code>属性，其中三个单元为<code>100px</code> 。 - text: '<code>container</code>类应该有<code>grid-template-columns</code>属性，该属性有三个值，均为<code>100px</code>。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi));'
``` ```
@ -36,19 +51,19 @@ tests:
.d3{background:PaleTurquoise;} .d3{background:PaleTurquoise;}
.d4{background:LightPink;} .d4{background:LightPink;}
.d5{background:PaleGreen;} .d5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
width: 100%; width: 100%;
background: LightGray; background: LightGray;
display: grid; display: grid;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
</style> </style>
<div class="container"> <div class="container">
<div class="d1">1</div> <div class="d1">1</div>
<div class="d2">2</div> <div class="d2">2</div>
@ -56,7 +71,6 @@ tests:
<div class="d4">4</div> <div class="d4">4</div>
<div class="d5">5</div> <div class="d5">5</div>
</div> </div>
``` ```
</div> </div>
@ -68,7 +82,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

31
curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.chinese.md
View File

@ -2,23 +2,28 @@
id: 5a9036ee38fddaf9a66b5d37 id: 5a9036ee38fddaf9a66b5d37
title: Add Gaps Faster with grid-gap title: Add Gaps Faster with grid-gap
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
localeTitle: 通过网格间隙更快地添加间隙 forumTopicId: 1301118
localeTitle: 使用 grid-gap 为网格添加间距
--- ---
## Description ## Description
<section id="description"> <code>grid-gap</code>是<code>grid-row-gap</code>和<code>grid-column-gap</code> <code>grid-gap</code>的简写属性，来自前两个更方便使用的挑战。如果<code>grid-gap</code>有一个值，它将在所有行和列之间创建一个间隙。但是，如果有两个值，它将使用第一个值来设置行之间的间隙和列的第二个值。 </section> <section id='description'>
<code>grid-gap</code>属性是前两个挑战中的<code>grid-row-gap</code>属性和<code>grid-column-gap</code>属性的简写，它更方便使用。如果<code>grid-gap</code>只有一个值，那么这个值表示行与行之间、列与列之间的间距。如果<code>grid-gap</code>有两个值，那么第一个值表示行间距，第二个值表示列间距。
</section>
## Instructions ## Instructions
<section id="instructions">使用<code>grid-gap</code>在行之间引入<code>10px</code>间隙，在列之间引入<code>20px</code>间隙。 </section> <section id='instructions'>
使用<code>grid-gap</code>属性设置行间距为<code>10px</code>，设置列间距为<code>20px</code>。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该有一个<code>grid-gap</code>属性，在行之间引入<code>10px</code>间隙，在列之间引入<code>20px</code>间隙。 - text: '<code>container</code>类应该有<code>grid-gap</code>属性，在行之间设置<code>10px</code>的间距，在列之间设置<code>20px</code>的间距。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s*?20px\s*?;[\s\S]*}/gi));'
``` ```
@ -36,7 +41,7 @@ tests:
.d3{background:PaleTurquoise;} .d3{background:PaleTurquoise;}
.d4{background:LightPink;} .d4{background:LightPink;}
.d5{background:PaleGreen;} .d5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -45,10 +50,10 @@ tests:
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
</style> </style>
<div class="container"> <div class="container">
@ -58,7 +63,6 @@ tests:
<div class="d4">4</div> <div class="d4">4</div>
<div class="d5">5</div> <div class="d5">5</div>
</div> </div>
``` ```
</div> </div>
@ -70,7 +74,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

33
curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.chinese.md
View File

@ -2,23 +2,28 @@
id: 5a9036e138fddaf9a66b5d33 id: 5a9036e138fddaf9a66b5d33
title: Add Rows with grid-template-rows title: Add Rows with grid-template-rows
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua'
localeTitle: 使用grid-template-rows添加行 forumTopicId: 301119
localeTitle: 使用 grid-template-rows 添加多行
--- ---
## Description ## Description
<section id="description">您在上一次挑战中创建的网格将自动设置行数。要手动调整行，请使用<code>grid-template-rows</code>属性，方法<code>grid-template-columns</code>在先前挑战中使用<code>grid-template-columns</code>方式相同。 </section> <section id='description'>
在上个挑战中，你创建的网格会自动设置行数。你可以像用<code>grid-template-columns</code>设置网格的列一样，用<code>grid-template-rows</code>设置网格的行。
</section>
## Instructions ## Instructions
<section id="instructions">在网格中添加两行，每行高<code>50px</code> 。 </section> <section id='instructions'>
给网格添加两行，使每行高度均为<code>50px</code>。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该有一个<code>grid-template-rows</code>属性，其中两个单元为<code>50px</code> 。 - text: '<code>container</code>类应该有<code>grid-template-rows</code>属性，且该属性的两个值均为<code>50px</code>'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi));'
``` ```
@ -36,20 +41,20 @@ tests:
.d3{background:PaleTurquoise;} .d3{background:PaleTurquoise;}
.d4{background:LightPink;} .d4{background:LightPink;}
.d5{background:PaleGreen;} .d5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
width: 100%; width: 100%;
background: LightGray; background: LightGray;
display: grid; display: grid;
grid-template-columns: 100px 100px 100px; grid-template-columns: 100px 100px 100px;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
</style> </style>
<div class="container"> <div class="container">
<div class="d1">1</div> <div class="d1">1</div>
<div class="d2">2</div> <div class="d2">2</div>
@ -57,7 +62,6 @@ tests:
<div class="d4">4</div> <div class="d4">4</div>
<div class="d5">5</div> <div class="d5">5</div>
</div> </div>
``` ```
</div> </div>
@ -69,7 +73,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

33
curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.chinese.md
View File

@ -2,23 +2,28 @@
id: 5a90376038fddaf9a66b5d3c id: 5a90376038fddaf9a66b5d3c
title: Align All Items Horizontally using justify-items title: Align All Items Horizontally using justify-items
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn'
localeTitle: 使用对齐项目水平对齐所有项目 forumTopicId: 301120
localeTitle: 使用 justify-items 水平对齐所有项目
--- ---
## Description ## Description
<section id="description">有时您希望CSS Grid中的所有项目共享相同的对齐方式。您可以使用以前学过的属性并单独对齐它们，也可以使用网格容器上的<code>justify-items</code>将它们全部水平<code>justify-items</code> 。此属性可以接受您在前两个挑战中学到的所有相同值，不同之处在于它会将网格中的<b>所有</b>项目移动到所需的对齐方式。 </section> <section id='description'>
有时你想让 CSS 网格中的网格项共享对齐方式。你可以像之前学习的那样分别设置它们的对齐方式，也可以对网格容器使用<code>justify-items</code>使它们一次性沿行轴对齐。对于这个属性你能使用在之前的两个挑战中学到的所有值，与之前不同的是，它将使网格中<b>所有</b>的网格项按所设置的方式对齐。
</section>
## Instructions ## Instructions
<section id="instructions">使用此属性可以水平居中所有项目。 </section> <section id='instructions'>
使用<code>justify-items</code>属性设置所有网格项水平居中。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该有一个具有<code>center</code>值的<code>justify-items</code>属性。 - text: '<code>container</code>类应该有<code>justify-items</code>属性且值为<code>center</code>。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi));'
``` ```
@ -36,7 +41,7 @@ tests:
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5{background:PaleGreen;} .item5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -46,13 +51,13 @@ tests:
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -60,7 +65,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -72,7 +76,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

33
curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.chinese.md
View File

@ -2,23 +2,28 @@
id: 5a94fdf869fb03452672e45b id: 5a94fdf869fb03452672e45b
title: Align All Items Vertically using align-items title: Align All Items Vertically using align-items
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
localeTitle: 使用align-items垂直对齐所有项目 forumTopicId: 301121
localeTitle: 使用 align-items 垂直对齐所有项目
--- ---
## Description ## Description
<section id="description">使用网格容器上的<code>align-items</code>属性将为网格中的所有项目设置垂直对齐方式。 </section> <section id='description'>
对网格容器使用<code>align-items</code>属性可以给网格中所有的网格项设置沿列轴对齐的方式。
</section>
## Instructions ## Instructions
<section id="instructions">现在使用它将所有项目移动到每个单元格的末尾。 </section> <section id='instructions'>
请使用<code>align-items</code>属性将所有网格项移动到单元格的末尾。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该具有值为<code>end</code>的<code>align-items</code>属性。 - text: '<code>container</code>类应该有<code>align-items</code>属性且值为<code>end</code>。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi));'
``` ```
@ -36,7 +41,7 @@ tests:
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5{background:PaleGreen;} .item5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -46,13 +51,13 @@ tests:
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -60,7 +65,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -72,7 +76,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

41
curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.chinese.md
View File

@ -2,23 +2,31 @@
id: 5a90374338fddaf9a66b5d3a id: 5a90374338fddaf9a66b5d3a
title: Align an Item Horizontally using justify-self title: Align an Item Horizontally using justify-self
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq'
localeTitle: 使用justify-self水平对齐项目 forumTopicId: 301122
localeTitle: 使用 justify-self 水平对齐项目
--- ---
## Description ## Description
<section id="description">在CSS Grid中，每个项目的内容位于一个称为<dfn>单元格</dfn>的框中。您可以使用网格项上的<code>justify-self</code>属性水平对齐内容在其单元格中的位置。默认情况下，此属性的值为<code>stretch</code> ，这将使内容填充单元格的整个宽度。此CSS Grid属性也接受其他值： <code>start</code> ：对齐单元格左侧的内容， <code>center</code> ：对齐单元格<code>center</code>的内容， <code>end</code> ：对齐单元格右侧的内容。 </section> <section id='description'>
在 CSS 网格中，每个网格项的内容分别位于被称为<dfn>单元格（cell）</dfn>的框内。你可以使用网格项的<code>justify-self</code>属性，设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下，这个属性的值是<code>stretch</code>，这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值：
<code>start</code>：使内容在单元格左侧对齐，
<code>center</code>：使内容在单元格居中对齐，
<code>end</code>：使内容在单元格右侧对齐，
</section>
## Instructions ## Instructions
<section id="instructions">使用<code>justify-self</code>属性将项目与<code>item2</code> 。 </section> <section id='instructions'>
使用<code>justify-self</code>属性让类为<code>item2</code>的网格项居中。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>item2</code>类应该有一个具有<code>center</code>值的<code>justify-self</code>属性。 - text: '<code>item2</code>类应该有<code>justify-self</code>属性且值为<code>center</code>。'
testString: 'assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi), "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.");' testString: 'assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi));'
``` ```
@ -32,19 +40,19 @@ tests:
```html ```html
<style> <style>
.item1{background: LightSkyBlue;} .item1{background: LightSkyBlue;}
.item2 { .item2 {
background: LightSalmon; background: LightSalmon;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5{background:PaleGreen;} .item5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -56,7 +64,7 @@ tests:
grid-gap: 10px; grid-gap: 10px;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -64,7 +72,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -76,7 +83,11 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

37
curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.chinese.md
View File

@ -2,23 +2,28 @@
id: 5a90375238fddaf9a66b5d3b id: 5a90375238fddaf9a66b5d3b
title: Align an Item Vertically using align-self title: Align an Item Vertically using align-self
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
localeTitle: 使用align-self垂直对齐项目 forumTopicId: 301123
localeTitle: 使用 align-self 垂直对齐项目
--- ---
## Description ## Description
<section id="description">正如您可以水平对齐项目一样，也可以垂直对齐项目。为此，您可以在项目上使用<code>align-self</code>属性。此属性接受来自上一次挑战的所有与<code>justify-self</code>相同的值。 </section> <section id='description'>
正如能设置网格项沿行轴对齐方式一样，也可以设置网格项沿列轴对齐：你可以对网格项使用<code>align-self</code>属性。在上一个挑战中适用于<code>justify-self</code>属性的每个值也都适用于<code>align-self</code>属性。
</section>
## Instructions ## Instructions
<section id="instructions">对齐项目与类<code>item3</code>在垂直<code>end</code> 。 </section> <section id='instructions'>
用值<code>end</code>使类为<code>item3</code>的网格项底端对齐。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>item3</code>类应该有一个<code>align-self</code>属性，其值为<code>end</code> 。 - text: '<code>item3</code>类应该有<code>align-self</code>属性且值为<code>end</code>。'
testString: 'assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.");' testString: 'assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));'
``` ```
@ -33,18 +38,18 @@ tests:
<style> <style>
.item1{background:LightSkyBlue;} .item1{background:LightSkyBlue;}
.item2{background:LightSalmon;} .item2{background:LightSalmon;}
.item3 { .item3 {
background: PaleTurquoise; background: PaleTurquoise;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
.item4{background:LightPink;} .item4{background:LightPink;}
.item5{background:PaleGreen;} .item5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -56,7 +61,7 @@ tests:
grid-gap: 10px; grid-gap: 10px;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -64,7 +69,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -76,7 +80,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

40
curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.chinese.md
View File

@ -2,23 +2,35 @@
id: 5a9036ee38fddaf9a66b5d35 id: 5a9036ee38fddaf9a66b5d35
title: Create a Column Gap Using grid-column-gap title: Create a Column Gap Using grid-column-gap
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
localeTitle: 使用grid-column-gap创建列间隙 forumTopicId: 301124
localeTitle: 使用 grid-column-gap 创建多列之间的间距
--- ---
## Description ## Description
<section id="description">到目前为止，在你创建的网格中，列都相互紧密相连。有时您希望列之间存在间隙。要在列之间添加间隙，请使用<code>grid-column-gap</code>属性，如下所示： <blockquote> grid-column-gap：10px; </blockquote>这会在我们所有列之间创建10px的空白空间。 </section> <section id='description'>
到目前为止，在你所建立的网格中列都相互紧挨着。如果需要在列与列之间添加一些间距，我们可以使用<code>grid-column-gap</code>：
```css
grid-column-gap: 10px;
```
这会在我们创建的所有列之间添加 10px 的空白间距。
</section>
## Instructions ## Instructions
<section id="instructions">为网格中的列提供<code>20px</code>间隙。 </section> <section id='instructions'>
为网格中的列添加宽度为<code>20px</code>的间距。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该具有值为<code>20px</code>的<code>grid-column-gap</code>属性。 - text: '<code>container</code>类应该有<code>grid-column-gap</code>属性且值为<code>20px</code>。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi));'
``` ```
@ -36,7 +48,7 @@ tests:
.d3{background:PaleTurquoise;} .d3{background:PaleTurquoise;}
.d4{background:LightPink;} .d4{background:LightPink;}
.d5{background:PaleGreen;} .d5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -45,13 +57,13 @@ tests:
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
</style> </style>
<div class="container"> <div class="container">
<div class="d1">1</div> <div class="d1">1</div>
<div class="d2">2</div> <div class="d2">2</div>
@ -59,7 +71,6 @@ tests:
<div class="d4">4</div> <div class="d4">4</div>
<div class="d5">5</div> <div class="d5">5</div>
</div> </div>
``` ```
</div> </div>
@ -71,7 +82,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

33
curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.chinese.md
View File

@ -2,23 +2,28 @@
id: 5a9036ee38fddaf9a66b5d36 id: 5a9036ee38fddaf9a66b5d36
title: Create a Row Gap using grid-row-gap title: Create a Row Gap using grid-row-gap
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
localeTitle: 使用grid-row-gap创建行间隙 forumTopicId: 301125
localeTitle: 使用 grid-row-gap 创建多行之间的间距
--- ---
## Description ## Description
<section id="description">您可以使用<code>grid-row-gap</code>在<code>grid-row-gap</code>之间添加间隙，方法与在上一个挑战中的列之间添加间隙的方式相同。 </section> <section id='description'>
和上个挑战在两列之间添加间距一样，你可以用<code>grid-row-gap</code>在两行之间设置间距。
</section>
## Instructions ## Instructions
<section id="instructions">为<code>5px</code>高的行创建间隙。 </section> <section id='instructions'>
为网格中的行添加高度为<code>5px</code>的间距。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该具有值为<code>5px</code>的<code>grid-row-gap</code>属性。 - text: '<code>container</code>类应该有<code>grid-row-gap</code>属性且值为<code>5px</code>。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi));'
``` ```
@ -36,7 +41,7 @@ tests:
.d3{background:PaleTurquoise;} .d3{background:PaleTurquoise;}
.d4{background:LightPink;} .d4{background:LightPink;}
.d5{background:PaleGreen;} .d5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -45,13 +50,13 @@ tests:
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
</style> </style>
<div class="container"> <div class="container">
<div class="d1">1</div> <div class="d1">1</div>
<div class="d2">2</div> <div class="d2">2</div>
@ -59,7 +64,6 @@ tests:
<div class="d4">4</div> <div class="d4">4</div>
<div class="d5">5</div> <div class="d5">5</div>
</div> </div>
``` ```
</div> </div>
@ -71,7 +75,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

43
curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.chinese.md
View File

@ -2,23 +2,36 @@
id: 5a94fe5469fb03452672e461 id: 5a94fe5469fb03452672e461
title: Create Flexible Layouts Using auto-fill title: Create Flexible Layouts Using auto-fill
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
localeTitle: 使用自动填充创建灵活布局 forumTopicId: 301126
localeTitle: 使用 auto-fill 创建弹性布局
--- ---
## Description ## Description
<section id="description">重复功能带有一个名为<dfn>自动填充</dfn>的选项。这允许您根据容器的大小自动插入所需大小的行或列。将<code>auto-fill</code>与<code>minmax</code>组合时，可以创建灵活的布局。在预览中， <code>grid-template-columns</code>设置为<blockquote>重复（自动填充，minmax（60px，1fr））; </blockquote>当容器改变大小时，此设置将继续插入60px列并拉伸它们，直到它可以插入另一个。 <strong>注意</strong> <br>如果您的容器无法将所有项目放在一行上，则会将它们移动到新行。 </section> <section id='description'>
重复方法带有一个名为<dfn>自动填充（auto-fill）</dfn>的功能。它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。你可以通过结合<code>auto-fill</code>和<code>minmax</code>来更灵活地布局。
在最右侧的预览区中，<code>grid-template-columns</code>被设置为：
```css
repeat(auto-fill, minmax(60px, 1fr));
```
上面的代码效果：列的宽度会随容器大小改变，在可以插入一个 60px 宽的列之前，当前行的所有列会一直拉伸（译者注：动手试一下你就明白了）。
<strong>注意：</strong>如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。
</section>
## Instructions ## Instructions
<section id="instructions">在第一个网格中，使用带有<code>repeat</code> <code>auto-fill</code>以使用最小宽度为<code>60px</code>且最大为<code>1fr</code>列填充网格。然后调整预览大小以查看自动填充操作。 </section> <section id='instructions'>
在第一个网格中，用<code>auto-fill</code>和<code>repeat</code>来填充网格，其中列宽的最小值为<code>60px</code>，最大值为<code>1fr</code>。你可以调整最右侧的预览区大小，查看自动填充效果。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该具有<code>grid-template-columns</code>属性，其中包含<code>repeat</code>和<code>auto-fill</code> ，它将使用最小宽度为<code>60px</code>且最大为<code>1fr</code>列填充网格。 - text: '<code>container</code>类应该有<code>grid-template-columns</code>属性且使用<code>repeat</code>和<code>auto-fill</code>，以便将最小宽度为<code>60px</code>，最大宽度为<code>1fr</code>的列填充至网格。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi));'
``` ```
@ -36,22 +49,22 @@ tests:
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5{background:PaleGreen;} .item5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 100px; min-height: 100px;
width: 100%; width: 100%;
background: LightGray; background: LightGray;
display: grid; display: grid;
/* change the code below this line */ /* 请修改本行以下的代码 */
grid-template-columns: repeat(3, minmax(60px, 1fr)); grid-template-columns: repeat(3, minmax(60px, 1fr));
/* change the code above this line */ /* 请修改本行以上的代码*/
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
} }
.container2 { .container2 {
font-size: 40px; font-size: 40px;
min-height: 100px; min-height: 100px;
@ -77,7 +90,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -89,7 +101,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
```html
// solution required // solution required
``` ```
</section> </section>

38
curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.chinese.md
View File

@ -2,23 +2,29 @@
id: 5a94fe6269fb03452672e462 id: 5a94fe6269fb03452672e462
title: Create Flexible Layouts Using auto-fit title: Create Flexible Layouts Using auto-fit
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
localeTitle: 使用自动调整创建灵活布局 forumTopicId: 301127
localeTitle: 使用 auto-fit 创建弹性布局
--- ---
## Description ## Description
<section id="description"> <code>auto-fit</code>几乎与<code>auto-fill</code>相同。唯一的区别是，当容器的大小超过所有项目组合的大小时， <code>auto-fill</code>会继续插入空行或列并将项目推向一侧，而<code>auto-fit</code>折叠这些空行或列并将项目拉伸到适合容器的大小。 <strong>注意</strong> <br>如果您的容器无法将所有项目放在一行上，则会将它们移动到新行。 </section> <section id='description'>
<code>auto-fit</code>效果几乎和<code>auto-fill</code>一样。不同点仅在于，当容器的大小大于各网格项之和时，<code>auto-fill</code>将会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而<code>auto-fit</code>则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
<strong>注意：</strong><br>如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。
</section>
## Instructions ## Instructions
<section id="instructions">在第二个网格中，使用<code>auto-fit</code> <code>repeat</code>以使用最小宽度为<code>60px</code>且最大为<code>1fr</code>列填充网格。然后调整预览大小以查看差异。 </section> <section id='instructions'>
在第二个网格中，用<code>auto-fit</code>和<code>repeat</code>来填充网格，其中列宽的最小值为<code>60px</code>，最大值为<code>1fr</code>。你可以调整最右侧的预览区以查看差异。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container2</code>类应该具有<code>grid-template-columns</code>属性，该属性具有<code>repeat</code>和<code>auto-fit</code> ，它将使用最小宽度为<code>60px</code>且最大为<code>1fr</code>列填充网格。 - text: '<code>container2</code>类应该有<code>grid-template-columns</code>属性，且使用<code>repeat</code>和<code>auto-fit</code>以便将最小宽度为<code>60px</code>，最大宽度为<code>1fr</code>的列放入网格。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi));'
``` ```
@ -36,34 +42,34 @@ tests:
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5{background:PaleGreen;} .item5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 100px; min-height: 100px;
width: 100%; width: 100%;
background: LightGray; background: LightGray;
display: grid; display: grid;
grid-template-columns: repeat( auto-fill, minmax(60px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
} }
.container2 { .container2 {
font-size: 40px; font-size: 40px;
min-height: 100px; min-height: 100px;
width: 100%; width: 100%;
background: Silver; background: Silver;
display: grid; display: grid;
/* change the code below this line */ /* 请修改本行以下的代码 */
grid-template-columns: repeat(3, minmax(60px, 1fr)); grid-template-columns: repeat(3, minmax(60px, 1fr));
/* change the code above this line */ /* 请修改本行以上的代码*/
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -78,7 +84,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -90,7 +95,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

46
curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-grids-within-grids.chinese.md
View File

@ -2,25 +2,31 @@
id: 5a94fe8569fb03452672e464 id: 5a94fe8569fb03452672e464
title: Create Grids within Grids title: Create Grids within Grids
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/c6N78Ap'
forumTopicId: 301128
localeTitle: 在网格中创建网格 localeTitle: 在网格中创建网格
--- ---
## Description ## Description
<section id="description">将元素转换为网格只会影响其直接后代的行为。因此，通过将直接后代转换为网格，您在网格中有一个网格。例如，通过使用<code>item3</code>类设置元素的<code>display</code>和<code>grid-template-columns</code>属性，可以在网格中创建网格。 </section> <section id='description'>
将元素转换为网格只会影响其子代元素。因此，在把某个子代元素设置为网格后，就会得到一个嵌套的网格。
例如，设置类为<code>item3</code>的元素的<code>display</code>和<code>grid-template-columns</code>属性，就会得到一个嵌套的网格。
</section>
## Instructions ## Instructions
<section id="instructions">使用<code>item3</code>类将元素转换为网格，其中两列的宽度为<code>auto</code> ， <code>1fr</code>使用<code>display</code>和<code>grid-template-columns</code> 。 </section> <section id='instructions'>
用<code>display</code>和<code>grid-template-columns</code>，使类为<code>item3</code>元素转换为有两列且宽度为<code>auto</code>和<code>1fr</code>的网格。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>item3</code>类应该有一个<code>grid-template-columns</code>属性，其中<code>auto</code>和<code>1fr</code>作为值。 - text: '<code>item3</code>类应该有<code>grid-template-columns</code>属性且值为<code>auto</code>和<code>1fr</code>。'
testString: 'assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.");' testString: 'assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi));'
- text: <code>item3</code>类应该具有<code>grid</code>值的<code>display</code>属性。 - text: '<code>item3</code>类有<code>display</code>属性且值为<code>grid</code>。'
testString: 'assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.");' testString: 'assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));'
``` ```
@ -51,36 +57,36 @@ tests:
background: LightSkyBlue; background: LightSkyBlue;
grid-area: header; grid-area: header;
} }
.item2 { .item2 {
background: LightSalmon; background: LightSalmon;
grid-area: advert; grid-area: advert;
} }
.item3 { .item3 {
background: PaleTurquoise; background: PaleTurquoise;
grid-area: content; grid-area: content;
/* enter your code below this line */ /* 请在本行以下添加你的代码 */
/* enter your code above this line */ /* 请在本行以上添加你的代码 */
} }
.item4 { .item4 {
background: lightpink; background: lightpink;
grid-area: footer; grid-area: footer;
} }
.itemOne { .itemOne {
background: PaleGreen; background: PaleGreen;
} }
.itemTwo { .itemTwo {
background: BlanchedAlmond; background: BlanchedAlmond;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">header</div> <div class="item1">header</div>
<div class="item2">advert</div> <div class="item2">advert</div>
@ -90,7 +96,6 @@ tests:
</div> </div>
<div class="item4">footer</div> <div class="item4">footer</div>
</div> </div>
``` ```
</div> </div>
@ -102,7 +107,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

34
curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-your-first-css-grid.chinese.md
View File

@ -2,23 +2,29 @@
id: 5a858944d96184f06fd60d61 id: 5a858944d96184f06fd60d61
title: Create Your First CSS Grid title: Create Your First CSS Grid
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
localeTitle: 创建您的第一个CSS网格 forumTopicId: 301129
localeTitle: 创建你的第一个 CSS 网格
--- ---
## Description ## Description
<section id="description">通过它的设置可以将任何HTML元素成格子容器<code>display</code>属性设置为<code>grid</code> 。这使您能够使用与CSS Grid关联的所有其他属性。 <strong>注意</strong> <br>在CSS Grid中，父元素称为<dfn>容器</dfn> ，其子元素称为<dfn>item</dfn> 。 </section> <section id='description'>
通过将属性<code>display</code>的值设为<code>grid</code>，使 HTML 元素变为网格容器。通过前面的操作，你可以对该容器使用与 CSS 网格（CSS Grid）相关的属性。
<strong>注意：</strong><br>在 CSS 网格中，父元素称为<dfn>容器（container）</dfn>，它的子元素称为<dfn>项（items）</dfn>。
</section>
## Instructions ## Instructions
<section id="instructions">将<code>container</code>类的div显示更改为<code>grid</code> 。 </section> <section id='instructions'>
将类为<code>container</code>的 div 的<code>display</code>属性改为<code>grid</code>。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该具有值为<code>grid</code>的<code>display</code>属性。 - text: '<code>container</code>类应该有<code>display</code>属性且值为<code>grid</code>。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));'
``` ```
@ -36,18 +42,18 @@ tests:
.d3{background:PaleTurquoise;} .d3{background:PaleTurquoise;}
.d4{background:LightPink;} .d4{background:LightPink;}
.d5{background:PaleGreen;} .d5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
width: 100%; width: 100%;
background: LightGray; background: LightGray;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
</style> </style>
<div class="container"> <div class="container">
<div class="d1">1</div> <div class="d1">1</div>
<div class="d2">2</div> <div class="d2">2</div>
@ -55,7 +61,6 @@ tests:
<div class="d4">4</div> <div class="d4">4</div>
<div class="d5">5</div> <div class="d5">5</div>
</div> </div>
``` ```
</div> </div>
@ -67,7 +72,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

41
curriculum/challenges/chinese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.chinese.md
View File

@ -2,23 +2,39 @@
id: 5a94fe0569fb03452672e45c id: 5a94fe0569fb03452672e45c
title: Divide the Grid Into an Area Template title: Divide the Grid Into an Area Template
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
forumTopicId: 301130
localeTitle: 将网格划分为区域模板 localeTitle: 将网格划分为区域模板
--- ---
## Description ## Description
<section id="description">您可以将网格的单元格组合到一个<dfn>区域中，</dfn>并为该区域指定自定义名称。通过在容器上使用<code>grid-template-areas</code>来执行此操作，如下所示： <blockquote>网格模板方面： <br> “标题标题” <br> “广告内容内容” <br> “页脚页脚”; </blockquote>上面的代码将前三个单元格合并为一个名为<code>header</code>的区域，将底部的三个单元格合并为一个<code>footer</code>区域，并在中间行中生成两个区域; <code>advert</code>和<code>content</code> 。 <strong>注意</strong> <br>代码中的每个单词代表一个单元格，每对引号代表一行。除自定义标签外，您还可以使用句点（ <code>.</code> ）指定网格中的空单元格。 </section> <section id='description'>
你可以将网格中的一些网格单元格组合成一个<dfn>区域（area）</dfn>，并为该区域指定一个自定义名称。你可以通过给容器加上<code>grid-template-areas</code>来实现：
```css
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
```
上面的代码将顶部三个单元格合并成一个名为<code>header</code>的区域，将底部三个单元格合并为一个名为<code>footer</code>的区域，并在中间行生成两个区域————<code>advert</code>和<code>content</code>。
<strong>注意：</strong><br>在代码中，每个单词代表一个网格单元格，每对引号代表一行。
除了自定义标签，你还能使用句点（<code>.</code>）来表示一个空单元格。
</section>
## Instructions ## Instructions
<section id="instructions">放置区域模板，以便标记为<code>advert</code>的单元格变为空单元格。 </section> <section id='instructions'>
请放置区域模板，让名为<code>advert</code>的区域变成空单元格。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应该具有类似于预览但具有的<code>grid-template-areas</code>属性<code>.</code>而不是<code>advert</code>区域。 - text: '<code>container</code>类应该有类似于最右侧预览区的<code>grid-template-areas</code>属性且用<code>.</code>代替<code>advert</code>。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi));'
``` ```
@ -36,7 +52,7 @@ tests:
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5{background:PaleGreen;} .item5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -46,16 +62,16 @@ tests:
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
/* change code below this line */ /* 请修改本行以下的代码 */
grid-template-areas: grid-template-areas:
"header header header" "header header header"
"advert content content" "advert content content"
"footer footer footer"; "footer footer footer";
/* change code above this line */ /* 请修改本行以上的代码 */
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -63,7 +79,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -75,7 +90,9 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required // solution required
``` ```
</section> </section>

39
curriculum/challenges/chinese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.chinese.md
View File

@ -2,23 +2,34 @@
id: 5a94fe4469fb03452672e460 id: 5a94fe4469fb03452672e460
title: Limit Item Size Using the minmax Function title: Limit Item Size Using the minmax Function
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
localeTitle: 限制项目大小使用minmax功能 forumTopicId: 301131
localeTitle: 使用 minmax 函数限制项目大小
--- ---
## Description ## Description
<section id="description">还有另一个内置函数可用于<code>grid-template-columns</code>和<code>grid-template-rows</code>称为<code>minmax</code> 。当网格容器改变大小时，它用于限制项目的大小。为此，您需要指定项目的可接受尺寸范围。这是一个例子： <blockquote> grid-template-columns：100px minmax（50px，200px）; </blockquote>在上面的代码中， <code>grid-template-columns</code>设置为创建两列;第一个是100px宽，第二个是最小宽度50px，最大宽度是200px。 </section> <section id='description'>
此外，内置函数<code>minmax</code>也可以可用于设置<code>grid-template-columns</code>和<code>grid-template-rows</code>的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，你需要指定网格项允许的尺寸范围。例如：
```css
grid-template-columns: 100px minmax(50px, 200px);
```
在上面的代码中，通过<code>grid-template-columns</code>添加两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。
</section>
## Instructions ## Instructions
<section id="instructions">使用<code>minmax</code>函数，将<code>repeat</code>函数中的<code>1fr</code>替换为最小宽度为<code>90px</code>且最大宽度为<code>1fr</code>的列大小，并调整预览面板的大小以查看效果。 </section> <section id='instructions'>
用<code>minmax</code>函数替换<code>repeat</code>函数中的<code>1fr</code>，限定其最小值为<code>90px</code>，最大值为<code>1fr</code>，你可以调整最右侧的预览面板查看效果。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应具有<code>grid-template-columns</code>属性，该属性设置为重复3列，最小宽度为<code>90px</code> ，最大宽度为<code>1fr</code> 。 - text: '<code>container</code>类应该有<code>grid-template-columns</code>属性且设置重复 3 列，每列宽度最小值为<code>90px</code>，最大值为<code>1fr</code>。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi));'
``` ```
@ -36,23 +47,23 @@ tests:
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5{background:PaleGreen;} .item5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
width: 100%; width: 100%;
background: LightGray; background: LightGray;
display: grid; display: grid;
/* change the code below this line */ /* 请修改本行以下的代码 */
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
/* change the code above this line */ /* 请修改本行以上的代码*/
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -60,7 +71,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -72,7 +82,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

45
curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.chinese.md
View File

@ -2,23 +2,36 @@
id: 5a94fe1369fb03452672e45d id: 5a94fe1369fb03452672e45d
title: Place Items in Grid Areas Using the grid-area Property title: Place Items in Grid Areas Using the grid-area Property
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
localeTitle: 使用网格区域属性在网格区域中放置项目 forumTopicId: 301132
localeTitle: 使用 grid-area 属性将项目放置在网格区域中
--- ---
## Description ## Description
<section id="description">为网格容器创建区域模板后，如上一个挑战所示，您可以通过引用您提供的名称将项目放入自定义区域。为此，您可以在项目上使用<code>grid-area</code>属性，如下所示： <blockquote> .item1 {grid-area：header; } </blockquote>这使网格知道您希望<code>item1</code>类进入名为<code>header</code>的区域。在这种情况下，该项将使用整个顶行，因为整行被命名为标题区域。 </section> <section id='description'>
像上一个挑战那样，在为网格添加区域模板后，你可以通过引用你所定义的区域的名称，将元素放入相应的区域。为此，你需要对网格项使用<code>grid-area</code>：
```css
.item1 {
grid-area: header;
}
```
这样，类名为<code>item1</code>的网格项就被放到了<code>header</code>区域里。在这个示例中，网格项将占用整个顶行，因为这一整行都被命名为 header 区域。
</section>
## Instructions ## Instructions
<section id="instructions">使用<code>grid-area</code>属性将具有<code>item5</code>类的元素放置在<code>footer</code>区域中。 </section> <section id='instructions'>
请使用<code>grid-area</code>属性，把类为<code>item5</code>元素放到<code>footer</code>区域。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>item5</code>类应该有一个<code>grid-area</code>属性，其值为<code>footer</code> 。 - text: '<code>item5</code>类应该有<code>grid-area</code>属性且值为<code>footer</code>。'
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.");' testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));'
``` ```
@ -35,15 +48,15 @@ tests:
.item2{background:LightSalmon;} .item2{background:LightSalmon;}
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5 { .item5 {
background: PaleGreen; background: PaleGreen;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -53,13 +66,13 @@ tests:
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
grid-template-areas: grid-template-areas:
"header header header" "header header header"
"advert content content" "advert content content"
"footer footer footer"; "footer footer footer";
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -67,7 +80,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -79,7 +91,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

53
curriculum/challenges/chinese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.chinese.md
View File

@ -2,23 +2,48 @@
id: 5a94fe3669fb03452672e45f id: 5a94fe3669fb03452672e45f
title: Reduce Repetition Using the repeat Function title: Reduce Repetition Using the repeat Function
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
localeTitle: 使用重复功能减少重复 forumTopicId: 301133
localeTitle: 使用 repeat 函数减少重复
--- ---
## Description ## Description
<section id="description">使用<code>grid-template-columns</code>和<code>grid-template-rows</code>定义网格结构时，为所创建的每个行或列输入了一个值。让我们说你想要一个100行相同高度的网格。单独插入100个值是不太实际的。幸运的是，有一种更好的方法 - 使用<code>repeat</code>函数指定要重复列或行的次数，后跟逗号和要重复的值。这是一个创建100行网格的示例，每行高度为50px。 <blockquote> grid-template-rows：repeat（100,50px）; </blockquote>您还可以使用repeat函数重复多个值，并在定义网格结构时将该函数插入其他值中。这就是我的意思： <blockquote> grid-template-columns：repeat（2,1fr 50px）20px; </blockquote>这意味着： <blockquote> grid-template-columns：1fr 50px 1fr 50px 20px; </blockquote> <strong>注意</strong> <br> <code>1fr 50px</code>重复两次，然后是20px。 </section> <section id='description'>
当使用<code>grid-template-columns</code>和<code>grid-template-rows</code>定义网格结构时，你需要为添加的每一行和每一列都输入一个值。
如果一个网格共有 100 行，每行高度相同，就得输入 100 个值，这不太实际。幸运的是，有一种更好的方法——使用<code>repeat</code>方法指定行或列的重复次数，后面加上逗号以及需要重复的值。
这里有一个添加 100 行网格的例子，使每行高度均为 50px：
```css
grid-template-rows: repeat(100, 50px);
```
你还可以用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用。举个例子：
```css
grid-template-columns: repeat(2, 1fr 50px) 20px;
```
效果相当于：
```css
grid-template-columns: 1fr 50px 1fr 50px 20px;
```
<strong>注意：</strong><br><code>1fr 50px</code>重复了两次，后面跟着 20px。
</section>
## Instructions ## Instructions
<section id="instructions">使用<code>repeat</code>从<code>grid-template-columns</code>属性中删除重复。 </section> <section id='instructions'>
用<code>repeat</code>代替<code>grid-template-columns</code>属性值中的重复代码。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>container</code>类应具有<code>grid-template-columns</code>属性，该属性设置为重复3列，宽度为<code>1fr</code> 。 - text: '<code>container</code>类应该带有<code>grid-template-columns</code>属性且设置为重复 3 列，宽为<code>1fr</code>。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi));'
``` ```
@ -36,23 +61,23 @@ tests:
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5{background:PaleGreen;} .item5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
width: 100%; width: 100%;
background: LightGray; background: LightGray;
display: grid; display: grid;
/* change the code below this line */ /* 请修改本行以下的代码 */
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
/* change the code above this line */ /* 请修改本行以上的代码*/
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -60,7 +85,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -72,7 +96,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

47
curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.chinese.md
View File

@ -2,27 +2,38 @@
id: 5a9036ee38fddaf9a66b5d34 id: 5a9036ee38fddaf9a66b5d34
title: Use CSS Grid units to Change the Size of Columns and Rows title: Use CSS Grid units to Change the Size of Columns and Rows
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd'
localeTitle: 使用CSS网格单位更改网格列和网格行的大小 forumTopicId: 301134
localeTitle: 使用 CSS 网格单位来更改列和行的大小
--- ---
## Description ## Description
<section id="description">您可以在CSS Grid中使用绝对性和相对性的单位（列如<code>px</code>和<code>em</code>）来定义网格行和网格列的大小。您也可以使用这些： <section id='description'>
<code>fr</code> ：将网格列或网格行设置为可用空间的一小部分 在 CSS 网格中，可以使用绝对定位和相对定位单位如<code>px</code>和<code>em</code>来确定行或列的大小。下面的单位也可以使用：
<code>auto</code> ：将网格列或网格行设置为其内容的宽度或高度 <code>fr</code>：设置列或行占剩余空间的一个比例，
<code>%</code> ：将网格列或网格行调整为对应它的容器高宽度的百分比。 <code>auto</code>：设置列宽或行高自动等于它的内容的宽度或高度，
这是输出下面预览的代码： <blockquote> grid-template-columns：auto 50px 10％2fr 1fr; </blockquote>此代码段创建了五个网格列。第一个网格列与其内容一样宽，第二个网格列是50px，第三个网格列是其容器的10％。到最后两个网格列时，剩下的空间被分为三个部分，两个部分配给第四个网格列，一个部分配配给第五个网格列。 </section> <code>%</code>：将列或行调整为它的容器宽度或高度的百分比，
最右侧的预览区中的效果通过下面的代码实现：
```css
grid-template-columns: auto 50px 10% 2fr 1fr;
```
这段代码添加了五个列。第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。
</section>
## Instructions ## Instructions
<section id="instructions">创建一个包含三列的网格，其宽度如下：1fr，100px和2fr。 </section> <section id='instructions'>
生成一个包含三列的网格，每列宽度分别为：1fr，100px，和 2fr。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: '<code>container</code>类应该有一个<code>grid-template-columns</code>属性，该属性有三列，宽度如下： <code>1fr, 100px, and 2fr</code> 。' - text: '<code>container</code>类应该有<code>grid-template-columns</code>属性，且生成宽为<code>1fr, 100px</code>和<code>2fr</code>的三列。'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.");' testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi));'
``` ```
@ -40,21 +51,21 @@ tests:
.d3{background:PaleTurquoise;} .d3{background:PaleTurquoise;}
.d4{background:LightPink;} .d4{background:LightPink;}
.d5{background:PaleGreen;} .d5{background:PaleGreen;}
.container { .container {
font-size: 40px; font-size: 40px;
width: 100%; width: 100%;
background: LightGray; background: LightGray;
display: grid; display: grid;
/* modify the code below this line */ /* 请修改本行以下的代码 */
grid-template-columns: auto 50px 10% 2fr 1fr; grid-template-columns: auto 50px 10% 2fr 1fr;
/* modify the code above this line */ /* 请修改本行以上的代码 */
grid-template-rows: 50px 50px; grid-template-rows: 50px 50px;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="d1">1</div> <div class="d1">1</div>
<div class="d2">2</div> <div class="d2">2</div>
@ -62,7 +73,6 @@ tests:
<div class="d4">4</div> <div class="d4">4</div>
<div class="d5">5</div> <div class="d5">5</div>
</div> </div>
``` ```
</div> </div>
@ -74,7 +84,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

47
curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.chinese.md
View File

@ -2,23 +2,40 @@
id: 5a94fe2669fb03452672e45e id: 5a94fe2669fb03452672e45e
title: Use grid-area Without Creating an Areas Template title: Use grid-area Without Creating an Areas Template
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
localeTitle: 在不创建网格区域模板的情况下使用网格区域 forumTopicId: 301135
localeTitle: 使用 grid-area 创建区域模板
--- ---
## Description ## Description
<section id="description">您在上一次挑战中学习的<code>grid-area</code>属性可以以其他方式使用。如果您的网格没有可引用的网格区域模板，您可以当场创建一个网格区域来放置项目，例如： <blockquote> item1 {grid-area：1/1/2/4; } </blockquote>这个区域用了您之前刚学过的网格行号来定义项目的地点。上例中的数字的意思是： <blockquote>grid-area (网格区域)：水平线开始于/垂直线开始于/水平线结束于/垂直线结束于; </blockquote>因此，示例中的项目将使用第一个网格横线和第2个网格横线之间的网格行以及第一个网格纵线和第四个网格纵线之间的网格列。 </section> <section id='description'>
你在上一次挑战中学到的<code>grid-area</code>属性有另一种使用方式。如果网格中没有定义区域模板，你也可以像这样为它添加一个模板：
```css
item1 { grid-area: 1/1/2/4; }
```
这里使用了你之前学习的网格线编号来定义网格项的区域。上例中数字代表这些值：
```css
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
```
因此，示例中的网格项将占用第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。
</section>
## Instructions ## Instructions
<section id="instructions">使用<code>grid-area</code>属性，将带<code>item5</code>class的元素放置到第三和第四条网格横线之间以及第一条和第四条网格纵线之间。 </section> <section id='instructions'>
请用<code>grid-area</code>属性将类为<code>item5</code>的元素放置在第 3 条和第 4 条水平网格线及第 1 条和第 4 条水平网格线之间的区域内。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>item5</code>类应具有<code>grid-area</code>属性，使其位于第三和第四水平线之间以及第一和第四垂直线之间。 - text: '<code>item5</code>类应该有<code>grid-area</code>属性且值为<code>3/1/4/4</code>。'
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code>类应具有<code>grid-area</code>属性，使其位于第三和第四水平线之间以及第一和第四垂直线之间。");' testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi));'
``` ```
@ -35,15 +52,15 @@ tests:
.item2{background:LightSalmon;} .item2{background:LightSalmon;}
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5 { .item5 {
background: PaleGreen; background: PaleGreen;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -55,7 +72,7 @@ tests:
grid-gap: 10px; grid-gap: 10px;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -63,7 +80,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -75,7 +91,10 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```js
// solution required // solution required
``` ```
</section> </section>

59
curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.chinese.md
View File

@ -2,23 +2,47 @@
id: 5a90372638fddaf9a66b5d38 id: 5a90372638fddaf9a66b5d38
title: Use grid-column to Control Spacing title: Use grid-column to Control Spacing
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
localeTitle: 使用grid-column(网格列)控制间距 forumTopicId: 301136
localeTitle: 使用 grid-column 来控制空间大小
--- ---
## Description ## Description
<section id="description">到目前为止，所讨论的所有属性都是针对网格容器的。 <code>grid-column</code>属性是第一个用于网格项本身的属性。网格的水平线和垂直线被称为<dfn>line</dfn> 。这些线在网格的左上角从1号线开始，从左向右，从上向下移动。3x3的网格线条是这个样子： <div style="position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;"><p style="left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;">列线</p><p style="left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 1 </p><p style="left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 2 </p><p style="left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 3 </p><p style="left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 4 </p><p style="left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;">横向线</p><p style="left:-10%;top:-10%;font-size:130%;position:absolute;"> 1 </p><p style="left:-10%;top:21%;font-size:130%;position:absolute;"> 2 </p><p style="left:-10%;top:53%;font-size:130%;position:absolute;"> 3 </p><p style="left:-10%;top:85%;font-size:130%;position:absolute;"> 4 </p><div style="left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;"></div></div>如果要控制项目是怎么占用的列数的话，您可以在<code>grid-column</code>属性后面加入您希望的项目开始和结束的网格线号。例如： <blockquote> grid-column：1/3; </blockquote>这将会让使项目从左侧第一条网格垂直线开始，一直延伸到网格的第3条线，占据两个网格列。 </section> <section id='description'>
到目前为止，所有的讨论都是围绕网格容器的。<code>grid-column</code>属性是第一个用于网格项本身的属性。
网格的假想水平线和垂直线被称为<dfn>线（lines）</dfn>。这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。
这是一个 3x3 网格的线条：
<div style="position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;"><p style="left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;">column lines</p><p style="left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">1</p><p style="left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">2</p><p style="left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">3</p><p style="left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">4</p><p style="left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;">row lines</p><p style="left:-10%;top:-10%;font-size:130%;position:absolute;">1</p><p style="left:-10%;top:21%;font-size:130%;position:absolute;">2</p><p style="left:-10%;top:53%;font-size:130%;position:absolute;">3</p><p style="left:-10%;top:85%;font-size:130%;position:absolute;">4</p><div style="left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;"></div></div>
你可以用<code>grid-column</code>属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。
示例如下：
```css
grid-column: 1 / 3;
```
这会让网格项从左侧第一条线开始到第三条线结束，占用两列。
</section>
## Instructions ## Instructions
<section id="instructions">使用<code>item5</code>class使项目占据网络格的最后两列。 </section> <section id='instructions'>
使类为<code>item5</code>的网格项占用网格的最后两列。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>item5</code>类应该有一个<code>grid-column</code>具有的值属性<code>2 / 4</code> - text: '<code>item5</code>类应该有<code>grid-column</code>属性且其值为<code>2 / 4</code>。'
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.");' testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi));'
- text: '<code>item5</code> 类应该有 <code>grid-column</code> 属性使其占用网格最后两列。'
testString: "
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
const result = colStart.toString() + colEnd.toString();
const correctResults = ['24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2'];
assert(correctResults.includes(result));
"
``` ```
@ -35,15 +59,15 @@ tests:
.item2{background:LightSalmon;} .item2{background:LightSalmon;}
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5 { .item5 {
background: PaleGreen; background: PaleGreen;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -55,7 +79,7 @@ tests:
grid-gap: 10px; grid-gap: 10px;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -63,19 +87,18 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js
```html
// solution required // solution required
``` ```
</section> </section>

44
curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.chinese.md
View File

@ -2,23 +2,36 @@
id: 5a90373638fddaf9a66b5d39 id: 5a90373638fddaf9a66b5d39
title: Use grid-row to Control Spacing title: Use grid-row to Control Spacing
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4'
localeTitle: 使用网格行控制间距 forumTopicId: 301137
localeTitle: 使用 grid-row 来控制空间大小
--- ---
## Description ## Description
<section id="description">当然，像网格列一样，您也可以使一个项目同时占据多个网格行。您可以使用<code>grid-row</code>属性来定义项目开始和结束的网格行。 </section> <section id='description'>
当然，和设置一个网格项占用多列一样，你也可以设置它占用多行。你可以使用<code>grid-row</code>属性来定义一个网格项开始和结束的水平线。
</section>
## Instructions ## Instructions
<section id="instructions">让带有<code>item5</code>class选择器的元素占有最后两排网格行。 </section> <section id='instructions'>
使类为<code>item5</code>的元素占用最后两行。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: <code>item5</code>class应该有一个具有<code>2 / 4</code>值属性的<code>grid-row</code>. - text: '<code>item5</code>类应该有<code>grid-row</code>属性且值为<code>2 / 4</code>。'
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.");' testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi));'
- text: '<code>item5</code> class 应该有 <code>grid-row</code> 属性使其占用网格最后两行。'
testString: "
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
const result = rowStart.toString() + rowEnd.toString();
const correctResults = ['24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2'];
assert(correctResults.includes(result));
"
``` ```
@ -35,16 +48,16 @@ tests:
.item2{background:LightSalmon;} .item2{background:LightSalmon;}
.item3{background:PaleTurquoise;} .item3{background:PaleTurquoise;}
.item4{background:LightPink;} .item4{background:LightPink;}
.item5 { .item5 {
background: PaleGreen; background: PaleGreen;
grid-column: 2 / 4; grid-column: 2 / 4;
/* add your code below this line */ /* 请在本行以下添加你的代码 */
/* add your code above this line */ /* 请在本行以上添加你的代码 */
} }
.container { .container {
font-size: 40px; font-size: 40px;
min-height: 300px; min-height: 300px;
@ -56,7 +69,7 @@ tests:
grid-gap: 10px; grid-gap: 10px;
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">1</div> <div class="item1">1</div>
<div class="item2">2</div> <div class="item2">2</div>
@ -64,7 +77,6 @@ tests:
<div class="item4">4</div> <div class="item4">4</div>
<div class="item5">5</div> <div class="item5">5</div>
</div> </div>
``` ```
</div> </div>
@ -76,7 +88,9 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required // solution required
``` ```
</section> </section>

45
curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.chinese.md
View File

@ -2,23 +2,29 @@
id: 5a94fe7769fb03452672e463 id: 5a94fe7769fb03452672e463
title: Use Media Queries to Create Responsive Layouts title: Use Media Queries to Create Responsive Layouts
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
localeTitle: 使用media queries创建响应式布局 forumTopicId: 301138
localeTitle: 使用媒体查询创建响应式布局
--- ---
## Description ## Description
<section id="description">您可以使用CSS Grid的media queries来使您的网站布局具有响应式的特征。media queries可以用于重新排列网格区域，更改网格尺寸的大小以及重新排列项目。在预览中，当视口宽度为300px或更大时，网格列数将会从1变为2.然后广告区域会完全占据左列。 </section> <section id='description'>
通过使用媒体查询重新排列网格区域，更改网格尺寸以及重新排列网格项位置，CSS 网格能轻松地使网站更具响应性。
在最右侧的预览区中，当网页可视区域的宽不小于 300px 时，列数从 1 变为 2。并且，广告（advertisement）区域完全占据左列。
</section>
## Instructions ## Instructions
<section id="instructions">当视口宽度为<code>400px</code>或更大时，使标题区域完全占据顶行，页脚区域完全占据底行。 </section> <section id='instructions'>
当网页可视区域的宽不小于<code>400px</code>时，使 header 区域完全占据最顶行，footer 区域完全占据最底行。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 当视口为<code>400px</code>或更多时， <code>container</code>类应具有<code>grid-template-areas</code>属性，其中页脚和标题区域分别占据顶行和底行，而advert和content占据中间行的左右列。 - text: '当网页可视区域的宽在<code>400px</code>及以上时，<code>container</code>类应该带有<code>grid-template-areas</code>属性且能够使得 footer 和 header 区域分别占据顶行和底行，advert 和 content 区域分别占据中间行的左和右列。'
testString: 'assert(code.match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.");' testString: 'assert(code.match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi));'
``` ```
@ -35,22 +41,22 @@ tests:
background: LightSkyBlue; background: LightSkyBlue;
grid-area: header; grid-area: header;
} }
.item2 { .item2 {
background: LightSalmon; background: LightSalmon;
grid-area: advert; grid-area: advert;
} }
.item3 { .item3 {
background: PaleTurquoise; background: PaleTurquoise;
grid-area: content; grid-area: content;
} }
.item4 { .item4 {
background: lightpink; background: lightpink;
grid-area: footer; grid-area: footer;
} }
.container { .container {
font-size: 1.5em; font-size: 1.5em;
min-height: 300px; min-height: 300px;
@ -66,7 +72,7 @@ tests:
"content" "content"
"footer"; "footer";
} }
@media (min-width: 300px){ @media (min-width: 300px){
.container{ .container{
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@ -77,28 +83,27 @@ tests:
"advert footer"; "advert footer";
} }
} }
@media (min-width: 400px){ @media (min-width: 400px){
.container{ .container{
/* change the code below this line */ /* 请修改本行以下的代码 */
grid-template-areas: grid-template-areas:
"advert header" "advert header"
"advert content" "advert content"
"advert footer"; "advert footer";
/* change the code above this line */ /* 请修改本行以上的代码*/
} }
} }
</style> </style>
<div class="container"> <div class="container">
<div class="item1">header</div> <div class="item1">header</div>
<div class="item2">advert</div> <div class="item2">advert</div>
<div class="item3">content</div> <div class="item3">content</div>
<div class="item4">footer</div> <div class="item4">footer</div>
</div> </div>
``` ```
</div> </div>
@ -110,7 +115,9 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required // solution required
``` ```
</section> </section>