chore(i18n,learn): processed translations (#41378)
* chore(i8n,learn): processed translations * Update curriculum/challenges/chinese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
camperbot
GitHub
@ -17,7 +17,7 @@ dashedName: add-gaps-faster-with-grid-gap
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `container` 的元素应具有 `grid-gap` 属性，并将行间距设置为 `10px`，列间距设置为 `20px`。
|
||||
`container` class 应该有一个 `grid-gap` 属性，在行之间设置 `10px` 的间距，在列之间设置 `20px` 的间距。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: add-rows-with-grid-template-rows
|
||||
|
||||
# --description--
|
||||
|
||||
在上个挑战中，你创建的网格会自动设置行数。 你可以用 `grid-template-rows` 设置网格的行，就像用 `grid-template-columns` 设置网格的列那样。
|
||||
在上个挑战中，你创建的网格会自动设置行数。 要手动调整行，请使用 `grid-template-rows` 属性，就像在上一个挑战中使用 `grid-template-columns` 属性一样。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ dashedName: create-flexible-layouts-using-auto-fit
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `container2` 的元素应具有 `grid-template-columns` 属性，且属性值应使用 `repeat` 和 `auto-fit`，以便将最小宽度为 `60px`、最大宽度为 `1fr` 的列填充至网格。
|
||||
`container2` class 应该有一个 `grid-template-columns` 属性，通过 `repeat` 和 `auto-fit` 将网格中的列的宽度设置为最小 `60px`，最大 `1fr`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
|
||||
# --description--
|
||||
|
||||
像上一个挑战那样，在为网格添加区域模板后，你可以通过引用你所定义的区域的名称，将元素放入相应的区域。 为此，你需要对网格项使用 `grid-area`：
|
||||
像上一个挑战那样，在为网格添加区域模板后，可以通过引用你所定义的区域的名称，将元素放入相应的区域。 为此，你需要对网格项使用 `grid-area`：
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
|
||||
@ -17,7 +17,7 @@ dashedName: use-grid-column-to-control-spacing
|
||||
|
||||
<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>
|
||||
|
||||
你可以用 `grid-column` 属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。
|
||||
要设置一个网格项占据几列，你可以使用 `grid-column` 属性加上网格线条的编号来定义网格项开始和结束的位置。
|
||||
|
||||
示例如下：
|
||||
|
||||
|
||||
Reference in New Issue
Block a user