chore(learn): Applied MDX format to Chinese curriculum files (#40462)
This commit is contained in:
Randell Dawson
GitHub
@ -1,59 +1,32 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: 为视觉障碍用户添加替代图像的文本
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 16628
|
||||
title: 为视觉障碍用户添加替代图像的文本
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在其他挑战里你应该已经见到过<code>img</code>标签的<code>alt</code>属性了。<code>alt</code>属性中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：
|
||||
<code><img src="importantLogo.jpeg" alt="Company logo"></code>
|
||||
视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别<code>alt</code>属性，朗读其中的内容，来告知用户图片包含的关键信息。
|
||||
良好的<code>alt</code>文本可以简明扼要地描述图片信息，所以你应该为图片添加<code>alt</code>属性。另外，HTML5 标准也在考虑强制要求对图片添加<code>alt</code>属性。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在其他挑战里你应该已经见到过`img`标签的`alt`属性了。`alt`属性中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：
|
||||
|
||||
碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他使用一张简介图片来展示技能。给<code>img</code>标签添加一个<code>alt</code>属性，说明 Camper Cat 在学习空手道（图片的<code>src</code>属性没有指向任何链接，因此你可以看到<code>alt</code>属性中的文本）。
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
|
||||
</section>
|
||||
视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别`alt`属性，朗读其中的内容，来告知用户图片包含的关键信息。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
良好的`alt`文本可以简明扼要地描述图片信息，所以你应该为图片添加`alt`属性。另外，HTML5 标准也在考虑强制要求对图片添加`alt`属性。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的<code>img</code>标签应该包含一个非空的<code>alt</code>属性。'
|
||||
testString: assert($('img').attr('alt'));
|
||||
# --instructions--
|
||||
|
||||
碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他使用一张简介图片来展示技能。给`img`标签添加一个`alt`属性，说明 Camper Cat 在学习空手道（图片的`src`属性没有指向任何链接，因此你可以看到`alt`属性中的文本）。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的`img`标签应该包含一个非空的`alt`属性。
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt'));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg">
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: 添加可访问的日期选择器
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
|
||||
forumTopicId: 301008
|
||||
title: 添加可访问的日期选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
表单中经常出现<code>input</code>标签，它可以用来创建多种表单控件。它的<code>type</code>属性指定了所要创建的<code>input</code>标签类型。
|
||||
在以前的挑战中，你可能已经见过<code>text</code>与<code>submit</code>类型的<code>input</code>标签，HTML5 引入了<code>date</code>类型来创建时间选择器。依赖于浏览器的支持，当点击<code>input</code>标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。
|
||||
对于旧版本的浏览器，<code>type</code>属性的默认值是<code>text</code>。这种情况下，可以利用<code>label</code>标签或者占位文本来提示用户<code>input</code>标签的输入类型为日期。
|
||||
# --description--
|
||||
|
||||
表单中经常出现`input`标签，它可以用来创建多种表单控件。它的`type`属性指定了所要创建的`input`标签类型。
|
||||
|
||||
在以前的挑战中，你可能已经见过`text`与`submit`类型的`input`标签，HTML5 引入了`date`类型来创建时间选择器。依赖于浏览器的支持，当点击`input`标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。
|
||||
|
||||
对于旧版本的浏览器，`type`属性的默认值是`text`。这种情况下，可以利用`label`标签或者占位文本来提示用户`input`标签的输入类型为日期。
|
||||
|
||||
举个例子：
|
||||
|
||||
```html
|
||||
@ -18,74 +21,35 @@ title: 添加可访问的日期选择器
|
||||
<input type="date" id="input1" name="input1">
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个<code>input</code>标签，其<code>type</code>属性值为 date，<code>id</code>属性为 pickdate，<code>name</code>属性为 date。
|
||||
</section>
|
||||
Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个`input`标签，其`type`属性值为 date，`id`属性为 pickdate，`name`属性为 date。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码中应该有 1 个<code>input</code>标签。'
|
||||
testString: assert($('input').length == 2);
|
||||
- text: '你的<code>input</code>标签的<code>type</code>属性值应该为 date。'
|
||||
testString: assert($('input').attr('type') == 'date');
|
||||
- text: '你的<code>input</code>标签的<code>id</code>属性值应该为 pickdate。'
|
||||
testString: assert($('input').attr('id') == 'pickdate');
|
||||
- text: '你的<code>input</code>标签的<code>name</code>属性值应该为 date。'
|
||||
testString: assert($('input').attr('name') == 'date');
|
||||
你的代码中应该有 1 个`input`标签。
|
||||
|
||||
```js
|
||||
assert($('input').length == 2);
|
||||
```
|
||||
|
||||
</section>
|
||||
你的`input`标签的`type`属性值应该为 date。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```js
|
||||
assert($('input').attr('type') == 'date');
|
||||
```
|
||||
|
||||
</div>
|
||||
你的`input`标签的`id`属性值应该为 pickdate。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('input').attr('id') == 'pickdate');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
你的`input`标签的`name`属性值应该为 date。
|
||||
|
||||
```js
|
||||
assert($('input').attr('name') == 'date');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,71 +1,31 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: 考虑色盲用户的需求仔细选择传达信息的颜色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437as3'
|
||||
forumTopicId: 301011
|
||||
title: 考虑色盲用户的需求仔细选择传达信息的颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到几乎无法看到颜色。最常见的形式是对绿色的低感知度。
|
||||
|
||||
例如：如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法识别它们。可以认为色轮上相邻的颜色是相近的，在表示重要信息的时候应避免使用这些颜色的组合。
|
||||
<strong>注意：</strong><br>一些在线颜色拾取器有色盲模拟功能，可以模拟颜色在不同形式色盲的视觉中的呈现结果，它们和在线对比度检查器一样，都是很好的工具。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，黄色（<code>#FFFF33</code>）的<code>background-color</code>和绿色（<code>#33FF33</code>）的文本<code>color</code>是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的<code>color</code>修改为深蓝色（<code>#003366</code>）。
|
||||
</section>
|
||||
**注意：**
|
||||
一些在线颜色拾取器有色盲模拟功能，可以模拟颜色在不同形式色盲的视觉中的呈现结果，它们和在线对比度检查器一样，都是很好的工具。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>button</code>的文本<code>color</code>应该是深蓝色。'
|
||||
testString: assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||
Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，黄色（`#FFFF33`）的`background-color`和绿色（`#33FF33`）的文本`color`是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的`color`修改为深蓝色（`#003366`）。
|
||||
|
||||
# --hints--
|
||||
|
||||
`button`的文本`color`应该是深蓝色。
|
||||
|
||||
```js
|
||||
assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #33FF33;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,76 +1,38 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: 考虑色盲用户的需求设置合适的对比度
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMEUw'
|
||||
forumTopicId: 301012
|
||||
title: 考虑色盲用户的需求设置合适的对比度
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以识别它们。
|
||||
|
||||
在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二问题。WCAG 建议为颜色及灰度组合使用 4.5 : 1 的对比度。
|
||||
|
||||
色盲用户无法将一些颜色与另一些颜色区分出来——通常是因为色调，也有时候是因为亮度。你可能想起对比度是用前景色与背景色的相对亮度计算的。
|
||||
|
||||
实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5 : 1。在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 正在尝试为他的博客文本与背景使用颜色，但是他目前使用的组合是绿色的<code>background-color</code>与栗色的<code>color</code>，它们的对比度为 2.5 : 1。Camper Cat 使用了 CSS 的<code>hsl()</code>（hsl 为 hue, saturation, lightness 的缩写）属性来设置颜色，所以通过修改<code>hsl()</code>属性的第三个参数，可以很容易地调整颜色的亮度。请将<code>background-color</code>的亮度从 35% 增加到 55%，<code>color</code>的亮度从 20% 减少到 15%，这样可以使对比度达到 5.9 : 1。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Camper Cat 正在尝试为他的博客文本与背景使用颜色，但是他目前使用的组合是绿色的`background-color`与栗色的`color`，它们的对比度为 2.5 : 1。Camper Cat 使用了 CSS 的`hsl()`（hsl 为 hue, saturation, lightness 的缩写）属性来设置颜色，所以通过修改`hsl()`属性的第三个参数，可以很容易地调整颜色的亮度。请将`background-color`的亮度从 35% 增加到 55%，`color`的亮度从 20% 减少到 15%，这样可以使对比度达到 5.9 : 1。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该将<code>color</code>属性的亮度值设置为 15%。'
|
||||
testString: assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||
- text: '你应该将<code>background-color</code>属性的亮度值设置为 55%。'
|
||||
testString: assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||
# --hints--
|
||||
|
||||
你应该将`color`属性的亮度值设置为 15%。
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该将`background-color`属性的亮度值设置为 55%。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 20%);
|
||||
background-color: hsl(120, 25%, 35%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,67 +1,47 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: 使用描述性链接文本赋予链接含义
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437DcV'
|
||||
forumTopicId: 301013
|
||||
title: 使用描述性链接文本赋予链接含义
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
屏幕阅读器用户可以选择其设备读取的内容的类型，这包括跳转到（或跳过）标志标签，跳转到主要内容，或者从标题中获取页面摘要，还可以选择只听取页面中的有效链接。
|
||||
屏幕阅读器通过阅读链接文本或者锚点标签（<code>a</code>）之间的内容来完成这个操作。使用 "click here" 或者 "read more" 作为链接文本并没有多少帮助。相反地，应该在<code>a</code>标签中使用简洁的描述性语言来为用户提供更多的信息。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。请修改锚点标签（<code>a</code>），将其包含的文本从 "click here" 改为 "information about batteries"。
|
||||
</section>
|
||||
屏幕阅读器通过阅读链接文本或者锚点标签（`a`）之间的内容来完成这个操作。使用 "click here" 或者 "read more" 作为链接文本并没有多少帮助。相反地，应该在`a`标签中使用简洁的描述性语言来为用户提供更多的信息。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '请修改<code>a</code>标签，将其包含的文本从 "click here" 改为 "information about batteries"。'
|
||||
testString: assert($('a').text().match(/^(information about batteries)$/g));
|
||||
- text: '<code>a</code>元素应该有一个<code>href</code>属性，且值为空字符串'
|
||||
testString: assert($('a').attr('href') === '');
|
||||
- text: '<code>a</code> 元素应该有一个结束标记'
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length);
|
||||
Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。请修改锚点标签（`a`），将其包含的文本从 "click here" 改为 "information about batteries"。
|
||||
|
||||
# --hints--
|
||||
|
||||
请修改`a`标签，将其包含的文本从 "click here" 改为 "information about batteries"。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/^(information about batteries)$/g)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
`a`元素应该有一个`href`属性，且值为空字符串
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
|
||||
</article>
|
||||
</body>
|
||||
```js
|
||||
assert($('a').attr('href') === '');
|
||||
```
|
||||
|
||||
</div>
|
||||
`a` 元素应该有一个结束标记
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
---
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: 使用 audio 元素提高音频内容的可访问性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
|
||||
forumTopicId: 301014
|
||||
title: 使用 audio 元素提高音频内容的可访问性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 的<code>audio</code>标签用于呈现音频内容，它也具有语义化特性。可以在<code>audio</code>上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。
|
||||
<code>audio</code>支持<code>controls</code>属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。<code>controls</code>属性是一个布尔属性，只要这个属性出现在<code>audio</code>标签中，浏览器就会开启播放控件。
|
||||
# --description--
|
||||
|
||||
HTML5 的`audio`标签用于呈现音频内容，它也具有语义化特性。可以在`audio`上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。
|
||||
|
||||
`audio`支持`controls`属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。`controls`属性是一个布尔属性，只要这个属性出现在`audio`标签中，浏览器就会开启播放控件。
|
||||
|
||||
举个例子：
|
||||
|
||||
```html
|
||||
@ -19,70 +21,65 @@ HTML5 的<code>audio</code>标签用于呈现音频内容，它也具有语义
|
||||
</audio>
|
||||
```
|
||||
|
||||
<strong>注意：</strong><br>多媒体内容通常同时包含音频与视频部分，它需要同步音频与字幕，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不需要创建音频与字幕，但是需要将它们添加到多媒体中。
|
||||
</section>
|
||||
**注意：**
|
||||
多媒体内容通常同时包含音频与视频部分，它需要同步音频与字幕，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不需要创建音频与字幕，但是需要将它们添加到多媒体中。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
是时候让 Camper Cat 休息一下，并与朋友 camper Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验 Zersiax 的屏幕阅读器的朗读效果，请在<code>p</code>标签之后添加一个具有<code>controls</code>属性的<code>audio</code>标签。然后在<code>audio</code>标签内添加一个<code>source</code>标签，并且设置<code>src</code>属性为"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3"，并且设置<code>type</code>属性为"audio/mpeg".
|
||||
<strong>注意：</strong><br>音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
是时候让 Camper Cat 休息一下，并与朋友 camper Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验 Zersiax 的屏幕阅读器的朗读效果，请在`p`标签之后添加一个具有`controls`属性的`audio`标签。然后在`audio`标签内添加一个`source`标签，并且设置`src`属性为"`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`"，并且设置`type`属性为"audio/mpeg".
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码应该包含一个<code>audio</code>标签。'
|
||||
testString: assert($('audio').length === 1);
|
||||
- text: '确保你的<code>audio</code>标签是闭合的。'
|
||||
testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g));
|
||||
- text: '<code>audio</code>标签应具有<code>controls</code>属性。'
|
||||
testString: assert($('audio').attr('controls'));
|
||||
- text: '你的代码应具有<code>source</code>标签。'
|
||||
testString: assert($('source').length === 1);
|
||||
- text: '<code>source</code>标签应该在<code>audio</code>标签中。'
|
||||
testString: assert($('audio').children('source').length === 1);
|
||||
- text: '<code>source</code>标签中<code>src</code>属性的值应该与教程中的链接一致。'
|
||||
testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3');
|
||||
- text: '<code>source</code>标签中应具有<code>type</code>属性，其值为 audio/mpeg。'
|
||||
testString: assert($('source').attr('type') === 'audio/mpeg');
|
||||
**注意：**
|
||||
音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该包含一个`audio`标签。
|
||||
|
||||
```js
|
||||
assert($('audio').length === 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
确保你的`audio`标签是闭合的。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/audio>/g).length === 1 &&
|
||||
code.match(/<audio.*>[\s\S]*<\/audio>/g)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
`audio`标签应具有`controls`属性。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('audio').attr('controls'));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
你的代码应具有`source`标签。
|
||||
|
||||
```js
|
||||
assert($('source').length === 1);
|
||||
```
|
||||
|
||||
`source`标签应该在`audio`标签中。
|
||||
|
||||
```js
|
||||
assert($('audio').children('source').length === 1);
|
||||
```
|
||||
|
||||
`source`标签中`src`属性的值应该与教程中的链接一致。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('source').attr('src') ===
|
||||
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
|
||||
);
|
||||
```
|
||||
|
||||
`source`标签中应具有`type`属性，其值为 audio/mpeg。
|
||||
|
||||
```js
|
||||
assert($('source').attr('type') === 'audio/mpeg');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,16 +1,18 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: 使用 figure 元素提高图表的可访问性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
||||
forumTopicId: 301015
|
||||
title: 使用 figure 元素提高图表的可访问性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 引入了<code>figure</code>标签以及与之相关的<code>figcaption</code>标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释<code>figure</code>的文字，可以极大地提升内容的可访问性。
|
||||
# --description--
|
||||
|
||||
HTML5 引入了`figure`标签以及与之相关的`figcaption`标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释`figure`的文字，可以极大地提升内容的可访问性。
|
||||
|
||||
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何处理那些超出屏幕可视范围（使用 CSS）的表格版本的图表数据，以使屏幕阅读器用户也可以获取信息。
|
||||
举个例子——注意<code>figcaption</code>包含在<code>figure</code>标签中，并且可以与其他标签组合使用：
|
||||
|
||||
举个例子——注意`figcaption`包含在`figure`标签中，并且可以与其他标签组合使用：
|
||||
|
||||
```html
|
||||
<figure>
|
||||
@ -22,96 +24,50 @@ HTML5 引入了<code>figure</code>标签以及与之相关的<code>figcaption</c
|
||||
</figure>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他的用于呈现图表的<code>div</code>标签修改为<code>figure</code>标签，用于呈现图表标题的<code>p</code>标签改为<code>figcaption</code>标签。
|
||||
</section>
|
||||
Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他的用于呈现图表的`div`标签修改为`figure`标签，用于呈现图表标题的`p`标签改为`figcaption`标签。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码应该有 1 个<code>figure</code>标签。'
|
||||
testString: assert($('figure').length == 1);
|
||||
- text: '你的代码应该有 1 个<code>figcaption</code>标签。'
|
||||
testString: assert($('figcaption').length == 1);
|
||||
- text: '你的代码不应有<code>div</code>标签。'
|
||||
testString: assert($('div').length == 0);
|
||||
- text: '你的代码不应有<code>p</code>标签。'
|
||||
testString: assert($('p').length == 0);
|
||||
- text: '<code>figcaption</code>应该为<code>figure</code>的子标签。'
|
||||
testString: assert($('figure').children('figcaption').length == 1);
|
||||
- text: '请确保你的<code>figure</code>标签是闭合的。'
|
||||
testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length);
|
||||
你的代码应该有 1 个`figure`标签。
|
||||
|
||||
```js
|
||||
assert($('figure').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码应该有 1 个`figcaption`标签。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
<div>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||
</div>
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```js
|
||||
assert($('figcaption').length == 1);
|
||||
```
|
||||
|
||||
</div>
|
||||
你的代码不应有`div`标签。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
你的代码不应有`p`标签。
|
||||
|
||||
```js
|
||||
assert($('p').length == 0);
|
||||
```
|
||||
|
||||
`figcaption`应该为`figure`的子标签。
|
||||
|
||||
```js
|
||||
assert($('figure').children('figcaption').length == 1);
|
||||
```
|
||||
|
||||
请确保你的`figure`标签是闭合的。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/figure>/g) &&
|
||||
code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: 使用 label 元素提高表单的可访问性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMMAN'
|
||||
forumTopicId: 301016
|
||||
title: 使用 label 元素提高表单的可访问性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。在接下来的挑战中，你将会看到使用表单属性的重要场景。
|
||||
<code>label</code>标签用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。<code>label</code>标签的<code>for</code>属性指定了与<code>label</code>绑定的表单控件，并且屏幕阅读器也会读取<code>for</code>属性。
|
||||
在 HTML 基础章节的课程中，我们已经了解了单选按钮标签。在那节课程中，我们为了可以点击单选按钮的名称，将<code>input</code>标签放在<code>label</code>标签中。在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用<code>for</code>属性。
|
||||
<code>for</code>属性的值必须与表单控件的<code>id</code>属性的值相同。举个例子：
|
||||
|
||||
`label`标签用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。`label`标签的`for`属性指定了与`label`绑定的表单控件，并且屏幕阅读器也会读取`for`属性。
|
||||
|
||||
在 HTML 基础章节的课程中，我们已经了解了单选按钮标签。在那节课程中，我们为了可以点击单选按钮的名称，将`input`标签放在`label`标签中。在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用`for`属性。
|
||||
|
||||
`for`属性的值必须与表单控件的`id`属性的值相同。举个例子：
|
||||
|
||||
```html
|
||||
<form>
|
||||
@ -20,79 +23,23 @@ title: 使用 label 元素提高表单的可访问性
|
||||
</form>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 希望他的博客文章能有很多订阅，他想添加一个电子邮件注册表单。请为表示电子邮件的<code>label</code>标签添加<code>for</code>属性，并设置属性值与<code>input</code>标签的<code>id</code>属性值相同。
|
||||
</section>
|
||||
Camper Cat 希望他的博客文章能有很多订阅，他想添加一个电子邮件注册表单。请为表示电子邮件的`label`标签添加`for`属性，并设置属性值与`input`标签的`id`属性值相同。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的<code>label</code>标签应该有 1 个非空的<code>for</code>属性。'
|
||||
testString: assert($('label').attr('for'));
|
||||
- text: '<code>for</code>属性的值应该与<code>input</code>标签的 id 值 email 相同。'
|
||||
testString: assert($('label').attr('for') == 'email');
|
||||
你的`label`标签应该有 1 个非空的`for`属性。
|
||||
|
||||
```js
|
||||
assert($('label').attr('for'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`for`属性的值应该与`input`标签的 id 值 email 相同。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```js
|
||||
assert($('label').attr('for') == 'email');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,74 +1,34 @@
|
||||
---
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: 使用高对比度文本提高可读性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cKb3nCq'
|
||||
forumTopicId: 301017
|
||||
title: 使用高对比度文本提高可读性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
低对比度的前景色与背景色会使文本难以阅读。足够的对比度可以提高内容的可读性，但是怎样的对比度才算是 “足够” 的？
|
||||
|
||||
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的，其范围是从相同颜色的 1 : 1（无对比度）到白色与黑色的最高对比度 21 : 1。网上有很多可以帮助你计算对比度的工具。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 为他的博客选择了白色背景，浅灰色文字，对比度为 1.5 : 1，这使博客文章难以阅读。请将文字的<code>color</code>从当前的浅灰色（<code>#D3D3D3</code>）修改为深灰色（<code>#636363</code>），以使对比度提升到 6 : 1。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Camper Cat 为他的博客选择了白色背景，浅灰色文字，对比度为 1.5 : 1，这使博客文章难以阅读。请将文字的`color`从当前的浅灰色（`#D3D3D3`）修改为深灰色（`#636363`），以使对比度提升到 6 : 1。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该将<code>body</code>的<code>color</code>修改为深灰色。'
|
||||
testString: assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||
- text: '你不应该修改<code>body</code>的<code>background-color</code>。'
|
||||
testString: assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||
# --hints--
|
||||
|
||||
你应该将`body`的`color`修改为深灰色。
|
||||
|
||||
```js
|
||||
assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||
```
|
||||
|
||||
</section>
|
||||
你不应该修改`body`的`background-color`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #D3D3D3;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```js
|
||||
assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,65 +1,38 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: 使用 main 元素包裹主题内容
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
||||
forumTopicId: 301018
|
||||
title: 使用 main 元素包裹主题内容
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 添加了诸如<code>main</code>、<code>header</code>、<code>footer</code>、<code>nav</code>、<code>article</code>、<code>section</code>等大量新标签，开发人员提供更多的选择，也兼顾了无障碍特性。
|
||||
默认情况下，浏览器呈现这些新标签的方式与<code>div</code>相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。
|
||||
<code>main</code>标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。
|
||||
<code>main</code>标签的语义化特性可以使辅助技术快速定位到页面的主体。 如果页面顶部有一个 “跳转到主要内容” 的链接，那么辅助设备会自动识别<code>main</code>标签，实现这个功能。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 对他的忍者武器页面有一些新的想法，请帮助他在<code>header</code>标签和<code>footer</code>标签（在接下来的挑战中会详细介绍）之间添加完整<code>main</code>标签来使页面语义化。在这个挑战中，你可以先让<code>main</code>为空。
|
||||
</section>
|
||||
HTML5 添加了诸如`main`、`header`、`footer`、`nav`、`article`、`section`等大量新标签，开发人员提供更多的选择，也兼顾了无障碍特性。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
默认情况下，浏览器呈现这些新标签的方式与`div`相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码应该有一个<code>main</code>标签。'
|
||||
testString: assert($('main').length == 1);
|
||||
- text: '<code>main</code>标签应该在<code>header</code>标签与<code>footer</code>标签之间。'
|
||||
testString: assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||
`main`标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。
|
||||
|
||||
`main`标签的语义化特性可以使辅助技术快速定位到页面的主体。 如果页面顶部有一个 “跳转到主要内容” 的链接，那么辅助设备会自动识别`main`标签，实现这个功能。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 对他的忍者武器页面有一些新的想法，请帮助他在`header`标签和`footer`标签（在接下来的挑战中会详细介绍）之间添加完整`main`标签来使页面语义化。在这个挑战中，你可以先让`main`为空。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该有一个`main`标签。
|
||||
|
||||
```js
|
||||
assert($('main').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
`main`标签应该在`header`标签与`footer`标签之间。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
```js
|
||||
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,71 +1,41 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: 知道 Alt 文本何时应该留空
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
||||
forumTopicId: 301019
|
||||
title: 知道 Alt 文本何时应该留空
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在上一个挑战中，我们了解到<code>img</code>标签必须有一个<code>alt</code>属性。在图片已经有了文字说明，或者仅仅为了美化页面的情况下，<code>alt</code>属性似乎有些多余。
|
||||
即便如此，我们仍然需要为<code>img</code>标签添加<code>alt</code>属性，这时可以把它设为空，例如：
|
||||
<code><img src="visualDecoration.jpeg" alt=""></code>
|
||||
# --description--
|
||||
|
||||
在上一个挑战中，我们了解到`img`标签必须有一个`alt`属性。在图片已经有了文字说明，或者仅仅为了美化页面的情况下，`alt`属性似乎有些多余。
|
||||
|
||||
即便如此，我们仍然需要为`img`标签添加`alt`属性，这时可以把它设为空，例如：
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
|
||||
背景图片通常起装饰作用，而且含有 CSS 类，所以屏幕阅读器无法读取。
|
||||
<strong>注意：</strong><br>对于有标题的图片，我们依然需要添加<code>alt</code>属性，因为这样有助于搜索引擎记录图片内容。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的<code>alt</code>属性（注意：这里<code>img</code>标签的<code>src</code>属性提供的链接是无效的，因此页面上可能不会显示图片，不用担心）。
|
||||
</section>
|
||||
**注意：**
|
||||
对于有标题的图片，我们依然需要添加`alt`属性，因为这样有助于搜索引擎记录图片内容。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的<code>img</code>标签应该包含<code>alt</code>属性。'
|
||||
testString: assert(!($('img').attr('alt') == undefined));
|
||||
- text: '<code>alt</code>属性对应的值应该为空。'
|
||||
testString: assert($('img').attr('alt') == '');
|
||||
Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的`alt`属性（注意：这里`img`标签的`src`属性提供的链接是无效的，因此页面上可能不会显示图片，不用担心）。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的`img`标签应该包含`alt`属性。
|
||||
|
||||
```js
|
||||
assert(!($('img').attr('alt') == undefined));
|
||||
```
|
||||
|
||||
</section>
|
||||
`alt`属性对应的值应该为空。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```js
|
||||
assert($('img').attr('alt') == '');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
---
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: 使用自定义 CSS 让元素仅对屏幕阅读器可见
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
|
||||
forumTopicId: 301020
|
||||
title: 使用自定义 CSS 让元素仅对屏幕阅读器可见
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。
|
||||
|
||||
然而，如果我们需要在页面中添加一些只对屏幕阅读器可见的内容时，CSS 可以提升页面的可访问性。当信息以可视化形式（如：图表）展示，而屏幕阅读器用户需要一种替代方式（如：表格）来获取信息时，就会出现这种情况。CSS 被用来将这些仅供屏幕阅读器使用的信息定位到浏览器可见区域之外。
|
||||
|
||||
举个例子：
|
||||
|
||||
```css
|
||||
@ -23,140 +25,43 @@ title: 使用自定义 CSS 让元素仅对屏幕阅读器可见
|
||||
}
|
||||
```
|
||||
|
||||
<strong>注意：</strong><br>下面的 CSS 代码与上面的结果不同：
|
||||
**注意：**
|
||||
下面的 CSS 代码与上面的结果不同：
|
||||
|
||||
<ul>
|
||||
<li><code>display: none;</code>或<code>visibility: hidden;</code>会把内容彻底隐藏起来，对于屏幕阅读器也不例外。</li>
|
||||
<li>如果把值设置为 0px，如<code>width: 0px; height: 0px;</code>，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 为他的训练页面创建了一个十分酷炫的条形图，并将数据放入表格中，供屏幕阅读器用户使用。表格已经有了一个<code>sr-only</code>类，但是还没有添加 CSS 规则。请设置<code>position</code>的值为 absolute，<code>left</code> 的值为 -10000px，<code>width</code>与<code>height</code>的值为 1px。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
Camper Cat 为他的训练页面创建了一个十分酷炫的条形图，并将数据放入表格中，供屏幕阅读器用户使用。表格已经有了一个`sr-only`类，但是还没有添加 CSS 规则。请设置`position`的值为 absolute，`left` 的值为 -10000px，`width`与`height`的值为 1px。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>sr-only</code>类中的<code>position</code>属性的值应为 absolute。'
|
||||
testString: assert($('.sr-only').css('position') == 'absolute');
|
||||
- text: '<code>sr-only</code>类中的<code>left</code>属性的值应为 -10000px。'
|
||||
testString: assert($('.sr-only').css('left') == '-10000px');
|
||||
- text: '<code>sr-only</code>类中的<code>width</code>属性的值应为 1px。'
|
||||
testString: assert(code.match(/width:\s*?1px/gi));
|
||||
- text: '<code>sr-only</code>类中的<code>height</code>属性的值应为 1px。'
|
||||
testString: assert(code.match(/height:\s*?1px/gi));
|
||||
# --hints--
|
||||
|
||||
`sr-only`类中的`position`属性的值应为 absolute。
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
</section>
|
||||
`sr-only`类中的`left`属性的值应为 -10000px。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: ;
|
||||
left: ;
|
||||
width: ;
|
||||
height: ;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training-->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```js
|
||||
assert($('.sr-only').css('left') == '-10000px');
|
||||
```
|
||||
|
||||
</div>
|
||||
`sr-only`类中的`width`属性的值应为 1px。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/width:\s*?1px/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`sr-only`类中的`height`属性的值应为 1px。
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?1px/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,84 +1,50 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512aaf
|
||||
title: 通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQvmaTp'
|
||||
forumTopicId: 1
|
||||
title: 通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML 提供<code>accesskey</code>属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加便捷。
|
||||
HTML5 允许在任何标签上使用这个属性。该属性 （如链接、按钮、表单控件等）十分有用。
|
||||
# --description--
|
||||
|
||||
HTML 提供`accesskey`属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加便捷。
|
||||
|
||||
HTML5 允许在任何标签上使用这个属性。该属性 （如链接、按钮、表单控件等）十分有用。
|
||||
|
||||
举个例子：
|
||||
<code><button accesskey="b">Important Button</button></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 希望为他的两篇博客的标题的链接设置快捷键，以使用户可以快速导航到文章的全文。请为这两个链接添加<code>accesskey</code>属性，并将第一个设置为 "g"（表示 Garfield），第二个设置为 "c"（表示 Chuck Norris）。
|
||||
</section>
|
||||
`<button accesskey="b">Important Button</button>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该为<code>id</code>是 "first" 的<code>a</code>标签添加<code>accesskey</code>属性。'
|
||||
testString: assert($('#first').attr('accesskey'));
|
||||
- text: '你应该为<code>id</code>是 "second" 的<code>a</code>标签添加<code>accesskey</code>属性。'
|
||||
testString: assert($('#second').attr('accesskey'));
|
||||
- text: '你应该将<code>id</code>是 "first" 的<code>a</code>标签的<code>accesskey</code>属性值设置为小写 "g"。'
|
||||
testString: assert($('#first').attr('accesskey') == 'g');
|
||||
- text: '你应该将<code>id</code>是 "second" 的<code>a</code>标签的<code>accesskey</code>属性值设置为小写 "c"。'
|
||||
testString: assert($('#second').attr('accesskey') == 'c');
|
||||
Camper Cat 希望为他的两篇博客的标题的链接设置快捷键，以使用户可以快速导航到文章的全文。请为这两个链接添加`accesskey`属性，并将第一个设置为 "g"（表示 Garfield），第二个设置为 "c"（表示 Chuck Norris）。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该为`id`是 "first" 的`a`标签添加`accesskey`属性。
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey'));
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该为`id`是 "second" 的`a`标签添加`accesskey`属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" href="">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" href="">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```js
|
||||
assert($('#second').attr('accesskey'));
|
||||
```
|
||||
|
||||
</div>
|
||||
你应该将`id`是 "first" 的`a`标签的`accesskey`属性值设置为小写 "g"。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('#first').attr('accesskey') == 'g');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
你应该将`id`是 "second" 的`a`标签的`accesskey`属性值设置为小写 "c"。
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey') == 'c');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,91 +1,38 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: 使用 footer 元素使屏幕阅读器更容易导航
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVrDh8'
|
||||
forumTopicId: 301022
|
||||
title: 使用 footer 元素使屏幕阅读器更容易导航
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
与<code>header</code>和<code>nav</code>类似，<code>footer</code>也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的<code>div</code>标签更改为<code>footer</code>标签。
|
||||
</section>
|
||||
与`header`和`nav`类似，`footer`也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码中应该包含 1 个<code>footer</code>标签。'
|
||||
testString: assert($('footer').length == 1);
|
||||
- text: '你的代码中不应包含<code>div</code>标签。'
|
||||
testString: assert($('div').length == 0);
|
||||
- text: '你代码中的<code>footer</code>应该是闭合的。'
|
||||
testString: assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||
Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的`div`标签更改为`footer`标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码中应该包含 1 个`footer`标签。
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码中不应包含`div`标签。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<div>© 2018 Camper Cat</div>
|
||||
|
||||
|
||||
</body>
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
</div>
|
||||
你代码中的`footer`应该是闭合的。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,86 +1,52 @@
|
||||
---
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: 使用 header 元素使屏幕阅读器更容易导航
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB76vtv'
|
||||
forumTopicId: 301023
|
||||
title: 使用 header 元素使屏幕阅读器更容易导航
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>header</code>也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
|
||||
与<code>main</code>类似，<code>header</code>的语义化特性也可以使辅助技术快速定位到它的内容。
|
||||
<strong>注意：</strong><br><code>header</code>用在 HTML 文档的<code>body</code>标签中。这点与包含页面标题、元信息的<code>head</code>标签不同。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 正在写一些训练忍者的精彩文章，并为它们建立一个新的页面。请使用<code>header</code>替换页面顶端包含<code>h1</code>的<code>div</code>标签。
|
||||
</section>
|
||||
`header`也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
与`main`类似，`header`的语义化特性也可以使辅助技术快速定位到它的内容。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码应该包含 1 个<code>header</code>标签。'
|
||||
testString: assert($('header').length == 1);
|
||||
- text: '你的<code>header</code>标签应该包含<code>h1</code>。'
|
||||
testString: assert($('header').children('h1').length == 1);
|
||||
- text: '你的代码不应有任何<code>div</code>标签。'
|
||||
testString: assert($('div').length == 0);
|
||||
- text: '确保你的<code>header</code>标签是闭合的。'
|
||||
testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length);
|
||||
**注意：**
|
||||
`header`用在 HTML 文档的`body`标签中。这点与包含页面标题、元信息的`head`标签不同。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 正在写一些训练忍者的精彩文章，并为它们建立一个新的页面。请使用`header`替换页面顶端包含`h1`的`div`标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该包含 1 个`header`标签。
|
||||
|
||||
```js
|
||||
assert($('header').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
你的`header`标签应该包含`h1`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```js
|
||||
assert($('header').children('h1').length == 1);
|
||||
```
|
||||
|
||||
</div>
|
||||
你的代码不应有任何`div`标签。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
确保你的`header`标签是闭合的。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/header>/g) &&
|
||||
code.match(/<\/header>/g).length === code.match(/<header>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,91 +1,49 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: 使用 nav 元素使屏幕阅读器更容易导航
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVwWSv'
|
||||
forumTopicId: 301024
|
||||
title: 使用 nav 元素使屏幕阅读器更容易导航
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>nav</code>也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。
|
||||
对于在多个页面底部出现的站点链接，不需要使用<code>nav</code>，用<code>footer</code>（在下个挑战中介绍）会更好。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 在他的忍者训练页面顶端使用了很多导航链接，但把它们写在了<code>div</code>中。请将<code>div</code>更改为<code>nav</code>标签，以提升页面的可访问性。
|
||||
</section>
|
||||
`nav`也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
对于在多个页面底部出现的站点链接，不需要使用`nav`，用`footer`（在下个挑战中介绍）会更好。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码应该有 1 个<code>nav</code>标签。'
|
||||
testString: assert($('nav').length == 1);
|
||||
- text: '你的<code>nav</code>标签应该包含<code>ul</code>标签及其列表项。'
|
||||
testString: assert($('nav').children('ul').length == 1);
|
||||
- text: '你的代码不应包含<code>div</code>标签。'
|
||||
testString: assert($('div').length == 0);
|
||||
- text: '确保你的<code>nav</code>标签是闭合的。'
|
||||
testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length);
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 在他的忍者训练页面顶端使用了很多导航链接，但把它们写在了`div`中。请将`div`更改为`nav`标签，以提升页面的可访问性。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该有 1 个`nav`标签。
|
||||
|
||||
```js
|
||||
assert($('nav').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
你的`nav`标签应该包含`ul`标签及其列表项。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```js
|
||||
assert($('nav').children('ul').length == 1);
|
||||
```
|
||||
|
||||
</div>
|
||||
你的代码不应包含`div`标签。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
确保你的`nav`标签是闭合的。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/nav>/g) &&
|
||||
code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,102 +1,51 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: 使用 HTML5 的 datatime 属性标准化时间
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||
forumTopicId: 301025
|
||||
title: 使用 HTML5 的 datatime 属性标准化时间
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
继续日期主题。HTML5 还引入了<code>time</code>标签与<code>datetime</code>属性来标准化时间。<code>time</code>是一个行内标签，用于在页面中呈现日期或时间，而<code>datetime</code>属性保存了日期的有效格式，辅助设备可以访问这个值。通过标准化时间格式，即使时间在文本中是以非正式的或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。
|
||||
# --description--
|
||||
|
||||
继续日期主题。HTML5 还引入了`time`标签与`datetime`属性来标准化时间。`time`是一个行内标签，用于在页面中呈现日期或时间，而`datetime`属性保存了日期的有效格式，辅助设备可以访问这个值。通过标准化时间格式，即使时间在文本中是以非正式的或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。
|
||||
|
||||
举个例子：
|
||||
<code><p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 的比武大会的时间确定了！请使用<code>time</code>标签包含文本 "Thursday, September 15<sup>th</sup>"，并将<code>datetime</code>属性设置为 "2016-09-15"。
|
||||
</section>
|
||||
`<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>time</code>标签应该包含文本"Thursday, September 15<sup>th</sup>"。'
|
||||
testString: assert(timeElement.length);
|
||||
- text: '<code>time</code>标签应该有 1 个非空的<code>datetime</code>属性。'
|
||||
testString: assert(timeElement.length && $(timeElement).html().trim() === "Thursday, September 15<sup>th</sup>");
|
||||
- text: '<code>datetime</code>属性的值应该为 2016-09-15。'
|
||||
testString: assert(datetimeAttr && datetimeAttr.length);
|
||||
- text: '确保<code>time</code>标签是闭合的。'
|
||||
testString: assert(datetimeAttr === "2016-09-15");
|
||||
Camper Cat 的比武大会的时间确定了！请使用`time`标签包含文本 "Thursday, September 15<sup>th</sup>"，并将`datetime`属性设置为 "2016-09-15"。
|
||||
|
||||
# --hints--
|
||||
|
||||
`time`标签应该包含文本"Thursday, September 15<sup>th</sup>"。
|
||||
|
||||
```js
|
||||
assert(timeElement.length);
|
||||
```
|
||||
|
||||
</section>
|
||||
`time`标签应该有 1 个非空的`datetime`属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
|
||||
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```js
|
||||
assert(
|
||||
timeElement.length &&
|
||||
$(timeElement).html().trim() === 'Thursday, September 15<sup>th</sup>'
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
`datetime`属性的值应该为 2016-09-15。
|
||||
|
||||
<div id='html-teardown'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
const pElement = $("article > p")
|
||||
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
|
||||
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
|
||||
const datetimeAttr = $(timeElement).attr("datetime");
|
||||
</script>
|
||||
```js
|
||||
assert(datetimeAttr && datetimeAttr.length);
|
||||
```
|
||||
|
||||
</div>
|
||||
确保`time`标签是闭合的。
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(datetimeAttr === '2016-09-15');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,77 +1,54 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: 使用标题显示内容的层次关系
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
||||
forumTopicId: 301026
|
||||
title: 使用标题显示内容的层次关系
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
标题标签（包括<code>h1</code>到<code>h6</code>）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为更快地了解页面内容，可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化，不应仅仅为了获得不同字号而使用不同级别的标题标签。
|
||||
<em>语义化</em>：标签名能准确地表达它所含内容的信息类型。
|
||||
# --description--
|
||||
|
||||
标题标签（包括`h1`到`h6`）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为更快地了解页面内容，可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化，不应仅仅为了获得不同字号而使用不同级别的标题标签。
|
||||
|
||||
*语义化*：标签名能准确地表达它所含内容的信息类型。
|
||||
|
||||
对于一篇含有引言、正文、结论的论文，把结论作为引言的一部分没有任何意义，因为结论应该是独立的章节。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。
|
||||
|
||||
在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。
|
||||
举个例子：一个<code>h2</code>标签后紧跟若干<code>h4</code>标签的页面，会让使用屏幕阅读器的用户感到困惑。尽管在页面中，使用这 6 个标题标签可以控制内容的的视觉样式，但我们应该使用 CSS 来调整。
|
||||
最后一点，每个页面应该只有一个<code>h1</code>标签，用来说明页面主要内容。<code>h1</code>标签和其他的标题标签可以让搜索引擎获取页面的大纲。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签，使它们语义化且顺序正确。你需要将所有的<code>h5</code>标题标签调整为恰当的级别（即<code>h3</code>标题标签），使它们是<code>h2</code>标题标签的子级。
|
||||
</section>
|
||||
举个例子：一个`h2`标签后紧跟若干`h4`标签的页面，会让使用屏幕阅读器的用户感到困惑。尽管在页面中，使用这 6 个标题标签可以控制内容的的视觉样式，但我们应该使用 CSS 来调整。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
最后一点，每个页面应该只有一个`h1`标签，用来说明页面主要内容。`h1`标签和其他的标题标签可以让搜索引擎获取页面的大纲。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码应该包含 6 个<code>h3</code>标签。'
|
||||
testString: assert($("h3").length === 6);
|
||||
- text: '你的代码不应包含 <code>h5</code> 标签。'
|
||||
testString: assert((code.match(/\/h3/g) || []).length===6);
|
||||
- text: '代码不应该包含 <code>h5</code> 标记.'
|
||||
testString: assert($("h5").length === 0);
|
||||
- text: '代码不应该包含 <code>h5</code> 结束标记。'
|
||||
testString: assert(/\/h5/.test(code)===false);
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签，使它们语义化且顺序正确。你需要将所有的`h5`标题标签调整为恰当的级别（即`h3`标题标签），使它们是`h2`标题标签的子级。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代码应该包含 6 个`h3`标签。
|
||||
|
||||
```js
|
||||
assert($('h3').length === 6);
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码不应包含 `h5` 标签。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h5>How to Hide in Plain Sight</h5>
|
||||
<h5>How to Climb a Wall</h5>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h5>How to Strengthen your Body</h5>
|
||||
<h5>How to Fight like a Ninja</h5>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h5>How to Breathe Properly</h5>
|
||||
<h5>How to Simplify your Life</h5>
|
||||
</main>
|
||||
```js
|
||||
assert((code.match(/\/h3/g) || []).length === 6);
|
||||
```
|
||||
|
||||
</div>
|
||||
代码不应该包含 `h5` 标记.
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h5').length === 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
代码不应该包含 `h5` 结束标记。
|
||||
|
||||
```js
|
||||
assert(/\/h5/.test(code) === false);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,105 +1,39 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: 使用 tabindex 将键盘焦点添加到元素中
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||
forumTopicId: 301027
|
||||
title: 使用 tabindex 将键盘焦点添加到元素中
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML 的<code>tabindex</code>属性有三个不同与标签焦点的功能。当它在标签上时，表示标签可以获得焦点。它的值可以是零、负整数及正整数，并决定了标签的行为。
|
||||
当用户在页面中使用 tab 键时，有些标签，如：链接、表单控件，可以自动获得焦点。它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将<code>tabindex</code>属性值设为 0，来给其他标签赋予相同的功能，如：<code>div</code>、<code>span</code>、<code>p</code>等。举个例子：
|
||||
<code><div tabindex="0">I need keyboard focus!</div></code>
|
||||
<strong>注意：</strong><br><code>tabindex</code>属性值为负整数（通常为 -1）的标签也是有焦点的，只是不可以通过 tab 键来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：激活用于弹出框的<code>div</code>标签），但是它超出了当前挑战的范围。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 新建了一个调查，用来收集他的用户的信息。他知道输入框可以自动获得键盘焦点，但他希望确保当键盘用户切换标签时，焦点可以停留在指示文字上。请给<code>p</code>标签添加<code>tabindex</code>属性，并将它的值设置为 0。注意：使用<code>tabindex</code>属性可以使 CSS 伪类<code>:focus</code>在<code>p</code>标签上生效。
|
||||
</section>
|
||||
HTML 的`tabindex`属性有三个不同与标签焦点的功能。当它在标签上时，表示标签可以获得焦点。它的值可以是零、负整数及正整数，并决定了标签的行为。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
当用户在页面中使用 tab 键时，有些标签，如：链接、表单控件，可以自动获得焦点。它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将`tabindex`属性值设为 0，来给其他标签赋予相同的功能，如：`div`、`span`、`p`等。举个例子：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该为表单中的<code>p</code>标签添加<code>tabindex</code>属性。'
|
||||
testString: assert($('p').attr('tabindex'));
|
||||
- text: '你应该将<code>p</code>标签的<code>tabindex</code>属性值设置为 0。'
|
||||
testString: assert($('p').attr('tabindex') == '0');
|
||||
`<div tabindex="0">I need keyboard focus!</div>`
|
||||
|
||||
**注意：**
|
||||
`tabindex`属性值为负整数（通常为 -1）的标签也是有焦点的，只是不可以通过 tab 键来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：激活用于弹出框的`div`标签），但是它超出了当前挑战的范围。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 新建了一个调查，用来收集他的用户的信息。他知道输入框可以自动获得键盘焦点，但他希望确保当键盘用户切换标签时，焦点可以停留在指示文字上。请给`p`标签添加`tabindex`属性，并将它的值设置为 0。注意：使用`tabindex`属性可以使 CSS 伪类`:focus`在`p`标签上生效。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该为表单中的`p`标签添加`tabindex`属性。
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex'));
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该将`p`标签的`tabindex`属性值设置为 0。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```js
|
||||
assert($('p').attr('tabindex') == '0');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,95 +1,54 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: 使用 tabindex 指定多个元素的键盘焦点顺序
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||
forumTopicId: 301028
|
||||
title: 使用 tabindex 指定多个元素的键盘焦点顺序
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>tabindex</code>属性还可以指定标签的 tab 键顺序，将它的值设置为大于或等于 1 就可以实现这个功能。
|
||||
<code>tabindex</code>属性值为 1 的标签将首先获得键盘焦点，然后焦点将按照指定的<code>tabindex</code>的值（如：2，3 等）的顺序进行移动，直到回到默认的或<code>tabindex</code>值为 0 的标签上，如此循环。
|
||||
# --description--
|
||||
|
||||
`tabindex`属性还可以指定标签的 tab 键顺序，将它的值设置为大于或等于 1 就可以实现这个功能。
|
||||
|
||||
`tabindex`属性值为 1 的标签将首先获得键盘焦点，然后焦点将按照指定的`tabindex`的值（如：2，3 等）的顺序进行移动，直到回到默认的或`tabindex`值为 0 的标签上，如此循环。
|
||||
|
||||
需要注意的是，当按照这种方式设置 tab 键顺序时，将会覆盖默认的顺序（标签在文档流中出现的顺序）。这可能会令那些希望从页面顶部开始导航的用户感到困惑。这个技术在某些情况下可能是必要的，但是对可访问性而言，在应用时要十分小心。
|
||||
|
||||
举个例子：
|
||||
<code><div tabindex="1">I get keyboard focus, and I get it first!</div></code>
|
||||
<code><div tabindex="2">I get keyboard focus, and I get it second!</div></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 将这个区域定位在页面的右上角。Camper Cat 希望他的搜索<code>input</code>与提交<code>input</code>表单控件是 tab 键顺序的前两项。请为搜索<code>input</code>添加<code>tabindex</code>属性，其值为 1。为提交<code>input</code>添加<code>tabindex</code>属性，其值为 2。
|
||||
</section>
|
||||
`<div tabindex="1">I get keyboard focus, and I get it first!</div>`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`<div tabindex="2">I get keyboard focus, and I get it second!</div>`
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该为搜索<code>input</code>标签添加<code>tabindex</code>属性。'
|
||||
testString: assert($('#search').attr('tabindex'));
|
||||
- text: '你应该为提交<code>input</code>标签添加<code>tabindex</code>属性。'
|
||||
testString: assert($('#submit').attr('tabindex'));
|
||||
- text: '搜索<code>input</code>标签的<code>tabindex</code>属性值应该为 1。'
|
||||
testString: assert($('#search').attr('tabindex') == '1');
|
||||
- text: '提交<code>input</code>标签的<code>tabindex</code>属性值应该为 2。'
|
||||
testString: assert($('#submit').attr('tabindex') == '2');
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 将这个区域定位在页面的右上角。Camper Cat 希望他的搜索`input`与提交`input`表单控件是 tab 键顺序的前两项。请为搜索`input`添加`tabindex`属性，其值为 1。为提交`input`添加`tabindex`属性，其值为 2。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该为搜索`input`标签添加`tabindex`属性。
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex'));
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该为提交`input`标签添加`tabindex`属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input type="search" name="search" id="search">
|
||||
<input type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```js
|
||||
assert($('#submit').attr('tabindex'));
|
||||
```
|
||||
|
||||
</div>
|
||||
搜索`input`标签的`tabindex`属性值应该为 1。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('#search').attr('tabindex') == '1');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
提交`input`标签的`tabindex`属性值应该为 2。
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex') == '2');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: 使用 article 元素包裹文章内容
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||
forumTopicId: 301029
|
||||
title: 使用 article 元素包裹文章内容
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>article</code>是另一个具有语义化特性的 HTML5 新标签。<code>article</code>是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。
|
||||
# --description--
|
||||
|
||||
`article`是另一个具有语义化特性的 HTML5 新标签。`article`是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。
|
||||
|
||||
有些技巧可以用来判断内容是否独立，像是如果内容脱离了上下文，是否仍然有意义？类似地，对于 RSS 提要中的文本，它是否有意义？
|
||||
|
||||
请牢记，使用辅助设备的用户依赖组织良好的、语义化的标签来获取页面中的信息。
|
||||
<strong>请注意<code>section</code>和<code>div</code>的区别：</strong><br><code>section</code>也是一个 HTML5 新标签，与<code>article</code>标签的语义含义略有不同。<code>article</code>用于独立的、完整的内容，而<code>section</code>用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个<code>article</code>的话，那么每个章节就是<code>section</code>。当内容组之间没有联系时，可以使用<code>div</code>。
|
||||
|
||||
**请注意`section`和`div`的区别：**
|
||||
`section`也是一个 HTML5 新标签，与`article`标签的语义含义略有不同。`article`用于独立的、完整的内容，而`section`用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个`article`的话，那么每个章节就是`section`。当内容组之间没有联系时，可以使用`div`。
|
||||
|
||||
```html
|
||||
<div> - groups content
|
||||
@ -19,68 +23,23 @@ title: 使用 article 元素包裹文章内容
|
||||
<article> - groups independent, self-contained content
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Camper Cat 打算使用<code>article</code>标签来呈现他的博客页面里的帖子，但是他忘记在顶部的帖子上使用它。请使用<code>article</code>标签来代替<code>div</code>标签。
|
||||
</section>
|
||||
Camper Cat 打算使用`article`标签来呈现他的博客页面里的帖子，但是他忘记在顶部的帖子上使用它。请使用`article`标签来代替`div`标签。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码中应该有 3 个<code>article</code>标签。'
|
||||
testString: assert($('article').length == 3);
|
||||
- text: '你的代码不应包含<code>div</code>标签。'
|
||||
testString: assert($('div').length == 0);
|
||||
你的代码中应该有 3 个`article`标签。
|
||||
|
||||
```js
|
||||
assert($('article').length == 3);
|
||||
```
|
||||
|
||||
</section>
|
||||
你的代码不应包含`div`标签。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<div>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</div>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: 将单选按钮包裹在 fieldset 元素中以获得更好的可访问性
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
||||
forumTopicId: 301030
|
||||
title: 将单选按钮包裹在 fieldset 元素中以获得更好的可访问性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
下一个表单主题与单选按钮的可访问性有关。在上一个挑战中，单选按钮含有一个拥有<code>for</code>属性的<code>label</code>标签，<code>for</code>属性指向相关选项的<code>id</code>。然而单选按钮通常成组出现，用户必须其中选择一项。本次挑战介绍一种可以语义化呈现单选按钮组的方法。
|
||||
使用<code>fieldset</code>标签将单选按钮组包含在里面就可以实现这个目的，通常还会使用<code>legend</code>标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。
|
||||
当选项的含义很明确时，如：性别选择，<code>fieldset</code>标签与<code>legend</code>标签就可以省略。这时，使用含有<code>for</code>属性的<code>label</code>标签就足够了。
|
||||
# --description--
|
||||
|
||||
下一个表单主题与单选按钮的可访问性有关。在上一个挑战中，单选按钮含有一个拥有`for`属性的`label`标签，`for`属性指向相关选项的`id`。然而单选按钮通常成组出现，用户必须其中选择一项。本次挑战介绍一种可以语义化呈现单选按钮组的方法。
|
||||
|
||||
使用`fieldset`标签将单选按钮组包含在里面就可以实现这个目的，通常还会使用`legend`标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。
|
||||
|
||||
当选项的含义很明确时，如：性别选择，`fieldset`标签与`legend`标签就可以省略。这时，使用含有`for`属性的`label`标签就足够了。
|
||||
|
||||
举个例子：
|
||||
|
||||
```html
|
||||
@ -27,96 +30,44 @@ title: 将单选按钮包裹在 fieldset 元素中以获得更好的可访问性
|
||||
</form>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。通过上一个挑战的学习，Camper Cat 创建了一组单选按钮，并为每个选项的<code>label</code>标签添加了<code>for</code>属性，但是 Camper Cat 的代码依然需要你的帮助。请将包含单选按钮组的<code>div</code>标签替换为<code>fieldset</code>标签；将<code>p</code>标签替换为<code>legend</code>标签。
|
||||
</section>
|
||||
当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。通过上一个挑战的学习，Camper Cat 创建了一组单选按钮，并为每个选项的`label`标签添加了`for`属性，但是 Camper Cat 的代码依然需要你的帮助。请将包含单选按钮组的`div`标签替换为`fieldset`标签；将`p`标签替换为`legend`标签。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的代码应该使用 1 个<code>fieldset</code>标签包含单选按钮组。'
|
||||
testString: assert($('fieldset').length == 1);
|
||||
- text: '确保<code>fieldset</code>标签是闭合的。'
|
||||
testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length);
|
||||
- text: '你的代码应该有 1 个包含询问用户忍者等级文字的<code>legend</code>标签。'
|
||||
testString: assert($('legend').length == 1);
|
||||
- text: '你的代码不应该含有<code>div</code>标签。'
|
||||
testString: assert($('div').length == 0);
|
||||
- text: '你的代码不应该有包含询问用户忍者等级文字的<code>p</code>标签。'
|
||||
testString: assert($('p').length == 4);
|
||||
你的代码应该使用 1 个`fieldset`标签包含单选按钮组。
|
||||
|
||||
```js
|
||||
assert($('fieldset').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
确保`fieldset`标签是闭合的。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
<div>
|
||||
<p>What level ninja are you?</p>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</div>
|
||||
<!-- Add your code above this line -->
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/fieldset>/g) &&
|
||||
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
你的代码应该有 1 个包含询问用户忍者等级文字的`legend`标签。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('legend').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
你的代码不应该含有`div`标签。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
你的代码不应该有包含询问用户忍者等级文字的`p`标签。
|
||||
|
||||
```js
|
||||
assert($('p').length == 4);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abe
|
||||
title: 给卡片元素添加 box-shadow
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZdUd'
|
||||
forumTopicId: 301031
|
||||
title: 给卡片元素添加 box-shadow
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>box-shadow</code> 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
|
||||
<code>box-shadow</code> 属性的阴影依次由下面这些值描述：
|
||||
# --description--
|
||||
|
||||
`box-shadow` 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。
|
||||
|
||||
`box-shadow` 属性的阴影依次由下面这些值描述：
|
||||
|
||||
<ul>
|
||||
<li><code>offset-x</code> 阴影的水平偏移量；</li>
|
||||
<li><code>offset-y</code> 阴影的垂直偏移量；</li>
|
||||
@ -17,100 +19,38 @@ title: 给卡片元素添加 box-shadow
|
||||
<li><code>spread-radius</code> 阴影扩展半径；</li>
|
||||
<li>颜色。</li>
|
||||
</ul>
|
||||
其中 <code>blur-radius</code> 和 <code>spread-radius</code> 是可选的。
|
||||
可以通过逗号分隔每个 <code>box-shadow</code> 元素的属性来添加多个 box-shadow。
|
||||
|
||||
其中 `blur-radius` 和 `spread-radius` 是可选的。
|
||||
|
||||
可以通过逗号分隔每个 `box-shadow` 元素的属性来添加多个 box-shadow。
|
||||
|
||||
如下为添加了模糊效果的例子，它使用了透明度较高的黑色作为阴影：
|
||||
|
||||
```css
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
现在该卡片添加了值为 <code>thumbnail</code> 的 id 属性。把上面的 <code>box-shadow</code> 值赋给卡片。
|
||||
</section>
|
||||
现在该卡片添加了值为 `thumbnail` 的 id 属性。把上面的 `box-shadow` 值赋给卡片。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该给 id 为 <code>thumbnail</code> 的元素添加 <code>box-shadow</code> 属性。'
|
||||
testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||
- text: '<code>box-shadow</code> 值应该是指定的 CSS 值。'
|
||||
testString: assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi));
|
||||
你应该给 id 为 `thumbnail` 的元素添加 `box-shadow` 属性。
|
||||
|
||||
```js
|
||||
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
`box-shadow` 值应该是指定的 CSS 值。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,102 +1,55 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: 调整文本的背景色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||
forumTopicId: 301032
|
||||
title: 调整文本的背景色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加 <code>background-color</code> 属性。在本挑战里我们将使用 <code>rgba()</code> 颜色，而不是之前学到的 <code>hex</code> 编码或者 <code>rgb()</code> 颜色。
|
||||
<blockquote>rgba 代表：<br> r = red 红色<br> g = green 绿色<br> b = blue 蓝色<br> a = alpha 透明度</blockquote>
|
||||
RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。<code>rgba()</code> 非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。
|
||||
在本挑战里你将会用到这个代码 <code>background-color: rgba(45, 45, 45, 0.1)</code>。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为了让文字更醒目，设置 <code>h4</code> 元素的 <code>background-color</code> 属性值为上面指定的 <code>rgba()</code>。
|
||||
同时移除 <code>h4</code> 的 <code>height</code> 属性，并添加 <code>padding</code> 属性，值为 10px。
|
||||
</section>
|
||||
为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，你还可以单独设置文字的背景色，即在文字的父元素上添加 `background-color` 属性。在本挑战里我们将使用 `rgba()` 颜色，而不是之前学到的 `hex` 编码或者 `rgb()` 颜色。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
<blockquote>rgba 代表：<br> r = red 红色<br> g = green 绿色<br> b = blue 蓝色<br> a = alpha 透明度</blockquote>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该给 <code>h4</code> 元素添加一个 <code>background-color</code> 属性并且赋值 <code>rgba(45, 45, 45, 0.1)</code>。'
|
||||
testString: assert(code.match(/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi));
|
||||
- text: '你应该给 <code>h4</code> 元素添加一个 <code>padding</code> 属性并且赋值 <code>10px</code>。'
|
||||
testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px');
|
||||
- text: '<code>h4</code> 元素的 <code>height</code> 属性应该被移除。'
|
||||
testString: assert(!($('h4').css('height') == '25px'));
|
||||
RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。`rgba()` 非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。
|
||||
|
||||
在本挑战里你将会用到这个代码 `background-color: rgba(45, 45, 45, 0.1)`。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为了让文字更醒目，设置 `h4` 元素的 `background-color` 属性值为上面指定的 `rgba()`。
|
||||
|
||||
同时移除 `h4` 的 `height` 属性，并添加 `padding` 属性，值为 10px。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该给 `h4` 元素添加一个 `background-color` 属性并且赋值 `rgba(45, 45, 45, 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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该给 `h4` 元素添加一个 `padding` 属性并且赋值 `10px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```js
|
||||
assert(
|
||||
$('h4').css('padding-top') == '10px' &&
|
||||
$('h4').css('padding-right') == '10px' &&
|
||||
$('h4').css('padding-bottom') == '10px' &&
|
||||
$('h4').css('padding-left') == '10px'
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
`h4` 元素的 `height` 属性应该被移除。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(!($('h4').css('height') == '25px'));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,97 +1,44 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: 将各种元素的颜色调整为互补色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||
forumTopicId: 301033
|
||||
title: 将各种元素的颜色调整为互补色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
通过前面关卡的学习，我们知道了补色搭配能形成强列的对比效果，让内容更富生机。但是如果使用不当效果会适得其反，比如如果文字背景色和文字颜色互为补色，文字会很难看清。通常的做法是，一种颜色做为主要颜色，其补色用来装点页面。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用深青色（<code>#09A7A1</code>）做为页面主色，用其补色橙色（<code>#FF790E</code>）来装饰登录按钮。把 <code>header</code> 和 <code>footer</code> 的 <code>background-color</code> 从黑色改成深青色。然后把 <code>h2</code> 的文字 <code>color</code> 也改成深青色。最后，把 <code>button</code> 的 <code>background-color</code> 改成橙色。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
使用深青色（`#09A7A1`）做为页面主色，用其补色橙色（`#FF790E`）来装饰登录按钮。把 `header` 和 `footer` 的 `background-color` 从黑色改成深青色。然后把 `h2` 的文字 `color` 也改成深青色。最后，把 `button` 的 `background-color` 改成橙色。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>header</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。'
|
||||
testString: "assert($('header').css('background-color') == 'rgb(9, 167, 161)');"
|
||||
- text: '<code>footer</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code>CSS 属性。'
|
||||
testString: "assert($('footer').css('background-color') == 'rgb(9, 167, 161)');"
|
||||
- text: '<code>h2</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>color</code> CSS 属性。'
|
||||
testString: "assert($('h2').css('color') == 'rgb(9, 167, 161)');"
|
||||
- text: '<code>button</code> 元素应该有一个值为 <code>#FF790E</code> 的 <code>background-color</code> CSS 属性。'
|
||||
testString: "assert($('button').css('background-color') == 'rgb(255, 121, 14)');"
|
||||
# --hints--
|
||||
|
||||
`header` 元素应该有一个值为 `#09A7A1` 的 `background-color` CSS 属性。
|
||||
|
||||
```js
|
||||
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
</section>
|
||||
`footer` 元素应该有一个值为 `#09A7A1` 的 `background-color`CSS 属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
button {
|
||||
background-color: white;
|
||||
}
|
||||
footer {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>freeCodeCamp 中国</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>freeCodeCamp 成都社区</h2>
|
||||
<p>【freeCodeCamp 成都社区】是一个非营利性的公益性技术社区，由一群编程技术爱好者利用业余时间搭建的一个友好的交流、学习、互助的平台，帮助开发者、技术爱好者提升个人技术能力，同时帮助企业解决人才问题。</p>
|
||||
<button><a href="https://freecodecamp-chengdu.github.io/" target="_blank">更多</a></button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>freeCodeCamp 深圳社区</h2>
|
||||
<p>【freeCodeCamp 深圳社区】面向深圳所有有意学习编程、热爱编程、甚至想要通过编程找到一份好工作的学生和社会群众，传承 freeCodeCamp 中文社区的主旨思想，倡导人人皆可编程。</p>
|
||||
<button><a href="https://freecodecamp-shenzhen.github.io/" target="_blank">更多</a></button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>©2020 freeCodeCamp 中国</footer>
|
||||
```js
|
||||
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
</div>
|
||||
`h2` 元素应该有一个值为 `#09A7A1` 的 `color` CSS 属性。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`button` 元素应该有一个值为 `#FF790E` 的 `background-color` CSS 属性。
|
||||
|
||||
```js
|
||||
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: 使用 height 属性调整元素的宽度
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||
forumTopicId: 301034
|
||||
title: 使用 height 属性调整元素的宽度
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
和 <code>width</code> 属性类似，你可以使用 CSS 里面的 <code>height</code> 属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：
|
||||
# --description--
|
||||
|
||||
和 `width` 属性类似，你可以使用 CSS 里面的 `height` 属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：
|
||||
|
||||
```css
|
||||
img {
|
||||
@ -16,81 +16,23 @@ img {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给 <code>h4</code> 标签添加 <code>height</code> 属性并设置值为 25px。
|
||||
<strong>注意：</strong> 可能需要将浏览器的缩放比调整为 100% 才能通过这一挑战。
|
||||
</section>
|
||||
给 `h4` 标签添加 `height` 属性并设置值为 25px。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
**注意：** 可能需要将浏览器的缩放比调整为 100% 才能通过这一挑战。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该设置 <code>h4</code> 的 <code>height</code> 属性，使其值为 <code>25px</code>。'
|
||||
testString: assert(Math.round(document.querySelector('h4').getBoundingClientRect().height) === 25 && /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g ,'')));
|
||||
# --hints--
|
||||
|
||||
你应该设置 `h4` 的 `height` 属性，使其值为 `25px`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
|
||||
25 &&
|
||||
/h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: 调整锚点的悬停状态
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||
forumTopicId: 301035
|
||||
title: 调整锚点的悬停状态
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。
|
||||
比如，超链接可以使用 <code>:hover</code> 伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS：
|
||||
|
||||
比如，超链接可以使用 `:hover` 伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS：
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
@ -17,56 +18,27 @@ a:hover {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
代码编辑器里面已经有了一个 CSS 规则把所有的 <code>a</code> 标签定义成了黑色。添加一个规则，满足如下，当用户悬停 <code>a</code> 标签时，把 <code>color</code> 变成蓝色。
|
||||
</section>
|
||||
代码编辑器里面已经有了一个 CSS 规则把所有的 `a` 标签定义成了黑色。添加一个规则，满足如下，当用户悬停 `a` 标签时，把 `color` 变成蓝色。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '超链接的 <code>color</code> 应该保持黑色，只添加 <code>:hover</code> CSS 规则。'
|
||||
testString: assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
- text: '悬停超链接时超链接 <code>color</code> 应该变成蓝色。'
|
||||
testString: assert(code.match(/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi));
|
||||
超链接的 `color` 应该保持黑色，只添加 `:hover` CSS 规则。
|
||||
|
||||
```js
|
||||
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
悬停超链接时超链接 `color` 应该变成蓝色。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">猫咪相册 App</a>
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,95 +1,66 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: 调整颜色的色相
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||
forumTopicId: 301036
|
||||
title: 调整颜色的色相
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了对应的 <code>hsl()</code> 属性做为对应的颜色描述方式。
|
||||
<b>色相</b>是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在 <code>hsl()</code> 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
|
||||
<b>饱和度</b>是指色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
|
||||
<b>亮度</b>决定颜色的明暗程度，也就是颜色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。
|
||||
下面是一些使用 <code>hsl()</code> 描述颜色的例子，颜色都为满饱和度，中等亮度:
|
||||
<table class="table table-striped"><thead><tr><th>颜色</th><th>HSL</th></tr></thead><tbody><tr><td>红</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>黄</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>绿</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>蓝绿</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>蓝</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>品红</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把 class 为 <code>green</code>、<code>cyan</code> 和<code> blue </code> <code>div</code> 的 <code>background-color</code> 使用 <code>hsl()</code> 表示法描述相应的颜色。颜色都为满饱和度，亮度中等。
|
||||
</section>
|
||||
HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法，描述了色相（hue）、饱和度（saturation）、亮度（lightness）。CSS3 引入了对应的 `hsl()` 属性做为对应的颜色描述方式。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
**色相**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在 `hsl()` 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该使用 <code>hsl()</code> 属性来表示绿色。'
|
||||
testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
- text: '你应该使用 <code>hsl()</code> 属性来表示蓝绿色。'
|
||||
testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
- text: '你应该使用 <code>hsl()</code> 属性来表示蓝色。'
|
||||
testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
- text: 'class 为 <code>green</code> 的 <code>div</code> 应该有绿色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
- text: 'class 为 <code>cyan</code> 的 <code>div</code> 应该有蓝绿色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
- text: 'class 为 <code>blue</code> 的 <code>div</code> 应该有蓝色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
**饱和度**是指色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
|
||||
|
||||
**亮度**决定颜色的明暗程度，也就是颜色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。
|
||||
|
||||
下面是一些使用 `hsl()` 描述颜色的例子，颜色都为满饱和度，中等亮度:
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>颜色</th><th>HSL</th></tr></thead><tbody><tr><td>红</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>黄</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>绿</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>蓝绿</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>蓝</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>品红</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 class 为 `green`、`cyan` 和`blue` `div` 的 `background-color` 使用 `hsl()` 表示法描述相应的颜色。颜色都为满饱和度，亮度中等。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用 `hsl()` 属性来表示绿色。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该使用 `hsl()` 属性来表示蓝绿色。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
你应该使用 `hsl()` 属性来表示蓝色。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
class 为 `green` 的 `div` 应该有绿色的 `background-color` CSS 属性。
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
class 为 `cyan` 的 `div` 应该有蓝绿色的 `background-color` CSS 属性。
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
class 为 `blue` 的 `div` 应该有蓝色的 `background-color` CSS 属性。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,94 +1,26 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: 调整标题与段落的大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||
forumTopicId: 301037
|
||||
title: 调整标题与段落的大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
标题（<code>h1</code> 到 <code>h6</code>）的文字应该比段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。你可以使用 <code>font-size</code> 属性来设置元素内文字的大小。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把 <code>h4</code> 标签的 <code>font-size</code >改成 27 像素，让标题更醒目。
|
||||
</section>
|
||||
标题（`h1` 到 `h6`）的文字应该比段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。你可以使用 `font-size` 属性来设置元素内文字的大小。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该给 <code>h4</code> 元素添加一个 <code>font-size</code> 属性并且赋值 <code>27px</code>。'
|
||||
testString: assert($('h4').css('font-size') == '27px');
|
||||
把 `h4` 标签的 `font-size`改成 27 像素，让标题更醒目。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该给 `h4` 元素添加一个 `font-size` 属性并且赋值 `27px`。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '27px');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,97 +1,28 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: 调整颜色的色调
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||
forumTopicId: 301038
|
||||
title: 调整颜色的色调
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>hsl()</code> 使 CSS 更改色调更方便。给纯色添加白色可以创造更浅的色调，添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 <code>hsl()</code> 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。饱和度代表灰色的占比，亮度代表白色和黑色的占比。这在当你有了一个基色调却需要微调时非常有用。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
页面的导航栏目前继承了 <code>header</code> 的 <code>background-color</code>。改变 <code>nav</code> 元素的 <code>background-color</code>，保留基色蓝绿色，调整它的色调和明暗使它具有 80% 的饱和度以及 25% 的亮度。
|
||||
</section>
|
||||
`hsl()` 使 CSS 更改色调更方便。给纯色添加白色可以创造更浅的色调，添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 `hsl()` 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。饱和度代表灰色的占比，亮度代表白色和黑色的占比。这在当你有了一个基色调却需要微调时非常有用。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>nav</code> 元素应该有一个使用 <code>hsl()</code> 属性调节蓝绿色调的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi));
|
||||
页面的导航栏目前继承了 `header` 的 `background-color`。改变 `nav` 元素的 `background-color`，保留基色蓝绿色，调整它的色调和明暗使它具有 80% 的饱和度以及 25% 的亮度。
|
||||
|
||||
# --hints--
|
||||
|
||||
`nav` 元素应该有一个使用 `hsl()` 属性调节蓝绿色调的 `background-color` CSS 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<h1>FCC 中国</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">首页</a></li>
|
||||
<li><a href="">课程</a></li>
|
||||
<li><a href="">论坛</a></li>
|
||||
<li><a href="">新闻</a></li>
|
||||
<li><a href="">设置</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: 使用 width 属性调整元素的宽度
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||
forumTopicId: 301039
|
||||
title: 使用 width 属性调整元素的宽度
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你可以使用 CSS 里面的 <code>width</code> 属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。下面这个例子把图片的宽度设置为 220px：
|
||||
# --description--
|
||||
|
||||
你可以使用 CSS 里面的 `width` 属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比。下面这个例子把图片的宽度设置为 220px：
|
||||
|
||||
```css
|
||||
img {
|
||||
@ -16,79 +16,22 @@ img {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给卡片添加 <code>width</code> 属性，设置它的宽度为 245px。使用 <code>fullCard</code> class 来选择元素。
|
||||
</section>
|
||||
给卡片添加 `width` 属性，设置它的宽度为 245px。使用 `fullCard` class 来选择元素。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该使用 <code>fullCard</code> class 选择器将卡片的 <code>width</code> 宽度属性更改为 <code>245px</code>。'
|
||||
testString: const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g); assert(fullCard && /width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) && $('.fullCard').css('maxWidth') === 'none');
|
||||
你应该使用 `fullCard` class 选择器将卡片的 `width` 宽度属性更改为 `245px`。
|
||||
|
||||
```js
|
||||
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||
assert(
|
||||
fullCard &&
|
||||
/width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
|
||||
$('.fullCard').css('maxWidth') === 'none'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,107 +1,28 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: 以可变速率来给元素添加动画
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||
forumTopicId: 301040
|
||||
title: 以可变速率来给元素添加动画
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
改变相似元素的动画频率的方法有很多。目前接触到的就有 <code>animation-iteration-count</code> 和 <code>@keyframes</code>。
|
||||
举例说明，右边的动画包含了两个小星星，每个小星星都在 20% <code>@keyframes</code> 处变小并且 opacity 变为 20%，也就是一闪一闪的动画效果。你可以通过改变其中一个星星的 <code>@keyframes</code> 规则以使两个小星星以不同的频率闪烁。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
通过改变 class 为 <code>star-1</code> 的元素的 <code>@keyframes</code> 为 50% 以改变其动画频率。
|
||||
</section>
|
||||
改变相似元素的动画频率的方法有很多。目前接触到的就有 `animation-iteration-count` 和 `@keyframes`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
举例说明，右边的动画包含了两个小星星，每个小星星都在 20% `@keyframes` 处变小并且 opacity 变为 20%，也就是一闪一闪的动画效果。你可以通过改变其中一个星星的 `@keyframes` 规则以使两个小星星以不同的频率闪烁。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>star-1</code> class 的 <code>@keyframes</code> 规则应该为50%。'
|
||||
testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
# --instructions--
|
||||
|
||||
通过改变 class 为 `star-1` 的元素的 `@keyframes` 为 50% 以改变其动画频率。
|
||||
|
||||
# --hints--
|
||||
|
||||
`star-1` class 的 `@keyframes` 规则应该为50%。
|
||||
|
||||
```js
|
||||
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,88 +1,30 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: 使用无限的动画计数制作永不停止的动画
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||
forumTopicId: 301041
|
||||
title: 使用无限的动画计数制作永不停止的动画
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
之前的关卡里介绍了一些动画属性以及 <code>@keyframes</code> 规则的用法。还有一个常用的动画属性是 <code>animation-iteration-count</code>，这个属性允许你控制动画循环的次数。下面是一个例子：
|
||||
<code>animation-iteration-count: 3;</code>
|
||||
# --description--
|
||||
|
||||
之前的关卡里介绍了一些动画属性以及 `@keyframes` 规则的用法。还有一个常用的动画属性是 `animation-iteration-count`，这个属性允许你控制动画循环的次数。下面是一个例子：
|
||||
|
||||
`animation-iteration-count: 3;`
|
||||
|
||||
在这里动画会在运行 3 次后停止，如果想让动画一直运行，可以把值设置成 infinite。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把 <code>animation-iteration-count</code> 属性改成 infinite，以使右边的球持续跳跃。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
把 `animation-iteration-count` 属性改成 infinite，以使右边的球持续跳跃。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>animation-iteration-count</code> 属性值应该为 infinite。'
|
||||
testString: assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
# --hints--
|
||||
|
||||
`animation-iteration-count` 属性值应该为 infinite。
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 3;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,111 +1,40 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: 以可变速率来给多个元素添加动画
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||
forumTopicId: 301042
|
||||
title: 以可变速率来给多个元素添加动画
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在前面的关卡里，你通过改变 <code>@keyframes</code> 改变了两个相似动画元素的频率。你也可以通过改变多个元素的 <code>animation-duration</code> 来达到同样的效果。
|
||||
在编辑器代码运行的动画里，天空中有三个以同样频率不停的闪烁的星星。你可以设置每一个星星的 <code>animation-duration</code> 属性为不同的值来使其具有不同的闪烁频率。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
依次设置 class 为 <code>star-1</code>、<code>star-2</code>、<code>star-3</code> 的 <code>animation-duration</code> 为 1s、0.9s、1.1s。
|
||||
</section>
|
||||
在前面的关卡里，你通过改变 `@keyframes` 改变了两个相似动画元素的频率。你也可以通过改变多个元素的 `animation-duration` 来达到同样的效果。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在编辑器代码运行的动画里，天空中有三个以同样频率不停的闪烁的星星。你可以设置每一个星星的 `animation-duration` 属性为不同的值来使其具有不同的闪烁频率。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'class 为 <code>star-1</code> 的 <code>animation-duration</code> 属性值应该 1s。'
|
||||
testString: assert($('.star-1').css('animation-duration') == '1s');
|
||||
- text: 'class 为 <code>star-2</code> 的 <code>animation-duration</code> 属性值应该 0.9s。'
|
||||
testString: assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
- text: 'class 为 <code>star-3</code> 的 <code>animation-duration</code> 属性值应该 1.1s。'
|
||||
testString: assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
# --instructions--
|
||||
|
||||
依次设置 class 为 `star-1`、`star-2`、`star-3` 的 `animation-duration` 为 1s、0.9s、1.1s。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `star-1` 的 `animation-duration` 属性值应该 1s。
|
||||
|
||||
```js
|
||||
assert($('.star-1').css('animation-duration') == '1s');
|
||||
```
|
||||
|
||||
</section>
|
||||
class 为 `star-2` 的 `animation-duration` 属性值应该 0.9s。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```js
|
||||
assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
```
|
||||
|
||||
</div>
|
||||
class 为 `star-3` 的 `animation-duration` 属性值应该 1.1s。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,64 +1,28 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: 使用 margin 属性将元素水平居中
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||
forumTopicId: 301043
|
||||
title: 使用 margin 属性将元素水平居中
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的 <code>margin</code> 值设置为 <code>auto</code>。
|
||||
同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其 <code>display</code> 属性为 <code>block</code>来把它变成块级元素。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
通过给页面中的 <code>div</code> 添加值为 <code>auto</code> 的 <code>margin</code> 属性将其居中显示。
|
||||
</section>
|
||||
在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的 `margin` 值设置为 `auto`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
同样的，这个方法也对图片奏效。图片默认是内联元素，但是可以通过设置其 `display` 属性为 `block`来把它变成块级元素。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>div</code> 的 <code>margin</code> 应该为 <code>auto</code>。'
|
||||
testString: assert(code.match(/margin:\s*?auto;/g));
|
||||
# --instructions--
|
||||
|
||||
通过给页面中的 `div` 添加值为 `auto` 的 `margin` 属性将其居中显示。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 的 `margin` 应该为 `auto`。
|
||||
|
||||
```js
|
||||
assert(code.match(/margin:\s*?auto;/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512ac9
|
||||
title: 更改元素的相对位置
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVmMtZ'
|
||||
forumTopicId: 301044
|
||||
title: 更改元素的相对位置
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的 <code>盒模型</code>。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的 <code>普通流</code>，同时 CSS 提供了 position 属性来覆盖它。
|
||||
当元素的 position 设置为 <code>relative</code> 时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是 <code>left</code>、<code>right</code>、<code>top</code> 和 <code>bottom</code>。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：
|
||||
# --description--
|
||||
|
||||
在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的 `盒模型`。块级元素自动从新的一行开始（比如标题、段落以及 div），行内元素排列在上一个元素后（比如图片以及 span）。元素默认按照这种方式布局称为文档的 `普通流`，同时 CSS 提供了 position 属性来覆盖它。
|
||||
|
||||
当元素的 position 设置为 `relative` 时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是 `left`、`right`、`top` 和 `bottom`。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素：
|
||||
|
||||
```css
|
||||
p {
|
||||
@ -18,60 +19,26 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。
|
||||
<strong>注意</strong><br>定位可以让你在页面布局上更灵活、高效。注意不管元素的定位是怎样，内部的 HTML 代码阅读起来应该是整洁、有意义的。这样也可以让视障人员（他们重度依赖辅助设备比如屏幕阅读软件）能够浏览你的网页。
|
||||
</section>
|
||||
把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。 **注意**
|
||||
定位可以让你在页面布局上更灵活、高效。注意不管元素的定位是怎样，内部的 HTML 代码阅读起来应该是整洁、有意义的。这样也可以让视障人员（他们重度依赖辅助设备比如屏幕阅读软件）能够浏览你的网页。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把 <code>h2</code> 的 <code>position</code> 设置成 <code>relative</code>，使用相应的 CSS 属性调整 <code>h2</code> 的位置，使其向下偏移 15 像素，同时还在普通流中占据原来的位置。注意不要对 h1 和 p 元素的位置产生影响。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
把 `h2` 的 `position` 设置成 `relative`，使用相应的 CSS 属性调整 `h2` 的位置，使其向下偏移 15 像素，同时还在普通流中占据原来的位置。注意不要对 h1 和 p 元素的位置产生影响。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code> 元素应该添加 <code>position</code> 属性并赋值 <code>relative</code>。'
|
||||
testString: assert($('h2').css('position') == 'relative');
|
||||
- text: '你应该使用 CSS 属性调整 <code>h2</code> 的位置使其从原来的位置向下偏移 <code>15px</code>。'
|
||||
testString: assert($('h2').css('top') == '15px');
|
||||
# --hints--
|
||||
|
||||
`h2` 元素应该添加 `position` 属性并赋值 `relative`。
|
||||
|
||||
```js
|
||||
assert($('h2').css('position') == 'relative');
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该使用 CSS 属性调整 `h2` 的位置使其从原来的位置向下偏移 `15px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>论如何优雅定位</h1>
|
||||
<h2>我要离 h1 远一点！</h2>
|
||||
<p>我觉得 h2 没变，还是在它原来的位置，相离莫相忘，且行且珍惜。</p>
|
||||
</body>
|
||||
```js
|
||||
assert($('h2').css('top') == '15px');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,95 +1,42 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae7
|
||||
title: 使用关键字更改动画定时器
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKvwCM'
|
||||
forumTopicId: 301045
|
||||
title: 使用关键字更改动画定时器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在 CSS 动画里，<code>animation-timing-function</code> 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（<code>animation-duration</code>）从 A 运动到 B，那么 <code>animation-timing-function</code> 表述的就是车在运动中的加速和减速等过程。
|
||||
已经有了很多预定义的值可以直接使用于大部分场景。比如，默认的值是 <code>ease</code>，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括 <code>ease-out</code>，动画以高速开始，以低速结束；<code>ease-in</code>，动画以低速开始，以高速结束；<code>linear</code>，动画从头到尾的速度是相同的。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给 id 为 <code>ball1</code> 和 <code>ball2</code> 的元素添加 <code>animation-timing-function</code>，<code>ball1</code> 赋值为 <code>linear</code>，<code>ball2</code> 赋值为 <code>ease-out</code>。它们的 <code>animation-duration</code> 都为 2 秒，注意观察它们在开始和结束时的不同。
|
||||
</section>
|
||||
在 CSS 动画里，`animation-timing-function` 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内（`animation-duration`）从 A 运动到 B，那么 `animation-timing-function` 表述的就是车在运动中的加速和减速等过程。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
已经有了很多预定义的值可以直接使用于大部分场景。比如，默认的值是 `ease`，动画以低速开始，然后加快，在结束前变慢。其它常用的值包括 `ease-out`，动画以高速开始，以低速结束；`ease-in`，动画以低速开始，以高速结束；`linear`，动画从头到尾的速度是相同的。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 linear。'
|
||||
testString: const ball1Animation = $('#ball1').css('animation-timing-function').replace(/\s/g, '');assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
- text: 'id 为 <code>ball2</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 ease-out。'
|
||||
testString: const ball2Animation = $('#ball2').css('animation-timing-function').replace(/\s/g, ''); assert(ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)');
|
||||
# --instructions--
|
||||
|
||||
给 id 为 `ball1` 和 `ball2` 的元素添加 `animation-timing-function`，`ball1` 赋值为 `linear`，`ball2` 赋值为 `ease-out`。它们的 `animation-duration` 都为 2 秒，注意观察它们在开始和结束时的不同。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `ball1` 的元素的 `animation-timing-function` 属性值应该为 linear。
|
||||
|
||||
```js
|
||||
const ball1Animation = $('#ball1')
|
||||
.css('animation-timing-function')
|
||||
.replace(/\s/g, '');
|
||||
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
```
|
||||
|
||||
</section>
|
||||
id 为 `ball2` 的元素的 `animation-timing-function` 属性值应该为 ease-out。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```js
|
||||
const ball2Animation = $('#ball2')
|
||||
.css('animation-timing-function')
|
||||
.replace(/\s/g, '');
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,76 +1,26 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512acf
|
||||
title: 使用 z-index 属性更改重叠元素的位置
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM94aHk'
|
||||
forumTopicId: 301046
|
||||
title: 使用 z-index 属性更改重叠元素的位置
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
当一些元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用 <code>z-index</code> 属性指定元素的堆叠次序。<code>z-index</code> 的取值是整数，数值大的元素优先于数值小的元素显示。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给 class 为 <code>first</code> 的元素（红色的方块）添加 <code>z-index</code> 属性并赋值为 2，使它显示在蓝色方块的上方。
|
||||
</section>
|
||||
当一些元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用 `z-index` 属性指定元素的堆叠次序。`z-index` 的取值是整数，数值大的元素优先于数值小的元素显示。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'class 为 <code>first</code> 的元素的 <code>z-index</code> 值应该为 2。'
|
||||
testString: assert($('.first').css('z-index') == '2');
|
||||
给 class 为 `first` 的元素（红色的方块）添加 `z-index` 属性并赋值为 2，使它显示在蓝色方块的上方。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `first` 的元素的 `z-index` 值应该为 2。
|
||||
|
||||
```js
|
||||
assert($('.first').css('z-index') == '2');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,70 +1,43 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad6
|
||||
title: 创建一个 CSS 线性渐变
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4dpt9'
|
||||
forumTopicId: 301047
|
||||
title: 创建一个 CSS 线性渐变
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡，也就是渐变。可以通过 <code>background</code> 里面的 <code>linear-gradient()</code> 来实现线性渐变，下面是它的语法：
|
||||
<code>background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);</code>
|
||||
# --description--
|
||||
|
||||
HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡，也就是渐变。可以通过 `background` 里面的 `linear-gradient()` 来实现线性渐变，下面是它的语法：
|
||||
|
||||
`background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, ...);`
|
||||
|
||||
第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：
|
||||
|
||||
例子：
|
||||
<code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用 <code>linear-gradient()</code> 给 <code>div</code> 添加 <code>background</code> 渐变色，渐变角度 35deg，从 <code>#CCFFFF</code> 过渡到 <code>#FFCCCC</code>。
|
||||
<strong>注意</strong><br>有很多种方式指定颜色值，如 <code>rgb()</code> 或者 <code>hsl()</code>。在本关里请使用 hex 颜色码。
|
||||
</section>
|
||||
`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>div</code> 元素应该有一个指定方向和颜色的 <code>linear-gradient</code> <code>background</code>渐变色。'
|
||||
testString: assert($('div').css('background-image').match(/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi));
|
||||
使用 `linear-gradient()` 给 `div` 添加 `background` 渐变色，渐变角度 35deg，从 `#CCFFFF` 过渡到 `#FFCCCC`。
|
||||
|
||||
**注意**
|
||||
有很多种方式指定颜色值，如 `rgb()` 或者 `hsl()`。在本关里请使用 hex 颜色码。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 元素应该有一个指定方向和颜色的 `linear-gradient` `background`渐变色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div')
|
||||
.css('background-image')
|
||||
.match(
|
||||
/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,79 +1,48 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512add
|
||||
title: 使用 CSS 创建一个图形
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDWPs6'
|
||||
forumTopicId: 301048
|
||||
title: 使用 CSS 创建一个图形
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
术语表：blur-radius => 模糊半径，spread-radius => 辐射半径，transparent => 透明的，border-radius => 圆角边框。
|
||||
通过使用选择器选择不同的元素并改变其属性，你可以创造一些有趣的形状。比如新月。你可以使用 <code>box-shadow</code> 属性来设置元素的阴影，<code>border-radius</code> 属性控制元素的圆角边框。
|
||||
|
||||
通过使用选择器选择不同的元素并改变其属性，你可以创造一些有趣的形状。比如新月。你可以使用 `box-shadow` 属性来设置元素的阴影，`border-radius` 属性控制元素的圆角边框。
|
||||
|
||||
首先你将会创建一个圆的、透明的对象，它具有模糊阴影并略微向两边递减。如你所见，这个阴影其实就是新月形狀。
|
||||
为了创建一个圆形的对象，<code>border-radius</code> 应该被设置成 50%。
|
||||
你应该还记得之前关卡的 <code>box-shadow</code> 属性以及它的依次取值 <code>offset-x</code>、<code>offset-y</code>、<code>blur-radius</code>、<code>spread-radius</code> 和颜色值。其中<code>blur-radius</code> 和 <code>spread-radius</code> 是可选的。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把编辑器里的正方形元素变成新月形状。首先，把 <code>background-color</code> 改为 transparent，接着把 <code>border-radius</code> 属性设置成 50%，以创建一个圆形。最后，更改 <code>box-shadow</code> 属性，使其 <code>offset-x</code> 为 25px，<code>offset-y</code> 为 10px，<code>blur-radius</code> 为 0，<code>spread-radius</code> 为 0，<code>color</code> 为 blue。
|
||||
</section>
|
||||
为了创建一个圆形的对象，`border-radius` 应该被设置成 50%。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
你应该还记得之前关卡的 `box-shadow` 属性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和颜色值。其中`blur-radius` 和 `spread-radius` 是可选的。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>background-color</code> 属性应该取值 <code>transparent</code>。'
|
||||
testString: assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
- text: '<code>border-radius</code> 属性应该取值 <code>50%</code>。'
|
||||
testString: assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
- text: '<code>box-shadow</code> 属性的 <code>offset-x</code>、<code>offset-y</code>、<code>blur-radius</code>、<code>spread-radius</code> 和 <code>color</code> 应该依次取值<code>25px</code>、<code>10px</code>、<code>0</code>、<code>0</code> 和 <code>blue</code>。'
|
||||
testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi));
|
||||
# --instructions--
|
||||
|
||||
把编辑器里的正方形元素变成新月形状。首先，把 `background-color` 改为 transparent，接着把 `border-radius` 属性设置成 50%，以创建一个圆形。最后，更改 `box-shadow` 属性，使其 `offset-x` 为 25px，`offset-y` 为 10px，`blur-radius` 为 0，`spread-radius` 为 0，`color` 为 blue。
|
||||
|
||||
# --hints--
|
||||
|
||||
`background-color` 属性应该取值 `transparent`。
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
`border-radius` 属性应该取值 `50%`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center{
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
border-radius: 0px;
|
||||
box-shadow: 25px 10px 10px 10px green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```js
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
`box-shadow` 属性的 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和 `color` 应该依次取值`25px`、`10px`、`0`、`0` 和 `blue`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,96 +1,37 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: 使用 hr 标签创建水平线
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bR8t7'
|
||||
forumTopicId: 301049
|
||||
title: 使用 hr 标签创建水平线
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
术语：Horizontal Rule => hr => 水平线。
|
||||
你可以用 <code>hr</code> 标签来创建一条宽度撑满父元素的水平线。它一般用来表示文档主题的改变，在视觉上将文档分隔成几个部分。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在包含卡片标题的 <code>h4</code> 下面添加一个 <code>hr</code> 标签。
|
||||
<strong>注意</strong><br>在 HTML 里，<code>hr</code> 是自关闭标签，所以不需要一个单独的关闭标签。
|
||||
</section>
|
||||
你可以用 `hr` 标签来创建一条宽度撑满父元素的水平线。它一般用来表示文档主题的改变，在视觉上将文档分隔成几个部分。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该添加一个 <code>hr</code> 标签。'
|
||||
testString: assert($('hr').length == 1);
|
||||
- text: '<code>hr</code> 标签应该在标题和段落之间。'
|
||||
testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
在包含卡片标题的 `h4` 下面添加一个 `hr` 标签。
|
||||
|
||||
**注意**
|
||||
在 HTML 里，`hr` 是自关闭标签，所以不需要一个单独的关闭标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该添加一个 `hr` 标签。
|
||||
|
||||
```js
|
||||
assert($('hr').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
`hr` 标签应该在标题和段落之间。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
|
||||
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```js
|
||||
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512ade
|
||||
title: 使用 CSS 和 HTML 创建更复杂的形状
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpz4fr'
|
||||
forumTopicId: 301050
|
||||
title: 使用 CSS 和 HTML 创建更复杂的形状
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
世界上最流行的形状非心形莫属了，在本关里你将用纯 CSS 创建一个心形。但是首先你需要了解 <code>::before</code> 和 <code>::after</code> 伪类。这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里，<code>::before</code> 伪类元素用来给 class 为 <code>heart</code> 的元素添加一个正方形。
|
||||
# --description--
|
||||
|
||||
世界上最流行的形状非心形莫属了，在本关里你将用纯 CSS 创建一个心形。但是首先你需要了解 `::before` 和 `::after` 伪类。这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里，`::before` 伪类元素用来给 class 为 `heart` 的元素添加一个正方形。
|
||||
|
||||
```css
|
||||
.heart::before {
|
||||
@ -23,90 +23,43 @@ title: 使用 CSS 和 HTML 创建更复杂的形状
|
||||
}
|
||||
```
|
||||
|
||||
<code>::before</code> 和 <code>::after</code> 必须配合 <code>content</code> 来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当 <code>::before</code> 和 <code>::after</code>伪类用来添加某些形状而不是图片或文字时，<code>content</code> 属性仍然是必需的，但是它的值可以是空字符串。
|
||||
在上面的例子里，class 为 <code>heart</code> 元素的 <code>::before</code> 伪类添加了一个黄色的长方形，长方形的 <code>height</code> 和 <code>width</code> 分别为 50px 和 70px。由于设置了其边框半径为 25%，所以长方形为圆角长方形，同时其相对位置为距离 <code>left</code> 5px，以及向 <code>top</code> 偏移 50px。
|
||||
</section>
|
||||
`::before` 和 `::after` 必须配合 `content` 来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当 `::before` 和 `::after`伪类用来添加某些形状而不是图片或文字时，`content` 属性仍然是必需的，但是它的值可以是空字符串。 在上面的例子里，class 为 `heart` 元素的 `::before` 伪类添加了一个黄色的长方形，长方形的 `height` 和 `width` 分别为 50px 和 70px。由于设置了其边框半径为 25%，所以长方形为圆角长方形，同时其相对位置为距离 `left` 5px，以及向 `top` 偏移 50px。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把屏幕里的元素变成心形。在 <code>heart::after</code> 选择器里面，把 <code>background-color</code> 改成粉色（pink），把 <code>border-radius</code> 改成 50%。
|
||||
接下来，在 <code>heart</code> class 选择器（单纯的 <code>heart</code> 元素）里面，完善 <code>transform</code> 属性。使用 <code>rotate()</code> 函数并赋参 -45 度。（<code>rotate()</code>用法和 <code>skewX</code> 以及 <code>skewY</code> 类似）。
|
||||
最后，在 <code>heart::before</code> 选择器里面，设置 <code>content</code> 属性为空字符串。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
把屏幕里的元素变成心形。在 `heart::after` 选择器里面，把 `background-color` 改成粉色（pink），把 `border-radius` 改成 50%。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>heart::after</code> 选择器的 <code>background-color</code> 属性值应该为粉色。'
|
||||
testString: assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi));
|
||||
- text: '<code>heart::after</code> 选择器的 <code>border-radius</code> 属性值应该为 50%。'
|
||||
testString: assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
- text: '<code>heart</code> class 的 <code>transform</code> 属性应该使用 <code>rotate()</code> 函数并赋参为 <code>-45deg</code>。'
|
||||
testString: assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
- text: '<code>heart::before</code>选择器的<code>content</code>应该为空字符串。'
|
||||
testString: assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
接下来，在 `heart` class 选择器（单纯的 `heart` 元素）里面，完善 `transform` 属性。使用 `rotate()` 函数并赋参 -45 度。（`rotate()`用法和 `skewX` 以及 `skewY` 类似）。
|
||||
|
||||
最后，在 `heart::before` 选择器里面，设置 `content` 属性为空字符串。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart::after` 选择器的 `background-color` 属性值应该为粉色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
`heart::after` 选择器的 `border-radius` 属性值应该为 50%。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: ;
|
||||
}
|
||||
.heart::after {
|
||||
background-color: blue;
|
||||
content: "";
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: ;
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
```
|
||||
|
||||
</div>
|
||||
`heart` class 的 `transform` 属性应该使用 `rotate()` 函数并赋参为 `-45deg`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`heart::before`选择器的`content`应该为空字符串。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: 使用 CSS 动画创建运动
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||
forumTopicId: 301051
|
||||
title: 使用 CSS 动画创建运动
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
当元素的 <code>position</code> 被指定，如 <code>fixed</code> 或者 <code>relative</code> 时，CSS 偏移属性 <code>right</code>、<code>left</code>、<code>top</code> 和 <code>bottom</code>可以用在动画规则里创建动作。
|
||||
就像下面的例子展示的那样，你可以在 <code>50%</code >keyframe 处设置 <code>top</code> 属性为 50px， 在开始（0%）和最后（100%）keframe 处设置为 0px，以产生项目向下运动，然后返回的动作效果。
|
||||
# --description--
|
||||
|
||||
当元素的 `position` 被指定，如 `fixed` 或者 `relative` 时，CSS 偏移属性 `right`、`left`、`top` 和 `bottom`可以用在动画规则里创建动作。
|
||||
|
||||
就像下面的例子展示的那样，你可以在 `50%`keyframe 处设置 `top` 属性为 50px， 在开始（0%）和最后（100%）keframe 处设置为 0px，以产生项目向下运动，然后返回的动作效果。
|
||||
|
||||
```css
|
||||
@keyframes rainbow {
|
||||
@ -28,85 +29,41 @@ title: 使用 CSS 动画创建运动
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
让 <code>div</code> 水平运动。使用 <code>left</code> 偏移属性，添加 <code>@keyframes</code> 规则，让 rainbow 在 <code>0%</code> 的 0 像素开始，在 <code>50%</code> 时移动到 25 像素，在 <code>100%</code> 时时移动到 -25 像素。不要替换编辑器里的 <code>top</code> 属性，动画应该同时向水平和竖直方向运动。
|
||||
</section>
|
||||
让 `div` 水平运动。使用 `left` 偏移属性，添加 `@keyframes` 规则，让 rainbow 在 `0%` 的 0 像素开始，在 `50%` 时移动到 25 像素，在 `100%` 时时移动到 -25 像素。不要替换编辑器里的 `top` 属性，动画应该同时向水平和竖直方向运动。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>0%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移 <code>0px</code>。'
|
||||
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi));
|
||||
- text: '<code>50%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移<code>25px</code>。'
|
||||
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi));
|
||||
- text: '<code>100%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移<code>-25px</code>。'
|
||||
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi));
|
||||
`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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
`50%` 的 `@keyframes` 规则应该为向 `left` 偏移`25px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="rect"></div>
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
`100%` 的 `@keyframes` 规则应该为向 `left` 偏移`-25px`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,58 +1,30 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad8
|
||||
title: 通过添加细微图案作为背景图像来创建纹理
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQdwJC8'
|
||||
forumTopicId: 301052
|
||||
title: 通过添加细微图案作为背景图像来创建纹理
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
添加一个精致的背景图，可以增加页面的质感，让页面更美观。关键是要找到一个平衡点，抢了内容的风头，喧宾夺主可就不妙了。<code>background</code> 属性支持使用 <code>url()</code> 函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内，一般会用引号包起来。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
用 <code>body</code> 选择器设置整个页面的 <code>background</code> 为 url <code>https://i.imgur.com/MJAkxbh.png</code> 指定的图片。
|
||||
</section>
|
||||
添加一个精致的背景图，可以增加页面的质感，让页面更美观。关键是要找到一个平衡点，抢了内容的风头，喧宾夺主可就不妙了。`background` 属性支持使用 `url()` 函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内，一般会用引号包起来。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>body</code> 元素选择器应包含 <code>background</code> 属性，且值为给定的 <code>url</code>。'
|
||||
testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi));
|
||||
用 `body` 选择器设置整个页面的 `background` 为 url `https://i.imgur.com/MJAkxbh.png` 指定的图片。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` 元素选择器应包含 `background` 属性，且值为给定的 `url`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,93 +1,42 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: 使用 text-align 属性创建视觉平衡
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3b4EAp'
|
||||
forumTopicId: 301053
|
||||
title: 使用 text-align 属性创建视觉平衡
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。
|
||||
web 内容大部分都是文本。CSS 里面的 <code>text-align</code> 属性可以控制文本的对齐方式。
|
||||
<code>text-align: justify;</code> 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
|
||||
<code>text-align: center;</code> 可以让文本居中对齐。
|
||||
<code>text-align: right;</code> 可以让文本右对齐。
|
||||
<code>text-align: left;</code> 是 <code>text-align</code> 的默认值，它可以让文本左对齐。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
居中对齐 <code>h4</code> 标签文本，文本内容为 “Google”。两端对齐段落标签文本，文本介绍了 Google 的创立。
|
||||
</section>
|
||||
web 内容大部分都是文本。CSS 里面的 `text-align` 属性可以控制文本的对齐方式。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`text-align: justify;` 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该在 <code>h4</code> 标签上使用 text-align 属性设置文本居中对齐。'
|
||||
testString: assert($('h4').css('text-align') == 'center');
|
||||
- text: '你应该在 <code>p</code> 标签上使用 text-align 属性设置文本两端对齐。'
|
||||
testString: assert($('p').css('text-align') == 'justify');
|
||||
`text-align: center;` 可以让文本居中对齐。
|
||||
|
||||
`text-align: right;` 可以让文本右对齐。
|
||||
|
||||
`text-align: left;` 是 `text-align` 的默认值，它可以让文本左对齐。
|
||||
|
||||
# --instructions--
|
||||
|
||||
居中对齐 `h4` 标签文本，文本内容为 “Google”。两端对齐段落标签文本，文本介绍了 Google 的创立。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该在 `h4` 标签上使用 text-align 属性设置文本居中对齐。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-align') == 'center');
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该在 `p` 标签上使用 text-align 属性设置文本两端对齐。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
|
||||
}
|
||||
p {
|
||||
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```js
|
||||
assert($('p').css('text-align') == 'justify');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,83 +1,32 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae2
|
||||
title: 通过从左到右淡化元素来创建视觉方向
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJqqAE'
|
||||
forumTopicId: 301054
|
||||
title: 通过从左到右淡化元素来创建视觉方向
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在本关里，你将要改变动画元素的 <code>opacity</code>，使其在到达屏幕右侧时渐隐。
|
||||
在展示的动画里，具有渐变背景的圆形元素在 50% 标记的 <code>@keyframes</code> 规则处向右移动。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用 id 选择器选择 id 为 <code>ball</code> 的元素，在 <code>50%</code> 里添加 <code>opacity</code> 属性并赋值 0.1，使其在向右移动时渐隐。
|
||||
</section>
|
||||
在本关里，你将要改变动画元素的 `opacity`，使其在到达屏幕右侧时渐隐。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在展示的动画里，具有渐变背景的圆形元素在 50% 标记的 `@keyframes` 规则处向右移动。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '50% 处 <code>keyframes</code> 规则应该设置 <code>opacity</code> 属性值为 0.1 以使其渐隐。'
|
||||
testString: assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi));
|
||||
# --instructions--
|
||||
|
||||
使用 id 选择器选择 id 为 `ball` 的元素，在 `50%` 里添加 `opacity` 属性并赋值 0.1，使其在向右移动时渐隐。
|
||||
|
||||
# --hints--
|
||||
|
||||
50% 处 `keyframes` 规则应该设置 `opacity` 属性值为 0.1 以使其渐隐。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,100 +1,34 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: 降低元素的 opactiy
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||
forumTopicId: 301055
|
||||
title: 降低元素的 opactiy
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 里的 <code>opacity</code> 属性用来设置元素的透明度。
|
||||
# --description--
|
||||
|
||||
CSS 里的 `opacity` 属性用来设置元素的透明度。
|
||||
|
||||
<blockquote>值 1 代表完全不透明。<br>值 0.5 代表半透明。<br>值 0 代表完全透明。</blockquote>
|
||||
|
||||
透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用 <code>links</code> class 选择所有的超链接并设置其 <code>opacity</code> 值为 0.7。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
使用 `links` class 选择所有的超链接并设置其 `opacity` 值为 0.7。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该使用 <code>links</code> class 选择所有的超链接并设置其 <code>opacity</code> 值为 0.7。'
|
||||
testString: assert(/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test($('style').text()));
|
||||
# --hints--
|
||||
|
||||
你应该使用 `links` class 选择所有的超链接并设置其 `opacity` 值为 0.7。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
|
||||
$('style').text()
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,78 +1,43 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad1
|
||||
title: 了解互补色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MD3Tr'
|
||||
forumTopicId: 301056
|
||||
title: 了解互补色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
色彩理论以及设计色彩学很复杂，这里将只涉及很基础的部分。在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。
|
||||
一半是科学，一半是艺术，色环是我们认识颜色关系的好工具 - 它是一个近色相邻异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色叫做补色。绘画中两只补色在混合后会变成灰色。补色搭配能形成强列的对比效果，传达出活力、能量、兴奋等意义。
|
||||
|
||||
一半是科学，一半是艺术，色环是我们认识颜色关系的好工具 - 它是一个近色相邻异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色叫做补色。绘画中两只补色在混合后会变成灰色。补色搭配能形成强列的对比效果，传达出活力、能量、兴奋等意义。
|
||||
|
||||
下面是一些十六进制码（hex code）补色的例子：
|
||||
|
||||
<blockquote>红色（#FF0000）和蓝绿色 (#00FFFF)<br>绿色（#00FF00）和品红色（#FF00FF）<br>蓝色（#0000FF）和黄色（#FFFF00）</blockquote>
|
||||
|
||||
现在很多的在线选色工具都有寻找补色的功能。
|
||||
<strong>注意</strong><br>对于所有的颜色关卡： 颜色能吸引用户的注意，但不是唯一的方式，切勿喧宾夺主，过度使用会适得其反。详细会在应用无障碍章节介绍。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把 <code>blue</code> 和 <code>yellow</code> class 的 <code>background-color</code> 属性改成相应的颜色。注意观察它们之间的编码区别以及和它们和白色的编码区别。
|
||||
</section>
|
||||
**注意**
|
||||
对于所有的颜色关卡： 颜色能吸引用户的注意，但不是唯一的方式，切勿喧宾夺主，过度使用会适得其反。详细会在应用无障碍章节介绍。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'class 为 <code>blue</code> 的 <code>div</code> 元素应该有值为蓝色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
- text: 'class 为 <code>yellow</code> 的 <code>div</code> 元素应该有值为黄色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
把 `blue` 和 `yellow` class 的 `background-color` 属性改成相应的颜色。注意观察它们之间的编码区别以及和它们和白色的编码区别。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `blue` 的 `div` 元素应该有值为蓝色的 `background-color` CSS 属性。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
</section>
|
||||
class 为 `yellow` 的 `div` 元素应该有值为黄色的 `background-color` CSS 属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #000000;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```js
|
||||
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,90 +1,52 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: 了解三原色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRDAb'
|
||||
forumTopicId: 301057
|
||||
title: 了解三原色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
电脑显示器和手机屏幕是一种加色模型，将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，以产生多种多样的色光。两种原色相加产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G）。你在上一个挑战里已经见过这些颜色了。这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。例如，品红色是红色和蓝色相加产生，它是绿色的补色。
|
||||
|
||||
三次色是由原色和二次色相加产生的颜色，例如红色（原色）和黄色（二次色）相加产生橙色。将这六种颜色中相邻的颜色相加，便产生了十二色色环。
|
||||
|
||||
设计里面有很多种颜色搭配方法。涉及到三次色的一种配色方法是分裂补色搭配法。选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。此种搭配既有对比，又不失和谐。
|
||||
|
||||
下面是使用分裂补色搭配法创建的三个颜色：
|
||||
<table class="table table-striped"><thead><tr><th>颜色</th><th>HEX 颜色码</th></tr><thead><tbody><tr><td>橙色</td><td>#FF7D00</td></tr><tr><td>蓝绿色</td><td>#00FFFF</td></tr><tr><td>树莓红</td><td>#FF007D</td></tr></tbody></table>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把 class 为 <code>orange</code>、<code>cyan</code> 和 <code>rasberry</code> 的 <code>background-color</code> 改成其对应的颜色。由于 rasberry 不在浏览器 17 种标准色之内，不能直接用作颜色名，所以要使用 HEX 颜色码。
|
||||
</section>
|
||||
<table class='table table-striped'><thead><tr><th>颜色</th><th>HEX 颜色码</th></tr></thead><thead></thead><tbody><tr><td>橙色</td><td>#FF7D00</td></tr><tr><td>蓝绿色</td><td>#00FFFF</td></tr><tr><td>树莓红</td><td>#FF007D</td></tr></tbody></table>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'class 为 <code>orange</code> 的 <code>div</code> 应该有值为橙色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||
- text: 'class 为 <code>cyan</code> 的 <code>div</code> 应该有值为蓝绿色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
- text: 'class 为 <code>raspberry</code> 的 <code>div</code> 应该有值为树莓红色的 <code>background-color</code> CSS 属性。'
|
||||
testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||
- text: 'corlor classes 里的所有的 <code>background-color</code> 应该是 HEX 颜色码而不是颜色名称。'
|
||||
testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||
把 class 为 `orange`、`cyan` 和 `rasberry` 的 `background-color` 改成其对应的颜色。由于 rasberry 不在浏览器 17 种标准色之内，不能直接用作颜色名，所以要使用 HEX 颜色码。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `orange` 的 `div` 应该有值为橙色的 `background-color` CSS 属性。
|
||||
|
||||
```js
|
||||
assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||
```
|
||||
|
||||
</section>
|
||||
class 为 `cyan` 的 `div` 应该有值为蓝绿色的 `background-color` CSS 属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
</div>
|
||||
class 为 `raspberry` 的 `div` 应该有值为树莓红色的 `background-color` CSS 属性。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
corlor classes 里的所有的 `background-color` 应该是 HEX 颜色码而不是颜色名称。
|
||||
|
||||
```js
|
||||
assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,98 +1,48 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae8
|
||||
title: 学习贝塞尔曲线的原理
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
||||
forumTopicId: 301058
|
||||
title: 学习贝塞尔曲线的原理
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
上一关卡介绍了 <code>animation-timing-function</code> 以及它的一些预定义的值。这些值定义了不同时间内的动画速度。除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更出色的控制动画的速度曲线。
|
||||
在 CSS 动画里，用 <code>cubic-bezier</code> 来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1*1 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
|
||||
<code>cubic-bezier</code> 函数包含了 1 * 1 网格里的4个点：<code>p0</code>、<code>p1</code>、<code>p2</code> 和 <code>p3</code>。其中 <code>p0</code> 和 <code>p3</code> 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过<code>(x1, y1, x2, y2)</code>来确定 <code>p1</code> 和 <code>p2</code>。综上，下面就是 CSS 贝塞尔曲线的例子：
|
||||
<code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code>
|
||||
在上面的例子里，两个点的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2），如果你还记得初中几何，结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性，效果和 <code>linear</code> 一致。换言之，元素匀速运动。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
对于 id 为 <code>ball1</code> 的元素，把 <code>animation-timing-function</code> 属性值从 <code>linear</code> 变成等价的 <code>cubic-bezier</code> 函数值。也就是说使用上面例子给的值。
|
||||
</section>
|
||||
上一关卡介绍了 `animation-timing-function` 以及它的一些预定义的值。这些值定义了不同时间内的动画速度。除了预定义值之外，CSS 还提供了贝塞尔曲线（Bezier curves）来更出色的控制动画的速度曲线。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在 CSS 动画里，用 `cubic-bezier` 来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1\*1 的坐标系统内，曲线的 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为和 linear 预定值等价的贝塞尔函数值。'
|
||||
testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)');
|
||||
- text: 'id 为 <code>ball2</code> 元素的 <code>animation-timing-function</code> 属性值应该保持不变。'
|
||||
testString: const ball2Animation = $('#ball2').css('animation-timing-function').replace(/\s/g, ''); assert(ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)');
|
||||
`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` 一致。换言之，元素匀速运动。
|
||||
|
||||
# --instructions--
|
||||
|
||||
对于 id 为 `ball1` 的元素，把 `animation-timing-function` 属性值从 `linear` 变成等价的 `cubic-bezier` 函数值。也就是说使用上面例子给的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `ball1` 的元素的 `animation-timing-function` 属性值应该为和 linear 预定值等价的贝塞尔函数值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#ball1').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
id 为 `ball2` 元素的 `animation-timing-function` 属性值应该保持不变。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```js
|
||||
const ball2Animation = $('#ball2')
|
||||
.css('animation-timing-function')
|
||||
.replace(/\s/g, '');
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512adf
|
||||
title: 了解 CSS 的关键帧和动画是如何工作的
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||||
forumTopicId: 301059
|
||||
title: 了解 CSS 的关键帧和动画是如何工作的
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
如果要给元素添加动画，你需要了解 <code>animation</code> 属性以及 <code>@keyframes</code> 规则。 <code>animation</code> 属性控制动画的外观，<code>@keyframes</code> 规则控制动画中各阶段的变化。总共有 8 个 <code>animation</code> 属性。为了便于理解，本关暂时只涉及到两个最常用的属性。
|
||||
<code>animation-name</code> 设置动画的名称， 也就是要绑定的选择器的 <code>@keyframes</code> 的名称。
|
||||
<code>animation-duration</code> 设置动画所花费的时间。
|
||||
<code>@keyframes</code> 能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性，以百分比来规定改变的时间，或者通过关键词“from”和“to”，等价于 0% 和 100%。打个比方，CSS 里面的 0% 属性就像是电影里面的开场镜头。CSS 里面的 100% 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。CSS 在对应的时间内给元素过渡添加效果。下面举例说明 <code>@keyframes</code> 和动画属性的用法：
|
||||
# --description--
|
||||
|
||||
如果要给元素添加动画，你需要了解 `animation` 属性以及 `@keyframes` 规则。 `animation` 属性控制动画的外观，`@keyframes` 规则控制动画中各阶段的变化。总共有 8 个 `animation` 属性。为了便于理解，本关暂时只涉及到两个最常用的属性。
|
||||
|
||||
`animation-name` 设置动画的名称， 也就是要绑定的选择器的 `@keyframes` 的名称。
|
||||
|
||||
`animation-duration` 设置动画所花费的时间。
|
||||
|
||||
`@keyframes` 能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性，以百分比来规定改变的时间，或者通过关键词“from”和“to”，等价于 0% 和 100%。打个比方，CSS 里面的 0% 属性就像是电影里面的开场镜头。CSS 里面的 100% 属性就是元素最后的样子，相当于电影里的演职员表或者鸣谢镜头。CSS 在对应的时间内给元素过渡添加效果。下面举例说明 `@keyframes` 和动画属性的用法：
|
||||
|
||||
```css
|
||||
#anim {
|
||||
@ -29,76 +32,49 @@ title: 了解 CSS 的关键帧和动画是如何工作的
|
||||
}
|
||||
```
|
||||
|
||||
id 为 <code>anim</code> 的元素，代码设置 <code>animation-name</code> 为 <code>colorful</code>，设置 <code>animation-duration</code> 为 3 秒。然后把 <code>@keyframes</code> 引用到名为 <code>colorful</code> 的动画属性上。<code>colorful</code> 在动画开始时（0%）设置颜色为蓝色，在动画结束时（100%）设置颜色为黄色。注意不是只有开始和结束的过渡可以设置，0% 到 100% 间的任意百分比你都可以设置。
|
||||
id 为 `anim` 的元素，代码设置 `animation-name` 为 `colorful`，设置 `animation-duration` 为 3 秒。然后把 `@keyframes` 引用到名为 `colorful` 的动画属性上。`colorful` 在动画开始时（0%）设置颜色为蓝色，在动画结束时（100%）设置颜色为黄色。注意不是只有开始和结束的过渡可以设置，0% 到 100% 间的任意百分比你都可以设置。
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给 id 为 <code>rect</code> 的元素添加动画，设置其 <code>animation-name</code> 为 rainbow，设置其 <code>animation-duration</code> 为 4 秒。然后声明 <code>@keyframes</code> 规则，设置动画开始时（0%）的 <code>background-color</code> 为蓝色，动画中间时（50%）为绿色，动画结束时（100%）为为黄色。
|
||||
</section>
|
||||
给 id 为 `rect` 的元素添加动画，设置其 `animation-name` 为 rainbow，设置其 `animation-duration` 为 4 秒。然后声明 `@keyframes` 规则，设置动画开始时（0%）的 `background-color` 为蓝色，动画中间时（50%）为绿色，动画结束时（100%）为为黄色。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>rect</code> 的元素应该有一个值为 rainbow 的 <code>animation-name</code> 属性。'
|
||||
testString: assert($('#rect').css('animation-name') == 'rainbow');
|
||||
- text: 'id 为 <code>rect</code> 的元素应该有一个值为 4s 的 <code>animation-duration</code> 属性。'
|
||||
testString: assert($('#rect').css('animation-duration') == '4s');
|
||||
- text: '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该为 rainbow。'
|
||||
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
- text: '<code>@keyframes</code> 规则的 rainbow 在 0% 时的 <code>background-color</code> 应该为蓝色。'
|
||||
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
- text: '<code>@keyframes</code> 规则的 rainbow 在 50% 时的 <code>background-color</code> 应该为绿色。'
|
||||
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
- text: '<code>@keyframes</code> 规则的 rainbow 在 100% 时的 <code>background-color</code> 应该为黄色。'
|
||||
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
id 为 `rect` 的元素应该有一个值为 rainbow 的 `animation-name` 属性。
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-name') == 'rainbow');
|
||||
```
|
||||
|
||||
</section>
|
||||
id 为 `rect` 的元素应该有一个值为 4s 的 `animation-duration` 属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```js
|
||||
assert($('#rect').css('animation-duration') == '4s');
|
||||
```
|
||||
|
||||
</div>
|
||||
`@keyframes` 规则的 `animation-name` 应该为 rainbow。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`@keyframes` 规则的 rainbow 在 0% 时的 `background-color` 应该为蓝色。
|
||||
|
||||
```js
|
||||
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
```
|
||||
|
||||
`@keyframes` 规则的 rainbow 在 50% 时的 `background-color` 应该为绿色。
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
```
|
||||
|
||||
`@keyframes` 规则的 rainbow 在 100% 时的 `background-color` 应该为黄色。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,78 +1,40 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acb
|
||||
title: 绝对定位的参照物是元素的父元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
||||
forumTopicId: 301060
|
||||
title: 绝对定位的参照物是元素的父元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
接下来要介绍 CSS <code>position</code> 属性的取值选项 <code>absolute</code>，<code>absolute</code> 相对于其包含块定位。和 <code>relative</code> 定位不一样，<code>absolute</code> 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。
|
||||
<code>absolute</code> 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是 <code>position:relative;</code>）,浏览器会继续寻找直到默认的 body 标签。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
通过声明 <code>position</code> 为 <code>absolute</code>，固定 <code>#searchbar</code> 元素到它父元素 <code>section</code> 的右上角。即设定其 <code>top</code> 和 <code>right</code> 为 50 像素。
|
||||
</section>
|
||||
接下来要介绍 CSS `position` 属性的取值选项 `absolute`，`absolute` 相对于其包含块定位。和 `relative` 定位不一样，`absolute` 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`absolute` 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是 `position:relative;`）,浏览器会继续寻找直到默认的 body 标签。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#searchbar</code> 元素应当有一个值为 <code>absolute</code> 的 <code>position</code> CSS 属性。'
|
||||
testString: assert($('#searchbar').css('position') == 'absolute');
|
||||
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>top</code> CSS 属性。'
|
||||
testString: assert($('#searchbar').css('top') == '50px');
|
||||
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>right</code> CSS 属性。'
|
||||
testString: assert($('#searchbar').css('right') == '50px');
|
||||
# --instructions--
|
||||
|
||||
通过声明 `position` 为 `absolute`，固定 `#searchbar` 元素到它父元素 `section` 的右上角。即设定其 `top` 和 `right` 为 50 像素。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#searchbar` 元素应当有一个值为 `absolute` 的 `position` CSS 属性。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
</section>
|
||||
你的 `#searchbar` 元素应当有值为 `50px` 的 `top` CSS 属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
|
||||
|
||||
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>欢迎！</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">搜索：</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```js
|
||||
assert($('#searchbar').css('top') == '50px');
|
||||
```
|
||||
|
||||
</div>
|
||||
你的 `#searchbar` 元素应当有值为 `50px` 的 `right` CSS 属性。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('#searchbar').css('right') == '50px');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,90 +1,40 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acc
|
||||
title: 固定定位的参照物是浏览器的窗口
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDNUR'
|
||||
forumTopicId: 301061
|
||||
title: 固定定位的参照物是浏览器的窗口
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
接下来要介绍的是 <code>fixed</code> 定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，<code>fixed</code> 定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。
|
||||
<code>fixed</code> 定位和 <code>absolute</code> 定位的最明显的区别是 <code>fixed</code> 定位元素不会随着屏幕滚动而移动。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
代码里的导航栏已经添加了值为 <code>navbar</code> 的 id。把它的 <code>position</code> 设置成<code>fixed</code>，设定其 <code>top</code >和 <code>left</code> 为 0 像素。添加代码之后，滑动预览窗口，观察导航栏的位置。
|
||||
</section>
|
||||
接下来要介绍的是 `fixed` 定位，它是一种特殊的绝对（absolute）定位，区别是其包含块是浏览器窗口。和绝对定位类似，`fixed` 定位使用 top、bottom、left 和 right 属性来调整元素的位置，并且会将元素从当前的文档流里面移除，其它元素会忽略它的存在。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`fixed` 定位和 `absolute` 定位的最明显的区别是 `fixed` 定位元素不会随着屏幕滚动而移动。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>>#navbar</code> 元素应当有一个值为 <code>fixed</code> 的 <code>position</code> CSS 属性'
|
||||
testString: assert($('#navbar').css('position') == 'fixed');
|
||||
- text: '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>top</code> CSS 属性。'
|
||||
testString: assert($('#navbar').css('top') == '0px');
|
||||
- text: '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>left</code> CSS 属性。'
|
||||
testString: assert($('#navbar').css('left') == '0px');
|
||||
# --instructions--
|
||||
|
||||
代码里的导航栏已经添加了值为 `navbar` 的 id。把它的 `position` 设置成`fixed`，设定其 `top`和 `left` 为 0 像素。添加代码之后，滑动预览窗口，观察导航栏的位置。
|
||||
|
||||
# --hints--
|
||||
|
||||
`>#navbar` 元素应当有一个值为 `fixed` 的 `position` CSS 属性
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('position') == 'fixed');
|
||||
```
|
||||
|
||||
</section>
|
||||
你的 `#navbar` 元素应当有值为 `0px` 的 `top` CSS 属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#navbar {
|
||||
|
||||
|
||||
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>欢迎!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">网站首页</a></li>
|
||||
<li><a href="">联系我们</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>当导航条固定在浏览器窗口上时，我会上移。</p>
|
||||
</body>
|
||||
```js
|
||||
assert($('#navbar').css('top') == '0px');
|
||||
```
|
||||
|
||||
</div>
|
||||
你的 `#navbar` 元素应当有值为 `0px` 的 `left` CSS 属性。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('#navbar').css('left') == '0px');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,125 +1,34 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae4
|
||||
title: 使用无限的动画计数制作 CSS 心跳
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cDZpDUr'
|
||||
forumTopicId: 301062
|
||||
title: 使用无限的动画计数制作 CSS 心跳
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
这也是一个用 <code>animation-iteration-count</code> 属性创造持续动画的例子，它基于前面关卡创建的心形。
|
||||
心跳动画的每一秒包含两个部分。<code>heart</code> 元素（包括 <code>:before</code> 和 <code>:after</code>）使用 <code>transform</code> 属性改变其大小，背景 <code>div</code> 使用 <code>background</code> 属性改变其颜色。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给 <code>back</code> class和 <code>heart</code> class添加值为 infinite 的 <code>animation-iteration-count</code> 属性，使心脏持续跳动。<code>heart:before</code> 和 <code>heart:after</code> 选择器不需要添加动画属性。
|
||||
</section>
|
||||
这也是一个用 `animation-iteration-count` 属性创造持续动画的例子，它基于前面关卡创建的心形。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
心跳动画的每一秒包含两个部分。`heart` 元素（包括 `:before` 和 `:after`）使用 `transform` 属性改变其大小，背景 `div` 使用 `background` 属性改变其颜色。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>heart</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinte。'
|
||||
testString: assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
- text: '<code>back</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。'
|
||||
testString: assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
# --instructions--
|
||||
|
||||
给 `back` class和 `heart` class添加值为 infinite 的 `animation-iteration-count` 属性，使心脏持续跳动。`heart:before` 和 `heart:after` 选择器不需要添加动画属性。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart` class 的 `animation-iteration-count` 属性应该赋值 infinte。
|
||||
|
||||
```js
|
||||
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
</section>
|
||||
`back` class 的 `animation-iteration-count` 属性应该赋值 infinite。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```js
|
||||
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,93 +1,37 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512aea
|
||||
title: 使用贝塞尔曲线让运动更加自然
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7akWUv'
|
||||
forumTopicId: 301063
|
||||
title: 使用贝塞尔曲线让运动更加自然
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
本关的元素模拟的是杂技抛接球。之前的关卡涉及了 <code>linear</code> 和 <code>ease-out</code> 的贝塞尔曲线描述，如你所见，这两个都无法完美的描述杂耍球的运动。在本关里你需要定制贝塞尔曲线。
|
||||
当 <code>animation-iteration-count</code> 值为 infinite 时 <code>animation-timing-function</code> 会自动循环 keyframe。由于是在动画周期中间（50%处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。
|
||||
# --description--
|
||||
|
||||
本关的元素模拟的是杂技抛接球。之前的关卡涉及了 `linear` 和 `ease-out` 的贝塞尔曲线描述，如你所见，这两个都无法完美的描述杂耍球的运动。在本关里你需要定制贝塞尔曲线。
|
||||
|
||||
当 `animation-iteration-count` 值为 infinite 时 `animation-timing-function` 会自动循环 keyframe。由于是在动画周期中间（50%处）设置的 keyframe 规则，最终的结果是球向上和球向下是两个同样的动画过程。
|
||||
|
||||
下面的例子模拟了杂耍球运动：
|
||||
<code>cubic-bezier(0.3, 0.4, 0.5, 1.6); </code>
|
||||
注意 y2 的值是大于 1 的。虽然贝塞尔曲线是在 1*1 的坐标系统内 x 值只能在 0 到 1，但是 y 值是可以大于 1 的。这样才能模拟杂耍球运动。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把 id 为 <code>green</code> 的元素的 <code>animation-timing-function</code> 值改成 <code>cubic-bezier</code> 函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。
|
||||
</section>
|
||||
`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
注意 y2 的值是大于 1 的。虽然贝塞尔曲线是在 1\*1 的坐标系统内 x 值只能在 0 到 1，但是 y 值是可以大于 1 的。这样才能模拟杂耍球运动。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为<code>green</code>的元素的<code>animation-timing-function</code>值应该为<code>cubic-bezier</code>函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。'
|
||||
testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)');
|
||||
# --instructions--
|
||||
|
||||
把 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。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#green').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.311, 0.441, 0.444, 1.649)'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,77 +1,40 @@
|
||||
---
|
||||
id: 58a7a6ebf9a6318348e2d5aa
|
||||
title: 修改动画的填充模式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDmcE'
|
||||
forumTopicId: 301064
|
||||
title: 修改动画的填充模式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
太棒了，但是现在还不完美。注意动画在 <code>500ms</code> 之后重置了，所以按钮又变成了之前的颜色。而我们想要的效果是按钮在悬停时始终高亮。
|
||||
这可以通过把 <code>animation-fill-mode</code> 设置成 <code>forwards</code> 来实现。<code>animation-fill-mode</code> 指定了在动画结束时元素的样式。你可以向这样设置它：
|
||||
<code>animation-fill-mode: forwards;</code>
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
设置 <code>button:hover</code> 的 <code>animation-fill-mode</code>，使按钮悬停时保持高亮。
|
||||
</section>
|
||||
太棒了，但是现在还不完美。注意动画在 `500ms` 之后重置了，所以按钮又变成了之前的颜色。而我们想要的效果是按钮在悬停时始终高亮。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
这可以通过把 `animation-fill-mode` 设置成 `forwards` 来实现。`animation-fill-mode` 指定了在动画结束时元素的样式。你可以向这样设置它：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>button:hover</code> 应该有一个值为 <code>forwards</code> 的 <code>animation-fill-mode</code> 的属性。'
|
||||
testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi));
|
||||
`animation-fill-mode: forwards;`
|
||||
|
||||
# --instructions--
|
||||
|
||||
设置 `button:hover` 的 `animation-fill-mode`，使按钮悬停时保持高亮。
|
||||
|
||||
# --hints--
|
||||
|
||||
`button:hover` 应该有一个值为 `forwards` 的 `animation-fill-mode` 的属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
/* add your code below this line */
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>注册</button>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,72 +1,34 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512aca
|
||||
title: 使用 CSS 偏移移动相对定位的元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bQEA4'
|
||||
forumTopicId: 301065
|
||||
title: 使用 CSS 偏移移动相对定位的元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 里面的 <code>top</code>、<code>bottom</code>、<code>left</code> 和 <code>right</code> 定义了元素在相应方位的偏移距离。元素将从当前位置，向属性相反的方向偏移。就像你在上一个挑战看到的，<code>top</code> 属性使 <code>h2</code> 向下移动。<code>left</code> 属性使元素向右移动。
|
||||
<img src='https://i.imgur.com/eWWi3gZ.gif' alt='' />
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
通过 CSS 属性把 <code>h2</code> 向上移动 10 像素，向右移动 15 像素。
|
||||
</section>
|
||||
CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方位的偏移距离。元素将从当前位置，向属性相反的方向偏移。就像你在上一个挑战看到的，`top` 属性使 `h2` 向下移动。`left` 属性使元素向右移动。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
<img src='https://i.imgur.com/eWWi3gZ.gif' alt=''>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向上移动 <code>10px</code>。也就是说，从 <code>h2</code> 当前位置远离 <code>bottom</code> <code>10px</code>。'
|
||||
testString: assert($('h2').css('bottom') == '10px');
|
||||
- text: '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向右移动 <code>15px</code>。也就是说，从 <code>h2</code> 当前位置远离 <code>left</code> <code>15px</code>。'
|
||||
testString: assert($('h2').css('left') == '15px');
|
||||
# --instructions--
|
||||
|
||||
通过 CSS 属性把 `h2` 向上移动 10 像素，向右移动 15 像素。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该使用 CSS 属性使 `h2` 相对当前位置向上移动 `10px`。也就是说，从 `h2` 当前位置远离 `bottom` `10px`。
|
||||
|
||||
```js
|
||||
assert($('h2').css('bottom') == '10px');
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该使用 CSS 属性使 `h2` 相对当前位置向右移动 `15px`。也就是说，从 `h2` 当前位置远离 `left` `15px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>论如何优雅定位</h1>
|
||||
<h2>我要离 h1 近一点！</h2>
|
||||
<p>我觉得 h2 没变，还是在它原来的位置，相离莫相忘，且行且珍惜。</p>
|
||||
</body>
|
||||
```js
|
||||
assert($('h2').css('left') == '15px');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,84 +1,32 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ace
|
||||
title: 使用 float 属性将元素左浮动或右浮动
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDqu2'
|
||||
forumTopicId: 301066
|
||||
title: 使用 float 属性将元素左浮动或右浮动
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
接下来要介绍的定位机制并不是 <code>position</code> 属性的选项，它通过元素的 <code>float</code> 属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用 <code>width</code> 属性来指定浮动元素占据的水平空间。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
设置 <code>#left</code> 元素的 <code>float</code> 为 <code>left</code>，设置 <code>#right</code> 元素的 <code>float</code> 为 <code>right</code>。使这两个元素按两列布局，<code>section</code> 和 <code>aside</code> 左右排列。
|
||||
</section>
|
||||
接下来要介绍的定位机制并不是 `position` 属性的选项，它通过元素的 `float` 属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用 `width` 属性来指定浮动元素占据的水平空间。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>left</code> 的元素应该有一个值为 <code>left</code> 的 <code>float</code> CSS 属性。'
|
||||
testString: assert($('#left').css('float') == 'left');
|
||||
- text: 'id 为 <code>right</code> 的元素应该有一个值为 <code>right</code> 的 <code>float</code> CSS 属性。'
|
||||
testString: assert($('#right').css('float') == 'right');
|
||||
设置 `#left` 元素的 `float` 为 `left`，设置 `#right` 元素的 `float` 为 `right`。使这两个元素按两列布局，`section` 和 `aside` 左右排列。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `left` 的元素应该有一个值为 `left` 的 `float` CSS 属性。
|
||||
|
||||
```js
|
||||
assert($('#left').css('float') == 'left');
|
||||
```
|
||||
|
||||
</section>
|
||||
id 为 `right` 的元素应该有一个值为 `right` 的 `float` CSS 属性。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>欢迎！</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>内容</h2>
|
||||
<p>好样的</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>侧边栏</h2>
|
||||
<p>一些链接</p>
|
||||
</aside>
|
||||
</body>
|
||||
```js
|
||||
assert($('#right').css('float') == 'right');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,77 +1,56 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac2
|
||||
title: 设置多个标题元素的 font-size
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpQNT3'
|
||||
forumTopicId: 301067
|
||||
title: 设置多个标题元素的 font-size
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>font-size</code> 属性用来指定元素内文字的大小。这个规则可以应用到多个元素上，合理的使用，能让页面的文字显示的错落有致。在本挑战里，你将要设置 <code>h1</code> 到 <code>h6</code> 的每个标题文字的大小。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
`font-size` 属性用来指定元素内文字的大小。这个规则可以应用到多个元素上，合理的使用，能让页面的文字显示的错落有致。在本挑战里，你将要设置 `h1` 到 `h6` 的每个标题文字的大小。
|
||||
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<ul><li>设置 <code>h1</code> 标签的 <code>font-size</code> 为 68px。</li><li>设置 <code>h2</code> 标签的 <code>font-size</code> 为 52px。</li><li>设置 <code>h3</code> 标签的 <code>font-size</code> 为 40px。</li><li>设置 <code>h4</code> 标签的 <code>font-size</code> 为 32px。</li><li>设置 <code>h5</code> 标签的 <code>font-size</code> 为 21px。</li><li>设置 <code>h6</code> 标签的 <code>font-size</code> 为 14px。</li></ul>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该设置 <code>h1</code> 标签的 <code>font-size</code> 为 <code>68px</code>。'
|
||||
testString: assert($('h1').css('font-size') == '68px');
|
||||
- text: '你应该设置 <code>h2</code> 标签的 <code>font-size</code> 为 <code>52px</code>。'
|
||||
testString: assert($('h2').css('font-size') == '52px');
|
||||
- text: '你应该设置 <code>h3</code> 标签的 <code>font-size</code> 为 <code>40px</code>。'
|
||||
testString: assert($('h3').css('font-size') == '40px');
|
||||
- text: '你应该设置 <code>h4</code> 标签的 <code>font-size</code> 为 <code>32px</code>。'
|
||||
testString: assert($('h4').css('font-size') == '32px');
|
||||
- text: '你应该设置 <code>h5</code> 标签的 <code>font-size</code> 为 <code>21px</code>。'
|
||||
testString: assert($('h5').css('font-size') == '21px');
|
||||
- text: '你应该设置 <code>h6</code> 标签的 <code>font-size</code> 为 <code>14px</code>。'
|
||||
testString: assert($('h6').css('font-size') == '14px');
|
||||
你应该设置 `h1` 标签的 `font-size` 为 `68px`。
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-size') == '68px');
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该设置 `h2` 标签的 `font-size` 为 `52px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h1>我是 h1 文字</h1>
|
||||
<h2>我是 h2 文字</h2>
|
||||
<h3>我是 h3 文字</h3>
|
||||
<h4>我是 h4 文字</h4>
|
||||
<h5>我是 h5 文字</h5>
|
||||
<h6>我是 h6 文字</h6>
|
||||
```js
|
||||
assert($('h2').css('font-size') == '52px');
|
||||
```
|
||||
|
||||
</div>
|
||||
你应该设置 `h3` 标签的 `font-size` 为 `40px`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h3').css('font-size') == '40px');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
你应该设置 `h4` 标签的 `font-size` 为 `32px`。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '32px');
|
||||
```
|
||||
|
||||
你应该设置 `h5` 标签的 `font-size` 为 `21px`。
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-size') == '21px');
|
||||
```
|
||||
|
||||
你应该设置 `h6` 标签的 `font-size` 为 `14px`。
|
||||
|
||||
```js
|
||||
assert($('h6').css('font-size') == '14px');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,61 +1,26 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac4
|
||||
title: 设置段落文本的 font-size
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJ36Cr'
|
||||
forumTopicId: 301068
|
||||
title: 设置段落文本的 font-size
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 里面的 <code>font-size</code> 属性不只限于标题，它可以应用于任何包含文字的元素内。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把段落的 <code>font-size</code> 设置为 16px 让它看起来更清晰。
|
||||
</section>
|
||||
CSS 里面的 `font-size` 属性不只限于标题，它可以应用于任何包含文字的元素内。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你的 <code>p</code> 标签应该包含一个 <code>font-size</code> 属性并且值为 <code>16px</code>。'
|
||||
testString: assert($('p').css('font-size') == '16px');
|
||||
把段落的 `font-size` 设置为 16px 让它看起来更清晰。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `p` 标签应该包含一个 `font-size` 属性并且值为 `16px`。
|
||||
|
||||
```js
|
||||
assert($('p').css('font-size') == '16px');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律召调阳 云腾致雨 露结为霜 金生丽水 玉出昆冈 剑号巨阙 珠称夜光 果珍李柰 菜重芥姜 海咸河淡 鳞潜羽翔 龙师火帝 鸟官人皇 始制文字 乃服衣裳 推位让国 有虞陶唐 吊民伐罪 周发殷汤 坐朝问道 垂拱平章 爱育黎首 臣伏戎羌 遐迩壹体 率宾归王 鸣凤在树 白驹食场 化被草木 赖及万方 盖此身发 四大五常 恭惟鞠养 岂敢毁伤 女慕贞絜 男效才良 知过必改 得能莫忘 罔谈彼短 靡恃己长 信使可覆 器欲难量 墨悲丝染 诗讃羔羊
|
||||
</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,96 +1,58 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac3
|
||||
title: 设置多个标题元素的 font-weight
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWRHq'
|
||||
forumTopicId: 301069
|
||||
title: 设置多个标题元素的 font-weight
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在上一个挑战里你已经设置了每个标题的 <code>font-size</code>，接下来你将设置 <code>font-weight</code>。
|
||||
<code>font-weight</code> 属性用于设置文本中所用的字体的粗细。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
在上一个挑战里你已经设置了每个标题的 `font-size`，接下来你将设置 `font-weight`。
|
||||
|
||||
`font-weight` 属性用于设置文本中所用的字体的粗细。
|
||||
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<ul><li>设置 <code>h1</code> 标签的 <code>font-weight</code> 为 800。</li><li>设置 <code>h2</code> 标签的 <code>font-weight</code> 为 600。</li><li>设置 <code>h3</code> 标签的 <code>font-weight</code> 为 500。</li><li>设置 <code>h4</code> 标签的 <code>font-weight</code> 为 400。</li><li>设置 <code>h5</code> 标签的 <code>font-weight</code> 为 300。</li><li>设置 <code>h6</code> 标签的 <code>font-weight</code> 为 200。</li></ul>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该设置 <code>h1</code> 标签的 <code>font-weight</code> 为 800。'
|
||||
testString: assert($('h1').css('font-weight') == '800');
|
||||
- text: '你应该设置 <code>h2</code> 标签的 <code>font-weight</code> 为 600。'
|
||||
testString: assert($('h2').css('font-weight') == '600');
|
||||
- text: '你应该设置 <code>h3</code> 标签的 <code>font-weight</code> 为 500。'
|
||||
testString: assert($('h3').css('font-weight') == '500');
|
||||
- text: '你应该设置 <code>h4</code> 标签的 <code>font-weight</code> 为 400。'
|
||||
testString: assert($('h4').css('font-weight') == '400');
|
||||
- text: '你应该设置 <code>h5</code> 标签的 <code>font-weight</code> 为 300。'
|
||||
testString: assert($('h5').css('font-weight') == '300');
|
||||
- text: '你应该设置 <code>h6</code> 标签的 <code>font-weight</code> 为 200。'
|
||||
testString: assert($('h6').css('font-weight') == '200');
|
||||
你应该设置 `h1` 标签的 `font-weight` 为 800。
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-weight') == '800');
|
||||
```
|
||||
|
||||
</section>
|
||||
你应该设置 `h2` 标签的 `font-weight` 为 600。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<h1>我是 h1 文字</h1>
|
||||
<h2>我是 h2 文字</h2>
|
||||
<h3>我是 h3 文字</h3>
|
||||
<h4>我是 h4 文字</h4>
|
||||
<h5>我是 h5 文字</h5>
|
||||
<h6>我是 h6 文字</h6>
|
||||
```js
|
||||
assert($('h2').css('font-weight') == '600');
|
||||
```
|
||||
|
||||
</div>
|
||||
你应该设置 `h3` 标签的 `font-weight` 为 500。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h3').css('font-weight') == '500');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
你应该设置 `h4` 标签的 `font-weight` 为 400。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-weight') == '400');
|
||||
```
|
||||
|
||||
你应该设置 `h5` 标签的 `font-weight` 为 300。
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-weight') == '300');
|
||||
```
|
||||
|
||||
你应该设置 `h6` 标签的 `font-weight` 为 200。
|
||||
|
||||
```js
|
||||
assert($('h6').css('font-weight') == '200');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,62 +1,26 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac5
|
||||
title: 设置段落的 line-height
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWdcv'
|
||||
forumTopicId: 301070
|
||||
title: 设置段落的 line-height
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 提供 <code>line-height</code> 属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给 <code>p</code> 标签添加 <code>line-height</code> 属性并赋值 25px。
|
||||
</section>
|
||||
CSS 提供 `line-height` 属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该给 <code>p</code> 标签添加 <code>line-height</code> 属性并赋值 <code>25px</code>。'
|
||||
testString: assert($('p').css('line-height') == '25px');
|
||||
给 `p` 标签添加 `line-height` 属性并赋值 25px。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该给 `p` 标签添加 `line-height` 属性并赋值 `25px`。
|
||||
|
||||
```js
|
||||
assert($('p').css('line-height') == '25px');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律召调阳 云腾致雨 露结为霜 金生丽水 玉出昆冈 剑号巨阙 珠称夜光 果珍李柰 菜重芥姜 海咸河淡 鳞潜羽翔 龙师火帝 鸟官人皇 始制文字 乃服衣裳 推位让国 有虞陶唐 吊民伐罪 周发殷汤 坐朝问道 垂拱平章 爱育黎首 臣伏戎羌 遐迩壹体 率宾归王 鸣凤在树 白驹食场 化被草木 赖及万方 盖此身发 四大五常 恭惟鞠养 岂敢毁伤 女慕贞絜 男效才良 知过必改 得能莫忘 罔谈彼短 靡恃己长 信使可覆 器欲难量 墨悲丝染 诗讃羔羊
|
||||
</p>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,92 +1,52 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae9
|
||||
title: 使用贝塞尔曲线移动图形
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bnRCK'
|
||||
forumTopicId: 301071
|
||||
title: 使用贝塞尔曲线移动图形
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
前面的关卡涉及的 <code>ease-out</code> 预定义值描述了动画以高速开始低速结束。右边的动画展示了 <code>ease-out</code> 预定义值（蓝色的元素）和 <code>linear</code> 预定义值（红色的元素）的区别。同样的，<code>ease-out</code> 预定义值也可以用贝塞尔曲线函数实现。
|
||||
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 <code>p1</code> 和 <code>p2</code> 两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
|
||||
<code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code>
|
||||
记住所有的 <code>cubic-bezier</code> 函数都是从坐标为 (0, 0) 的 <code>p0</code> 开始，在坐标为 (1, 1) 的 <code>p3</code> 结束。在这个例子里，曲线在 y 轴（从 0 开始，运动到 <code>p1</code> 的 0，然后运动到 <code>p2</code> 的 1）上移动的比在 x 轴（从 0 开始，运动到 <code>p1</code> 的 0，到 <code>p2</code> 的 0.58）上移动的快。结果是，在这一段动画内元素运动的快。到曲线的结尾，x 和 y 之间的关系反过来了，y 值保持为1，没有变化，x 值从 0.58 变为 1，元素运动的慢。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为了看贝塞尔曲线的运动效果，把 id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性赋为 <code>cubic-bezier</code> 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。这会使两个元素运动过程类似。
|
||||
</section>
|
||||
前面的关卡涉及的 `ease-out` 预定义值描述了动画以高速开始低速结束。右边的动画展示了 `ease-out` 预定义值（蓝色的元素）和 `linear` 预定义值（红色的元素）的区别。同样的，`ease-out` 预定义值也可以用贝塞尔曲线函数实现。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 \[0, 1]，Y 轴任意），最后形成的曲线就是动画的贝塞尔速度曲线。下面是贝塞尔曲线模仿 ease-out 预定义值的例子：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性应当赋为 <code>cubic-bezier</code> 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。'
|
||||
testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)');
|
||||
- text: 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性不应该取值 linear。'
|
||||
testString: assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
- text: 'id 为 <code>blue</code> 的元素的 <code>animation-timing-function</code> 属性不应该被改变。'
|
||||
testString: const blueBallAnimation = $('#blue').css('animation-timing-function').replace(/\s/g, ''); assert(blueBallAnimation == 'ease-out' || blueBallAnimation == 'cubic-bezier(0,0,0.58,1)');
|
||||
`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，元素运动的慢。
|
||||
|
||||
# --instructions--
|
||||
|
||||
为了看贝塞尔曲线的运动效果，把 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。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
id 为 `red` 的元素的 `animation-timing-function` 属性不应该取值 linear。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
```
|
||||
|
||||
</div>
|
||||
id 为 `blue` 的元素的 `animation-timing-function` 属性不应该被改变。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
const blueBallAnimation = $('#blue')
|
||||
.css('animation-timing-function')
|
||||
.replace(/\s/g, '');
|
||||
assert(
|
||||
blueBallAnimation == 'ease-out' ||
|
||||
blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,87 +1,66 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad7
|
||||
title: 使用 CSS 线性渐变创建条纹元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bmQh2'
|
||||
forumTopicId: 301072
|
||||
title: 使用 CSS 线性渐变创建条纹元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>repeating-linear-gradient()</code> 函数和 <code>linear-gradient()</code> 很像，主要区别是 <code>repeating-linear-gradient()</code> 重复指定的渐变。 <code>repeating-linear-gradient()</code> 有很多参数，为了便于理解，本关只用到角度值和起止渐变颜色值。
|
||||
# --description--
|
||||
|
||||
`repeating-linear-gradient()` 函数和 `linear-gradient()` 很像，主要区别是 `repeating-linear-gradient()` 重复指定的渐变。 `repeating-linear-gradient()` 有很多参数，为了便于理解，本关只用到角度值和起止渐变颜色值。
|
||||
|
||||
角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值，由颜色值和起止位置组成，起止位置用百分比或者像素值表示。
|
||||
在代码编辑器的例子里，渐变开始于 0 像素位置的 <code>yellow</code>，然后过渡到距离开始位置 40 像素的 <code>blue</code>。由于下一个起止渐变颜色值的起止位置也是 40 像素，所以颜色直接渐变成第三个颜色值 <code>green</code>，然后过渡到距离开始位置 80 像素的 <code>red</code>。
|
||||
|
||||
在代码编辑器的例子里，渐变开始于 0 像素位置的 `yellow`，然后过渡到距离开始位置 40 像素的 `blue`。由于下一个起止渐变颜色值的起止位置也是 40 像素，所以颜色直接渐变成第三个颜色值 `green`，然后过渡到距离开始位置 80 像素的 `red`。
|
||||
|
||||
下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。
|
||||
<code>0px [黄色 -- 过渡 -- 蓝色] 40px [绿色 -- 过渡 -- 红色] 80px</code>
|
||||
|
||||
`0px [黄色 -- 过渡 -- 蓝色] 40px [绿色 -- 过渡 -- 红色] 80px`
|
||||
|
||||
如果每对起止渐变颜色值的颜色都是相同的，由于是在两个相同的颜色间过渡，那么中间的过渡色也为同色，接着就是同色的过渡色和下一个起止颜色，最终产生的效果就是条纹。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
修改 <code>repeating-linear-gradient()</code> 函数使其为渐变角度为 <code>45deg</code> 的条纹，第一对渐变颜色为 <code>yellow</code>, 第二对渐变颜色为 <code>black</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
修改 `repeating-linear-gradient()` 函数使其为渐变角度为 `45deg` 的条纹，第一对渐变颜色为 `yellow`, 第二对渐变颜色为 `black`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>repeating-linear-gradient()</code> 的渐变角度应该为 <code>45deg</code>。'
|
||||
testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
- text: '<code>repeating-linear-gradient()</code> 的渐变角度应该不在是 <code>90deg</code>。'
|
||||
testString: assert(!code.match(/90deg/gi));
|
||||
- text: '<code>0px</code> 处的渐变颜色应该为 <code>yellow</code>。'
|
||||
testString: assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
- text: '<code>40px</code> 处的第一个渐变颜色应该为 <code>yellow</code>。'
|
||||
testString: assert(code.match(/yellow\s+?40px/gi));
|
||||
- text: '<code>40px</code> 处的第二个渐变颜色应该为 <code>black</code>。'
|
||||
testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
- text: '<code>80px</code> 处最后一个渐变颜色应该为 <code>black</code>。'
|
||||
testString: assert(code.match(/black\s+?80px/gi));
|
||||
# --hints--
|
||||
|
||||
`repeating-linear-gradient()` 的渐变角度应该为 `45deg`。
|
||||
|
||||
```js
|
||||
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
`repeating-linear-gradient()` 的渐变角度应该不在是 `90deg`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
yellow 0px,
|
||||
blue 40px,
|
||||
green 40px,
|
||||
red 80px
|
||||
);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```js
|
||||
assert(!code.match(/90deg/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
`0px` 处的渐变颜色应该为 `yellow`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`40px` 处的第一个渐变颜色应该为 `yellow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
```
|
||||
|
||||
`40px` 处的第二个渐变颜色应该为 `black`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
```
|
||||
|
||||
`80px` 处最后一个渐变颜色应该为 `black`。
|
||||
|
||||
```js
|
||||
assert(code.match(/black\s+?80px/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae0
|
||||
title: 使用CSS动画更改按钮的悬停状态
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4vZAa'
|
||||
forumTopicId: 301073
|
||||
title: 使用CSS动画更改按钮的悬停状态
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你可以在按钮悬停时使用 <code>@keyframes</code> 改变按钮的颜色。
|
||||
# --description--
|
||||
|
||||
你可以在按钮悬停时使用 `@keyframes` 改变按钮的颜色。
|
||||
|
||||
下面是在图片悬停时改变图片宽度的例子：
|
||||
|
||||
```html
|
||||
@ -28,65 +29,25 @@ title: 使用CSS动画更改按钮的悬停状态
|
||||
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
注意 <code>ms</code> 代表毫秒，1000ms 等于 1s。
|
||||
使用 <code>@keyframes</code> 来改变 <code>button</code> 元素的 <code>background-color</code>，使其当悬停时变成 <code>#4791d0</code>。<code>@keyframes</code> 规则应该只有一个 <code>100%</code> 条目。
|
||||
</section>
|
||||
注意 `ms` 代表毫秒，1000ms 等于 1s。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
使用 `@keyframes` 来改变 `button` 元素的 `background-color`，使其当悬停时变成 `#4791d0`。`@keyframes` 规则应该只有一个 `100%` 条目。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该是 background-color。'
|
||||
testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
- text: '在 <code>@keyframes</code> 的 <code>100%</code> 条目里应该把 <code>background-color</code> 改成 <code>#4791d0</code>。'
|
||||
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
# --hints--
|
||||
|
||||
`@keyframes` 规则的 `animation-name` 应该是 background-color。
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
在 `@keyframes` 的 `100%` 条目里应该把 `background-color` 改成 `#4791d0`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<button>注册</button>
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adb
|
||||
title: 使用 CSS Transform skex 属性沿X轴倾斜元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLP8Sr'
|
||||
forumTopicId: 301074
|
||||
title: 使用 CSS Transform skex 属性沿X轴倾斜元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
接下来要介绍的 <code>transform</code> 属性是 <code>skewX</code>，<code>skewX</code> 使选择的元素沿着 X 轴（横向）翻转指定的角度。
|
||||
# --description--
|
||||
|
||||
接下来要介绍的 `transform` 属性是 `skewX`，`skewX` 使选择的元素沿着 X 轴（横向）翻转指定的角度。
|
||||
|
||||
下面的代码沿着 X 轴翻转段落元素 -32 度。
|
||||
|
||||
```css
|
||||
@ -17,62 +18,17 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用 <code>transform</code> 属性沿 X 轴翻转 id 为 <code>bottom</code> 的元素 24 度。
|
||||
</section>
|
||||
使用 `transform` 属性沿 X 轴翻转 id 为 `bottom` 的元素 24 度。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>bottom</code> 的元素应该沿着 X 轴翻转 24 度。'
|
||||
testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||
id 为 `bottom` 的元素应该沿着 X 轴翻转 24 度。
|
||||
|
||||
```js
|
||||
assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,72 +1,26 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adc
|
||||
title: 使用 CSS Transform skex 属性沿Y轴倾斜元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
|
||||
forumTopicId: 301075
|
||||
title: 使用 CSS Transform skex 属性沿Y轴倾斜元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>skewX</code> 函数使指定元素沿 X 轴翻转指定的角度，想必你已经猜到了，<code>skewY</code> 属性使指定元素沿 Y 轴（垂直方向）翻转指定角度。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用 <code>transform</code> 属性沿 Y 轴翻转 id 为 <code>top</code> 的元素 -10 度。
|
||||
</section>
|
||||
`skewX` 函数使指定元素沿 X 轴翻转指定的角度，想必你已经猜到了，`skewY` 属性使指定元素沿 Y 轴（垂直方向）翻转指定角度。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id 为 <code>top</code> 的元素应该沿着 Y 轴翻转 -10 度。'
|
||||
testString: assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||
使用 `transform` 属性沿 Y 轴翻转 id 为 `top` 的元素 -10 度。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 为 `top` 的元素应该沿着 Y 轴翻转 -10 度。
|
||||
|
||||
```js
|
||||
assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad9
|
||||
title: 使用 CSS Transform scale 属性可以更改元素的大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZVSg'
|
||||
forumTopicId: 301076
|
||||
title: 使用 CSS Transform scale 属性可以更改元素的大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 属性 <code>transform</code> 里面的 <code>scale()</code> 函数，可以用来改变元素的显示比例。下面的例子把页面的段落元素放大了 2 倍：
|
||||
# --description--
|
||||
|
||||
CSS 属性 `transform` 里面的 `scale()` 函数，可以用来改变元素的显示比例。下面的例子把页面的段落元素放大了 2 倍：
|
||||
|
||||
```css
|
||||
p {
|
||||
@ -16,72 +16,21 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
把 id 为 <code>ball2</code> 的元素放大到原始大小的 1.5 倍。
|
||||
</section>
|
||||
把 id 为 `ball2` 的元素放大到原始大小的 1.5 倍。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#ball2</code> 的 <code>transform</code> 属性应该为原始大小的 1.5 倍。'
|
||||
testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi));
|
||||
`#ball2` 的 `transform` 属性应该为原始大小的 1.5 倍。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ada
|
||||
title: 使用CSS Transform scale 属性在悬停时缩放元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLPJuM'
|
||||
forumTopicId: 301077
|
||||
title: 使用CSS Transform scale 属性在悬停时缩放元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>transform</code> 属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如 <code>:hover</code> 时，<code>transform</code> 属性可以方便的给元素添加交互。
|
||||
# --description--
|
||||
|
||||
`transform` 属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如 `:hover` 时，`transform` 属性可以方便的给元素添加交互。
|
||||
|
||||
下面是当用户悬停段落元素时，段落大小缩放到原始大小 2.1 倍的例子：
|
||||
|
||||
```css
|
||||
@ -17,65 +18,19 @@ p:hover {
|
||||
}
|
||||
```
|
||||
|
||||
**注意：** 给 `div` 元素添加 transform 也会影响这个 div 包裹的子元素。
|
||||
|
||||
<strong>注意：</strong> 给 <code>div</code> 元素添加 transform 也会影响这个 div 包裹的子元素。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给 <code>div</code> 伪类 <code>hover</code> 添加 <code>transform</code> 属性，使其当鼠标悬停时大小缩放到原始大小的 1.1 倍。
|
||||
</section>
|
||||
给 `div` 伪类 `hover` 添加 `transform` 属性，使其当鼠标悬停时大小缩放到原始大小的 1.1 倍。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>div</code> 元素在悬停时大小应该缩放到原始大小的 1.1 倍。'
|
||||
testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||
`div` 元素在悬停时大小应该缩放到原始大小的 1.1 倍。
|
||||
|
||||
```js
|
||||
assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,94 +1,34 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab9
|
||||
title: 使用 em 标签强调文本
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJRBtp'
|
||||
forumTopicId: 301078
|
||||
title: 使用 em 标签强调文本
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
术语：emphasis => em => 强调。
|
||||
你可以使用 <code>em</code> 标签来强调文本。由于浏览器会自动给元素应用 <code>font-style: italic;</code>，所以文本会显示为斜体。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在 <code>p</code> 标签里面嵌套 <code>em</code> 标签来强调文本。
|
||||
</section>
|
||||
你可以使用 `em` 标签来强调文本。由于浏览器会自动给元素应用 `font-style: italic;`，所以文本会显示为斜体。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该添加一个 <code>em</code> 标签。'
|
||||
testString: assert($('em').length == 1);
|
||||
- text: '<code>em</code> 标签应该嵌套在 <code>p</code> 标签里面。'
|
||||
testString: assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
在 `p` 标签里面嵌套 `em` 标签来强调文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该添加一个 `em` 标签。
|
||||
|
||||
```js
|
||||
assert($('em').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
`em` 标签应该嵌套在 `p` 标签里面。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```js
|
||||
assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,96 +1,51 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512aba
|
||||
title: 使用 s 标签给文本添加删除线
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301079
|
||||
title: 使用 s 标签给文本添加删除线
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
术语：Strikethrough => s => 删除线。
|
||||
你可以用 <code>s</code> 标签来给文字添加删除线，<s>我是明晃晃的删除线</s>，它代表着这段文字不再有效。添加了 <code>s</code> 标签后，浏览器会自动给元素应用 <code>text-decoration: line-through;</code>。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在 <code>h4</code> 标签里的 “Google” 外添加 <code>s</code> 标签，然后在 <code>s</code> 标签外面添加单词 Alphabet，Alphabet 不要有删除线格式。
|
||||
</section>
|
||||
你可以用 `s` 标签来给文字添加删除线，~~我是明晃晃的删除线~~，它代表着这段文字不再有效。添加了 `s` 标签后，浏览器会自动给元素应用 `text-decoration: line-through;`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该添加一个 <code>s</code> 标签。'
|
||||
testString: assert($('s').length == 1);
|
||||
- text: ' <code>s</code> 标签应该在 <code>h4</code> 标签内的 Google 文字外面，它不应该包含单词 Alphabet。'
|
||||
testString: assert($('h4 > s').text().match(/Google/gi) && !$('h4 > s').text().match(/Alphabet/gi));
|
||||
- text: '<code>h4</code> 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。'
|
||||
testString: assert($('h4').html().match(/Alphabet/gi));
|
||||
在 `h4` 标签里的 “Google” 外添加 `s` 标签，然后在 `s` 标签外面添加单词 Alphabet，Alphabet 不要有删除线格式。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该添加一个 `s` 标签。
|
||||
|
||||
```js
|
||||
assert($('s').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
`s` 标签应该在 `h4` 标签内的 Google 文字外面，它不应该包含单词 Alphabet。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```js
|
||||
assert(
|
||||
$('h4 > s')
|
||||
.text()
|
||||
.match(/Google/gi) &&
|
||||
!$('h4 > s')
|
||||
.text()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
`h4` 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
$('h4')
|
||||
.html()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,96 +1,44 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab7
|
||||
title: 使用 strong 标签加粗文本
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/ceJNBSb'
|
||||
forumTopicId: 1
|
||||
title: 使用 strong 标签加粗文本
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
术语：Strong => s => 加粗。
|
||||
你可以使用 <code>strong</code> 标签来加粗文字。添加了 <code>strong</code> 标签后，浏览器会自动给元素应用 <code>font-weight:bold;</code>。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在 <code>p</code> 标签里的 “斯坦福大学” 外面添加 <code>strong</code> 标签。
|
||||
</section>
|
||||
你可以使用 `strong` 标签来加粗文字。添加了 `strong` 标签后，浏览器会自动给元素应用 `font-weight:bold;`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该有一个 <code>strong</code> 标签。'
|
||||
testString: assert($('strong').length == 1);
|
||||
- text: '<code>strong</code> 标签应该在 <code>p</code> 标签里。'
|
||||
testString: assert($('p').children('strong').length == 1);
|
||||
- text: '<code>strong</code> 标签应该包围 “斯坦福大学”。'
|
||||
testString: assert($('strong').text().match(/^Stanford University$/gi));
|
||||
在 `p` 标签里的 “斯坦福大学” 外面添加 `strong` 标签。
|
||||
|
||||
```
|
||||
# --hints--
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
你应该有一个 `strong` 标签。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert($('strong').length == 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`strong` 标签应该在 `p` 标签里。
|
||||
|
||||
```js
|
||||
assert($('p').children('strong').length == 1);
|
||||
```
|
||||
|
||||
`strong` 标签应该包围 “斯坦福大学”。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('strong')
|
||||
.text()
|
||||
.match(/^Stanford University$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,103 +1,36 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac0
|
||||
title: 使用 text-transform 属性给文本添加大写效果
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZQSP'
|
||||
forumTopicId: 301081
|
||||
title: 使用 text-transform 属性给文本添加大写效果
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 里面的 <code>text-transform</code> 属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。
|
||||
下面的表格展示了<code>text-transform</code> 的不同值对文字 “Transform me” 的影响。
|
||||
<table class="table table-striped"><thead><th>Value<th>Result<tbody><tr><td><code>lowercase</code><td>"transform me"<tr><td><code>uppercase</code><td>"TRANSFORM ME"<tr><td><code>capitalize</code><td>"Transform Me"<tr><td><code>initial</code><td>使用默认值<tr><td><code>inherit</code><td>使用父元素的 <code>text-transform</code> 值。<tr><td><code>none</code><td><strong>Default:</strong>不改变文字。</td></table>
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用 <code>text-transform</code> 属性把 <code>h4</code> 内的英文的所有字母变成大写。
|
||||
</section>
|
||||
CSS 里面的 `text-transform` 属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
下面的表格展示了`text-transform` 的不同值对文字 “Transform me” 的影响。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h4</code> 内的英文的所有字母应该为大写。'
|
||||
testString: assert($('h4').css('text-transform') === 'uppercase');
|
||||
- text: '<code>h4</code> 内的原文不能被改变。'
|
||||
testString: assert(($('h4').text() !== $('h4').text().toUpperCase()));
|
||||
<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>
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `text-transform` 属性把 `h4` 内的英文的所有字母变成大写。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` 内的英文的所有字母应该为大写。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-transform') === 'uppercase');
|
||||
```
|
||||
|
||||
</section>
|
||||
`h4` 内的原文不能被改变。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```js
|
||||
assert($('h4').text() !== $('h4').text().toUpperCase());
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,95 +1,36 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab8
|
||||
title: 使用 u 标签给文本添加下划线
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6aQCL'
|
||||
forumTopicId: 301082
|
||||
title: 使用 u 标签给文本添加下划线
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
术语：Underline => u => 下划线。
|
||||
你可以使用 <code>u</code> 标签来给文字添加下划线。添加了 <code>u</code> 标签后，浏览器会自动给元素应用 <code>text-decoration: underline;</code>。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给 “理工博士” 添加 <code>u</code> 标签，不要给整个 class 为 <code>cardText</code> 的父 <code>div</code> 添加。
|
||||
<strong>注意：</strong>锚点默认给文本添加下划线，如果 <code>u</code> 标签的下划线和页面的锚点混淆，请避免使用它。
|
||||
</section>
|
||||
你可以使用 `u` 标签来给文字添加下划线。添加了 `u` 标签后，浏览器会自动给元素应用 `text-decoration: underline;`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你应该有一个 <code>u</code> 标签。
|
||||
testString: assert($('u').length === 1);
|
||||
- text: <code>u</code> 标签应该包围 “理工博士”。
|
||||
testString: assert($('u').text() === '理工博士');
|
||||
给 “理工博士” 添加 `u` 标签，不要给整个 class 为 `cardText` 的父 `div` 添加。
|
||||
|
||||
**注意：** 锚点默认给文本添加下划线，如果 `u` 标签的下划线和页面的锚点混淆，请避免使用它。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该有一个 `u` 标签。
|
||||
|
||||
```js
|
||||
assert($('u').length === 1);
|
||||
```
|
||||
|
||||
</section>
|
||||
`u` 标签应该包围 “理工博士”。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google 由在<strong>斯坦福大学</strong>攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```js
|
||||
assert($('u').text() === '理工博士');
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,92 +1,30 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: 给元素添加负外边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
title: 给元素添加负外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
元素的<code>margin（外边距）</code>控制元素<code>border（边框）</code>与其他周围元素之间的距离大小。
|
||||
如果你把元素的<code>margin</code>设置为负值，元素会变得更大。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
尝试将蓝色框的<code>margin</code>设为负值，跟红色框一样大小。
|
||||
蓝色框的<code>margin</code>设置为<code>-15px</code>，它会填满与黄色框之间的距离。
|
||||
</section>
|
||||
元素的`margin（外边距）`控制元素`border（边框）`与其他周围元素之间的距离大小。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
如果你把元素的`margin`设置为负值，元素会变得更大。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class的<code>margin</code>应该设置为<code>-15px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "-15px");
|
||||
# --instructions--
|
||||
|
||||
尝试将蓝色框的`margin`设为负值，跟红色框一样大小。
|
||||
|
||||
蓝色框的`margin`设置为`-15px`，它会填满与黄色框之间的距离。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class的`margin`应该设置为`-15px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '-15px');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: 在元素周围添加边框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
title: 在元素周围添加边框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 边框具有<code>style</code>，<code>color</code>和<code>width</code>属性。
|
||||
# --description--
|
||||
|
||||
CSS 边框具有`style`，`color`和`width`属性。
|
||||
|
||||
假如我们想要创建一个 5px 的红色实线边框包围一个 HTML 元素，我们可以这样做：
|
||||
|
||||
```html
|
||||
@ -21,104 +22,49 @@ CSS 边框具有<code>style</code>，<code>color</code>和<code>width</code>属
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个<code>thick-green-border</code> CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在猫咪照片上。
|
||||
记得在一个元素上可以同时应用多个<code>class</code>，通过使用空格来分隔。例子如下：
|
||||
<code><img class="class1 class2"></code>
|
||||
</section>
|
||||
创建一个`thick-green-border` CSS class，该 class 应在 HTML 元素周围添加一个 10px 的绿色实线边框，将它应用在猫咪照片上。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
记得在一个元素上可以同时应用多个`class`，通过使用空格来分隔。例子如下：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>img</code>元素应该含有<code>smaller-image</code> class。'
|
||||
testString: assert($("img").hasClass("smaller-image"));
|
||||
- text: '<code>img</code>元素应该含有<code>thick-green-border</code> class。'
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- text: '设置图片边框为<code>10px</code>。'
|
||||
testString: assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12);
|
||||
- text: '设置图片边框为<code>solid</code>实线。'
|
||||
testString: assert($("img").css("border-right-style") === "solid");
|
||||
- text: '<code>img</code>元素的边框颜色应该为绿色。'
|
||||
testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)");
|
||||
`<img class="class1 class2">`
|
||||
|
||||
# --hints--
|
||||
|
||||
`img`元素应该含有`smaller-image` class。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`img`元素应该含有`thick-green-border` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>。</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
</div>
|
||||
设置图片边框为`10px`。
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
$('img').hasClass('thick-green-border') &&
|
||||
parseInt($('img').css('border-top-width'), 10) >= 8 &&
|
||||
parseInt($('img').css('border-top-width'), 10) <= 12
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
设置图片边框为`solid`实线。
|
||||
|
||||
```js
|
||||
assert($('img').css('border-right-style') === 'solid');
|
||||
```
|
||||
|
||||
`img`元素的边框颜色应该为绿色。
|
||||
|
||||
```js
|
||||
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,98 +1,46 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: 给元素的每一侧添加不同的外边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
title: 给元素的每一侧添加不同的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
有时候，你会想给一个元素每个方向的<code>margin</code>都设置成一个特定的值。
|
||||
CSS 允许你使用<code>margin-top</code>，<code>margin-right</code>，<code>margin-bottom</code>和<code>margin-left</code>属性来设置四个不同方向的<code>margin</code>值。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色框的顶部和左侧的<code>margin</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
</section>
|
||||
有时候，你会想给一个元素每个方向的`margin`都设置成一个特定的值。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
CSS 允许你使用`margin-top`，`margin-right`，`margin-bottom`和`margin-left`属性来设置四个不同方向的`margin`值。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的右侧<code>margin</code>（上外边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右侧<code>margin</code>（右外边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px");
|
||||
- text: '<code>blue-box</code> class 的底部<code>margin</code>（下外边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-bottom") === "20px");
|
||||
- text: '<code>blue-box</code> class 的左侧<code>margin</code>（左外边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-left") === "40px");
|
||||
# --instructions--
|
||||
|
||||
```
|
||||
蓝色框的顶部和左侧的`margin`值设置为`40px`，底部和右侧设置为`20px`。
|
||||
|
||||
</section>
|
||||
# --hints--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
`blue-box` class 的右侧`margin`（上外边距）值应为`40px`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`blue-box` class 的右侧`margin`（右外边距）值应为`20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的底部`margin`（下外边距）值应为`20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
`blue-box` class 的左侧`margin`（左外边距）值应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,98 +1,46 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: 给元素的每一侧添加不同的内边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
title: 给元素的每一侧添加不同的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
有时候，你会想给一个元素每个方向的<code>padding</code>都设置成一个特定的值
|
||||
CSS 允许你使用<code>padding-top</code>，<code>padding-right</code>， <code>padding-bottom</code>和<code>padding-left</code>属性来设置四个不同方向的<code>padding</code>值。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色框的顶部和左侧的<code>padding</code>值设置为<code>40px</code>，底部和右侧设置为<code>20px</code>。
|
||||
</section>
|
||||
有时候，你会想给一个元素每个方向的`padding`都设置成一个特定的值
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
CSS 允许你使用`padding-top`，`padding-right`， `padding-bottom`和`padding-left`属性来设置四个不同方向的`padding`值。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的顶部<code>padding</code>（上内边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右侧<code>padding</code>（右内边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-right") === "20px");
|
||||
- text: '<code>blue-box</code> class 的底部<code>padding</code>（下内边距）值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-bottom") === "20px");
|
||||
- text: '<code>blue-box</code> class 的左侧<code>padding</code>（左内边距）值应为<code>40px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-left") === "40px");
|
||||
# --instructions--
|
||||
|
||||
蓝色框的顶部和左侧的`padding`值设置为`40px`，底部和右侧设置为`20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的顶部`padding`（上内边距）值应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
</section>
|
||||
`blue-box` class 的右侧`padding`（右内边距）值应为`20px`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
</div>
|
||||
`blue-box` class 的底部`padding`（下内边距）值应为`20px`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`blue-box` class 的左侧`padding`（左内边距）值应为`40px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,113 +1,39 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: 用 border-radius 添加圆角边框
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
forumTopicId: 16649
|
||||
title: 用 border-radius 添加圆角边框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
猫咪图片边角很尖锐，我们可以使用<code>border-radius</code>属性来让它变得圆润。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
<code>border-radius</code>可以用<code>px</code>像素单位来赋值。给猫咪图片设置 10px 的<code>border-radius</code>。
|
||||
注意：这个挑战有多个解决方法。例如，添加<code>border-radius</code>属性到<code>.thick-green-border</code>class 或<code>.smaller-image</code>class 里都是可行的。
|
||||
</section>
|
||||
猫咪图片边角很尖锐，我们可以使用`border-radius`属性来让它变得圆润。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '图片元素应具有 "thick-green-border" class 属性。'
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- text: '图片应含有<code>10px</code>的边框圆角。'
|
||||
testString: assert($("img").css("border-top-left-radius") === '10px' && $("img").css("border-top-right-radius") === '10px' && $("img").css("border-bottom-left-radius") === '10px' && $("img").css("border-bottom-right-radius") === '10px');
|
||||
`border-radius`可以用`px`像素单位来赋值。给猫咪图片设置 10px 的`border-radius`。
|
||||
|
||||
注意：这个挑战有多个解决方法。例如，添加`border-radius`属性到`.thick-green-border`class 或`.smaller-image`class 里都是可行的。
|
||||
|
||||
# --hints--
|
||||
|
||||
图片元素应具有 "thick-green-border" class 属性。
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
</section>
|
||||
图片应含有`10px`的边框圆角。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert(
|
||||
$('img').css('border-top-left-radius') === '10px' &&
|
||||
$('img').css('border-top-right-radius') === '10px' &&
|
||||
$('img').css('border-bottom-left-radius') === '10px' &&
|
||||
$('img').css('border-bottom-right-radius') === '10px'
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,93 +1,30 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: 调整元素的外边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
forumTopicId: 16654
|
||||
title: 调整元素的外边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>margin（外边距）</code>控制元素的边框与其他元素之间的距离。
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里。请注意，红色框的<code>margin</code>值要比蓝色框的大，让它看起来比蓝色框要小。
|
||||
当你增加蓝色的<code>margin</code>值，它会增加元素边框到其他周围元素的距离。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色的框<code>margin</code>的值要跟红色框的一样大小。
|
||||
</section>
|
||||
`margin（外边距）`控制元素的边框与其他元素之间的距离。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里。请注意，红色框的`margin`值要比蓝色框的大，让它看起来比蓝色框要小。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的<code>margin</code>值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-top") === "20px");
|
||||
当你增加蓝色的`margin`值，它会增加元素边框到其他周围元素的距离。
|
||||
|
||||
# --instructions--
|
||||
|
||||
蓝色的框`margin`的值要跟红色框的一样大小。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的`margin`值应为`20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '20px');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
/section>
|
||||
|
||||
@ -1,94 +1,36 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: 调整元素的内边距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
forumTopicId: 301083
|
||||
title: 调整元素的内边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
我们先暂时把猫咪图片放在一边，让我们去学习更多 HTML 相关样式。
|
||||
|
||||
你可能已经注意到了，所有的 HTML 元素基本都是以矩形为基础。
|
||||
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：<code>padding（内边距）</code>，<code>margin（外边距）</code>和<code>border（边框）</code>。
|
||||
<code>padding</code>控制着元素内容与<code>border</code>之间的空隙大小。
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里面。可以发现，红色框比蓝色框有着更多的<code>padding</code>填充空间。
|
||||
当你增加蓝色框的<code>padding</code>值，文本内容与边框的距离会逐渐拉大。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
蓝色的框<code>padding</code>的值要跟红色框的一样大小。
|
||||
</section>
|
||||
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：`padding（内边距）`，`margin（外边距）`和`border（边框）`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`padding`控制着元素内容与`border`之间的空隙大小。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的<code>padding</code>值应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("padding-top") === "20px");
|
||||
在这里，我们可以看到蓝色框和红色框都在黄色框里面。可以发现，红色框比蓝色框有着更多的`padding`填充空间。
|
||||
|
||||
当你增加蓝色框的`padding`值，文本内容与边框的距离会逐渐拉大。
|
||||
|
||||
# --instructions--
|
||||
|
||||
蓝色的框`padding`的值要跟红色框的一样大小。
|
||||
|
||||
# --hints--
|
||||
|
||||
`blue-box` class 的`padding`值应为`20px`。
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '20px');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,269 +1,50 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: 给 CSS 变量附加回退值
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
title: 给 CSS 变量附加回退值
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
|
||||
|
||||
或许有些人正在使用着不支持 CSS 变量的旧浏览器，又或者，设备不支持你设置的变量值。为了防止这种情况出现，那么你可以这样写：
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
这样，当变量有问题的时候，它会设置背景颜色为黑色。
|
||||
提示：这对调试会很有帮助。
|
||||
</section>
|
||||
这样，当变量有问题的时候，它会设置背景颜色为黑色。 提示：这对调试会很有帮助。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>penguin-top</code>和<code>penguin-bottom</code>class 里面，<code>background</code>属性设置一个<code>black</code>的备用色。
|
||||
<strong>注意：</strong>因为 CSS 变量名拼写错了，所以备用值会被使用。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在`penguin-top`和`penguin-bottom`class 里面，`background`属性设置一个`black`的备用色。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin-top</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'
|
||||
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
|
||||
- text: '<code>penguin-bottom</code> class 的<code>background</code>属性应设置一个<code>black</code>备用颜色。'
|
||||
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
|
||||
**注意：** 因为 CSS 变量名拼写错了，所以备用值会被使用。
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* change code below */
|
||||
background: var(--pengiun-skin);
|
||||
/* change code above */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* change code below */
|
||||
background: var(--pengiun-skin);
|
||||
/* change code above */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
`penguin-top` class 的`background`属性应设置一个`black`备用颜色。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`penguin-bottom` class 的`background`属性应设置一个`black`备用颜色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,260 +1,30 @@
|
||||
---
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: 更改特定区域的变量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
forumTopicId: 301085
|
||||
title: 更改特定区域的变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
当你在<code>:root</code>里创建变量时，这些变量的作用域是整个页面。
|
||||
如果在元素里创建相同的变量，会重写<code>:root</code>变量设置的值。
|
||||
# --description--
|
||||
|
||||
</section>
|
||||
当你在`:root`里创建变量时，这些变量的作用域是整个页面。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>penguin</code>class 里，设置<code>--penguin-belly</code>的值为<code>white</code>。
|
||||
</section>
|
||||
如果在元素里创建相同的变量，会重写`:root`变量设置的值。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '应该在<code>penguin</code>clas 里重定义<code>--penguin-belly</code>的变量值，且它的值为<code>white</code>。'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi));
|
||||
在`penguin`class 里，设置`--penguin-belly`的值为`white`。
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: pink;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
应该在`penguin`clas 里重定义`--penguin-belly`的变量值，且它的值为`white`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,92 +1,46 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: 更改文本的颜色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
title: 更改文本的颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
现在让我们来修改一下文本的颜色。
|
||||
我们通过修改<code>h2</code>元素的<code>style</code>属性的<code>color</code>值来改变文本颜色。
|
||||
以下是改变<code>h2</code>元素为蓝色的方法：
|
||||
<code><h2 style="color: blue;">CatPhotoApp</h2></code>
|
||||
请注意行内<code>style</code>最好以<code>;</code>来结束。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
请把<code>h2</code>元素的文本颜色设置为红色。
|
||||
</section>
|
||||
我们通过修改`h2`元素的`style`属性的`color`值来改变文本颜色。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
以下是改变`h2`元素为蓝色的方法：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>h2</code> 元素应该有一个<code>style</code>声明。
|
||||
testString: assert($("h2").attr('style'));
|
||||
- text: <code>h2</code>元素应该为<code>red</code>。
|
||||
testString: assert($("h2")[0].style.color === "red");
|
||||
- text: <code>style</code> 声明应该以 <code>;</code> 结尾。
|
||||
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
|
||||
`<h2 style="color: blue;">CatPhotoApp</h2>`
|
||||
|
||||
请注意行内`style`最好以`;`来结束。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请把`h2`元素的文本颜色设置为红色。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素应该有一个`style`声明。
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h2`元素应该为`red`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('h2')[0].style.color === 'red');
|
||||
```
|
||||
|
||||
</div>
|
||||
`style` 声明应该以 `;` 结尾。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: 更改元素的字体大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
title: 更改元素的字体大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
字体大小由<code>font-size</code>属性控制，如下所示：
|
||||
# --description--
|
||||
|
||||
字体大小由`font-size`属性控制，如下所示：
|
||||
|
||||
```css
|
||||
h1 {
|
||||
@ -16,82 +16,17 @@ h1 {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在包含<code>red-text</code>class 选择器的<code><style></code>声明区域的里，创建一个<code>p</code>元素样式规则，并设置<code>font-size</code>为<code>16px</code>。
|
||||
</section>
|
||||
在包含`red-text`class 选择器的`<style>`声明区域的里，创建一个`p`元素样式规则，并设置`font-size`为`16px`。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '在<code>style</code>样式声明区域里，<code>p</code>元素的<code>font-size</code>的值应为<code>16px</code>，浏览器和文本缩放应设置为 100％。'
|
||||
testString: assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
在`style`样式声明区域里，`p`元素的`font-size`的值应为`16px`，浏览器和文本缩放应设置为 100％。
|
||||
|
||||
```js
|
||||
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,258 +1,34 @@
|
||||
---
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: 创建一个自定义的 CSS 变量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
forumTopicId: 301086
|
||||
title: 创建一个自定义的 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
创建一个 CSS 变量，你只需要在变量名前添加两个<code>破折号</code>，并为其赋值，例子如下：
|
||||
# --description--
|
||||
|
||||
创建一个 CSS 变量，你只需要在变量名前添加两个`破折号`，并为其赋值，例子如下：
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
这样会创建一个<code>--penguin-skin</code>变量并赋值为<code>gray（灰色）</code>。
|
||||
现在，其他元素可通过该变量来设置为<code>gray（灰色）</code>。
|
||||
</section>
|
||||
这样会创建一个`--penguin-skin`变量并赋值为`gray（灰色）`。 现在，其他元素可通过该变量来设置为`gray（灰色）`。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>penguin</code>class 里面，创建一个<code>--penguin-skin</code>变量，且赋值为<code>gray（灰色）</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在`penguin`class 里面，创建一个`--penguin-skin`变量，且赋值为`gray（灰色）`。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>penguin</code> class 里应声明<code>--penguin-skin</code>变量，且赋值为<code>gray</code>。'
|
||||
testString: assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: black;
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
`penguin` class 里应声明`--penguin-skin`变量，且赋值为`gray`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: 给 div 元素添加背景色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
forumTopicId: 18190
|
||||
title: 给 div 元素添加背景色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>background-color</code>属性可以设置元素的背景颜色。
|
||||
例如，你想将一个元素的背景颜色改为<code>green</code>，可以在<code>style</code>里面这样写：
|
||||
# --description--
|
||||
|
||||
`background-color`属性可以设置元素的背景颜色。
|
||||
|
||||
例如，你想将一个元素的背景颜色改为`green`，可以在`style`里面这样写：
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
@ -17,107 +18,29 @@ title: 给 div 元素添加背景色
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个<code>silver-background</code>class 并设置<code>background-color</code>为<code>silver</code>。 并用在<code>div</code>元素上。
|
||||
</section>
|
||||
创建一个`silver-background`class 并设置`background-color`为`silver`。 并用在`div`元素上。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>div</code>元素应有<code>silver-background</code> class。'
|
||||
testString: assert($("div").hasClass("silver-background"));
|
||||
- text: '<code>div</code>元素背景颜色应设置为<code>silver</code>。'
|
||||
testString: assert($("div").css("background-color") === "rgb(192, 192, 192)");
|
||||
- text: 'class 名 <code>silver-background</code> 应该定义在 <code>style</code> 元素内，<code>silver</code> 的值应该指定 <code>background-color</code> 属性'
|
||||
testString: assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
`div`元素应有`silver-background` class。
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('silver-background'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`div`元素背景颜色应设置为`silver`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
```
|
||||
|
||||
</div>
|
||||
class 名 `silver-background` 应该定义在 `style` 元素内，`silver` 的值应该指定 `background-color` 属性
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,108 +1,71 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: 引入谷歌字体
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
forumTopicId: 18200
|
||||
title: 引入谷歌字体
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用<code>Google</code>字体库。
|
||||
<a href='https://fonts.google.com/' target='_blank'>Google 字体</a>是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。
|
||||
因此，下一步，我们将引入和使用<code>Google</code>字体。
|
||||
引入<code>Google</code>字体，你需要复制<code>Google</code>字体的 URL，并粘贴到 HTML 里面。在这个挑战中，我们需要引入<code>Lobster</code>字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到<code>style</code>标签之前。
|
||||
<code><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code>
|
||||
现在你可以设置<code>font-family</code>属性为<code>Lobster</code>，来使用<code>Lobster</code>字体。例子如下：<br><code>font-family: FAMILY_NAME, GENERIC_NAME;</code>.
|
||||
<code>GENERIC_NAME</code>是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。
|
||||
字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用<code>"Open Sans"</code>字体需要添加引号，而<code>Lobster</code>字体则不需要。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个 CSS 规则，<code>font-family</code>属性里设置为<code>Lobster</code>字体，并把这个字体应用到所有的<code>h2</code>元素。
|
||||
</section>
|
||||
除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。网络上有各种各样的字体，不过在这个例子中，我们将会尝试使用`Google`字体库。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
[Google 字体](https://fonts.google.com/)是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '引入<code>Lobster</code>字体。'
|
||||
testString: assert(new RegExp("googleapis", "gi").test(code));
|
||||
- text: '<code>h2</code>元素必须使用<code>Lobster</code>字体。'
|
||||
testString: assert($("h2").css("font-family").match(/lobster/i));
|
||||
- text: '使用<code>h2</code>选择器去改变字体样式。'
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));'
|
||||
- text: '<code>p</code>元素应该保持使用<code>monospace</code>字体。'
|
||||
testString: assert($("p").css("font-family").match(/monospace/i));
|
||||
因此，下一步，我们将引入和使用`Google`字体。
|
||||
|
||||
引入`Google`字体，你需要复制`Google`字体的 URL，并粘贴到 HTML 里面。在这个挑战中，我们需要引入`Lobster`字体。因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到`style`标签之前。
|
||||
|
||||
`<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">`
|
||||
|
||||
现在你可以设置`font-family`属性为`Lobster`，来使用`Lobster`字体。例子如下：
|
||||
`font-family: FAMILY_NAME, GENERIC_NAME;`.
|
||||
|
||||
`GENERIC_NAME`是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。
|
||||
|
||||
字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用`"Open Sans"`字体需要添加引号，而`Lobster`字体则不需要。
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个 CSS 规则，`font-family`属性里设置为`Lobster`字体，并把这个字体应用到所有的`h2`元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
引入`Lobster`字体。
|
||||
|
||||
```js
|
||||
assert(new RegExp('googleapis', 'gi').test(code));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h2`元素必须使用`Lobster`字体。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
使用`h2`选择器去改变字体样式。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`p`元素应该保持使用`monospace`字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,78 +1,36 @@
|
||||
---
|
||||
id: 5b7d72c338cd7e35b63f3e14
|
||||
title: 通过浏览器降级提高兼容性
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301087
|
||||
title: 通过浏览器降级提高兼容性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
使用 CSS 时可能会遇到浏览器兼容性问题。提供浏览器降级方案来避免潜在的问题就显得很重要。
|
||||
|
||||
当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。举个栗子，如果使用 CSS 变量来指定站点的背景色， IE 浏览器由于不支持 CSS 变量会忽视背景色。因此，浏览器会使用其它值。如果没有找到其它值，会使用默认值，也就是没有背景色。
|
||||
|
||||
这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
看来已经使用了变量做为 <code>.red-box</code> class 的背景色。来通过在存在的声明前添加其它的值为 red 的 <code>background</code> 声明来提高浏览器的兼容性。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
看来已经使用了变量做为 `.red-box` class 的背景色。来通过在存在的声明前添加其它的值为 red 的 `background` 声明来提高浏览器的兼容性。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>.red-box</code> 应该通过在存在的 <code>background</code> 声明前添加其它的值为 red 的<code>background</code> 来提供降级。'
|
||||
testString: assert(code.replace(/\s/g, "").match(/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi));
|
||||
# --hints--
|
||||
|
||||
`.red-box` 应该通过在存在的 `background` 声明前添加其它的值为 red 的`background` 来提供降级。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code
|
||||
.replace(/\s/g, '')
|
||||
.match(
|
||||
/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
background: red;
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,256 +1,30 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: 继承 CSS 变量
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
forumTopicId: 301088
|
||||
title: 继承 CSS 变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
当创建一个变量时，变量会在创建的选择器里可用。同时，在这个选择器的后代里面也是可用的。这是因为 CSS 变量是可继承的，和普通的属性一样。
|
||||
CSS 变量经常会定义在 <dfn>:root</dfn> 元素内，这样就可被所有选择器继承。<code>:root</code> 是一个 <dfn>pseudo-class</dfn> 选择器匹配文档的根选择器，通常指 <code>html</code> 元素。通过在 <code>:root</code> 里创建变量，变量在全局可用，以及在 style 样式的选择器里也生效。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在 <code>:root</code> 选择器里定义变量 <code>--penguin-belly</code> 并赋值 <code>pink</code>。会发现变量被继承，所有使用该变量的子元素都会有 pink 背景。
|
||||
</section>
|
||||
CSS 变量经常会定义在 <dfn>:root</dfn> 元素内，这样就可被所有选择器继承。`:root` 是一个 <dfn>pseudo-class</dfn> 选择器匹配文档的根选择器，通常指 `html` 元素。通过在 `:root` 里创建变量，变量在全局可用，以及在 style 样式的选择器里也生效。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '应该在 <code>:root</code> 里声明 <code>--penguin-belly</code> 变量并赋值 <code>pink</code>。'
|
||||
testString: assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi));
|
||||
在 `:root` 选择器里定义变量 `--penguin-belly` 并赋值 `pink`。会发现变量被继承，所有使用该变量的子元素都会有 pink 背景。
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
|
||||
/* add code below */
|
||||
|
||||
/* add code above */
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
--penguin-beak: orange;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
# --hints--
|
||||
|
||||
应该在 `:root` 里声明 `--penguin-belly` 变量并赋值 `pink`。
|
||||
|
||||
```js
|
||||
var code = ":root {--penguin-belly: pink;}"
|
||||
assert(
|
||||
code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,74 +1,86 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: 从 Body 元素继承样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
title: 从 Body 元素继承样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
我们已经证明每一个 HTML 页面都含有<code>body</code>元素，<code>body</code>元素也可以使用 CSS 样式。
|
||||
设置<code>body</code>元素的样式的方式跟设置其他 HTML 元素的样式一样，并且其他元素也会继承到<code>body</code>设置的样式。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
首先，创建一个文本内容为<code>Hello World</code>的<code>h1</code>标签元素。
|
||||
接着，在<code>body</code>CSS 规则里面添加一句<code>color: green;</code>，改变页面其他元素的字体颜色为<code>green（绿色）</code>。
|
||||
最后，同样在<code>body</code>CSS 规则里面添加<code>font-family: monospace;</code>，设置其他元素字体为<code>font-family: monospace;</code>。
|
||||
</section>
|
||||
我们已经证明每一个 HTML 页面都含有`body`元素，`body`元素也可以使用 CSS 样式。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
设置`body`元素的样式的方式跟设置其他 HTML 元素的样式一样，并且其他元素也会继承到`body`设置的样式。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '创建一个<code>h1</code>元素。'
|
||||
testString: assert(($("h1").length > 0));
|
||||
- text: '<code>h1</code>元素的文本内容应该为<code>Hello World</code>。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
|
||||
- text: '确保<code>h1</code>元素具有结束标记。'
|
||||
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
|
||||
- text: '<code>body</code>元素的<code>color</code>属性值应为<code>green</code>。'
|
||||
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
|
||||
- text: '<code>body</code>元素的<code>font-family</code>属性值应为<code>monospace</code>。'
|
||||
testString: assert(($("body").css("font-family").match(/monospace/i)));
|
||||
- text: '<code>h1</code>元素应该继承<code>body</code>的<code>monospace</code>字体属性。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));
|
||||
- text: '<code>h1</code>元素的字体颜色也应该继承<code>body</code>元素的绿色。'
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"));
|
||||
# --instructions--
|
||||
|
||||
首先，创建一个文本内容为`Hello World`的`h1`标签元素。
|
||||
|
||||
接着，在`body`CSS 规则里面添加一句`color: green;`，改变页面其他元素的字体颜色为`green（绿色）`。
|
||||
|
||||
最后，同样在`body`CSS 规则里面添加`font-family: monospace;`，设置其他元素字体为`font-family: monospace;`。
|
||||
|
||||
# --hints--
|
||||
|
||||
创建一个`h1`元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素的文本内容应该为`Hello World`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.text()
|
||||
.match(/hello world/i)
|
||||
);
|
||||
```
|
||||
|
||||
</div>
|
||||
确保`h1`元素具有结束标记。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h1>/g) &&
|
||||
code.match(/<h1/g) &&
|
||||
code.match(/<\/h1>/g).length === code.match(/<h1/g).length
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`body`元素的`color`属性值应为`green`。
|
||||
|
||||
```js
|
||||
assert($('body').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
`body`元素的`font-family`属性值应为`monospace`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('body')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
`h1`元素应该继承`body`的`monospace`字体属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色也应该继承`body`元素的绿色。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,113 +1,32 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: 用 border-radius 制作圆形图片
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
forumTopicId: 18229
|
||||
title: 用 border-radius 制作圆形图片
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
除像素外，你也可以使用百分比来指定<code>border-radius</code>的值。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
将<code>border-radius</code>的值设置为<code>50%</code>。
|
||||
</section>
|
||||
除像素外，你也可以使用百分比来指定`border-radius`的值。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你图片的边框圆角应设置为<code>50%</code>，让它看起来就像一个完整的圆。'
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
|
||||
- text: '请确保百分值为<code>50%</code>。'
|
||||
testString: assert(code.match(/50%/g));
|
||||
将`border-radius`的值设置为`50%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你图片的边框圆角应设置为`50%`，让它看起来就像一个完整的圆。
|
||||
|
||||
```js
|
||||
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||
```
|
||||
|
||||
</section>
|
||||
请确保百分值为`50%`。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```js
|
||||
assert(code.match(/50%/g));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,86 +1,64 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Important 的优先级最高
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
forumTopicId: 18249
|
||||
title: Important 的优先级最高
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
耶！我们刚刚又证明了行内样式会覆盖<code>style</code>标签里面所有的 CSS 声明。
|
||||
# --description--
|
||||
|
||||
耶！我们刚刚又证明了行内样式会覆盖`style`标签里面所有的 CSS 声明。
|
||||
|
||||
不过，还有一种方式可以覆盖重新 CSS 样式。这是所有方法里面最强大的一个。在此之前，我们要考虑清楚，为什么我们需要覆盖 CSS 样式。
|
||||
在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖 CSS 样式。当你需要保证 CSS 样式不受影响，你可以使用<code>!important</code>。
|
||||
让我们回到<code>pink-text</code>class 声明之中，它已经被随其后的 class 声明，id 声明，以及行内样式所覆盖。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在很多时候，你使用 CSS 库，有时候它们声明的样式会意外的覆盖 CSS 样式。当你需要保证 CSS 样式不受影响，你可以使用`!important`。
|
||||
|
||||
在<code>pink-text</code>class 的<code>color</code>声明里面使用<code>!important</code>关键字，去确保<code>h1</code>元素的字体颜色一定为粉色。
|
||||
操作的方法大概如下：
|
||||
<code>color: red !important;</code>
|
||||
</section>
|
||||
让我们回到`pink-text`class 声明之中，它已经被随其后的 class 声明，id 声明，以及行内样式所覆盖。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '<code>h1</code>元素应该包含<code>color: white</code>的行内样式声明。'
|
||||
testString: assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
- text: '<code>pink-text</code> class 声明应该含有<code>!important</code>关键字。'
|
||||
testString: assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g));
|
||||
- text: '<code>h1</code>元素的字体颜色应该为粉色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
在`pink-text`class 的`color`声明里面使用`!important`关键字，去确保`h1`元素的字体颜色一定为粉色。 操作的方法大概如下： `color: red !important;`
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
`h1`元素应该包含一个名为`orange-text`的id。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`h1`元素应该包含`color: white`的行内样式声明。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
`pink-text` class 声明应该含有`!important`关键字。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
|
||||
);
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应该为粉色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,24 +1,28 @@
|
||||
---
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: ID 选择器优先级高于 Class 选择器
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
forumTopicId: 18251
|
||||
title: ID 选择器优先级高于 Class 选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
我们刚刚证明了浏览器读取 CSS 是由上到下的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。
|
||||
不过我们还没结束，还有其他方法来覆盖 CSS 样式。你还记得 id 属性吗？
|
||||
通过给<code>h1</code>元素添加 id 属性，来覆盖 class 属性定义的同名样式。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给<code>h1</code>元素添加 id 属性，属性值为<code>orange-text</code>。设置方式如下：
|
||||
<code><h1 id="orange-text"></code>
|
||||
<code>h1</code>元素继续保留<code>blue-text</code>和<code>pink-text</code>class。
|
||||
在<code>style</code>元素中创建名为<code>orange-text</code>的 id 选择器。例子如下：
|
||||
我们刚刚证明了浏览器读取 CSS 是由上到下的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。
|
||||
|
||||
不过我们还没结束，还有其他方法来覆盖 CSS 样式。你还记得 id 属性吗？
|
||||
|
||||
通过给`h1`元素添加 id 属性，来覆盖 class 属性定义的同名样式。
|
||||
|
||||
# --instructions--
|
||||
|
||||
给`h1`元素添加 id 属性，属性值为`orange-text`。设置方式如下：
|
||||
|
||||
`<h1 id="orange-text">`
|
||||
|
||||
`h1`元素继续保留`blue-text`和`pink-text`class。
|
||||
|
||||
在`style`元素中创建名为`orange-text`的 id 选择器。例子如下：
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
@ -26,67 +30,51 @@ title: ID 选择器优先级高于 Class 选择器
|
||||
}
|
||||
```
|
||||
|
||||
注意：无论在<code>pink-text</code>class 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器。
|
||||
</section>
|
||||
注意：无论在`pink-text`class 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>的 id 属性值为<code>orange-text</code>。'
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '应该只有一个<code>h1</code>元素。'
|
||||
testString: assert(($("h1").length === 1));
|
||||
- text: '创建名为<code>orange-text</code>的 id 选择器。'
|
||||
testString: assert(code.match(/#orange-text\s*{/gi));
|
||||
- text: '不要在<code>h1</code>元素里面使用<code>style（行内样式）</code>。'
|
||||
testString: assert(!code.match(/<h1.*style.*>/gi));
|
||||
- text: '<code>h1</code>元素的字体颜色应为橘色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 165, 0)");
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
`h1`的 id 属性值为`orange-text`。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
应该只有一个`h1`元素。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
创建名为`orange-text`的 id 选择器。
|
||||
|
||||
```js
|
||||
assert(code.match(/#orange-text\s*{/gi));
|
||||
```
|
||||
|
||||
不要在`h1`元素里面使用`style（行内样式）`。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1.*style.*>/gi));
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应为橘色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,81 +1,56 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: 内联样式的优先级高于 ID 选择器
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||
forumTopicId: 18252
|
||||
title: 内联样式的优先级高于 ID 选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
我们刚刚证明了，id 选择器无论在<code>style</code>标签哪里声明，都会覆盖 class 声明的样式，
|
||||
# --description--
|
||||
|
||||
我们刚刚证明了，id 选择器无论在`style`标签哪里声明，都会覆盖 class 声明的样式，
|
||||
|
||||
其实还有其他方法可以覆盖重写 CSS 样式。你还记得行内样式吗？
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用行内样式尝试让<code>h1</code>的字体颜色变白。像下面这样使用：
|
||||
<code><h1 style="color: green"></code>
|
||||
<code>h1</code>元素需继续保留<code>blue-text</code>和<code>pink-text</code>class。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
使用行内样式尝试让`h1`的字体颜色变白。像下面这样使用：
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>元素应该包含一个名为<code>orange-text</code>的id。'
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: '<code>h1</code>元素应该含有行内样式。'
|
||||
testString: assert(document.querySelector('h1[style]'));
|
||||
- text: '<code>h1</code>元素的字体颜色应该为白色。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 255, 255)");
|
||||
`<h1 style="color: green">`
|
||||
|
||||
`h1`元素需继续保留`blue-text`和`pink-text`class。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
`h1`元素应该包含一个名为`orange-text`的id。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`h1`元素应该含有行内样式。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1[style]'));
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应该为白色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,76 +1,56 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Class 选择器的优先级高于继承样式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||
forumTopicId: 18253
|
||||
title: Class 选择器的优先级高于继承样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
"pink-text" class 覆盖了<code>body</code>元素的 CSS 声明。
|
||||
我们刚刚证明了我们的 class 会覆盖<code>body</code>的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的<code>pink-text</code>class？
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
"pink-text" class 覆盖了`body`元素的 CSS 声明。
|
||||
|
||||
我们刚刚证明了我们的 class 会覆盖`body`的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的`pink-text`class？
|
||||
|
||||
# --instructions--
|
||||
|
||||
创建一个字体颜色为`blue`的`blue-text`CSS class，并确保它在`pink-text`下方声明。
|
||||
|
||||
在含有`pink-text`class 的`h1`元素里面，再添加一个`blue-text`class，这时候，我们将能看到到底是谁获胜。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个字体颜色为<code>blue</code>的<code>blue-text</code>CSS class，并确保它在<code>pink-text</code>下方声明。
|
||||
在含有<code>pink-text</code>class 的<code>h1</code>元素里面，再添加一个<code>blue-text</code>class，这时候，我们将能看到到底是谁获胜。
|
||||
HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
|
||||
<code>class="class1 class2"</code>
|
||||
<strong>注意：</strong> HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
但是，在<code><style></code>标签里面声明的<code>class</code>顺序十分重要。第二个声明始终优于第一个声明。因为<code>.blue-text</code>在<code>.pink-text</code>的后面声明，所以<code>.blue-text</code>会覆盖<code>.pink-text</code>的样式。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`class="class1 class2"`
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: '<code>blue-text</code>和<code>pink-text</code>需同时应用于<code>h1</code>元素上。'
|
||||
testString: assert($(".pink-text").hasClass("blue-text"));
|
||||
- text: '<code>h1</code>元素的颜色应为蓝色。'
|
||||
testString: assert($("h1").css("color") === "rgb(0, 0, 255)");
|
||||
**注意：** HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
|
||||
但是，在`<style>`标签里面声明的`class`顺序十分重要。第二个声明始终优于第一个声明。因为`.blue-text`在`.pink-text`的后面声明，所以`.blue-text`会覆盖`.pink-text`的样式。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1`元素应该包含`pink-text` class。
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
`h1`元素应该包含`blue-text` class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</div>
|
||||
`blue-text`和`pink-text`需同时应用于`h1`元素上。
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```js
|
||||
assert($('.pink-text').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`h1`元素的颜色应为蓝色。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,68 +1,44 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: 样式中的优先级
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
|
||||
forumTopicId: 18258
|
||||
title: 样式中的优先级
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
有时候， HTML 元素的样式会跟其他样式发生冲突。
|
||||
就像，<code>h1</code>元素也不能同时设置<code>green</code>和<code>pink</code>两种样式。
|
||||
让我们尝试创建一个字体颜色为<code>pink</code>的 class，并应于用其中一个元素中。猜一猜，它会覆盖<code>body</code>元素设置的<code>color: green;</code>CSS 属性吗？
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个能将元素的字体颜色改为<code>pink</code>的CSS class，并起名为<code>pink-text</code>。
|
||||
给<code>h1</code>元素添加<code>pink-text</code>class。
|
||||
</section>
|
||||
就像，`h1`元素也不能同时设置`green`和`pink`两种样式。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
让我们尝试创建一个字体颜色为`pink`的 class，并应于用其中一个元素中。猜一猜，它会覆盖`body`元素设置的`color: green;`CSS 属性吗？
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h1</code>元素应该含有<code>pink-text</code> class。'
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: '<code><style></code>标签应该含有一个可以改变字体颜色的<code>pink-text</code> class。'
|
||||
testString: assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
- text: '<code>h1</code>元素的字体颜色应该为<code>pink（粉色）</code>。'
|
||||
testString: assert($("h1").css("color") === "rgb(255, 192, 203)");
|
||||
# --instructions--
|
||||
|
||||
```
|
||||
创建一个能将元素的字体颜色改为`pink`的CSS class，并起名为`pink-text`。
|
||||
|
||||
</section>
|
||||
给`h1`元素添加`pink-text`class。
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
# --hints--
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
`h1`元素应该含有`pink-text` class。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`<style>`标签应该含有一个可以改变字体颜色的`pink-text` class。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
|
||||
```
|
||||
|
||||
`h1`元素的字体颜色应该为`pink（粉色）`。
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: 设置元素的字体家族
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
title: 设置元素的字体家族
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
通过<code>font-family</code>属性，可以设置元素里面的字体样式。
|
||||
如果你想设置<code>h2</code>元素的字体为<code>sans-serif</code>，你可以用以下的 CSS 规则：
|
||||
# --description--
|
||||
|
||||
通过`font-family`属性，可以设置元素里面的字体样式。
|
||||
|
||||
如果你想设置`h2`元素的字体为`sans-serif`，你可以用以下的 CSS 规则：
|
||||
|
||||
```css
|
||||
h2 {
|
||||
@ -17,86 +18,22 @@ h2 {
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
确保<code>p</code>元素使用<code>monospace</code>字体。
|
||||
</section>
|
||||
确保`p`元素使用`monospace`字体。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --hints--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>p</code>元素应该使用<code>monospace</code>字体。'
|
||||
testString: assert($("p").not(".red-text").css("font-family").match(/monospace/i));
|
||||
`p`元素应该使用`monospace`字体。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.not('.red-text')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,119 +1,34 @@
|
||||
---
|
||||
id: bad87eee1348bd9aede07836
|
||||
title: 设置元素的 id
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6MEc2'
|
||||
forumTopicId: 18279
|
||||
title: 设置元素的 id
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
除了class属性，每一个 HTML 元素也都有<code>id</code>属性。
|
||||
使用<code>id</code>有几个好处：你可以通过<code>id</code>选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过<code>id</code>来选择元素和操作元素。
|
||||
<code>id</code>属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的<code>id</code>属性。
|
||||
设置<code>h2</code>元素的 id 为<code>cat-photo-app</code>的方法如下：
|
||||
<code><h2 id="cat-photo-app"></code>
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
设置<code>form</code>元素的 id 为<code>cat-photo-form</code>。
|
||||
</section>
|
||||
除了class属性，每一个 HTML 元素也都有`id`属性。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
使用`id`有几个好处：你可以通过`id`选择器来改变单个元素的样式，稍后的课程中，你也会了解到在 JavaScript 里面，可以通过`id`来选择元素和操作元素。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>form</code>元素的 id 应为<code>cat-photo-form</code>。'
|
||||
testString: assert($("form").attr("id") === "cat-photo-form");
|
||||
`id`属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的`id`属性。
|
||||
|
||||
设置`h2`元素的 id 为`cat-photo-app`的方法如下：
|
||||
|
||||
`<h2 id="cat-photo-app">`
|
||||
|
||||
# --instructions--
|
||||
|
||||
设置`form`元素的 id 为`cat-photo-form`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`form`元素的 id 应为`cat-photo-form`。
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫" class="smaller-image thick-green-border"></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdf08812
|
||||
title: 调整图片的大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MmCP'
|
||||
forumTopicId: 18282
|
||||
title: 调整图片的大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS 的<code>width</code>属性可以控制元素的宽度。图片的<code>width</code>宽度类似于字体的<code>px</code>（像素)值。
|
||||
假如，你想创建一个叫<code>larger-image</code>的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：
|
||||
# --description--
|
||||
|
||||
CSS 的`width`属性可以控制元素的宽度。图片的`width`宽度类似于字体的`px`（像素)值。
|
||||
|
||||
假如，你想创建一个叫`larger-image`的 CSS class 来控制 HTML 元素的宽度为 500px，我们可以这样做：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -19,95 +20,29 @@ CSS 的<code>width</code>属性可以控制元素的宽度。图片的<code>widt
|
||||
</style>
|
||||
```
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
创建一个<code>smaller-image</code>的 CSS class，设置图片的宽度为 100px。
|
||||
<strong>注意：</strong><br>由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。
|
||||
</section>
|
||||
创建一个`smaller-image`的 CSS class，设置图片的宽度为 100px。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
**注意：**
|
||||
由于不同浏览器的差异性，你可能需要将浏览器缩放到 100% 来通过该挑战。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>img</code>元素应该含有<code>smaller-image</code> class。'
|
||||
testString: assert($("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') === "smaller-image");
|
||||
- text: '图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。'
|
||||
testString: assert($("img").width() === 100);
|
||||
# --hints--
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">点击查看更多<a href="#">猫图</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
||||
|
||||
<div>
|
||||
<p>猫咪最喜欢的三件东西：</p>
|
||||
<ul>
|
||||
<li>猫薄荷</li>
|
||||
<li>激光笔</li>
|
||||
<li>千层饼</li>
|
||||
</ul>
|
||||
<p>猫咪最讨厌的三件东西：</p>
|
||||
<ol>
|
||||
<li>跳蚤</li>
|
||||
<li>打雷</li>
|
||||
<li>同类</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor">室内</label>
|
||||
<label><input type="radio" name="indoor-outdoor">室外</label><br>
|
||||
<label><input type="checkbox" name="personality">忠诚</label>
|
||||
<label><input type="checkbox" name="personality">懒惰</label>
|
||||
<label><input type="checkbox" name="personality">积极</label><br>
|
||||
<input type="text" placeholder="猫咪图片地址" required>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
`img`元素应该含有`smaller-image` class。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
|
||||
'smaller-image'
|
||||
);
|
||||
```
|
||||
|
||||
/section>
|
||||
|
||||
图片宽度应为 100px（像素），且浏览器缩放应为默认 100%。
|
||||
|
||||
```js
|
||||
assert($('img').width() === 100);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user