chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -18,7 +18,7 @@ dashedName: add-a-box-shadow-to-a-card-like-element
|
||||
<li><code>offset-y</code> 阴影的垂直偏移量；</li>
|
||||
<li><code>blur-radius</code> 模糊半径；</li>
|
||||
<li><code>spread-radius</code> 阴影扩展半径；</li>
|
||||
<li>颜色。</li>
|
||||
<li><code>color</code></li>
|
||||
</ul>
|
||||
|
||||
其中 `blur-radius` 和 `spread-radius` 是可选的。
|
||||
@ -33,7 +33,7 @@ box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
|
||||
# --instructions--
|
||||
|
||||
我们把卡片的 `id` 设置成了 `thumbnail`，请把上面的 `box-shadow` 值赋给这个卡片。
|
||||
元素现在有一个 `thumbnail` id。 在这个选择器中，使用上面的示例 CSS 值在卡片上加一个 `box-shadow`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: adjust-the-background-color-property-of-text
|
||||
|
||||
# --description--
|
||||
|
||||
为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加 `background-color` 属性。在本挑战里我们将使用 `rgba()` 颜色，而不是之前学到的 `hex` 编码或者 `rgb()` 颜色。
|
||||
为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加 `background-color` 属性。 在本挑战里我们将使用 `rgba()` 颜色，而不是之前学到的 `hex` 编码或者 `rgb()` 颜色。
|
||||
|
||||
<blockquote>rgba 代表：<br> r = red 红色<br> g = green 绿色<br> b = blue 蓝色<br> a = alpha 透明度</blockquote>
|
||||
|
||||
RGB 值可以取在 0 到 255 之间。alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。`rgba()` 在需要设置颜色透明度时十分有用，这意味着你可以做出一些很漂亮的半透明效果。
|
||||
RGB 值可以取在 0 到 255 之间。 alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。 `rgba()` 在需要设置颜色透明度时十分有用， 这意味着你可以做出一些很漂亮的半透明效果。
|
||||
|
||||
在本挑战里你将会用到这个代码 `background-color: rgba(45, 45, 45, 0.1)`。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。
|
||||
在本挑战里你将会用到这个代码 `background-color: rgba(45, 45, 45, 0.1)`。 它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -29,13 +29,13 @@ RGB 值可以取在 0 到 255 之间。alpha 值可取在 0 到 1 之间，其
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi
|
||||
/(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
|
||||
code.replace(/\s/g, '')
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`h4` 元素的 `padding` 属性值应为 `10px`。
|
||||
`h4` 元素的 `padding` 属性值应为 10px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,33 +9,33 @@ dashedName: adjust-the-color-of-various-elements-to-complementary-colors
|
||||
|
||||
# --description--
|
||||
|
||||
通过前面关卡的学习，我们知道了补色搭配能形成强列的对比效果，让内容更富生机。但是如果使用不当效果会适得其反：比如将文字背景色和文字颜色设置为互补色，这样文字会很难看清。通常的做法是，一种颜色做为主要颜色，然后使用其补色用来装点那些需要用户特别注意的部分。
|
||||
通过前面关卡的学习，我们知道了补色搭配能形成强列的对比效果，让内容更富生机。 但是如果使用不当效果会适得其反：比如将文字背景色和文字颜色设置为互补色，这样文字会很难看清。 通常的做法是，一种颜色做为主要颜色，然后使用其补色用来装点那些需要用户特别注意的部分。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用深青色（`#09A7A1`）做为页面主色，用其补色橙色（`#FF790E`）来装饰登录按钮。把 `header` 和 `footer` 的 `background-color` 从黑色改成深青色。然后把 `h2` 的文字 `color` 也改成深青色。最后，把 `button` 的 `background-color` 改成橙色。
|
||||
使用深青色（`#09A7A1`）做为页面主色，用其补色橙色（`#FF790E`）来装饰登录按钮。 把 `header` 和 `footer` 的 `background-color` 从黑色改成深青色。 然后把 `h2` 的文字 `color` 也改成深青色。 最后，把 `button` 的 `background-color` 改成橙色。
|
||||
|
||||
# --hints--
|
||||
|
||||
`header` 元素的 `background-color` 属性值应为 `#09A7A1`。
|
||||
`header` 元素的 `background-color` 属性值应为 #09A7A1。
|
||||
|
||||
```js
|
||||
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`footer` 元素的 `background-color` 属性值应为 `#09A7A1`。
|
||||
`footer` 元素的 `background-color` 属性值应为 #09A7A1。
|
||||
|
||||
```js
|
||||
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`h2` 元素的 `color` 属性值应为 `#09A7A1`。
|
||||
`h2` 元素的 `color` 属性值应为 #09A7A1。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`button` 元素的 `background-color` 属性值应为 `#FF790E`。
|
||||
`button` 元素的 `background-color` 属性值应为 #FF790E。
|
||||
|
||||
```js
|
||||
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: adjust-the-height-of-an-element-using-the-height-property
|
||||
|
||||
# --description--
|
||||
|
||||
和 `width` 属性类似，你可以使用 CSS 里面的 `height` 属性来指定元素的高度。下面这段代码可以把图片的高度设置为 20px：
|
||||
和 `width` 属性类似，你可以使用 CSS 里面的 `height` 属性来指定元素的高度。 下面这段代码可以把图片的高度设置为 20px：
|
||||
|
||||
```css
|
||||
img {
|
||||
@ -25,7 +25,7 @@ img {
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` 的 `height` 属性值应为 `25px`。
|
||||
`h4` 的 `height` 属性值应为 25px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: adjust-the-hover-state-of-an-anchor-tag
|
||||
|
||||
# --description--
|
||||
|
||||
本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。
|
||||
本挑战将要涉及到伪类。 伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。
|
||||
|
||||
比如，可以使用 `:hover` 伪类选择器来选取超链接的悬停状态。下面的代码可以改变超链接悬停时的颜色：
|
||||
比如，可以使用 `:hover` 伪类选择器来选取超链接的悬停状态。 下面的代码可以在鼠标悬停在超链接上时将其 `color` 变成红色：
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
@ -21,7 +21,7 @@ a:hover {
|
||||
|
||||
# --instructions--
|
||||
|
||||
代码编辑器里面已经有了一个 CSS 规则把所有的 `a` 标签定义成了黑色。请添加一个规则，使得用户悬停在 `a` 标签时，`a` 标签的 `color` 会变成蓝色。
|
||||
代码编辑器里面已经有了一个 CSS 规则把所有的 `a` 标签定义成了黑色。 请添加一个规则，使得用户悬停在 `a` 标签时，标签的 `color` 变成蓝色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: adjust-the-hue-of-a-color
|
||||
|
||||
# --description--
|
||||
|
||||
HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了 `hsl()` 做为颜色的描述方式。
|
||||
颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了 `hsl()` 做为颜色的描述方式。
|
||||
|
||||
**色相**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
|
||||
**色相**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。 在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
|
||||
|
||||
**饱和度**是指色彩的纯度，也就是颜色里灰色的占比。饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。饱和度的取值范围是表示灰色所占百分比的 0 至 100。
|
||||
**饱和度**是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。
|
||||
|
||||
**亮度**决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。
|
||||
**亮度**决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。
|
||||
|
||||
下面是一些使用 `hsl()` 描述颜色的例子，颜色都为满饱和度，中等亮度:
|
||||
|
||||
@ -23,41 +23,41 @@ HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标
|
||||
|
||||
# --instructions--
|
||||
|
||||
将 class 为 `green`、`cyan` 和 `blue` 的 `div` 的 `background-color` 属性值设置为使用 `hsl()` 表示的颜色。颜色都为满饱和度，亮度中等。
|
||||
将 class 为 `green`、`cyan` 和 `blue` 的 `div` 的 `background-color` 属性值设置为使用 `hsl()` 表示的颜色。 颜色都为满饱和度，亮度中等。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该使用 `hsl()` 属性来表示绿色。
|
||||
应使用 `hsl()` 属性来设置颜色为 `green`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
应该使用 `hsl()` 属性来表示蓝绿色。
|
||||
应使用 `hsl()` 属性来设置颜色为 `cyan`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
应该使用 `hsl()` 属性来表示蓝色。
|
||||
应使用 `hsl()` 属性来设置颜色为 `blue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
class 为 `green` 的 `div` 的 `background-color` 属性值应为绿色。
|
||||
class 为 `green` 的 `div` 元素的 `background-color` 属性值应为绿色。
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
class 为 `cyan` 的 `div` 的 `background-color` 属性值应为蓝绿色。
|
||||
class 为 `cyan` 的 `div` 元素的 `background-color` 属性值应为蓝绿色。
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
class 为 `blue` 的 `div` 的 `background-color` 属性值应为蓝色。
|
||||
class 为 `blue` 的 `div` 元素的 `background-color` 属性值应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: adjust-the-size-of-a-header-versus-a-paragraph-tag
|
||||
|
||||
# --description--
|
||||
|
||||
标题（`h1` 到 `h6`）的文字应该比段落的文字大，这样可以让用户更直观的看到页面布局，同时能根据不同元素的层级梳理出页面的结构，更方便用户获取关键的信息。你可以使用 `font-size` 属性来设置元素内文字的大小。
|
||||
标题标签的字体大小（从 `h1` 到 `h6`）一般应该大于段落标签的字体大小。 这使用户更容易在视觉上了解页面上所有内容的布局和重要程度。 你可以使用 `font-size` 属性来设置元素内文字的大小。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `h4` 标签的 `font-size` 的属性值改成 27 像素，让标题更醒目。
|
||||
把 `h4` 标签的 `font-size` 的属性值改成 27px，让标题更醒目。
|
||||
|
||||
# --hints--
|
||||
|
||||
应给 `h4` 元素添加一个 `font-size` 属性并将属性值设置为 `27px`。
|
||||
应给 `h4` 元素添加一个 `font-size` 属性并将属性值设置为 27px。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '27px');
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: adjust-the-tone-of-a-color
|
||||
|
||||
# --description--
|
||||
|
||||
`hsl()` 使 CSS 更改颜色色调更加方便。比如，给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 `hsl()` 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。饱和度代表灰色的占比，亮度代表白色和黑色的占比。`hsl()` 在你想获取一个基准色的变种的情景下会十分有用。
|
||||
`hsl()` 使 CSS 更改颜色色调更加方便。 比如，给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。 另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。 回忆下 `hsl()` 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。 饱和度代表灰色的占比，亮度代表白色和黑色的占比。 这在你想获取一个基准色的变种的情景下会十分有用。
|
||||
|
||||
# --instructions--
|
||||
|
||||
所有元素的默认 `background-color` 都是透明色。当前页面的导航栏 `nav` 背景色之所以看起来是蓝绿色，是因为它背后的 `header` 的 `background-color` 属性值为 `cyan`。请将 `nav` 的 `background-color` 也设置为 `cyan`，但把它的饱和度调整为 80%，亮度调整为 25%。
|
||||
所有元素的默认 `background-color` 都是 `transparent`。 当前页面的导航栏 `nav` 背景色之所以看起来是蓝绿色，是因为它背后的 `header` 的 `background-color` 属性值为 `cyan`。 请将 `nav` 的 `background-color` 也设置为 `cyan`，但把它的饱和度调整为 `80% saturation`，亮度调整为 `25% lightness`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 CSS 里的 `width` 属性来指定元素的宽度。属性值可以是相对单位（比如 em）、绝对单位（比如 px）、或者其父元素宽度的百分比。下面这段代码可以把图片的宽度设置为 220px：
|
||||
你可以使用 CSS 里的 `width` 属性来指定元素的宽度。 属性值可以是相对单位（比如 `em`），绝对单位（比如 `px`），或者包含块（父元素）宽度的百分比。 下面这段代码可以把图片的宽度设置为 220px：
|
||||
|
||||
```css
|
||||
img {
|
||||
@ -19,7 +19,7 @@ img {
|
||||
|
||||
# --instructions--
|
||||
|
||||
请使用 `fullCard` class 来选择卡片元素，为它添加 `width` 属性，并将它的宽度设置为 245px。
|
||||
为卡片元素添加 `width` 属性，并将它的宽度设置为 245px。 使用 `fullCard` class 来选择卡片元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: animate-elements-at-variable-rates
|
||||
|
||||
# --description--
|
||||
|
||||
改变相似元素的动画频率的方法有很多。目前我们接触到的就有 `animation-iteration-count` 和 `@keyframes`。
|
||||
改变相似元素的动画频率的方法有很多。 目前我们接触到的就有 `animation-iteration-count` 和 `@keyframes`。
|
||||
|
||||
举例说明，右边的动画包含了两个小星星，每个小星星都在 20% `@keyframes` 处变小并且 opacity 变为 20%，也就是一闪一闪的动画效果。你可以通过改变其中一个星星的 `@keyframes` 规则以使两个小星星以不同的频率闪烁。
|
||||
举例说明，右边的动画包含了两个小星星，每个小星星都在 `@keyframes` 为 20% 处变小并且透明度变低，也就是一闪一闪的动画效果。 你可以通过改变其中一个元素的 `@keyframes` 规则以使两个小星星以不同的频率闪烁。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,19 +9,19 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
|
||||
# --description--
|
||||
|
||||
之前的关卡里介绍了一些动画属性以及 `@keyframes` 规则的用法。还有一个常用的动画属性是 `animation-iteration-count`，这个属性允许你控制动画循环的次数。下面是一个例子：
|
||||
之前的关卡里介绍了一些动画属性以及 `@keyframes` 规则的用法。 还有一个常用的动画属性是 `animation-iteration-count`，这个属性允许你控制动画循环的次数。 下面是一个例子：
|
||||
|
||||
`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');
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: animate-multiple-elements-at-variable-rates
|
||||
|
||||
# --description--
|
||||
|
||||
在前面的关卡里，我们通过修改 `@keyframes` 改变了两个相似动画元素的频率。你也可以通过改变多个元素的 `animation-duration` 来达到同样的效果。
|
||||
在前面的关卡里，我们通过修改 `@keyframes` 改变了两个相似动画元素的频率。 你也可以通过改变多个元素的 `animation-duration` 来达到同样的效果。
|
||||
|
||||
在编辑器代码运行的动画里，天空中有三个以同样频率不停闪烁的星星。你可以设置每一个星星的 `animation-duration` 属性为不同的值来使其具有不同的闪烁频率。
|
||||
在代码编辑器里运行的动画中，天空中有三颗以同样频率不停闪烁的星星。 你可以设置每一个星星的 `animation-duration` 属性为不同的值，以使其具有不同的闪烁频率。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,17 +9,17 @@ dashedName: center-an-element-horizontally-using-the-margin-property
|
||||
|
||||
# --description--
|
||||
|
||||
在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的 `margin` 值设置为 `auto`。
|
||||
在应用设计中经常需要把一个块级元素水平居中显示。 一种常见的实现方式是把块级元素的 `margin` 值设置为 auto。
|
||||
|
||||
同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其 `display` 属性为 `block` 来把它变成块级元素。
|
||||
同样的，这个方法也对图片奏效。 图片默认是内联元素，但是可以通过设置其 `display` 属性为 `block`来把它变成块级元素。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通过将页面中 `div` 的 `margin` 属性值设置为 `auto` 来让它居中显示。
|
||||
通过添加一个值为 `auto` 的 `margin` 属性，将 `div` 在页面居中。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 的 `margin` 属性值应为 `auto`。
|
||||
`div` 应有一个 `margin`，设置为 `auto`。
|
||||
|
||||
```js
|
||||
assert(code.match(/margin:\s*?auto;/g));
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: change-an-elements-relative-position
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的<dfn>盒模型</dfn>。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的<dfn>普通流</dfn>，同时 CSS 提供了 position 属性来覆盖它。
|
||||
在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的<dfn>盒模型</dfn>。 块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。 元素默认按照这种方式布局称为文档的<dfn>普通流</dfn>，同时 CSS 提供了 position 属性来覆盖它。
|
||||
|
||||
当元素的 position 设置为 `relative` 时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。CSS 里控制各个方向偏移量的属性是 `left`、`right`、`top` 和 `bottom`。它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。下面的例子展示了段落向上偏移 10 像素：
|
||||
当元素的定位设置为 `relative` 时，它允许你通过 CSS 指定该元素在当前文档流页面下的*相对*偏移量。 CSS 里控制各个方向偏移量的属性是 `left`、`right`、`top` 和 `bottom`。 它们代表从原来位置向远离该方向*偏移*指定的像素、百分比或者 em。 下面的例子展示了段落向上偏移 10px：
|
||||
|
||||
```css
|
||||
p {
|
||||
@ -20,21 +20,23 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。 **注意：**定位可以让你在页面布局上更灵活、高效。注意不管元素的定位是怎样，内部的 HTML 代码阅读起来应该是整洁、有意义的。这样也可以让视障人员（他们重度依赖辅助设备比如屏幕阅读软件）也能够无障碍地浏览你的网页。
|
||||
把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。
|
||||
|
||||
**注意：**定位可以使页面布局更灵活、高效。 不管元素的定位是怎样的，HTML 标记在从上到下阅读起来时应该是整洁的、有意义的。 这样可以让视障人士（重度依赖辅助设备比如屏幕阅读软件的人们）也能够无障碍地浏览你的网页。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `h2` 的 `position` 属性值设置成 `relative`，使用相应的 CSS 属性调整 `h2` 的位置，使其相对原本的位置向下偏移 15 像素。注意不要对 h1 和 p 元素的位置产生影响。
|
||||
把 `h2` 的 `position` 设置成 `relative`，使用相应的 CSS 属性调整它的位置，使其相对 `top` 偏移 15px，同时还在文档流中处于原来的位置。 这不会对 h1 和 p 元素的位置产生影响。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素应该添加 `position` 属性，其属性值应为 `relative`。
|
||||
`h2` 元素应有一个值为 `relative` 的 `position` 属性。
|
||||
|
||||
```js
|
||||
assert($('h2').css('position') == 'relative');
|
||||
```
|
||||
|
||||
你应该使用 CSS 属性调整 `h2` 的位置使其从原来的位置向下偏移 `15px`。
|
||||
你应该使用 CSS 属性调整 `h2` 的位置，使其从原来的位置相对 `top` 偏移 15px。
|
||||
|
||||
```js
|
||||
assert($('h2').css('top') == '15px');
|
||||
|
||||
@ -9,31 +9,31 @@ dashedName: change-animation-timing-with-keywords
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 动画里，`animation-timing-function` 用来定义动画的速度曲线。速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（`animation-duration`）从 A 运动到 B，那么 `animation-timing-function` 表述的就是车在运动中的加速和减速等过程。
|
||||
在 CSS 动画里，`animation-timing-function` 用来定义动画的速度曲线。 速度曲线决定了动画从一套 CSS 样式变为另一套所用的时间。 如果要描述的动画是一辆车在指定时间内（`animation-duration`）从 A 运动到 B，那么 `animation-timing-function` 表述的就是车在运动中的加速和减速等过程。
|
||||
|
||||
对于常用的选项，CSS 提供了内置的关键字方便我们调用。比如，默认的值是 `ease`：动画以低速开始，然后加快，在结束前变慢；其它常用的值包括 `ease-out`：动画以高速开始，以低速结束；`ease-in`，动画以低速开始，以高速结束；`linear`：动画从头到尾的速度是相同的。
|
||||
有一些预定义的关键字可用于常见的选项。 比如，默认值是 `ease`，动画以低速开始，然后加快，在结束前变慢。 其它常用的值包括 `ease-out`：动画以高速开始，以低速结束；`ease-in`，动画以低速开始，以高速结束；`linear`：动画从头到尾的速度是相同的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 id 为 `ball1` 和 `ball2` 的元素添加 `animation-timing-function`，`ball1` 的属性值为 `linear`，`ball2` 的属性值为 `ease-out`。它们的 `animation-duration` 都为 2 秒，注意观察它们在开始和结束时的不同。
|
||||
给 id 为 `ball1` 和 `ball2` 的元素添加 `animation-timing-function`，`ball1` 的属性值为 `linear`，`ball2` 的属性值为 `ease-out`。 它们的 `animation-duration` 都为 2 秒，注意观察它们在开始和结束时的不同。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `ball1` 的元素的 `animation-timing-function` 属性值应为 linear。
|
||||
id 为 `ball1` 的元素的 `animation-timing-function` 属性值应为 `linear`。
|
||||
|
||||
```js
|
||||
const ball1Animation = $('#ball1')
|
||||
.css('animation-timing-function')
|
||||
.replace(/\s/g, '');
|
||||
const ball1Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball1').css('animation-timing-function')
|
||||
);
|
||||
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
```
|
||||
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值应为 ease-out。
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值为 `ease-out`。
|
||||
|
||||
```js
|
||||
const ball2Animation = $('#ball2')
|
||||
.css('animation-timing-function')
|
||||
.replace(/\s/g, '');
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: change-the-position-of-overlapping-elements-with-the-z-index-propert
|
||||
|
||||
# --description--
|
||||
|
||||
当一些元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用 `z-index` 属性指定元素的堆叠次序。`z-index` 的取值是整数，数值大的元素会叠放到数值小的元素上面。
|
||||
当一些元素在位置上重叠时（例如，使用 `position: absolute | relative | fixed | sticky` 时），在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。 你可以使用 `z-index` 属性指定元素的堆叠次序。 `z-index` 的取值是整数，数值大的元素会叠放到数值小的元素上面。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: create-a-gradual-css-linear-gradient
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 元素的背景色并不局限于单色。CSS 还为我们提供了颜色渐变。可以通过 `background` 里的 `linear-gradient()` 来实现线性渐变，以下是它的语法：
|
||||
HTML 元素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。 可通过 `background` 里的 `linear-gradient()` 实现线性渐变， 以下是它的语法：
|
||||
|
||||
`background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);`
|
||||
`background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);`
|
||||
|
||||
第一个参数用来表明颜色渐变的初始方向。它的值是一个角度，比如 `90deg` 代表水平渐变（从左到右），再比如 `45deg` 代表对角线方向的渐变（从左下到右上）。后续的参数指定了渐变颜色的顺序。
|
||||
第一个参数用来表明颜色渐变的初始方向。 它的值是一个角度，比如 `90deg` 代表水平渐变（从左到右），再比如 `45deg` 代表对角线方向的渐变（从左下到右上）。 后续的参数指定了渐变颜色的顺序。
|
||||
|
||||
例如：
|
||||
|
||||
|
||||
@ -9,19 +9,17 @@ dashedName: create-a-graphic-using-css
|
||||
|
||||
# --description--
|
||||
|
||||
术语表：blur-radius => 模糊半径，spread-radius => 辐射半径，transparent => 透明的，border-radius => 圆角边框。
|
||||
通过使用不同的选择器和属性，你可以做出有趣的形状， 一个简单的例子是新月形状。 在这个挑战中，我们会学习如何使用 `box-shadow` 属性来设置元素的阴影，以及使用 `border-radius` 属性控制元素的圆角边框。
|
||||
|
||||
通过使用不同的选择器和属性，你可以做出有趣的形状，比如新月形状。在这个挑战中，我们会学习如何使用 `box-shadow` 属性来设置元素的阴影，以及使用 `border-radius` 属性控制元素的圆角边框。
|
||||
|
||||
首先我们来创建一个圆的、透明的图形，它具有模糊阴影并略微向两边递减。如你所见，这个阴影其实就是新月形狀。
|
||||
首先我们来创建一个圆的、透明的图形，它具有模糊阴影并略微向两边递减。 如你所见，这个阴影其实就是新月形狀。
|
||||
|
||||
为了创建一个圆形的对象，`border-radius` 应该被设置成 50%。
|
||||
|
||||
你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和颜色值。其中 `blur-radius` 和 `spread-radius` 是可选的。
|
||||
你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和颜色值。 其中 `blur-radius` 和 `spread-radius` 是可选的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把编辑器里的正方形元素变成新月形状。首先，把 `background-color` 改为 transparent，接着把 `border-radius` 属性值设置成 50%，以创建一个圆形。最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px、`offset-y` 为 10px、`blur-radius` 为 0、`spread-radius` 为 0、`color` 为 blue。
|
||||
把编辑器里的正方形元素变成新月形状。 首先，把 `background-color` 改为 `transparent`，接着把 `border-radius` 属性设置成 50%，以创建一个圆形。 最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，颜色为 `blue`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -31,13 +29,13 @@ dashedName: create-a-graphic-using-css
|
||||
assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
```
|
||||
|
||||
`border-radius` 属性值应为 `50%`。
|
||||
`border-radius` 属性的值应该设置为 `50%`。
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
`box-shadow` 的 `offset-x`、`offset-y`、`blur-radius`、`spread-radius`、`color` 属性值应依次为 `25px`、`10px`、`0`、`0`、`blue`。
|
||||
更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，颜色为 `blue`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,9 +9,7 @@ dashedName: create-a-horizontal-line-using-the-hr-element
|
||||
|
||||
# --description--
|
||||
|
||||
术语：Horizontal Rule => hr => 水平线。
|
||||
|
||||
你可以用 `hr` 标签来创建一条宽度撑满父元素的水平线。这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。
|
||||
你可以用 `hr` 标签来创建一条宽度撑满父元素的水平线。 这种水平分割线一般用来表示内容主题的改变，或在视觉上将文档分隔成几个部分。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -27,7 +25,7 @@ dashedName: create-a-horizontal-line-using-the-hr-element
|
||||
assert($('hr').length == 1);
|
||||
```
|
||||
|
||||
`hr` 标签应该在标题和段落之间。
|
||||
`hr` 应在标题和段落之间。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: create-a-more-complex-shape-using-css-and-html
|
||||
|
||||
# --description--
|
||||
|
||||
世界上最流行的形状非心形莫属了，在本挑战中我们将用纯 CSS 创建一个心形。但是首先你需要了解伪元素 `::before` 和 `::after`。伪元素可以在所选元素之前或之后添加一些内容。在下面的代码中，`::before` 伪元素用来给 class 为 `heart` 的元素添加一个正方形：
|
||||
世界上最流行的形状非心形莫属了，在本挑战中我们将用纯 CSS 创建一个心形。 但是首先你需要了解伪元素 `::before` 和 `::after`。 伪元素可以在所选元素之前或之后添加一些内容。 在下面的代码中，`::before` 伪元素用来给 class 为 `heart` 的元素添加一个正方形：
|
||||
|
||||
```css
|
||||
.heart::before {
|
||||
@ -24,23 +24,24 @@ dashedName: create-a-more-complex-shape-using-css-and-html
|
||||
}
|
||||
```
|
||||
|
||||
`::before` 和 `::after` 必须配合 `content` 来使用。这个属性通常用来给元素添加内容诸如图片或者文字。尽管有时 `::before` 和 `::after` 是用来实现形状而非文字，但 `content` 属性仍然是必需的，此时它的值可以是空字符串。在上面的例子里，我们用 `::before` 为 class 是 `heart` 的元素添加了一个黄色的矩形，矩形的 `height` 和 `width` 分别为 50px 和 70px。由于设置了其边框半径为 25%，所以它会呈现出圆角矩形的样子。同时其相对位置为向右偏移 5px、向上偏移 50px。
|
||||
`::before` 和 `::after` 必须配合 `content` 来使用。 这个属性通常用来给元素添加内容诸如图片或者文字。 尽管有时 `::before` 和 `::after` 是用来实现形状而非文字，但 `content` 属性仍然是必需的，此时它的值可以是空字符串。 在上面的例子里，class 为 `heart` 元素的 `::before` 伪类添加了一个黄色的长方形，长方形的高和宽分别为 `50px` 和 `70px`。 这个矩形有圆角，因为它的 `border-radius` 为 25%，它的位置是绝对位置，位于离元素左边和顶部分别是 `5px`、`50px` 的位置。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把屏幕里的元素变成心形。在 `heart::after` 选择器里面，把 `background-color` 改成粉色（pink），把 `border-radius` 的属性值改成 50%。
|
||||
把屏幕里的元素变成心形。 在 `heart::after` 选择器里，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。
|
||||
|
||||
接下来，用类选择器选取 class 为 `heart` 的元素，为它添加 `transform` 属性。使用 `rotate()` 函数并设置角度为 -45 度。
|
||||
接下来，用类选择器选取 class 为 `heart`（只是 `heart`）的元素，为它添加 `transform` 属性。 使用 `rotate()` 函数并设置角度为 -45 度。
|
||||
|
||||
最后，在 `heart::before` 选择器里面，设置 `content` 属性值为空字符串。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart::after` 伪元素的 `background-color` 属性值应为粉色。
|
||||
`heart::after` 选择器的 `background-color` 属性值应为 `pink`。
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
assert(
|
||||
code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi)
|
||||
/({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter)
|
||||
);
|
||||
```
|
||||
|
||||
@ -50,7 +51,7 @@ assert(
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
```
|
||||
|
||||
class 为 `heart` 的元素的 `transform` 属性应使用 `rotate()` 函数并传入参数 `-45deg`。
|
||||
class 为 `heart` 的元素的 `transform` 属性应使用 `rotate()` 函数并传入参数 -45 度。
|
||||
|
||||
```js
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: create-movement-using-css-animation
|
||||
|
||||
在元素的 `position` 已有指定值（如 `fixed` 或者 `relative`）时，CSS 偏移属性 `right`、`left`、`top`、`bottom` 可以用在动画规则里创建动作。
|
||||
|
||||
就像下面的例子展示的那样，你可以在 `50%` keyframe 处设置 `top` 属性为 50px，在开始（0%）和最后（100%）keyframe 处设置为 0px，以实现元素先向下运动，然后返回的动作效果。
|
||||
就像下面的例子展示的那样，你可以在 `50%` keyframe 处设置 `top` 属性为 50px，在开始（`0%`）和结束（`100%`）keyframe 处设置为 0px，以实现元素先向下运动，然后返回的动作效果。
|
||||
|
||||
```css
|
||||
@keyframes rainbow {
|
||||
@ -32,38 +32,26 @@ dashedName: create-movement-using-css-animation
|
||||
|
||||
# --instructions--
|
||||
|
||||
请实现让 `div` 水平运动的效果。使用 `left` 偏移属性，添加 `@keyframes` 规则，让 rainbow 在 `0%` 的 `keyframe` 下从偏移 0 像素开始；在 `50%` 时偏移 25 像素；在 `100%` 时偏移 -25 像素。不要修改编辑器里的 `top` 属性，元素应该同时在水平和竖直方向运动。
|
||||
请实现让 `div` 水平运动的效果。 使用 `left` 偏移属性，添加 `@keyframes` 规则，让 rainbow 在 `0%` 处偏移 0px，在 `50%` 处偏移 25px，在 `100%` 处偏移 -25px。 不要修改编辑器里的 `top` 属性，元素应该同时在水平和竖直方向运动。
|
||||
|
||||
# --hints--
|
||||
|
||||
`0%` 的 `@keyframes` 规则应为向 `left` 偏移 `0px`。
|
||||
`0%` 的 `@keyframes` 规则应为向 `left` 偏移 0px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
`50%` 的 `@keyframes` 规则应为向 `left` 偏移 `25px`。
|
||||
`50%` 的 `@keyframes` 规则应为向 `left` 偏移 25px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi
|
||||
)
|
||||
);
|
||||
assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
`100%` 的 `@keyframes` 规则应为向 `left` 偏移 `-25px`。
|
||||
`100%` 的 `@keyframes` 规则应为向 `left` 偏移 -25px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi
|
||||
)
|
||||
);
|
||||
assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
|
||||
|
||||
# --description--
|
||||
|
||||
为了增加背景图的质感，我们可以为它添加一个不那么明显的纹理图案，这样可以让页面更讨喜。但关键在于，我们需要找到一个平衡点，因为我们不希望背景图抢占了内容的风头，造成喧宾夺主的结果。`background` 属性支持使用 `url()` 函数作为属性值，这让我们可以通过链接的方式引入纹理或样式的图片。图片链接的地址应写在括号内，一般会用引号包起来。
|
||||
为了增加背景图的质感，我们可以为它添加一个不那么明显的纹理图案，这样可以让页面更讨喜。 但关键在于，我们需要找到一个平衡点，因为我们不希望背景图抢占了内容的风头，造成喧宾夺主的结果。 `background` 属性支持使用 `url()` 函数作为属性值，这让我们可以通过链接的方式引入纹理或样式的图片。 图片链接的地址应写在括号内，一般会用引号包起来。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: create-visual-balance-using-the-text-align-property
|
||||
|
||||
# --description--
|
||||
|
||||
这部分课程的主题是应用视觉设计。开始的挑战基于美化一个卡片组件的外观，借此展示了若干核心原则。
|
||||
这部分课程的主题是应用视觉设计。 开始的挑战基于美化一个卡片组件的外观，借此展示了若干核心原则。
|
||||
|
||||
web 内容大部分都是文本。CSS 里面的 `text-align` 属性可以控制文本的对齐方式。
|
||||
web 内容大部分都是文本。 CSS 里面的 `text-align` 属性可以控制文本的对齐方式。
|
||||
|
||||
`text-align: justify;` 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
|
||||
|
||||
@ -19,21 +19,21 @@ web 内容大部分都是文本。CSS 里面的 `text-align` 属性可以控制
|
||||
|
||||
`text-align: right;` 可以让文本右对齐。
|
||||
|
||||
`text-align: left;` 是 `text-align` 的默认值，它可以让文本左对齐。
|
||||
`text-align: left;` 是默认值，它可以让文本左对齐。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请让内容文本为 `"Google"` 的 `h4` 标签居中对齐；让介绍了 Google 创立历程的段落文本两端对齐。
|
||||
请让内容文本为 “Google” 的 `h4` 标签居中对齐， 然后将介绍 Google 创立历程的段落文本两端对齐。
|
||||
|
||||
# --hints--
|
||||
|
||||
应在 `h4` 标签上使用 text-align 属性设置文本居中对齐。
|
||||
`h4` 标签应有值为 `center` 的 text-align 属性。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-align') == 'center');
|
||||
```
|
||||
|
||||
应在 `p` 标签上使用 text-align 属性设置文本两端对齐。
|
||||
`p` 标签应有值为 `justify` 的 text-align 属性。
|
||||
|
||||
```js
|
||||
assert($('p').css('text-align') == 'justify');
|
||||
|
||||
@ -15,7 +15,7 @@ dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 id 选择器选择 id 为 `ball` 的元素，在 `@keyframes` 为 `50%` 的节点里添加 `opacity` 属性并设置属性值为 0.1，使其在向右移动时渐隐。
|
||||
使用 id 选择器选择 id 为 `ball` 的元素，在 @keyframes 为 `50%` 的节点里添加 `opacity` 属性并设置属性值为 0.1，使其在向右移动时渐隐。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: 降低元素的 opactiy
|
||||
title: 降低元素的透明度
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||
forumTopicId: 301055
|
||||
@ -11,7 +11,7 @@ dashedName: decrease-the-opacity-of-an-element
|
||||
|
||||
CSS 里的 `opacity` 属性用来设置元素的透明度。
|
||||
|
||||
<blockquote>属性值为 1 代表完全不透明。<br>属性值为 0.5 代表半透明。<br>属性值为 0 代表完全透明。</blockquote>
|
||||
<blockquote>属性值为 1 代表完全不透明。 <br>属性值为 0.5 代表半透明。 <br>属性值为 0 代表完全透明。</blockquote>
|
||||
|
||||
透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。
|
||||
|
||||
|
||||
@ -9,31 +9,33 @@ dashedName: learn-about-complementary-colors
|
||||
|
||||
# --description--
|
||||
|
||||
色彩理论以及设计色彩学很复杂，这里将只涉及基础部分。在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。
|
||||
色彩理论以及设计色彩学很复杂，这里将只涉及基础部分。 在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。 不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。
|
||||
|
||||
一半是科学，一半是艺术，色环是我们认识颜色关系的好工具。它是一个近色相邻、异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色就互为补色。在绘画中，两个互为补色的颜色会在混合后变成灰色。补色搭配能形成强烈的对比效果，传达出活力、能量、兴奋等意义。
|
||||
色环是我们认识颜色关系的好工具。它是一个近色相邻、异色相离的圆环。 当两个颜色恰好在色环的两端时，这两个颜色就互为补色。 两个互为补色的颜色会在混合后变成灰色。 然而，补色搭配能形成强烈的视觉对比效果。
|
||||
|
||||
下面是一些以 hex 形式表示的补色例子：
|
||||
|
||||
<blockquote>红色（#FF0000）和蓝绿色 (#00FFFF)<br>绿色（#00FF00）和品红色（#FF00FF）<br>蓝色（#0000FF）和黄色（#FFFF00）</blockquote>
|
||||
|
||||
这与我们许多人在学校学的过时的 RYB 色彩模式不同，RYB 有不同的原色和补色。 现代色彩理论使用 RGB 模型（如在计算机屏幕上）和 CMY（K）模型（如在印刷中）。 在[这里](https://en.wikipedia.org/wiki/Color_model)阅读了解更多有关这个复杂主题的信息。
|
||||
|
||||
现在，很多在线选色工具也为我们提供了寻找补色的功能。
|
||||
|
||||
**注意：**对于颜色相关的挑战：颜色搭配是提起用户兴趣或吸引用户注意的重要方式之一。但我们不应让颜色作为传达重要信息的唯一方式，因为视觉障碍用户可能无法像其他人一样看出其中的含义。我们将会在应用无障碍章节进行详细介绍。
|
||||
**注意：**对于颜色相关的挑战：颜色搭配是提起用户兴趣或吸引用户注意的重要方式之一。 但我们不应让颜色作为传达重要信息的唯一方式，因为视觉障碍用户可能无法像其他人一样看出其中的含义。 我们将会在应用无障碍章节进行详细介绍。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 class 为 `blue` 和 `yellow` 的元素的 `background-color` 属性改成相应的颜色。注意观察这两个颜色的搭配效果，以及对比白色背景的视觉效果。
|
||||
把 class 为 `blue` 和 `yellow` 的元素的 `background-color` 属性改成相应的颜色。 注意观察这两个颜色的搭配效果，以及对比白色背景的视觉效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `blue` 的 `div` 元素的 `background-color` 属性值应为 `blue`。
|
||||
class 为 `blue` 的 `div` 元素应有一个 `background-color`，颜色为蓝色。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
class 为 `yellow` 的 `div` 元素的 `background-color` 属性值应为 `yellow`。
|
||||
class 为 `yellow` 的 `div` 元素的 `background-color` 属性，颜色为黄色。
|
||||
|
||||
```js
|
||||
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
|
||||
@ -1,19 +1,18 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: 了解三原色
|
||||
title: 了解三次色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRDAb'
|
||||
forumTopicId: 301057
|
||||
dashedName: learn-about-tertiary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光，这种模式叫做三原色光模式（RGB Color Model）。如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G），我们在上一个挑战里已经见过这些颜色了。这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。例如，品红色是红色和蓝色相加产生，它是绿色的补色。
|
||||
电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光。 这在现代色彩理论中叫作三原色光模式（RGB Color Model）。 红色（R）、绿色（G）和蓝色（B）叫作三原色。 如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）， 我们在上一个挑战里已经见过这些颜色了。 这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。 例如，品红色是红色和蓝色相加产生，它是绿色的补色。
|
||||
|
||||
三次色是由原色和二次色相加产生的颜色，例如红色（原色）和黄色（二次色）相加产生橙色。将这六种颜色中相邻的颜色相加，便产生了十二色色环。
|
||||
三次色是由原色和二次色相加产生的颜色， 例如，在 RGB 颜色模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。 将这六种颜色中相邻的颜色相加，便产生了十二色色环。
|
||||
|
||||
设计里面有很多种颜色搭配方法。涉及到三次色的一种配色方法是分裂补色搭配法。选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。此种搭配既有对比，又不失和谐。
|
||||
设计里面有很多种颜色搭配方法。 涉及到三次色的一种配色方法是分裂补色搭配法。 选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。 此种搭配既有对比，又不失和谐。
|
||||
|
||||
下面是使用分裂补色搭配法创建的三个颜色：
|
||||
|
||||
@ -21,7 +20,7 @@ dashedName: learn-about-tertiary-colors
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 class 为 `orange`、`cyan` 和 `raspberry` 的 `background-color` 改成其对应的颜色。在这个挑战中，请使用颜色的十六进制符号（即 hex code）来表示。
|
||||
把 class 为 `orange`、`cyan` 和 `raspberry` 的 `background-color` 改成其对应的颜色。 在这个挑战中，请使用颜色的十六进制符号（即 hex code）来表示。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,23 +9,23 @@ dashedName: learn-how-bezier-curves-work
|
||||
|
||||
# --description--
|
||||
|
||||
上一个挑战中，我们介绍了 `animation-timing-function` 以及它的一些预设值，这些值定义了不同时间内的动画速度。除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更细致地控制动画的速度曲线。
|
||||
上一个挑战中，我们介绍了 `animation-timing-function` 以及它的一些预设值，这些值定义了不同时间内的动画速度。 除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更细致地控制动画的速度曲线。
|
||||
|
||||
在 CSS 动画里，我们可以用 `cubic-bezier` 来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 `1 * 1` 的坐标系统内，其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
|
||||
在 CSS 动画里，我们可以用 `cubic-bezier` 来定义贝塞尔曲线。 曲线的形状代表了动画的速度。 曲线在 1 * 1 的坐标系统内， 其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
|
||||
|
||||
`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 贝塞尔曲线的例子：
|
||||
`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);`
|
||||
|
||||
在上面的例子里，两个点的 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 预定值等价的贝塞尔函数值。
|
||||
对于 id 为 `ball1` 的元素，请把 `animation-timing-function` 属性值从 linear 变成等价的 `cubic-bezier` 函数值。也就是使用上面例子给的值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -37,9 +37,9 @@ assert(
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值应该保持不变。
|
||||
|
||||
```js
|
||||
const ball2Animation = $('#ball2')
|
||||
.css('animation-timing-function')
|
||||
.replace(/\s/g, '');
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: learn-how-the-css-keyframes-and-animation-properties-work
|
||||
|
||||
# --description--
|
||||
|
||||
如果要给元素添加动画，你需要了解 `animation` 属性以及 `@keyframes` 规则。`animation` 属性控制动画的外观，`@keyframes` 规则控制动画中各阶段的变化。总共有 8 个 `animation` 属性。为了便于理解，本挑战中我们只会暂时涉及到两个最常用的属性。
|
||||
如果要给元素添加动画，你需要了解 animation 属性以及 `@keyframes` 规则。 animation 属性控制动画的外观，`@keyframes` 规则控制动画中各阶段的变化。 总共有 8 个 animation 属性。 为了便于理解，本挑战中我们只会暂时涉及到两个最常用的属性。
|
||||
|
||||
`animation-name` 用来设置动画的名称，也就是我们稍后要在 `@keyframes` 里用到的名称。
|
||||
|
||||
`animation-duration` 设置动画所花费的时间。
|
||||
|
||||
`@keyframes` 可以通过设置特定时间点的行为来创建动画。为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。如果用一部电影来做类比，那么 CSS 里面的 0% 关键帧就像是电影里面的开场镜头；100% 关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。下面举例说明 `@keyframes` 和动画属性的用法：
|
||||
`@keyframes` 可以通过设置特定时间点的行为来创建动画。 为此，我们只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。 如果用一部电影来做类比，那么 CSS 里面的 0% 关键帧就像是电影里面的开场镜头；100% 关键帧就像是电影里的片尾，就是那个之后会出现演职人员列表的片尾。 在动画设定的时间内，CSS 会根据关键帧的规则来给元素添加动画效果。 100% 位置的 CSS 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。 然后CSS 应用魔法来在给定的时间内转换元素以使其脱离场景。 下面举例说明 `@keyframes` 和动画属性的用法：
|
||||
|
||||
```css
|
||||
#anim {
|
||||
@ -33,15 +33,15 @@ dashedName: learn-how-the-css-keyframes-and-animation-properties-work
|
||||
}
|
||||
```
|
||||
|
||||
id 为 `anim` 的元素，我们在代码中将它的 `animation-name` 设置为 `colorful`，同时设置 `animation-duration` 为 3 秒。然后我们把 `@keyframes` 规则添加到名为 `colorful` 的动画属性上。`colorful` 在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。
|
||||
id 为 `anim` 的元素，我们在代码中将它的 `animation-name` 设置为 `colorful`，同时设置 `animation-duration` 为 3 秒。 然后我们把 `@keyframes` 规则添加到名为 `colorful` 的动画属性上。 在动画开始时（0%）的背景颜色为蓝色，在动画结束时（100%）的背景颜色为黄色。 注意我们不只可以设置开始和结束，而是从 0% 到 100% 间的任意位置都可以设置。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 id 为 `rect` 的元素添加动画，设置其 `animation-name` 为 rainbow，`animation-duration` 为 4 秒。然后声明 `@keyframes` 规则，设置动画开始时（0%）的 `background-color` 为蓝色，动画中间时（50%）为绿色，动画结束时（100%）为为黄色。
|
||||
给 id 为 `rect` 的元素添加动画，设置其 `animation-name` 为 `rainbow`，设置其 `animation-duration` 为 4 秒。 然后声明 `@keyframes` 规则，设置动画开始时（`0%`）的 `background-color` 为蓝色，动画中间时（`50%`）为绿色，动画结束时（`100%`）为为黄色。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `rect` 的元素应该有一个值为 rainbow 的 `animation-name` 属性。
|
||||
id 为 `rect` 的元素应该有一个值为 `rainbow` 的 `animation-name` 属性。
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-name') == 'rainbow');
|
||||
@ -53,25 +53,25 @@ id 为 `rect` 的元素应该有一个值为 4s 的 `animation-duration` 属性
|
||||
assert($('#rect').css('animation-duration') == '4s');
|
||||
```
|
||||
|
||||
`@keyframes` 规则的 `animation-name` 应该为 rainbow。
|
||||
`@keyframes` 规则的 `animation-name` 应为 `rainbow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
```
|
||||
|
||||
`@keyframes` 规则的 rainbow 在 0% 时的 `background-color` 应该为蓝色。
|
||||
`@keyframes` 规则的 `rainbow` 在 0% 时的 `background-color` 应为 `blue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
```
|
||||
|
||||
`@keyframes` 规则的 rainbow 在 50% 时的 `background-color` 应该为绿色。
|
||||
`@keyframes` 规则的 `rainbow` 在 50% 时的 `background-color` 应为 `green`。
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
```
|
||||
|
||||
`@keyframes` 规则的 rainbow 在 100% 时的 `background-color` 应该为黄色。
|
||||
`@keyframes` 规则的 rainbow 在 100% 时的 `background-color` 应为 `yellow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
||||
|
||||
# --description--
|
||||
|
||||
接下来要介绍 CSS `position` 属性的取值选项 `absolute`：`absolute` 的含义是相对于其包含块定位。和 `relative` 定位不一样，`absolute` 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。这样我们就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。
|
||||
接下来要介绍 CSS `position` 属性的取值选项 `absolute`，它的含义是相对于其包含块定位。 和 `relative` 定位不一样，绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。 这样我们就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。
|
||||
|
||||
`absolute` 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是 `position:relative;`）,浏览器会继续寻找直到默认的 body 标签。
|
||||
绝对定位比较特殊的一点是元素的定位参照于最近的 *positioned* 祖先元素。 如果它的父元素没有添加定位规则（默认是 `position: relative;`），浏览器会继续寻找直到默认的 `body` 标签。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通过设置 `position` 属性值为 `absolute`，将 `#searchbar` 元素固定到它的父元素 `section` 的右上角。即设定其 `top` 和 `right` 为 50 像素。
|
||||
通过设置 `position` 属性值为 `absolute`，将 `#searchbar` 元素固定到它的父元素 `section` 的右上角。 即设定其 `top` 和 `right` 为 50 像素。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -25,13 +25,13 @@ dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
||||
assert($('#searchbar').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
`#searchbar` 元素的 `top` 属性值应为 `50px`。
|
||||
`#searchbar` 元素的 `top` 属性值应为 50px。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('top') == '50px');
|
||||
```
|
||||
|
||||
`#searchbar` 元素的 `right` 属性值应为 `50px`。
|
||||
`#searchbar` 元素的 `right` 属性值应为 50px。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('right') == '50px');
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
|
||||
|
||||
# --description--
|
||||
|
||||
接下来要介绍的是 `fixed` 定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，在 `fixed` 定位的元素中，我们也可以使用 top、bottom、left、right 属性来调整元素的位置，并且也会将元素从当前的文档流里面移除，其它元素会忽略它的存在。
|
||||
接下来要介绍的是 `fixed` 定位，它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。 类似于绝对位置，它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在，这样也许需要调整其他位置的布局。
|
||||
|
||||
但 `fixed` 和 `absolute` 的最明显的区别在于，`fixed` 定位元素不会随着屏幕滚动而移动。
|
||||
但 `fixed` 和 `absolute` 的最明显的区别在于，前者定位的元素不会随着屏幕滚动而移动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
我们已经将代码里导航栏的 id 设置为了 `navbar`。请把它的 `position` 设置成 `fixed`，同时分别设定其 `top` 和 `left` 属性值为 0 像素。修改后，你可以滑动预览窗口，观察导航栏的位置。
|
||||
我们已经将代码里导航栏的 id 设置为了 `navbar`。 请把它的 `position` 设置成 `fixed`，同时分别设定其 `top` 和 `left` 属性值为 0 像素。 修改后，你可以滑动预览窗口，观察导航栏的位置。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -25,13 +25,13 @@ dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
|
||||
assert($('#navbar').css('position') == 'fixed');
|
||||
```
|
||||
|
||||
`#navbar` 元素的 `top` 属性值应为 `0px`。
|
||||
`#navbar` 元素的 `top` 属性值应为 0px。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('top') == '0px');
|
||||
```
|
||||
|
||||
`#navbar` 元素的 `left` 属性值应为 `0px`。
|
||||
`#navbar` 元素的 `left` 属性值应为 0px。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('left') == '0px');
|
||||
|
||||
@ -11,21 +11,21 @@ dashedName: make-a-css-heartbeat-using-an-infinite-animation-count
|
||||
|
||||
这也是一个用 `animation-iteration-count` 属性创造持续动画的例子，它基于我们在前面挑战中创建的心形。
|
||||
|
||||
心跳动画的每一秒包含两个部分。`heart` 元素（包括 `:before` 和 `:after`）使用 `transform` 属性改变其大小，背景 `div` 使用 `background` 属性改变其颜色。
|
||||
心跳动画的每一秒包含两个部分。 `heart` 元素（包括 `:before` 和 `:after`）使用 `transform` 属性改变其大小，背景 `div` 使用 `background` 属性改变其颜色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将 class 为 `back` 和 `heart` 的元素的 `animation-iteration-count` 属性值设置为 infinite，使心形可以持续跳动。`heart:before` 和 `heart:after` 所选择的元素则不需要添加动画属性。
|
||||
给 `back` class 和 the `heart` class 添加 `animation-iteration-count` 属性，将属性值设置为 `infinite`，使心保持跳动。 `heart:before` 和 `heart:after` 所选择的元素则不需要添加动画属性。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `heart` 的元素的 `animation-iteration-count` 属性值应为 infinite。
|
||||
`heart` class 的 `animation-iteration-count` 的属性值应为 `infinite`。
|
||||
|
||||
```js
|
||||
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
class 为 `back` 的元素的 `animation-iteration-count` 属性值应为 infinite。
|
||||
`back` class 的 `animation-iteration-count` 的属性值应为 `infinite`。
|
||||
|
||||
```js
|
||||
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: make-motion-more-natural-using-a-bezier-curve
|
||||
|
||||
# --description--
|
||||
|
||||
在这个挑战中，我们需要给元素添加动画来模拟杂耍中被抛接的球。之前的挑战中，我们学习了 `linear` 和 `ease-out` 的贝塞尔曲线描述，但这两个都无法完美地描述杂耍球的运动。在本关里你需要定制贝塞尔曲线。
|
||||
在这个挑战中，我们需要给元素添加动画来模拟杂耍中被抛接的球。 之前的挑战中，我们学习了 `linear` 和 `ease-out` 的贝塞尔曲线描述，但这两个都无法完美地描述杂耍球的运动。 在本关里你需要定制贝塞尔曲线。
|
||||
|
||||
当 `animation-iteration-count` 值为 infinite 时，`animation-timing-function` 会自动循环 keyframe。由于我们是在动画周期的中间点（50% 处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。
|
||||
当 `animation-iteration-count` 值为 infinite 时，`animation-timing-function` 会自动循环 keyframe。 由于我们是在动画周期的中间点（`50%` 处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。
|
||||
|
||||
下面的例子模拟了杂耍球运动：
|
||||
|
||||
`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--
|
||||
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: modify-fill-mode-of-an-animation
|
||||
|
||||
# --description--
|
||||
|
||||
太棒了，但是现在还不完美。注意动画在 `500ms` 之后重置了，所以按钮又变成了之前的颜色。而我们想要的效果是按钮在悬停时始终高亮。
|
||||
太棒了，但是现在还不完美。 注意动画在 `500ms` 之后重置了，所以按钮又变成了之前的颜色。 而我们想要的效果是按钮在悬停时始终高亮。
|
||||
|
||||
为此，我们可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。`animation-fill-mode` 指定了在动画结束时元素的样式：
|
||||
为此，我们可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。 `animation-fill-mode` 指定了在动画结束时元素的样式： 你可以这样设置：
|
||||
|
||||
`animation-fill-mode: forwards;`
|
||||
|
||||
# --instructions--
|
||||
|
||||
修改 `button:hover` 的 `animation-fill-mode`，使按钮悬停时保持高亮。
|
||||
修改 `button:hover` 的 `animation-fill-mode` 属性值为 `forwards`，使按钮悬停时保持高亮。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: move-a-relatively-positioned-element-with-css-offsets
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方位的偏移距离。元素将从当前位置向属性相反的方向偏移。就像你在上一个挑战看到的，`top` 属性使 `h2` 向下移动。`left` 属性使元素向右移动。
|
||||
CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方位的偏移距离。 元素将从当前位置向属性相反的方向偏移。 就像你在上一个挑战看到的，`top` 属性使 `h2` 向下移动。 同样，使用 `left` 将项目移动到右边。
|
||||
|
||||
<img src='https://i.imgur.com/eWWi3gZ.gif' alt=''>
|
||||
<img src='https://i.imgur.com/eWWi3gZ.gif' alt='' />
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -19,13 +19,13 @@ CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方
|
||||
|
||||
# --hints--
|
||||
|
||||
应使用 CSS 属性使 `h2` 相对当前位置向上移动 `10px`。也就是说，从 `h2` 当前位置远离 `bottom` `10px`。
|
||||
应使用 CSS 属性使 `h2` 相对当前位置向上移动 10px。 也就是说，从当前位置相对于 `bottom` 移动 10px。
|
||||
|
||||
```js
|
||||
assert($('h2').css('bottom') == '10px');
|
||||
```
|
||||
|
||||
应使用 CSS 属性使 `h2` 相对当前位置向右移动 `15px`。也就是说，从 `h2` 当前位置远离 `left` `15px`。
|
||||
应使用 CSS 属性使 `h2` 相对当前位置向右移动 15px。 也就是说，从当前位置相对于 `left` 移动 15px。
|
||||
|
||||
```js
|
||||
assert($('h2').css('left') == '15px');
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: push-elements-left-or-right-with-the-float-property
|
||||
|
||||
# --description--
|
||||
|
||||
接下来要介绍的定位机制并不是 `position` 属性的选项，而是通过元素的 `float` 属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用 `width` 属性来指定浮动元素占据的水平空间。
|
||||
接下来要介绍的定位机制并不是 `position` 属性的选项，而是通过元素的 `float` 属性来设置。 浮动元素不在文档流中，它向 `left` 或 `right` 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通常需要用 `width` 属性来指定浮动元素占据的水平空间。
|
||||
|
||||
# --instructions--
|
||||
|
||||
设置 `#left` 元素的 `float` 属性值为 `left`，设置 `#right` 元素的 `float` 属性值为 `right`。使这两个元素按两列布局，`section` 和 `aside` 左右排列。
|
||||
使这两个元素按两列布局，`section` 和 `aside` 左右排列。 设置 `#left` 元素的 `float` 属性值为 `left`，设置 `#right` 元素的 `float` 属性值为 `right`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,11 +9,9 @@ dashedName: set-the-font-size-for-multiple-heading-elements
|
||||
|
||||
# --description--
|
||||
|
||||
`font-size` 属性用来指定元素内文字的大小。我们可以为多个元素添加 `font-size` 规则，这样做可以让页面内不同元素的文字大小得以统一。在本挑战里，你需要设置从 `h1` 到 `h6` 的文字大小。
|
||||
`font-size` 属性用来指定元素内文字的大小。 我们可以为多个元素添加这个规则，让页面内不同元素的文字大小得以统一。 在本挑战里，你需要设置从 `h1` 到 `h6` 的文字大小。
|
||||
|
||||
# --instructions--
|
||||
|
||||
<p>在 <code>style</code> 标签中, 对各元素的 <code>font-size</code> 进行如下设置：</p>
|
||||
# --instructions-- <p>在 <code>style</code> 标签中, 对各元素的 <code>font-size</code> 进行如下设置：</p>
|
||||
|
||||
<ul>
|
||||
<li>将 <code>h1</code> 标签的文字大小设为 68px。</li>
|
||||
@ -26,37 +24,37 @@ dashedName: set-the-font-size-for-multiple-heading-elements
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 标签的 `font-size` 属性值应为 `68px`。
|
||||
`h1` 标签的 `font-size` 属性值应为 68px。
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-size') == '68px');
|
||||
```
|
||||
|
||||
`h2` 标签的 `font-size` 属性值应为 `52px`。
|
||||
`h2` 标签的 `font-size` 属性值应为 52px。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-size') == '52px');
|
||||
```
|
||||
|
||||
`h3` 标签的 `font-size` 属性值应为 `40px`。
|
||||
`h3` 标签的 `font-size` 属性值应为 40px。
|
||||
|
||||
```js
|
||||
assert($('h3').css('font-size') == '40px');
|
||||
```
|
||||
|
||||
`h4` 标签的 `font-size` 属性值应为 `32px`。
|
||||
`h4` 标签的 `font-size` 属性值应为 32px。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '32px');
|
||||
```
|
||||
|
||||
`h5` 标签的 `font-size` 属性值应为 `21px`。
|
||||
`h5` 标签的 `font-size` 属性值应为 21px。
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-size') == '21px');
|
||||
```
|
||||
|
||||
`h6` 标签的 `font-size` 属性值应为 `14px`。
|
||||
`h6` 标签的 `font-size` 属性值应为 14px。
|
||||
|
||||
```js
|
||||
const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i;
|
||||
|
||||
@ -17,7 +17,7 @@ CSS 里面的 `font-size` 属性不只限于标题，还可以应用于任何包
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` 标签的 `font-size` 属性值应为 `16px`。
|
||||
`p` 标签的 `font-size` 属性值应为 16px。
|
||||
|
||||
```js
|
||||
assert($('p').css('font-size') == '16px');
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: set-the-line-height-of-paragraphs
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 提供 `line-height` 属性来设置行间的距离。行高，顾名思义，可以用来设置每行文字所占据的垂直空间。
|
||||
CSS 提供 `line-height` 属性来设置行间的距离。 行高，顾名思义，可以用来设置每行文字所占据的垂直空间。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -17,7 +17,7 @@ CSS 提供 `line-height` 属性来设置行间的距离。行高，顾名思义
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` 标签的 `line-height` 属性值应为 `25px`。
|
||||
`p` 标签的 `line-height` 属性值应为 25px。
|
||||
|
||||
```js
|
||||
assert($('p').css('line-height') == '25px');
|
||||
|
||||
@ -9,17 +9,17 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
|
||||
# --description--
|
||||
|
||||
前面的关卡涉及了使用 `ease-out` 预定义值描述了动画以高速开始低速结束。右边的动画展示了 `ease-out` 效果（蓝色的元素）和 `linear` 效果（红色的元素）的区别。同样的，`ease-out` 预定义值也可以用贝塞尔曲线函数实现。
|
||||
前面的关卡涉及了使用 `ease-out` 预定义值描述了动画以高速开始低速结束。 右边的动画展示了 `ease-out` 效果（蓝色的元素）和 `linear` 效果（红色的元素）的区别。 同样的，`ease-out` 预定义值也可以用贝塞尔曲线函数实现。
|
||||
|
||||
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
|
||||
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。 下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
|
||||
|
||||
`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--
|
||||
|
||||
@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性值不应为 linear。
|
||||
id 为 `red` 的元素不应有 `animation-timing-function` 属性值 `linear`。
|
||||
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
@ -40,9 +40,9 @@ assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
id 为 `blue` 的元素的 `animation-timing-function` 属性不应改变。
|
||||
|
||||
```js
|
||||
const blueBallAnimation = $('#blue')
|
||||
.css('animation-timing-function')
|
||||
.replace(/\s/g, '');
|
||||
const blueBallAnimation = __helpers.removeWhiteSpace(
|
||||
$('#blue').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
blueBallAnimation == 'ease-out' ||
|
||||
blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
|
||||
|
||||
@ -9,17 +9,17 @@ dashedName: use-a-css-linear-gradient-to-create-a-striped-element
|
||||
|
||||
# --description--
|
||||
|
||||
`repeating-linear-gradient()` 函数和 `linear-gradient()` 很像，主要区别是 `repeating-linear-gradient()` 会重复指定的渐变。`repeating-linear-gradient()` 有很多参数，为了便于理解，本关只用到角度值和色标。
|
||||
`repeating-linear-gradient()` 函数和 `linear-gradient()` 很像，主要区别是前者会重复指定的渐变。 `repeating-linear-gradient()` 有很多参数，为了便于理解，本关只用到角度值和色标。
|
||||
|
||||
角度就是渐变的方向。色标代表渐变颜色及发生渐变的位置，由颜色值和起始位置组成。起始位置用百分比或者像素值表示。
|
||||
角度就是渐变的方向。 色标代表渐变颜色及发生渐变的位置，由百分比或者像素值表示。
|
||||
|
||||
在代码编辑器的例子里，渐变开始于 0 像素位置的 `yellow`，然后过渡到距离开始位置 40 像素的 `blue`。由于下一个渐变颜色的起始位置也是 40 像素，所以颜色直接渐变成第三个颜色值 `green`，然后过渡到距离开始位置 80 像素的 `red`。
|
||||
在代码编辑器的例子里，渐变开始于 0 像素位置的 `yellow`，然后过渡到距离开始位置 40 像素的 `blue`。 由于下一个渐变颜色的起始位置也是 40 像素，所以颜色直接渐变成第三个颜色值 `green`，然后过渡到距离开始位置 80 像素的 `red`。
|
||||
|
||||
下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。
|
||||
|
||||
`0px [黄色 -- 过渡 -- 蓝色] 40px [绿色 -- 过渡 -- 红色] 80px`
|
||||
`0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px`
|
||||
|
||||
如果有两个相邻色标的颜色值相同，那么过渡看起来就不会很明显。由于是在两个相同的颜色间过渡，那么中间的过渡色也会是相同颜色，接着就是这个颜色直接过渡到下一个颜色，最终产生的效果就是条纹。
|
||||
如果有两个相邻色标的颜色值相同，那么过渡看起来就不会很明显。 由于是在两个相同的颜色间过渡，那么中间的过渡色也会是相同颜色，接着就是这个颜色直接过渡到下一个颜色，最终产生的效果就是条纹。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -27,37 +27,37 @@ dashedName: use-a-css-linear-gradient-to-create-a-striped-element
|
||||
|
||||
# --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));
|
||||
|
||||
@ -34,17 +34,17 @@ dashedName: use-css-animation-to-change-the-hover-state-of-a-button
|
||||
|
||||
注意 `ms` 代表毫秒，1000ms 等于 1s。
|
||||
|
||||
使用 `@keyframes` 来改变 `button` 元素的 `background-color`，使其在悬停时变成 `#4791d0`。`@keyframes` 规则应该只有一个 `100%` 条目。
|
||||
使用 `@keyframes` 来改变 `button` 元素的 `background-color`，使其在悬停时变成 `#4791d0`。 `@keyframes` 规则应该只有一个 `100%` 条目。
|
||||
|
||||
# --hints--
|
||||
|
||||
`@keyframes` 规则的 `animation-name` 应该是 background-color。
|
||||
@keyframes 规则的 `animation-name` 应该是 background-color。
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
```
|
||||
|
||||
在 `@keyframes` 为 `100%` 的位置，应将 `background-color` 改成 `#4791d0`。
|
||||
在 `@keyframes` 为 100% 的位置，应将 `background-color` 改成 `#4791d0`。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-
|
||||
|
||||
# --description--
|
||||
|
||||
接下来要介绍的 `transform` 属性是 `skewX`：`skewX` 使选择的元素沿着 X 轴（横向）翻转指定的角度。
|
||||
接下来要介绍的 `transform` 属性是 `skewX()`：它使选择的元素沿着 X 轴（横向）翻转指定的角度。
|
||||
|
||||
下面的代码沿着 X 轴翻转 `p` 元素 -32 度。
|
||||
下面的代码沿着 X 轴翻转段落元素 -32 度。
|
||||
|
||||
```css
|
||||
p {
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-elemen
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 属性 `transform` 里面的 `scale()` 函数可以用来改变元素的显示比例。下面的例子把页面的 `p` 元素放大到了原来的 2 倍：
|
||||
CSS 属性 `transform` 里面的 `scale()` 函数可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大到了原来的 2 倍：
|
||||
|
||||
```css
|
||||
p {
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover
|
||||
|
||||
# --description--
|
||||
|
||||
`transform` 属性有很多函数可以调用，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类选取元素的指定状态（如 `:hover`）时，我们可以通过 `transform` 属性非常方便地给元素添加交互。
|
||||
`transform` 属性有很多函数可以调用，可以对元素进行调整大小、移动、旋转、翻转等操作。 当使用伪类选取元素的指定状态（如 `:hover`）时，我们可以通过 `transform` 属性非常方便地给元素添加交互。
|
||||
|
||||
下面是当用户悬停在 `p` 元素时，段落大小缩放到原始大小 2.1 倍的例子：
|
||||
下面是当用户悬停在段落元素时，段落大小缩放到原始大小 2.1 倍的例子：
|
||||
|
||||
```css
|
||||
p:hover {
|
||||
@ -23,7 +23,7 @@ p:hover {
|
||||
|
||||
# --instructions--
|
||||
|
||||
通过伪类，给 `div` 的 `hover` 状态添加 `transform` 属性，使其当鼠标悬停时大小缩放到原始大小的 1.1 倍。
|
||||
通过伪类，给 `div` 的 `hover` 状态添加 `transform` 属性，使 `div` 当鼠标悬停时大小缩放到原始大小的 1.1 倍。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,13 +9,11 @@ dashedName: use-the-em-tag-to-italicize-text
|
||||
|
||||
# --description--
|
||||
|
||||
术语：emphasis => em => 强调。
|
||||
|
||||
你可以使用 `em` 标签来强调文本。由于浏览器会自动给元素应用 `font-style: italic;`，所以文本会显示为斜体。
|
||||
你可以使用 `em` 标签来强调文本。 由于浏览器会自动给元素应用 `font-style: italic;`，所以文本会显示为斜体。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `p` 标签里面嵌套 `em` 标签来强调文本。
|
||||
在段落标签里面嵌套 `em` 标签来强调文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -25,7 +23,7 @@ dashedName: use-the-em-tag-to-italicize-text
|
||||
assert($('em').length == 1);
|
||||
```
|
||||
|
||||
`em` 标签应嵌套在 `p` 标签里面。
|
||||
`em` 标签应包裹 `p` 标签里的内容，但不包裹 `p` 标签本身。
|
||||
|
||||
```js
|
||||
assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: use-the-s-tag-to-strikethrough-text
|
||||
|
||||
# --description--
|
||||
|
||||
你可以用 `s` 标签来给文字添加删除线。删除线是位于文字水平中央的一条线，它代表着一段文字不再有效。添加了 `s` 标签后，浏览器会自动给元素添加这段样式：`text-decoration: line-through;`。
|
||||
你可以用 `s` 标签来给文字添加删除线。 删除线是位于文字水平中央的一条线，它代表着一段文字不再有效。 添加了 `s` 标签后，浏览器会自动给元素添加这段样式：`text-decoration: line-through;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `h4` 标签里的 "Google" 文本外添加 `s` 标签，然后在 `s` 标签后面添加单词 "Alphabet"，Alphabet 不要有删除线格式。
|
||||
在 `h4` 标签里的 `Google` 文本外添加 `s` 标签，然后在 s 标签后面添加单词 `Alphabet`，单词不要有删除线格式。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -23,7 +23,7 @@ dashedName: use-the-s-tag-to-strikethrough-text
|
||||
assert($('s').length == 1);
|
||||
```
|
||||
|
||||
`s` 标签应该在 `h4` 标签内的 `Google` 文字外面，它不应包含单词 Alphabet。
|
||||
`s` 标签应该在 `h4` 标签内的 `Google` 文字外面， 它不应包含单词 `Alphabet`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -36,7 +36,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h4` 标签内应有单词 "Alphabet"，Alphabet 不应有删除线样式。
|
||||
`h4` 标签内应有单词 `Alphabet`，单词不应有删除线样式。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -3,17 +3,17 @@ id: 587d781a367417b2b2512ab7
|
||||
title: 使用 strong 标签加粗文本
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/ceJNBSb'
|
||||
forumTopicId: 1
|
||||
forumTopicId: 301080
|
||||
dashedName: use-the-strong-tag-to-make-text-bold
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 `strong` 标签来加粗文字。粗体文字一般用来吸引读者注意或用来表示强调。添加了 `strong` 标签后，浏览器会自动给元素添加这段样式：`font-weight:bold;`。
|
||||
你可以使用 `strong` 标签来加粗文字。 粗体文字一般用来吸引读者注意或用来表示强调。 添加了 `strong` 标签后，浏览器会自动给元素添加这段样式：`font-weight:bold;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 `p` 标签里的 "Stanford University" 内容文本添加 `strong` 标签。
|
||||
给 `p` 标签里的 `Stanford University` 内容文本添加 `strong` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -29,13 +29,13 @@ assert($('strong').length == 1);
|
||||
assert($('p').children('strong').length == 1);
|
||||
```
|
||||
|
||||
`strong` 标签的内容文本应为 `Stanford University`。
|
||||
The `strong` tag should wrap around the words `Stanford University`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('strong')
|
||||
.text()
|
||||
.match(/^Stanford University$/gi)
|
||||
.match(/^Stanford University\.?$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: use-the-text-transform-property-to-make-text-uppercase
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 里的 `text-transform` 属性可以改变英文字母的大小写。使用这个属性时，我们无需改变 HTML 元素中的文本也可以统一页面里英文的显示。
|
||||
CSS 里的 `text-transform` 属性可以改变英文字母的大小写。 使用这个属性时，我们无需改变 HTML 元素中的文本也可以统一页面里英文的显示。
|
||||
|
||||
下面的表格展示了 `text-transform` 的不同值对文字 “Transform me” 的影响：
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Value</th><th>Result</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>使用默认值</td></tr><tr><td><code>inherit</code></td><td>使用父元素的 <code>text-transform</code> 值。</td></tr><tr><td><code>none</code></td><td><strong>Default:</strong>不改变文字。</td></tr></tbody></table>
|
||||
<table class='table table-striped'><thead><tr><th>值</th><th>结果</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>使用默认值</td></tr><tr><td><code>inherit</code></td><td>使用父元素的 <code>text-transform</code> 值。</td></tr><tr><td><code>none</code></td><td><strong>Default:</strong>不改变文字。</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -21,7 +21,7 @@ CSS 里的 `text-transform` 属性可以改变英文字母的大小写。使用
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` 内容文本中，所有字母均应为大写。
|
||||
`h4` 内容文本中的所有字母均应为 `uppercase` 大写 。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-transform') === 'uppercase');
|
||||
|
||||
@ -13,9 +13,9 @@ dashedName: use-the-u-tag-to-underline-text
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 "Ph.D. students" 添加 `u` 标签。
|
||||
给 `Ph.D. students` 添加 `u` 标签。
|
||||
|
||||
**注意：**HTML 的 `<a>` 标签默认也会给文本添加下划线。如果使用 `u` 标签添加下划线会造成与 `<a>` 标签混淆，则应避免使用 `u` 标签。
|
||||
**注意：**当 `u` 标签可能会被混淆为链接时，避免使用它。锚标签也有默认下划线格式。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user