chore(i8n,curriculum): processed translations (#41548)
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
camperbot
GitHub
@@ -11,17 +11,19 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
|
||||
之前的关卡里介绍了一些动画属性以及 `@keyframes` 规则的用法。 还有一个常用的动画属性是 `animation-iteration-count`，这个属性允许你控制动画循环的次数。 下面是一个例子：
|
||||
|
||||
`animation-iteration-count: 3;`
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
在这种情况下，动画将在运行 3 次后停止，但可以通过设置该值为 `infinite` 来继续运行动画。
|
||||
在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 `infinite`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `animation-iteration-count` 属性值改成 `infinite`，以使右边的球持续跳跃。
|
||||
把 `animation-iteration-count` 属性改成 `infinite`，使右边的球一直跳跃。
|
||||
|
||||
# --hints--
|
||||
|
||||
`animation-iteration-count` 属性应有一个值 `infinite`。
|
||||
`animation-iteration-count` 属性的值应为 `infinite`。
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
@@ -11,21 +11,25 @@ dashedName: create-a-gradual-css-linear-gradient
|
||||
|
||||
HTML 元素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。 可通过 `background` 里的 `linear-gradient()` 实现线性渐变， 以下是它的语法：
|
||||
|
||||
`background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);`
|
||||
```css
|
||||
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||
```
|
||||
|
||||
第一个参数用来表明颜色渐变的初始方向。 它的值是一个角度，比如 `90deg` 代表水平渐变（从左到右），再比如 `45deg` 代表对角线方向的渐变（从左下到右上）。 后续的参数指定了渐变颜色的顺序。
|
||||
第一个参数指定了颜色过渡的方向——它的值是角度，`90deg` 表示垂直渐变（从左到右），`45deg` 表示沿对角线渐变（从左下方到右上方）。 其他参数指定了渐变颜色的顺序：
|
||||
|
||||
例如：
|
||||
|
||||
`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
|
||||
```css
|
||||
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `linear-gradient()` 将 `div` 的 `background` 设置为渐变色，渐变的起始角度为 35 度，颜色从 `#CCFFFF` 过渡到 `#FFCCCC`。
|
||||
使用 `linear-gradient()` 给 `div` 元素添加 `background` 渐变色，渐变角度为 35 度，从 `#CCFFFF` 过渡到 `#FFCCCC`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 元素应有一个指定方向和颜色的 `linear-gradient` 来设置 `background`。
|
||||
`div` 元素应有一个指定方向和颜色的 `linear-gradient` `background`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -15,17 +15,19 @@ dashedName: learn-how-bezier-curves-work
|
||||
|
||||
`cubic-bezier` 函数包含了 1 * 1 网格里的4个点：`p0`、`p1`、`p2`、`p3`。 其中 `p0` 和 `p3` 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。 你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。 在 CSS 里面通过 `(x1, y1, x2, y2)` 来确定 `p1` 和 `p2`。 以下就是 CSS 贝塞尔曲线的例子：
|
||||
|
||||
`animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);`
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
```
|
||||
|
||||
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。 动画速度呈线性，效果和 `linear` 一致。 换言之，元素会匀速运动。
|
||||
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2）。如果你还记得几何课的知识，结果是从原点到点 (1, 1) 的一条直线。 元素在动画中的速度呈线性，效果和使用 `linear` 关键词的效果一致。 换言之，元素匀速运动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 `linear` 变成等价的 `cubic-bezier` 函数值。 也就是使用上面例子给的值。
|
||||
对于 id 为 `ball1` 的元素，把 `animation-timing-function` 属性的值从 `linear` 改为等价的 `cubic-bezier` 函数值。 也就是说使用上面例子给的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 linear 变成等价的 `cubic-bezier` 函数值。也就是使用上面例子给的值。
|
||||
id 为 `ball1` 的元素的 `animation-timing-function` 属性值应该为和 linear 预定值等价的 `cubic-bezier` 函数值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -34,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值应该保持不变。
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值不应改变。
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
|
||||
@@ -15,17 +15,19 @@ dashedName: make-motion-more-natural-using-a-bezier-curve
|
||||
|
||||
下面的例子模拟了杂耍球运动：
|
||||
|
||||
`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
|
||||
```css
|
||||
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||
```
|
||||
|
||||
注意 y2 的值是大于 1 的。 虽然贝塞尔曲线是在 1 * 1 的坐标系统内 x 值只能取 0 到 1，但是 y 值是可以大于 1 的。 这样我们才能模拟杂耍球运动。
|
||||
注意 y2 的值是大于 1 的。 虽然贝塞尔曲线是在 1*1 的坐标系统内，x 值只能在 0 到 1，但是 y 值是可以大于 1 的。 这样才能模拟杂耍球运动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 id 为 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函数，函数的参数 x1、y1、x2、y2 值依次为 0.311、0.441、0.444、1.649。
|
||||
把 id 为 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `green` 的元素的 `animation-timing-function` 属性值应为 `cubic-bezier` 函数，函数的参数 x1、y1、x2、y2 的值依次为 0.311、0.441、0.444、1.649。
|
||||
id 为 `green` 的元素的 `animation-timing-function` 值应为 `cubic-bezier` 函数，函数的参数 x1，y1，x2，y2 值应为指定值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -13,15 +13,17 @@ dashedName: modify-fill-mode-of-an-animation
|
||||
|
||||
为此，我们可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。 `animation-fill-mode` 指定了在动画结束时元素的样式： 你可以这样设置：
|
||||
|
||||
`animation-fill-mode: forwards;`
|
||||
```css
|
||||
animation-fill-mode: forwards;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改 `button:hover` 的 `animation-fill-mode` 属性值为 `forwards`，使按钮悬停时保持高亮。
|
||||
设置 `button:hover` 的 `animation-fill-mode` 属性为 `forwards`，使用户把鼠标悬停在按钮上时，按钮保持高亮。
|
||||
|
||||
# --hints--
|
||||
|
||||
`button:hover` 应该有一个值为 `forwards` 的 `animation-fill-mode` 的属性。
|
||||
`button:hover` 应有一个值为 `forwards` 的 `animation-fill-mode` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -13,17 +13,19 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
|
||||
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。 下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
|
||||
|
||||
`animation-timing-function: cubic-bezier(0, 0, 0.58, 1);`
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
```
|
||||
|
||||
记住所有的 `cubic-bezier` 函数都是从坐标为 (0, 0) 的 `p0` 开始，在坐标为 (1, 1) 的 `p3` 结束。 在这个例子里，曲线在 y 轴（从 0 开始，运动到 `p1` 的 0，然后运动到 `p2` 的 1）上移动的比在 x 轴（从 0 开始，运动到 `p1` 的 0，到 `p2` 的 0.58）上移动的快。 结果是，在这一段动画内元素运动的快。 到曲线的结尾，x 和 y 之间的关系反过来了，y 值保持为1，没有变化，x 值从 0.58 变为 1，元素运动的慢。
|
||||
记住所有的 `cubic-bezier` 函数都是从坐标为 (0, 0) 的 `p0` 开始，在坐标为 (1, 1) 的 `p3` 结束。 在这个例子里，曲线在 y 轴（从 0 开始，运动到 `p1` 的 0，然后运动到 `p2` 的 1）上移动得比在 x 轴（从 0 开始，运动到 `p1` 的 0，到 `p2` 的 0.58）上移动得快。 结果是，在这一段动画内元素运动得快。 到曲线的结尾，x 和 y 之间的关系反过来了，y 值保持为 1，没有变化，x 值从 0.58 变为 1，元素运动得慢。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为了能直观地感受贝塞尔曲线所设置的运动效果，请把 id 为 `red` 的元素的 `animation-timing-function` 属性值改为 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。 这会使两个元素运动过程类似。
|
||||
为了看贝塞尔曲线的运动效果，把 id 为 `red` 的元素的 `animation-timing-function` 属性改为 `cubic-bezier` 函数，其中 x1，y1，x2，y2 值分别为 0、0、0.58、1。 这会使两个元素运动过程类似。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性值应使用 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性应为 `cubic-bezier` 函数，其中 x1、y1、x2、y2 值分别为 0、0、0.58、1。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -31,13 +33,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
id 为 `red` 的元素不应有 `animation-timing-function` 属性值 `linear`。
|
||||
id 为 `red` 的元素不应有值为 `linear` 的 `animation-timing-function` 属性。
|
||||
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
```
|
||||
|
||||
id 为 `blue` 的元素的 `animation-timing-function` 属性不应改变。
|
||||
id 为 `blue` 的元素的 `animation-timing-function` 属性值不应该改变。
|
||||
|
||||
```js
|
||||
const blueBallAnimation = __helpers.removeWhiteSpace(
|
||||
|
||||
@@ -17,47 +17,49 @@ dashedName: use-a-css-linear-gradient-to-create-a-striped-element
|
||||
|
||||
下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。
|
||||
|
||||
`0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px`
|
||||
```css
|
||||
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
|
||||
```
|
||||
|
||||
如果有两个相邻色标的颜色值相同，那么过渡看起来就不会很明显。 由于是在两个相同的颜色间过渡，那么中间的过渡色也会是相同颜色，接着就是这个颜色直接过渡到下一个颜色，最终产生的效果就是条纹。
|
||||
如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改 `repeating-linear-gradient()` 函数使其为渐变角度为 `45deg` 的条纹，第一个渐变颜色为 `yellow`, 第二个渐变颜色为 `black`。
|
||||
使用 `repeating-linear-gradient()` 函数创建一个渐变角度为 `45deg` 的条纹，然后设置第一对渐变颜色为 `yellow`，第二对渐变颜色为 `black`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`repeating-linear-gradient()` 的渐变角度应该为 45deg。
|
||||
`repeating-linear-gradient()` 的渐变角度应为 45deg。
|
||||
|
||||
```js
|
||||
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
```
|
||||
|
||||
`repeating-linear-gradient()` 的渐变角度不应为 90deg。
|
||||
`repeating-linear-gradient()` 的渐变角度应该不再是 90deg。
|
||||
|
||||
```js
|
||||
assert(!code.match(/90deg/gi));
|
||||
```
|
||||
|
||||
0px 处的渐变颜色应该为 `yellow`。
|
||||
0px 处的渐变颜色应该是 `yellow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
40px 处的第一个渐变颜色应该为 `yellow`。
|
||||
40px 处的一个渐变颜色应该是 `yellow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
```
|
||||
|
||||
40px 处的第二个渐变颜色应该为 `black`。
|
||||
40px 处的第二个渐变颜色应该是 `black`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
```
|
||||
|
||||
80px 处最后一个渐变颜色应该为 `black`。
|
||||
80px 处的最后一个渐变颜色应该是 `black`。
|
||||
|
||||
```js
|
||||
assert(code.match(/black\s+?80px/gi));
|
||||
|
||||
@@ -29,11 +29,13 @@ CSS 边框具有 `style`、`color`、`width` 属性。
|
||||
|
||||
记得在一个元素上可以同时应用多个 `class`，使用空格来分隔不同 class 即可， 例如：
|
||||
|
||||
`<img class="class1 class2">`
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` 元素应包含 `smaller-image` class。
|
||||
`img` 元素的 class 应包含 `smaller-image`。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
|
||||
@@ -17,7 +17,9 @@ dashedName: change-the-color-of-text
|
||||
|
||||
以下是将 `h2` 元素设置为蓝色的方法：
|
||||
|
||||
`<h2 style="color: blue;">CatPhotoApp</h2>`
|
||||
```html
|
||||
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
请注意，需要在内联 `style` 声明末尾加上 `;`。
|
||||
|
||||
|
||||
@@ -17,10 +17,15 @@ dashedName: import-a-google-font
|
||||
|
||||
要引入 Google Font，你需要从 Google Fonts 上复制字体的 URL，并粘贴到你的 HTML 里面。 在这个挑战中，我们需要引入 `Lobster` 字体。 因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到 `style` 标签之前。
|
||||
|
||||
`<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">`
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
```
|
||||
|
||||
现在你可以通过将下面例子中的 FAMILY_NAMEFAMILY_NAME 替换为 `Lobster`，来使用 `Lobster` 字体：
|
||||
`font-family: FAMILY_NAME, GENERIC_NAME;`。
|
||||
现在可以在 CSS 中使用 `Lobster` 字体，并像下面一样使用 `Lobster` 作为 FAMILY_NAME：
|
||||
|
||||
```css
|
||||
font-family: FAMILY_NAME, GENERIC_NAME;
|
||||
```
|
||||
|
||||
GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备字体。 我们会在下一个挑战中详细说明。
|
||||
|
||||
@@ -28,7 +33,7 @@ GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备
|
||||
|
||||
# --instructions--
|
||||
|
||||
给你的网页导入 `Lobster` 字体。 引入 Lobster 字体，然后使用元素选择器将 `h2` 元素的 `font-family` 设置为 `Lobster`。
|
||||
给你的网页导入 `Lobster` 字体。 然后使用元素选择器将 `h2` 元素的 `font-family` 设置为 `Lobster`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -23,17 +23,19 @@ dashedName: override-all-other-styles-by-using-important
|
||||
|
||||
如下所示：
|
||||
|
||||
`color: red !important;`
|
||||
```css
|
||||
color: red !important;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素的应有一个 class 为 `pink-text`。
|
||||
`h1` 元素应包含 `pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
`h1` 元素应该包含 `color: white` 的行内样式声明。
|
||||
`h1` 元素应包含 `blue-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
@@ -51,7 +53,7 @@ assert($('h1').attr('id') === 'orange-text');
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
`pink-text` 类应有 `!important` 关键词 ，以覆盖其他声明。
|
||||
`pink-text` class 应有 `!important` 关键词 ，以覆盖其他声明。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -19,9 +19,11 @@ dashedName: override-class-declarations-by-styling-id-attributes
|
||||
|
||||
给 `h1` 元素添加 `id` 属性，属性值为 `orange-text`。 设置方式如下：
|
||||
|
||||
`<h1 id="orange-text">`
|
||||
```html
|
||||
<h1 id="orange-text">
|
||||
```
|
||||
|
||||
`h1` 元素应继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
`h1` 元素需继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
|
||||
在 `style` 元素中创建名为 `orange-text` 的 id 选择器。 例子如下：
|
||||
|
||||
@@ -35,7 +37,7 @@ dashedName: override-class-declarations-by-styling-id-attributes
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素应包含 `pink-text` class。
|
||||
`h1` 元素的应有一个 class 为 `pink-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
@@ -47,7 +49,7 @@ assert($('h1').hasClass('pink-text'));
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 的 id 属性值应为 `orange-text`。
|
||||
`h1` 元素的 id 应为 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
|
||||
@@ -17,9 +17,11 @@ dashedName: override-class-declarations-with-inline-styles
|
||||
|
||||
使用行内样式尝试让 `h1` 的字体颜色变白。 像这样使用：
|
||||
|
||||
`<h1 style="color: green;">`
|
||||
```html
|
||||
<h1 style="color: green;">
|
||||
```
|
||||
|
||||
`h1` 元素需继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
`h1` 元素应继续保留 `blue-text` 和 `pink-text` 这两个 class。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -35,7 +37,7 @@ assert($('h1').hasClass('pink-text'));
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
`h1` 元素的 id 应为 `orange-text`。
|
||||
`h1` 的 id 属性值应为 `orange-text`。
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
|
||||
@@ -21,7 +21,9 @@ dashedName: override-styles-in-subsequent-css
|
||||
|
||||
HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
|
||||
|
||||
`class="class1 class2"`
|
||||
```html
|
||||
class="class1 class2"
|
||||
```
|
||||
|
||||
**注意：**HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
|
||||
|
||||
@@ -17,11 +17,13 @@ dashedName: set-the-id-of-an-element
|
||||
|
||||
设置 `h2` 元素的 id 为 `cat-photo-app` 的代码如下：
|
||||
|
||||
`<h2 id="cat-photo-app">`
|
||||
```html
|
||||
<h2 id="cat-photo-app">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将 `form` 元素的 id 设置为 `cat-photo-form`。
|
||||
设置`form`元素的 id 为`cat-photo-form`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,7 +13,9 @@ dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element
|
||||
|
||||
同样，每个方向的外边距值可以在一行里面汇总声明，而无需分别通过 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 分别声明，比如：
|
||||
|
||||
`margin: 10px 20px 10px 20px;`
|
||||
```css
|
||||
margin: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的外边距值。
|
||||
|
||||
|
||||
@@ -11,7 +11,9 @@ dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
|
||||
如果不想每次都要分别声明 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` 属性，可以把它们汇总在一行里面一并声明，像是这样：
|
||||
|
||||
`padding: 10px 20px 10px 20px;`
|
||||
```css
|
||||
padding: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。
|
||||
|
||||
|
||||
@@ -13,11 +13,15 @@ dashedName: use-rgb-values-to-color-elements
|
||||
|
||||
黑色的 `RGB` 值：
|
||||
|
||||
`rgb(0, 0, 0)`
|
||||
```css
|
||||
rgb(0, 0, 0)
|
||||
```
|
||||
|
||||
白色的 `RGB` 值：
|
||||
|
||||
`rgb(255, 255, 255)`
|
||||
```css
|
||||
rgb(255, 255, 255)
|
||||
```
|
||||
|
||||
RGB 值与我们之前学到的十六进制编码不同。`RGB` 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
|
||||
|
||||
|
||||
@@ -13,7 +13,9 @@ dashedName: add-a-submit-button-to-a-form
|
||||
|
||||
例如：
|
||||
|
||||
`<button type="submit">this button submits the form</button>`
|
||||
```html
|
||||
<button type="submit">this button submits the form</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -13,7 +13,9 @@ dashedName: add-images-to-your-website
|
||||
|
||||
例如：
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg">
|
||||
```
|
||||
|
||||
注意：`img` 元素是没有结束标签的。
|
||||
|
||||
@@ -25,7 +27,9 @@ dashedName: add-images-to-your-website
|
||||
|
||||
让我们给上面例子的 `img` 添加 `alt` 属性。
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">`
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
@@ -33,9 +37,7 @@ dashedName: add-images-to-your-website
|
||||
|
||||
在 `main` 元素里，给 `p` 元素前面插入一个 `img` 元素。
|
||||
|
||||
然后将 `src` 的属性值设置为这个 url：
|
||||
|
||||
`https://bit.ly/fcc-relaxing-cat`
|
||||
现在设置 `src` 属性，以便它指向网址 `https://bit.ly/fcc-relaxing-cat`
|
||||
|
||||
最后，不要忘记给 `img` 加上 `alt` 属性。
|
||||
|
||||
|
||||
@@ -13,7 +13,9 @@ dashedName: add-placeholder-text-to-a-text-field
|
||||
|
||||
你可以像这样创建一个占位符：
|
||||
|
||||
`<input type="text" placeholder="this is placeholder text">`
|
||||
```html
|
||||
<input type="text" placeholder="this is placeholder text">
|
||||
```
|
||||
|
||||
**注意：**别忘了 `input` 元素是 "自闭和标签"，即不需要结束标签。
|
||||
|
||||
|
||||
@@ -13,7 +13,9 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
|
||||
在一个 input 元素里面添加 `checked` 这个词，即可实现。 例如:
|
||||
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -21,11 +21,13 @@ dashedName: create-a-set-of-checkboxes
|
||||
|
||||
下面是一个复选框的例子：
|
||||
|
||||
`<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>`
|
||||
```html
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
请给表单添加三个复选框， 每个复选框都被嵌套进 `label` 元素中， 并且它们的 `name` 属性均为 `personality`。
|
||||
请给表单添加三个复选框， 每个复选框都被嵌套进 `label` 元素中。 并且它们的 `name` 属性均为 `personality`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,7 +15,9 @@ dashedName: create-a-text-field
|
||||
|
||||
你可以像这样创建一个文本输入框：
|
||||
|
||||
`<input type="text">`
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
注意 `input` 输入框是没有结束标签的。
|
||||
|
||||
|
||||
@@ -13,13 +13,15 @@ dashedName: inform-with-the-paragraph-element
|
||||
|
||||
你可以像这样创建一个段落：
|
||||
|
||||
`<p>I'm a p tag!</p>`
|
||||
```html
|
||||
<p>I'm a p tag!</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `h2` 元素下方添加一个 `p` 元素，其内容是 `Hello Paragraph`。
|
||||
|
||||
**注意：**按照惯例，所有 HTML 标签都应该是小写字母，例如应使用 `<p></p>`，而不会使用`<P></P>`。
|
||||
**注意：**按照惯例，所有 HTML 标签都应该是小写字母，例如应使用 `<p></p>`，而不会使用 `<P></P>`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,13 +13,15 @@ dashedName: link-to-external-pages-with-anchor-elements
|
||||
|
||||
`a` 需要一个 `href` 属性指向跳转的目的地。 同时，它还应有内容。 例如：
|
||||
|
||||
`<a href="https://freecodecamp.org">this links to freecodecamp.org</a>`
|
||||
```html
|
||||
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
浏览器将显示文本 `this links to freecodecamp.org`，这是一个可点击的链接。 你可以通过这个链接访问 `https://www.freecodecamp.org`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个内容文本为 “cat photos” 的 `a` 元素，并将其 `href` 属性值设置为 `https://freecatphotoapp.com`。
|
||||
创建一个内容文本为 “cat photos” 的 `a` 元素，链接指向 `https://freecatphotoapp.com`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -29,7 +31,7 @@ dashedName: link-to-external-pages-with-anchor-elements
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
你的 `a` 元素应链接到 `https://freecatphotoapp.com`。
|
||||
你的 `a` 元素应链接到 `https://freecatphotoapp.com`
|
||||
|
||||
```js
|
||||
assert(/^https?:\/\/freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
|
||||
|
||||
@@ -19,27 +19,35 @@ dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
|
||||
让我们来拆解一下这个例子。 通常，文本是被包裹在 `p` 元素内：
|
||||
|
||||
`<p> Here's a ... for you to follow. </p>`
|
||||
```html
|
||||
<p> Here's a ... for you to follow. </p>
|
||||
```
|
||||
|
||||
接下来是*锚点*元素 `<a>`（它需要结束标签 `</a>`）：
|
||||
|
||||
`<a> ... </a>`
|
||||
```html
|
||||
<a> ... </a>
|
||||
```
|
||||
|
||||
`target` 锚点元素的一个属性，它用来指定链接的打开方式。 属性值 `_blank` 表示链接会在新标签页打开。 `href` 是锚点元素的另一个属性，它用来指定链接的 URL：
|
||||
`target` 是锚点元素的一个属性，它用来指定链接的打开方式。 属性值 `_blank` 表示链接会在新标签页打开。 `href` 是锚点元素的另一个属性，它用来指定链接的 URL：
|
||||
|
||||
`<a href="http://freecodecamp.org"> ... </a>`
|
||||
```html
|
||||
<a href="http://freecodecamp.org"> ... </a>
|
||||
```
|
||||
|
||||
`a` 元素内的文本 `link to freecodecamp.org` 叫作<dfn>锚文本</dfn>，会显示为一个可以点击的链接：
|
||||
|
||||
`<a href=" ... ">link to freecodecamp.org</a>`
|
||||
```html
|
||||
<a href=" ... ">link to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
此示例的最终输出结果是这样：
|
||||
|
||||
你可以访问 [link to freecodecamp.org](http://freecodecamp.org)。
|
||||
Here's a [link to freecodecamp.org](http://freecodecamp.org) for you to follow.
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个新的段落 `p` 元素来包裹 `a` 元素。 新段落标签的内容为 `View more cat photos`，其中 `cat photos` 是一个链接，其余的是纯文本。
|
||||
创建一个新的段落 `p` 元素来包裹 `a` 元素。 新段落应有文本 `View more cat photos`，其中 `cat photos` 是一个链接，其余是纯文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -59,7 +67,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素应该有锚文本 `cat photos`。
|
||||
`a` 元素应有锚文本 `cat photos`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -69,13 +77,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
应该创建一个新的 `p` 元素。 HTML 代码中应该总共有至少 3 个 `p` 标签。
|
||||
应该创建一个新的 `p` 元素。 页面中应至少包含 3 个 `p` 标签。
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
`a` 元素应该被嵌套在新的 `p` 元素中。
|
||||
`a` 应嵌套在新创建的 `p` 元素内。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -94,7 +102,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`a` 元素<em>不</em>应该有文本 `View more`。
|
||||
`a` 元素 <em>不</em> 应有文本 `View more`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -104,7 +112,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
每个 `p` 元素都应该有一个结束标签。
|
||||
确保每个 `p` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -114,7 +122,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
每个 `a` 元素都应该有一个结束标签。
|
||||
确保每个 `a` 元素有结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -19,11 +19,15 @@ dashedName: say-hello-to-html-elements
|
||||
|
||||
开始标签像这样：
|
||||
|
||||
`<h1>`
|
||||
```html
|
||||
<h1>
|
||||
```
|
||||
|
||||
结束标签像这样：
|
||||
|
||||
`</h1>`
|
||||
```html
|
||||
</h1>
|
||||
```
|
||||
|
||||
开始标签和结束标签的唯一区别就是结束标签多了一个斜杠。
|
||||
|
||||
@@ -35,7 +39,7 @@ dashedName: say-hello-to-html-elements
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 元素应有文本 `Hello World`。
|
||||
`h1` 元素的内容文本应为 `Hello World`。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
|
||||
@@ -13,7 +13,9 @@ dashedName: turn-an-image-into-a-link
|
||||
|
||||
如果我们要把图片嵌套进 `a` 元素， 可以这样写：
|
||||
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>`
|
||||
```html
|
||||
<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
|
||||
```
|
||||
|
||||
如果把 `a` 的 `href` 属性值设置为 `#`，创建的是一个死链接（不跳转到其他画面）。
|
||||
|
||||
@@ -37,7 +39,7 @@ assert($('a').children('img').length > 0);
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
每个 `a` 元素都应有结束标签。
|
||||
每个 `a` 元素都应该有一个结束标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -15,11 +15,15 @@ dashedName: create-a-media-query
|
||||
|
||||
下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：
|
||||
|
||||
`@media (max-width: 100px) { /* CSS Rules */ }`
|
||||
```css
|
||||
@media (max-width: 100px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容：
|
||||
|
||||
`@media (min-height: 350px) { /* CSS Rules */ }`
|
||||
```css
|
||||
@media (min-height: 350px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
注意，只有当媒体类型与所使用的设备的类型匹配时，媒体查询中定义的 CSS 才生效。
|
||||
|
||||
|
||||
@@ -17,7 +17,9 @@ dashedName: make-typography-responsive
|
||||
|
||||
下面这个例子是设置 `body` 标签的宽度为视窗宽度的 30%。
|
||||
|
||||
`body { width: 30vw; }`
|
||||
```css
|
||||
body { width: 30vw; }
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user