Chinese translation of responsive-web-design (#40607)
This commit is contained in:
@ -8,7 +8,7 @@ forumTopicId: 301117
|
||||
|
||||
# --description--
|
||||
|
||||
简单地添加一个网格元素并不会有任何明显的效果。你还需要明确网格的结构。在一个网格容器中使用`grid-template-columns`属性可以添加一些列,示例如下:
|
||||
简单地添加一个网格元素并不会有任何明显的效果。你还需要明确网格的结构。在一个网格容器中使用 `grid-template-columns` 属性可以添加一些列,示例如下:
|
||||
|
||||
```css
|
||||
.container {
|
||||
@ -17,15 +17,15 @@ forumTopicId: 301117
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码可以在网格容器中添加两列,宽度均为 50px。 `grid-template-columns`属性值的个数表示网格的列数,而每个值表示对应列的宽度。
|
||||
上面的代码会在网格容器中添加两列,宽度均为 50px。`grid-template-columns` 属性值的个数表示网格的列数,每个值表示相应的列宽度。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给网格容器设置三个列,每列宽度均为`100px`。
|
||||
请给网格容器设置三个列,每列宽度均为 `100px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-columns`属性,该属性有三个值,均为`100px`。
|
||||
class 为 `container` 的元素应具有 `grid-template-columns` 属性,该属性应有三个属性值,均为 `100px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,15 +8,15 @@ forumTopicId: 1301118
|
||||
|
||||
# --description--
|
||||
|
||||
`grid-gap`属性是前两个挑战中的`grid-row-gap`属性和`grid-column-gap`属性的简写,它更方便使用。如果`grid-gap`只有一个值,那么这个值表示行与行之间、列与列之间的间距。如果`grid-gap`有两个值,那么第一个值表示行间距,第二个值表示列间距。
|
||||
`grid-gap` 属性是前两个挑战中出现的 `grid-row-gap` 和 `grid-column-gap` 的简写属性,它更方便使用。如果 `grid-gap` 只有一个值,那么这个值表示行与行之间、列与列之间的间距均为这个值。如果 `grid-gap` 有两个值,那么第一个值表示行间距,第二个值表示列间距。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用`grid-gap`属性设置行间距为`10px`,设置列间距为`20px`。
|
||||
请使用 `grid-gap` 属性设置行间距为 `10px`、列间距为 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-gap`属性,在行之间设置`10px`的间距,在列之间设置`20px`的间距。
|
||||
class 为 `container` 的元素应具有 `grid-gap` 属性,并将行间距设置为 `10px`,列间距设置为 `20px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,15 +8,15 @@ forumTopicId: 301119
|
||||
|
||||
# --description--
|
||||
|
||||
在上个挑战中,你创建的网格会自动设置行数。你可以像用`grid-template-columns`设置网格的列一样,用`grid-template-rows`设置网格的行。
|
||||
在上个挑战中,你创建的网格会自动设置行数。你可以用 `grid-template-rows` 设置网格的行,就像用 `grid-template-columns` 设置网格的列那样。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给网格添加两行,使每行高度均为`50px`。
|
||||
请给网格添加两行,使每行高度均为 `50px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-rows`属性,且该属性的两个值均为`50px`
|
||||
类为 `container` 的元素应具有 `grid-template-rows` 属性,且该属性的两个属性值均为 `50px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,15 +8,15 @@ forumTopicId: 301120
|
||||
|
||||
# --description--
|
||||
|
||||
有时你想让 CSS 网格中的网格项共享对齐方式。你可以像之前学习的那样分别设置它们的对齐方式,也可以对网格容器使用`justify-items`使它们一次性沿行轴对齐。对于这个属性你能使用在之前的两个挑战中学到的所有值,与之前不同的是,它将使网格中**所有**的网格项按所设置的方式对齐。
|
||||
有时你想让 CSS 网格中的网格项共享对齐方式。你可以像之前学习的那样分别设置它们的对齐方式,也可以对网格容器使用 `justify-items` 使它们一次性沿水平轴对齐。这个属性能接受我们在之前两个挑战中学到的所有值作为属性值,但与之前不同的是,它会将网格中**所有**的网格项按所设置的方式对齐。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用`justify-items`属性设置所有网格项水平居中。
|
||||
请使用 `justify-items` 属性设置所有网格项水平居中。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`justify-items`属性且值为`center`。
|
||||
class 为 `container` 的元素应具有 `justify-items` 属性且属性值应为 `center`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,15 +8,15 @@ forumTopicId: 301121
|
||||
|
||||
# --description--
|
||||
|
||||
对网格容器使用`align-items`属性可以给网格中所有的网格项设置沿列轴对齐的方式。
|
||||
对网格容器使用 `align-items` 属性可以让网格中所有的网格项沿竖直方向对齐。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请使用`align-items`属性将所有网格项移动到单元格的末尾。
|
||||
请使用 `align-items` 属性将所有网格项移动到单元格的末尾。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`align-items`属性且值为`end`。
|
||||
class 为 `container` 的元素应具有 `align-items` 属性且属性值应为 `end`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,7 +8,7 @@ forumTopicId: 301122
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 网格中,每个网格项的内容分别位于被称为<dfn>单元格(cell)</dfn>的框内。你可以使用网格项的`justify-self`属性,设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下,这个属性的值是`stretch`,这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值:
|
||||
在 CSS 网格中,每个网格项的内容分别位于被称为<dfn>单元格(cell)</dfn>的框内。你可以使用网格项的 `justify-self` 属性,设置其内容的位置在单元格内沿水平轴的对齐方式。默认情况下,这个属性的值是 `stretch`,这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值:
|
||||
|
||||
`start`:使内容在单元格左侧对齐,
|
||||
|
||||
@ -18,11 +18,11 @@ forumTopicId: 301122
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用`justify-self`属性让类为`item2`的网格项居中。
|
||||
请使用 `justify-self` 属性让 class 为 `item2` 的网格项居中。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item2`类应该有`justify-self`属性且值为`center`。
|
||||
class 为 `item2` 的元素应具有 `justify-self` 属性且属性值应为 `center`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,15 +8,15 @@ forumTopicId: 301123
|
||||
|
||||
# --description--
|
||||
|
||||
正如能设置网格项沿行轴对齐方式一样,也可以设置网格项沿列轴对齐:你可以对网格项使用`align-self`属性。在上一个挑战中适用于`justify-self`属性的每个值也都适用于`align-self`属性。
|
||||
正如能设置网格项沿水平方向的对齐方式一样,我们也可以设置网格项沿竖直方向的对齐方式。为此,我们可以对网格项使用 `align-self` 属性来实现。在上一个挑战中适用于 `justify-self` 属性的属性值同样也可用于 `align-self`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
用值`end`使类为`item3`的网格项底端对齐。
|
||||
请使用值 `end` 来让 class 为 `item3` 的网格项沿底端对齐。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item3`类应该有`align-self`属性且值为`end`。
|
||||
class 为 `item3` 的元素应具有 `align-self` 属性且属性值应为 `end`。
|
||||
|
||||
```js
|
||||
assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
|
@ -8,21 +8,21 @@ forumTopicId: 301124
|
||||
|
||||
# --description--
|
||||
|
||||
到目前为止,在你所建立的网格中列都相互紧挨着。如果需要在列与列之间添加一些间距,我们可以使用`grid-column-gap`:
|
||||
目前为止,在你所创建的网格中,每列都相互紧挨着。如果需要在列与列之间添加一些间距,我们可以使用 `grid-column-gap`:
|
||||
|
||||
```css
|
||||
grid-column-gap: 10px;
|
||||
```
|
||||
|
||||
这会在我们创建的所有列之间添加 10px 的空白间距。
|
||||
这会为我们创建的所有列之间都添加 10px 的空白间距。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为网格中的列添加宽度为`20px`的间距。
|
||||
请为网格中的所有列添加宽度为 `20px` 的间距。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-column-gap`属性且值为`20px`。
|
||||
class 为 `container` 的元素应具有 `grid-column-gap` 属性且属性值应为 `20px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,15 +8,15 @@ forumTopicId: 301125
|
||||
|
||||
# --description--
|
||||
|
||||
和上个挑战在两列之间添加间距一样,你可以用`grid-row-gap`在两行之间设置间距。
|
||||
和上个挑战在两列之间添加间距一样,我们还可以用 `grid-row-gap` 设置行间距。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为网格中的行添加高度为`5px`的间距。
|
||||
请为网格中的行添加高度为 `5px` 的间距。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-row-gap`属性且值为`5px`。
|
||||
class 为 `container` 的元素应具有 `grid-row-gap` 属性且属性值应为 `5px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,23 +8,23 @@ forumTopicId: 301126
|
||||
|
||||
# --description--
|
||||
|
||||
重复方法带有一个名为<dfn>自动填充(auto-fill)</dfn>的功能。它的功能是根据容器的大小,尽可能多地放入指定大小的行或列。你可以通过结合`auto-fill`和`minmax`来更灵活地布局。
|
||||
`repeat` 方法带有一个名为<dfn>自动填充(auto-fill)</dfn>的功能。它的功能是根据容器的大小,尽可能多地放入指定大小的行或列。你可以通过结合 `auto-fill` 和 `minmax` 来更灵活地布局。
|
||||
|
||||
在最右侧的预览区中,`grid-template-columns`被设置为:
|
||||
在最右侧的预览区中,`grid-template-columns` 被设置为:
|
||||
|
||||
```css
|
||||
repeat(auto-fill, minmax(60px, 1fr));
|
||||
```
|
||||
|
||||
上面的代码效果:列的宽度会随容器大小改变,在可以插入一个 60px 宽的列之前,当前行的所有列会一直拉伸(译者注:动手试一下你就明白了)。 **注意:** 如果容器无法使所有网格项放在同一行,余下的网格项将移至新的一行。
|
||||
上面的代码效果是这样:首先,列的宽度会随容器大小改变。其次,只要容器宽度不足以插入一个宽为 60px 的列,当前行的所有列就都会一直拉伸。请自己调整宽度,动手试一下就不难理解了。**注意:**如果容器宽度不足以将所有网格项放在同一行,余下的网格项将会移至新的一行。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在第一个网格中,用`auto-fill`和`repeat`来填充网格,其中列宽的最小值为`60px`,最大值为`1fr`。你可以调整最右侧的预览区大小,查看自动填充效果。
|
||||
在第一个网格中,请使用 `auto-fill` 和 `repeat` 来填充网格。其中列宽的最小值为 `60px`,最大值为 `1fr`。你可以调整最右侧的预览区大小,查看自动填充的效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-columns`属性且使用`repeat`和`auto-fill`,以便将最小宽度为`60px`,最大宽度为`1fr`的列填充至网格。
|
||||
class 为 `container` 的元素应具有 `grid-template-columns` 属性,且属性值应使用 `repeat` 和 `auto-fill`,以便将最小宽度为 `60px`、最大宽度为 `1fr` 的列填充至网格。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,18 +8,17 @@ forumTopicId: 301127
|
||||
|
||||
# --description--
|
||||
|
||||
`auto-fit`效果几乎和`auto-fill`一样。不同点仅在于,当容器的大小大于各网格项之和时,`auto-fill`将会持续地在一端放入空行或空列,这样就会使所有网格项挤到另一边;而`auto-fit`则不会在一端放入空行或空列,而是会将所有网格项拉伸至合适的大小。
|
||||
`auto-fit` 效果几乎和 `auto-fill` 一样。不同点仅在于,当容器的大小大于各网格项之和时,`auto-fill` 会持续地在一端放入空行或空列,这样就会使所有网格项挤到另一边;而 `auto-fit` 则不会在一端放入空行或空列,而是会将所有网格项拉伸至合适的大小。
|
||||
|
||||
**注意:**
|
||||
如果容器无法使所有网格项放在同一行,余下的网格项将移至新的一行。
|
||||
**注意:**如果容器宽度不足以将所有网格项放在同一行,余下的网格项将会移至新的一行。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在第二个网格中,用`auto-fit`和`repeat`来填充网格,其中列宽的最小值为`60px`,最大值为`1fr`。你可以调整最右侧的预览区以查看差异。
|
||||
在第二个网格中,请用 `auto-fit` 和 `repeat` 来填充网格,其中列宽的最小值为 `60px`,最大值为`1fr`。你可以调整最右侧的预览区来查看效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container2`类应该有`grid-template-columns`属性,且使用`repeat`和`auto-fit`以便将最小宽度为`60px`,最大宽度为`1fr`的列放入网格。
|
||||
class 为 `container2` 的元素应具有 `grid-template-columns` 属性,且属性值应使用 `repeat` 和 `auto-fit`,以便将最小宽度为 `60px`、最大宽度为 `1fr` 的列填充至网格。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,17 +8,17 @@ forumTopicId: 301128
|
||||
|
||||
# --description--
|
||||
|
||||
将元素转换为网格只会影响其子代元素。因此,在把某个子代元素设置为网格后,就会得到一个嵌套的网格。
|
||||
将元素转换为网格只会影响其子元素(即直接后代元素,英文为 `direct descendants`。意思是一个元素的所有后代元素中,父级元素为该元素的所有元素)。因此,如果我们把某个子元素设置为网格,就会得到一个嵌套的网格。
|
||||
|
||||
例如,设置类为`item3`的元素的`display`和`grid-template-columns`属性,就会得到一个嵌套的网格。
|
||||
例如,如果我们设置 class 为 `item3` 的元素的 `display` 和 `grid-template-columns` 属性,就会得到一个嵌套的网格。
|
||||
|
||||
# --instructions--
|
||||
|
||||
用`display`和`grid-template-columns`,使类为`item3`元素转换为有两列且宽度为`auto`和`1fr`的网格。
|
||||
请设置 `display` 和 `grid-template-columns`,使类为 `item3` 元素转换为有两列且宽度为 `auto` 和 `1fr` 的网格。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item3`类应该有`grid-template-columns`属性且值为`auto`和`1fr`。
|
||||
class 为 `item3` 的元素应具有 `grid-template-columns` 属性且属性值应为 `auto` 和 `1fr`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -28,7 +28,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`item3`类有`display`属性且值为`grid`。
|
||||
class 为 `item3` 的元素应具有 `display` 属性且属性值应为 `grid`。
|
||||
|
||||
```js
|
||||
assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
|
@ -8,18 +8,17 @@ forumTopicId: 301129
|
||||
|
||||
# --description--
|
||||
|
||||
通过将属性`display`的值设为`grid`,使 HTML 元素变为网格容器。通过前面的操作,你可以对该容器使用与 CSS 网格(CSS Grid)相关的属性。
|
||||
通过将属性 `display` 的值设为 `grid`,HTML 元素就可以变为网格容器。通过前面的操作,你可以对该容器使用与 CSS 网格(CSS Grid)相关的属性。
|
||||
|
||||
**注意:**
|
||||
在 CSS 网格中,父元素称为<dfn>容器(container)</dfn>,它的子元素称为<dfn>项(items)</dfn>。
|
||||
**注意:**在 CSS 网格中,父元素称为<dfn>容器(container)</dfn>,它的子元素称为<dfn>项(items)</dfn>。
|
||||
|
||||
# --instructions--
|
||||
|
||||
将类为`container`的 div 的`display`属性改为`grid`。
|
||||
请将 class 为 `container` 的 `div` 的 `display` 属性值设置为 `grid`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`display`属性且值为`grid`。
|
||||
class 为 `container` 的 `div` 元素应具有 `display` 属性且属性值应为 `grid`。
|
||||
|
||||
```js
|
||||
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
|
@ -8,7 +8,7 @@ forumTopicId: 301130
|
||||
|
||||
# --description--
|
||||
|
||||
你可以将网格中的一些网格单元格组合成一个<dfn>区域(area)</dfn>,并为该区域指定一个自定义名称。你可以通过给容器加上`grid-template-areas`来实现:
|
||||
你可以将网格中的一些单元格组合成一个<dfn>区域(area)</dfn>,并为该区域指定一个自定义名称。可以通过给容器加上 `grid-template-areas` 来实现:
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
@ -17,16 +17,15 @@ grid-template-areas:
|
||||
"footer footer footer";
|
||||
```
|
||||
|
||||
上面的代码将顶部三个单元格合并成一个名为`header`的区域,将底部三个单元格合并为一个名为`footer`的区域,并在中间行生成两个区域————`advert`和`content`。 **注意:**
|
||||
在代码中,每个单词代表一个网格单元格,每对引号代表一行。 除了自定义标签,你还能使用句点(`.`)来表示一个空单元格。
|
||||
上面的代码将顶部三个单元格合并成一个名为 `header` 的区域,将底部三个单元格合并为一个名为 `footer` 的区域,并在中间行创建了两个区域:`advert` 和 `content`。**注意:**在代码中,每个单词代表一个网格单元格,每对引号代表一行。除了自定义标签,你还能使用句点(`.`)来表示一个空单元格。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请放置区域模板,让名为`advert`的区域变成空单元格。
|
||||
请放置区域模板,让名为 `advert` 的区域变成空单元格。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有类似于最右侧预览区的`grid-template-areas`属性且用`.`代替`advert`。
|
||||
class 为 `container` 的元素应具有 `grid-template-areas` 属性,在其属性值中,应使用 `.` 代替 `.advert`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,21 +8,21 @@ forumTopicId: 301131
|
||||
|
||||
# --description--
|
||||
|
||||
此外,内置函数`minmax`也可以可用于设置`grid-template-columns`和`grid-template-rows`的值。它的作用是在网格容器改变大小时限制网格项的大小。为此,你需要指定网格项允许的尺寸范围。例如:
|
||||
此外,内置函数 `minmax` 也可用于设置 `grid-template-columns` 和 `grid-template-rows` 的值。它的作用是在网格容器改变大小时限制网格项的大小。为此,你需要指定网格项允许的尺寸范围。例如:
|
||||
|
||||
```css
|
||||
grid-template-columns: 100px minmax(50px, 200px);
|
||||
```
|
||||
|
||||
在上面的代码中,通过`grid-template-columns`添加两列,第一列宽度为 100px,第二列宽度最小值是 50px,最大值是 200px。
|
||||
在上面的代码中,我们通过 `grid-template-columns` 添加了两列,第一列宽度为 100px,第二列宽度最小值是 50px,最大值是 200px。
|
||||
|
||||
# --instructions--
|
||||
|
||||
用`minmax`函数替换`repeat`函数中的`1fr`,限定其最小值为`90px`,最大值为`1fr`,你可以调整最右侧的预览面板查看效果。
|
||||
请用 `minmax` 函数替换 `repeat` 函数中的 `1fr`,限定其最小值为 `90px`,最大值为`1fr`。你可以调整最右侧的预览面板查看效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-columns`属性且设置重复 3 列,每列宽度最小值为`90px`,最大值为`1fr`。
|
||||
class 为 `container` 的元素应使用 `grid-template-columns` 属性设置 3 列,其中,每列最小宽度应为 `90px`,最大宽度应为 `1fr`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,7 +8,7 @@ forumTopicId: 301132
|
||||
|
||||
# --description--
|
||||
|
||||
像上一个挑战那样,在为网格添加区域模板后,你可以通过引用你所定义的区域的名称,将元素放入相应的区域。为此,你需要对网格项使用`grid-area`:
|
||||
像上一个挑战那样,在为网格添加区域模板后,你可以通过引用你所定义的区域的名称,将元素放入相应的区域。为此,你需要对网格项使用 `grid-area`:
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
@ -16,15 +16,15 @@ forumTopicId: 301132
|
||||
}
|
||||
```
|
||||
|
||||
这样,类名为`item1`的网格项就被放到了`header`区域里。在这个示例中,网格项将占用整个顶行,因为这一整行都被命名为 header 区域。
|
||||
这样,class 为 `item1` 的网格项就被放到了 `header` 区域里。在这个示例中,网格项将占用第一行整行,因为这一整行都被命名为 `header` 区域。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请使用`grid-area`属性,把类为`item5`元素放到`footer`区域。
|
||||
请使用 `grid-area` 属性,把 class 为 `item5` 的元素放到 `footer` 区域。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5`类应该有`grid-area`属性且值为`footer`。
|
||||
class 为 `item5` 的元素应具有 `grid-area` 属性且属性值应为 `footer`。
|
||||
|
||||
```js
|
||||
assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
|
||||
|
@ -8,17 +8,17 @@ forumTopicId: 301133
|
||||
|
||||
# --description--
|
||||
|
||||
当使用`grid-template-columns`和`grid-template-rows`定义网格结构时,你需要为添加的每一行和每一列都输入一个值。
|
||||
使用 `grid-template-columns` 或 `grid-template-rows` 定义网格结构时,你需要为添加的每一行或每一列都输入一个值。
|
||||
|
||||
如果一个网格共有 100 行,每行高度相同,就得输入 100 个值,这不太实际。幸运的是,有一种更好的方法——使用`repeat`方法指定行或列的重复次数,后面加上逗号以及需要重复的值。
|
||||
如果一个网格共有 100 行且每行高度相同,那我们就需要输入 100 个值,这显然不太实际。为此,更好的方式是使用 `repeat` 方法指定行或列的重复次数,后面加上逗号以及需要重复的值。
|
||||
|
||||
这里有一个添加 100 行网格的例子,使每行高度均为 50px:
|
||||
以下为添加 100 行网格的例子,每行高度均为 50px:
|
||||
|
||||
```css
|
||||
grid-template-rows: repeat(100, 50px);
|
||||
```
|
||||
|
||||
你还可以用 repeat 方法重复多个值,并在定义网格结构时与其他值一起使用。举个例子:
|
||||
你还可以用 repeat 方法重复多个值,并在定义网格结构时与其他值一起使用。比如:
|
||||
|
||||
```css
|
||||
grid-template-columns: repeat(2, 1fr 50px) 20px;
|
||||
@ -30,16 +30,15 @@ grid-template-columns: repeat(2, 1fr 50px) 20px;
|
||||
grid-template-columns: 1fr 50px 1fr 50px 20px;
|
||||
```
|
||||
|
||||
**注意:**
|
||||
`1fr 50px`重复了两次,后面跟着 20px。
|
||||
**注意:**`1fr 50px` 重复了两次,后面跟着 20px。
|
||||
|
||||
# --instructions--
|
||||
|
||||
用`repeat`代替`grid-template-columns`属性值中的重复代码。
|
||||
请用 `repeat` 代替 `grid-template-columns` 属性值中的重复代码。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该带有`grid-template-columns`属性且设置为重复 3 列,宽为`1fr`。
|
||||
class 为 `container` 的元素应具有 `grid-template-columns` 属性,其属性值应设置为重复 3 列,且每列宽度为 `1fr`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,15 +8,15 @@ forumTopicId: 301134
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 网格中,可以使用绝对定位和相对定位单位如`px`和`em`来确定行或列的大小。下面的单位也可以使用:
|
||||
在 CSS 网格中,可以使用绝对单位(如 `px`)或相对单位(如 `em`)来定义行或列的大小。下面的单位也可以使用:
|
||||
|
||||
`fr`:设置列或行占剩余空间的一个比例,
|
||||
`fr`:设置列或行占剩余空间的比例,
|
||||
|
||||
`auto`:设置列宽或行高自动等于它的内容的宽度或高度,
|
||||
|
||||
`%`:将列或行调整为它的容器宽度或高度的百分比,
|
||||
|
||||
最右侧的预览区中的效果通过下面的代码实现:
|
||||
以下代码为右侧预览区中的效果:
|
||||
|
||||
```css
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
@ -26,11 +26,11 @@ grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
|
||||
# --instructions--
|
||||
|
||||
生成一个包含三列的网格,每列宽度分别为:1fr,100px,和 2fr。
|
||||
生成一个包含三列的网格,每列宽度分别为:1fr、100px、2fr。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-columns`属性,且生成宽为`1fr, 100px`和`2fr`的三列。
|
||||
class 为 `container` 的元素应具有 `grid-template-columns` 属性且属性值应为 `1fr 100px 2fr`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,7 +8,7 @@ forumTopicId: 301135
|
||||
|
||||
# --description--
|
||||
|
||||
你在上一次挑战中学到的`grid-area`属性有另一种使用方式。如果网格中没有定义区域模板,你也可以像这样为它添加一个模板:
|
||||
我们在上一次挑战中学到的 `grid-area` 属性还有另一种使用方式。如果网格中没有定义区域模板,你也可以像这样为它添加一个模板:
|
||||
|
||||
```css
|
||||
item1 { grid-area: 1/1/2/4; }
|
||||
@ -17,18 +17,18 @@ 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;
|
||||
grid-area: 起始的水平网格线 / 起始的垂直网格线 / 结束的水平网格线 / 结束的垂直网格线;
|
||||
```
|
||||
|
||||
因此,示例中的网格项将占用第 1 条水平网格线(起始)和第 2 条水平网格线(终止)之间的行,及第 1 条垂直网格线(起始)和第 4 条垂直网格线(终止)之间的列。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请用`grid-area`属性将类为`item5`的元素放置在第 3 条和第 4 条水平网格线及第 1 条和第 4 条水平网格线之间的区域内。
|
||||
请用 `grid-area` 属性将 `class` 为 `item5` 的元素放置在第 3 条和第 4 条水平网格线,以及第 1 条和第 4 条垂直网格线之间的区域内。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5`类应该有`grid-area`属性且值为`3/1/4/4`。
|
||||
`class` 为 `item5` 的元素应具有 `grid-area` 属性且属性值应为 `3/1/4/4`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
@ -8,15 +8,15 @@ forumTopicId: 301136
|
||||
|
||||
# --description--
|
||||
|
||||
到目前为止,所有的讨论都是围绕网格容器的。`grid-column`属性是第一个用于网格项本身的属性。
|
||||
到目前为止,所有的讨论都是围绕网格容器的。`grid-column` 属性是我们要讨论的,第一个用于网格项本身的属性。
|
||||
|
||||
网格的假想水平线和垂直线被称为<dfn>线(lines)</dfn>。这些线在网格的左上角从 1 开始编号,垂直线向右、水平线向下累加计数。
|
||||
网格中,假想的水平线和垂直线被称为<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>
|
||||
|
||||
你可以用`grid-column`属性定义网格项开始和结束的位置,进而控制每个网格项占用的列数。
|
||||
你可以用 `grid-column` 属性定义网格项开始和结束的位置,进而控制每个网格项占用的列数。
|
||||
|
||||
示例如下:
|
||||
|
||||
@ -28,11 +28,11 @@ grid-column: 1 / 3;
|
||||
|
||||
# --instructions--
|
||||
|
||||
使类为`item5`的网格项占用网格的最后两列。
|
||||
请让 class 为 `item5` 的网格项占用网格的最后两列。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5`类应该有`grid-column`属性且其值为`2 / 4`。
|
||||
class 为 `item5` 的元素应具有 `grid-column` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`item5` 类应该有 `grid-column` 属性使其占用网格最后两列。
|
||||
class 为 `item5` 的元素应具有 `grid-column` 属性,其属性值应将元素设置为占用网格的最后两列。
|
||||
|
||||
```js
|
||||
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
|
||||
|
@ -8,15 +8,15 @@ forumTopicId: 301137
|
||||
|
||||
# --description--
|
||||
|
||||
当然,和设置一个网格项占用多列一样,你也可以设置它占用多行。你可以使用`grid-row`属性来定义一个网格项开始和结束的水平线。
|
||||
和设置一个网格项占用多列类似,你也可以设置它占用多行。你可以使用 `grid-row` 属性来定义一个网格项开始和结束的水平线。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使类为`item5`的元素占用最后两行。
|
||||
请让 class 为 `item5` 的元素占用最后两行。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5`类应该有`grid-row`属性且值为`2 / 4`。
|
||||
class 为 `item5` 的元素应具有 `grid-row` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -27,7 +27,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`item5` class 应该有 `grid-row` 属性使其占用网格最后两行。
|
||||
class 为 `item5` 的元素应具有 `grid-row` 属性,其属性值应将元素设置为占用网格的最后两行。
|
||||
|
||||
```js
|
||||
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
|
||||
|
@ -8,17 +8,17 @@ forumTopicId: 301138
|
||||
|
||||
# --description--
|
||||
|
||||
通过使用媒体查询重新排列网格区域,更改网格尺寸以及重新排列网格项位置,CSS 网格能轻松地使网站更具响应性。
|
||||
将 CSS 网格与使用媒体查询结合使用,如使用媒体查询重新排列网格区域、更改网格尺寸以及重新排列网格项位置,我们可以让制作出的网站更具响应性。
|
||||
|
||||
在最右侧的预览区中,当网页可视区域的宽不小于 300px 时,列数从 1 变为 2。并且,广告(advertisement)区域完全占据左列。
|
||||
在右侧的预览区中,当网页可视区域的宽不小于 300px 时,列数从 1 变为 2。并且,广告(advertisement)区域会完全占据左列。
|
||||
|
||||
# --instructions--
|
||||
|
||||
当网页可视区域的宽不小于`400px`时,使 header 区域完全占据最顶行,footer 区域完全占据最底行。
|
||||
当网页可视区域的宽不小于 `400px` 时,请让 header 区域完全占据最顶行,footer 区域完全占据最底行。
|
||||
|
||||
# --hints--
|
||||
|
||||
当网页可视区域的宽在`400px`及以上时,`container`类应该带有`grid-template-areas`属性且能够使得 footer 和 header 区域分别占据顶行和底行,advert 和 content 区域分别占据中间行的左和右列。
|
||||
当网页可视区域的宽度为 `400px` 或以上时,class 为 `container` 的元素应具有 `grid-template-areas` 属性,其属性值能够使 footer 和 header 区域分别占据顶行和底行,advert 和 content 区域分别占据中间行的左列和右列。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
Reference in New Issue
Block a user