Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: Add a Text Alternative to Images for Visually Impaired Accessibility
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility'
|
||||
localeTitle: 为视力受损的辅助功能添加图像替代文字
|
||||
---
|
||||
|
||||
## 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规范，现在认为这是强制性的。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat恰好是编码忍者和实际忍者，正在建立一个网站来分享他的知识。他想要使用的个人资料图片显示了他的技能，所有网站访问者都应该欣赏。在<code>img</code>标签中添加<code>alt</code>属性，这解释了Camper Cat正在做空手道。 （图像<code>src</code>没有链接到实际文件，因此您应该在显示中看到<code>alt</code>文本。） </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>img</code>标签应该有一个<code>alt</code>属性，它不应该是空的。
|
||||
testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg">
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: Add an Accessible Date Picker
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 添加无障碍日期选择器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">表单通常包含<code>input</code>字段，可用于创建多个不同的表单控件。此元素的<code>type</code>属性指示将创建哪种输入。您可能已经注意到<code>text</code>并在先前的挑战中<code>submit</code>输入类型，HTML5引入了一个指定<code>date</code>字段的选项。根据浏览器支持，当日期选择器处于焦点时，它会在<code>input</code>字段中显示，这使得所有用户都可以更轻松地填写表单。对于旧版浏览器，该类型将默认为<code>text</code> ，因此有助于向用户显示标签中的预期日期格式或以及占位符文本以防万一。这是一个例子： <blockquote> <label for =“input1”>输入日期：</ label> <br> <input type =“date”id =“input1”name =“input1”> <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat正在举办一场真人快打比赛，并想让他的竞争对手看看哪个日期效果最佳。添加一个<code>input</code>标记，其<code>type</code>属性为“date”， <code>id</code>属性为“pickdate”， <code>name</code>属性为“date”。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应为日期选择器字段添加一个<code>input</code>标记。
|
||||
testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
|
||||
- text: 您的<code>input</code>标记应具有值为date的<code>type</code>属性。
|
||||
testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
|
||||
- text: 您的<code>input</code>标记应具有值为pickdate的<code>id</code>属性。
|
||||
testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
|
||||
- text: 您的<code>input</code>标记应具有值为date的<code>name</code>属性。
|
||||
testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 通过仔细选择传达信息的颜色来避免色盲问题
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有各种形式的色盲。这些范围可以从对特定波长的光的灵敏度降低到根本无法看到颜色。最常见的形式是检测果岭的灵敏度降低。例如，如果两个相似的绿色是内容的前景色和背景色，则色盲用户可能无法区分它们。关闭颜色可以被认为是色轮上的邻居，并且在传达重要信息时应该避免这些组合。 <strong>注意</strong> <br>一些在线颜色挑选工具包括颜色如何针对不同类型的颜色盲目出现的视觉模拟。除在线对比度检查计算器外，这些都是很好的资源。 </section>
|
||||
|
||||
## Instructions
|
||||
undefined
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应将<code>button</code>的文本<code>color</code>更改为深蓝色。
|
||||
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: Avoid Colorblindness Issues by Using Sufficient Contrast
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用足够的对比度避免色盲问题
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="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的对比度。您可以轻松调整颜色的亮度，因为他通过更改第三个参数使用CSS <code>hsl()</code>属性（代表色调，饱和度，亮度）来声明它们。将<code>background-color</code>亮度值从35％增加到55％，并将<code>color</code>亮度值从20％降低到15％。这将对比度提高到5.9：1。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码只应将文本<code>color</code>属性的亮度值更改为15％的值。
|
||||
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.");'
|
||||
- text: 您的代码应仅将<code>background-color</code>属性的亮度值更改为值55％。
|
||||
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: Give Links Meaning by Using Descriptive Link Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 通过使用描述性链接文本给出链接含义
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">屏幕阅读器用户对其设备读取的内容类型有不同的选择。这包括跳过（或覆盖）地标元素，跳转到主要内容或从标题中获取页面摘要。另一种选择是仅听取页面上可用的链接。屏幕阅读器通过阅读链接文本或锚（ <code>a</code> ）标签之间的内容来完成此操作。列出“点击此处”或“阅读更多”链接无济于事。相反，您应该在<code>a</code>标签中使用简短但具有描述性的文本，以便为这些用户提供更多意义。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">如果没有周围的上下文，Camper Cat正在使用的链接文本不是很具描述性。移动锚（ <code>a</code> ）标签，使它们环绕文本“有关电池的信息”而不是“点击此处”。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应移动锚点<code>a</code>来自各地的词“点击这里”标签环绕中的“关于电池的信息”。
|
||||
testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");'
|
||||
- text: 确保您<code>a</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 lightening 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: Improve Accessibility of Audio Content with the audio Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用音频元素改善音频内容的可访问性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当HTML5的<code>audio</code>元素包含标记中的声音或音频流内容时，它会提供语义含义。音频内容还需要一个文本替代品，以便耳聋或听力障碍的人可以访问。这可以通过页面上的附近文本或转录本的链接来完成。 <code>audio</code>标签支持<code>controls</code>属性。这显示了浏览器的默认播放，暂停和其他控件，并支持键盘功能。这是一个布尔属性，意味着它不需要值，它在标签上的存在会打开设置。这是一个例子： <blockquote> <audio id =“meowClip”controls> <br> <source src =“audio / meow.mp3”type =“audio / mpeg”/> <br> <source src =“audio / meow.ogg”type =“audio / ogg”/> <br> </音频> <br></blockquote> <strong>注意</strong> <br>多媒体内容通常具有视觉和听觉组件。它需要同步标题和成绩单，以便具有视觉和/或听觉障碍的用户可以访问它。通常，Web开发人员不负责创建字幕或脚本，但需要知道包含它们。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">是时候从Camper Cat休息一下，与露营者Zersiax（@zersiax）会面，这是一个可访问性和屏幕阅读器用户的冠军。要听到屏幕阅读器的剪辑，请在<code>p</code>后添加<code>audio</code>元素。包含<code>controls</code>属性。然后将<code>source</code>标记放在<code>audio</code>标记内， <code>src</code>属性设置为“https://s3.amazonaws.com/freecodecamp/screen-reader.mp3”，并将<code>type</code>属性设置为“audio / mpeg”。 <strong>注意</strong> <br>音频剪辑可能听起来很快并且难以理解，但这对于屏幕阅读器用户来说是正常的速度。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有一个<code>audio</code>标记。
|
||||
testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
|
||||
- text: 确保您的<code>audio</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
|
||||
- text: <code>audio</code>标签应该具有<code>controls</code>属性。
|
||||
testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
|
||||
- text: 您的代码应该有一个<code>source</code>标记。
|
||||
testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
|
||||
- text: 您的<code>source</code>标记应位于<code>audio</code>标记内。
|
||||
testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
|
||||
- text: <code>source</code>标记上<code>src</code>属性的值应与指令中的链接完全匹配。
|
||||
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
|
||||
- text: 您的代码应在<code>source</code>标记上包含<code>type</code>属性，其值为audio / mpeg。
|
||||
testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: Improve Chart Accessibility with the figure Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用图元素改进图表可访问性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> HTML5引入了<code>figure</code>元素以及相关的<code>figcaption</code> 。这些项目一起使用，包含可视化表示（如图像，图表或图表）及其标题。通过语义分组相关内容和提供解释<code>figure</code>的文本替代，这提供了双倍的可访问性提升。对于图表等数据可视化，可以使用标题简要说明视力障碍用户的趋势或结论。另一个挑战包括如何为屏幕阅读器用户在屏幕外（使用CSS）移动图表数据的表格版本。这是一个例子 - 请注意， <code>figcaption</code>位于<code>figure</code>标签内部，可以与其他元素组合： <blockquote> <图> <br> <img src =“roundhouseDestruction.jpeg”alt =“露营猫执行圆屋踢的照片”> <br>点击<br> <figcaption> <br> Master Camper Cat展示了适当形式的圆屋踢。 <br> </ figcaption> <br> </图> <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat正在努力创建一个堆积条形图，显示每周花在隐形，战斗和武器上的训练时间。通过将用于<code>figure</code>标记的<code>div</code>标签和包含标题的<code>p</code>标签更改为<code>figcaption</code>标记，帮助他更好地构建页面。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有一个<code>figure</code>标记。
|
||||
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
|
||||
- text: 您的代码应该有一个<code>figcaption</code>标记。
|
||||
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
|
||||
- text: 您的代码不应包含任何<code>div</code>标记。
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: 您的代码不应包含任何<code>p</code>标记。
|
||||
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
|
||||
- text: <code>figcaption</code>应该是<code>figure</code>标签的子<code>figcaption</code> 。
|
||||
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
|
||||
- text: 确保您的<code>figure</code>元素有一个结束标记。
|
||||
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: Improve Form Field Accessibility with the label Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用标签元素改进表单字段可访问性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使用语义HTML标记提高可访问性适用于使用适当的标记名称和属性。接下来的几个挑战包括使用表单中的属性的一些重要场景。 <code>label</code>标签包装特定表单控件项的文本，通常是选项的名称或标签。这与项目的意义联系在一起，使表单更具可读性。 <code>label</code>标签上的<code>for</code>属性明确地将该<code>label</code>与表单控件相关联，并由屏幕阅读器使用。您在“基本HTML”部分的课程中了解了单选按钮及其标签。在该课程中，我们将单选按钮输入元素与标签文本一起包装在<code>label</code>元素中，以使文本可单击。另一种实现此目的的方法是使用本课程中介绍的<code>for</code>属性。 <code>for</code>属性的值必须与表单控件的<code>id</code>属性的值相同。这是一个例子： <blockquote> <FORM> <br> <label for =“name”>名称：</ label> <br> <input type =“text”id =“name”name =“name”> <br> </ FORM> <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat期望对他有思想的博客文章感兴趣，并希望包含一个电子邮件注册表单。在电子邮件<code>label</code>上添加与其<code>input</code>字段中的<code>id</code>匹配的<code>for</code>属性。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该在<code>label</code>标签上具有非空的<code>for</code>属性。
|
||||
testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");'
|
||||
- text: 您的<code>for</code>属性值应与电子邮件<code>input</code>中的<code>id</code>值匹配。
|
||||
testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 lightening 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: Improve Readability with High Contrast Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用高对比度文本提高可读性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该改变文字<code>color</code>为<code>body</code>的深灰色。
|
||||
testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");'
|
||||
- text: 您的代码不应更改<code>body</code>的<code>background-color</code> 。
|
||||
testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: Jump Straight to the Content Using the main Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用主元素直接跳转到内容
|
||||
---
|
||||
|
||||
## 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>标签还具有嵌入式地标功能，辅助技术可用于快速导航到主要内容。如果您曾在页面顶部看到“跳转到主要内容”链接，则使用主标签会自动为辅助设备提供该功能。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat对他的忍者武器页面有一些重要的想法。通过在<code>header</code>和<code>footer</code>之间添加打开和关闭<code>main</code>标记来帮助他设置标记（在其他挑战中涵盖）。暂时保持<code>main</code>标签为空。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有一个<code>main</code>标记。
|
||||
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
|
||||
- text: <code>main</code>标记应位于结束<code>header</code>标记和开放<code>footer</code>标记之间。
|
||||
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: Know When Alt Text Should be Left Blank
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 知道Alt文本应该留空
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在上一个挑战中，您了解到在img标记上包含<code>alt</code>属性是必需的。但是，有时图像与已经描述它们的标题分组，或仅用于装饰。在这些情况下， <code>alt</code>文本可能看似多余或不必要。在已经使用文本内容解释图像或者没有为页面添加含义的情况下， <code>img</code>仍然需要<code>alt</code>属性，但可以将其设置为空字符串。这是一个例子： <code><img src="visualDecoration.jpeg" alt=""></code>背景图片通常也属于“装饰”标签。但是，它们通常应用CSS规则，因此不是标记屏幕阅读器进程的一部分。 <strong>注意</strong> <br>对于带有标题的图像，您可能仍希望包含<code>alt</code>文本，因为它有助于搜索引擎对图像内容进行编目。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat已为其网站的博客部分编写了一个骨架页面。他计划在他的两篇文章之间用武士刀的装饰图像添加一个视觉中断。将<code>alt</code>属性添加到<code>img</code>标记并将其设置为空字符串。 （请注意，图像<code>src</code>不会链接到实际文件 - 不要担心显示屏中没有显示剑。） </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>img</code>标签应该有一个<code>alt</code>属性。
|
||||
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
|
||||
- text: <code>alt</code>属性应设置为空字符串。
|
||||
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用自定义CSS使元素仅对屏幕阅读器可见
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您是否注意到目前为止所有应用的可访问性问题都没有使用任何CSS？这是为了展示逻辑文档大纲的重要性，并在介绍视觉设计方面之前在您的内容周围使用具有语义意义的标记。但是，当您想要在视觉上隐藏仅供屏幕阅读器使用的内容时，CSS的魔力还可以改善页面的可访问性。当信息采用可视格式（如图表）时会发生这种情况，但屏幕阅读器用户需要使用替代演示（如表格）来访问数据。 CSS用于将屏幕阅读器元素定位在浏览器窗口的可视区域之外。这是完成此任务的CSS规则的示例： <blockquote> .sr-only { <br>位置：绝对; <br>左：-10000px; <br>宽度：1px; <br>身高：1px; <br>顶部：汽车; <br>溢出：隐藏; <br> } </blockquote> <strong>注意</strong> <br>以下CSS方法不会做同样的事情： <ul><li> <code>display: none;</code>或<code>visibility: hidden;</code>隐藏每个人的内容，包括屏幕阅读器用户</li><li>像素大小的零值，例如<code>width: 0px; height: 0px;</code>从文档流中删除该元素，这意味着屏幕阅读器将忽略它</li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat为他的培训页面创建了一个非常酷的堆积条形图，并将数据放入一个表格中，供视障用户使用。该表已经有一个<code>sr-only</code>类，但CSS规则尚未填写。给<code>position</code>一个绝对值， <code>left</code>是-10000px值， <code>width</code>和<code>height</code>都是1px值。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该将<code>sr-only</code>类的<code>position</code>属性设置为absolute的值。
|
||||
testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.");'
|
||||
- text: 您的代码应将<code>sr-only</code>类的<code>left</code>属性设置为-10000px的值。
|
||||
testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.");'
|
||||
- text: 您的代码应将<code>sr-only</code>类的<code>width</code>属性设置为1像素的值。
|
||||
testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
|
||||
- text: 您的代码应将<code>sr-only</code>类的<code>height</code>属性设置为1像素的值。
|
||||
testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512aaf
|
||||
title: Make Links Navigatable with HTML Access Keys
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使链接可以使用HTML访问密钥进行导航
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> HTML提供了<code>accesskey</code>属性，用于指定要激活元素或将焦点置于元素的快捷键。这可以使键盘用户的导航更有效。 HTML5允许在任何元素上使用此属性，但在与交互元素一起使用时，它特别有用。这包括链接，按钮和表单控件。这是一个例子： <code><button accesskey="b">Important Button</button></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat希望两个博客文章标题之间的链接具有键盘快捷键，这样他的网站用户就可以快速浏览完整的故事。为两个链接添加一个<code>accesskey</code>属性，并将第一个设置为“g”（对于加菲猫），将第二个设置为“c”（对于Chuck Norris）。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该为<code>id</code>为“first” <code>a</code>标记添加一个<code>accesskey</code>属性。
|
||||
testString: 'assert($("#first").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".");'
|
||||
- text: 您的代码应该为<code>id</code>为“second” <code>a</code>标记添加一个<code>accesskey</code>属性。
|
||||
testString: 'assert($("#second").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".");'
|
||||
- text: 您的代码应在<code>id</code>为“first”到“g” <code>a</code>标记上设置<code>accesskey</code>属性。请注意，案件很重要。
|
||||
testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.");'
|
||||
- text: 您的代码应设置<code>accesskey</code>的属性<code>a</code>标签与<code>id</code> “第二”到“C”的。请注意，案件很重要。
|
||||
testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: Make Screen Reader Navigation Easier with the footer Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用页脚Landmark使屏幕阅读器导航更轻松
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">与<code>header</code>和<code>nav</code>类似， <code>footer</code>元素具有内置的地标功能，允许辅助设备快速导航到它。它主要用于包含版权信息或链接到通常位于页面底部的相关文档。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat的培训页面正在取得良好进展。将用于将其版权信息包含在页面底部的<code>div</code>更改为<code>footer</code>元素。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有一个<code>footer</code>标记。
|
||||
testString: 'assert($("footer").length == 1, "Your code should have one <code>footer</code> tag.");'
|
||||
- text: 您的代码不应包含任何<code>div</code>标记。
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: 您的代码应该有一个开始和结束<code>footer</code>标记。
|
||||
testString: 'assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g), "Your code should have an opening and closing <code>footer</code> tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: Make Screen Reader Navigation Easier with the header Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用标题Landmark使屏幕阅读器导航更轻松
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">下一个添加语义含义并提高可访问性的HTML5元素是<code>header</code>标记。它用于为其父标记包装介绍性信息或导航链接，并且可以很好地处理在多个页面顶部重复的内容。 <code>header</code>分享了您在<code>main</code>看到的嵌入式地标功能，允许辅助技术快速导航到该内容。 <strong>注意</strong> <br> <code>header</code>适用于HTML文档的<code>body</code>标记。这与<code>head</code>元素不同， <code>head</code>元素包含页面标题，元信息等。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat正在撰写一些关于忍者训练的精彩文章，并希望为他们的网站添加一个页面。将当前包含<code>h1</code>的顶部<code>div</code>更改为<code>header</code>标记。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有一个<code>header</code>标记。
|
||||
testString: 'assert($("header").length == 1, "Your code should have one <code>header</code> tag.");'
|
||||
- text: 您的<code>header</code>标记应该环绕<code>h1</code> 。
|
||||
testString: 'assert($("header").children("h1").length == 1, "Your <code>header</code> tags should wrap around the <code>h1</code>.");'
|
||||
- text: 您的代码不应包含任何<code>div</code>标记。
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: 确保您的<code>header</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, "Make sure your <code>header</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: Make Screen Reader Navigation Easier with the nav Landmark
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用导航Landmark使屏幕阅读器导航更轻松
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>nav</code>元素是另一个HTML5项目，具有嵌入的地标功能，便于屏幕阅读器导航。此标记用于包围页面中的主导航链接。如果页面底部有重复的站点链接，则没有必要标记带有<code>nav</code>标签的链接。使用<code>footer</code> （在下一个挑战中涵盖）就足够了。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat在他的训练页面顶部包含了导航链接，但是将它们包裹在一个<code>div</code> 。将<code>div</code>更改为<code>nav</code>标记以改善其页面上的可访问性。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有一个<code>nav</code>标记。
|
||||
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
|
||||
- text: 你的<code>nav</code>标签应该包裹<code>ul</code>及其列表项。
|
||||
testString: 'assert($("nav").children("ul").length == 1, "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.");'
|
||||
- text: 您的代码不应包含任何<code>div</code>标记。
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: 确保您的<code>nav</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, "Make sure your <code>nav</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: Standardize Times with the HTML5 datetime Attribute
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用HTML5 datetime属性标准化Times
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">继续使用日期主题，HTML5还引入了<code>time</code>元素和<code>datetime</code>属性来标准化时间。这是一个可以在页面上包装日期或时间的内联元素。该日期的有效格式由<code>datetime</code>属性保存。这是辅助设备访问的值。它通过陈述标准化版本的时间来避免混淆，即使它是在文本中以非正式或口语方式编写的。以下是一个例子： <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">露营猫的真人快打调查结果在！在文本“9月15日星期四<sup> th </ sup>”周围包装一个<code>time</code>标记，并为其设置“2016-09-15”添加<code>datetime</code>属性。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>time</code>标签应该包含“9月15日星期四<sup> th </ sup>”的文字。
|
||||
testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15<sup>th</sup>".");'
|
||||
- text: 您的<code>time</code>标记应具有非空的<code>datetime</code>属性。
|
||||
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'
|
||||
- text: 您的<code>datetime</code>属性应设置为2016-09-15的值。
|
||||
testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.");'
|
||||
- text: 确保您的<code>time</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your <code>time</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: Use Headings to Show Hierarchical Relationships of Content
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用标题显示内容的层次关系
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">标题（ <code>h1</code>到<code>h6</code>元素）是主力标签，有助于为您的内容提供结构和标签。可以将屏幕阅读器设置为只读取页面上的标题，以便用户获得摘要。这意味着标记中的标题标记具有语义含义并且彼此相关，而不仅仅是因为它们的大小值而被选中是很重要的。 <em>语义</em>意味着您在内容周围使用的标记表示它包含的信息类型。如果你正在撰写一篇带有介绍，正文和结论的论文，那么将结论作为你纲要中正文的一个小节是没有多大意义的。它应该是它自己的部分。同样，网页中的标题标签需要按顺序排列，并指明内容的层次关系。具有相同（或更高）等级的标题开始新的隐含部分，具有较低等级的标题从前一部分的开始子部分开始。例如，带有<code>h2</code>元素的页面后跟几个标有<code>h4</code>标签的子部分会使屏幕阅读器用户<code>h4</code>困惑。有六种选择，使用标签很有吸引力，因为它在浏览器中看起来更好，但您可以使用CSS编辑相对大小。最后一点，每个页面应始终有一个（并且只有一个） <code>h1</code>元素，这是您内容的主要主题。此搜索引擎和其他标题部分由搜索引擎用于理解页面主题。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat希望他的网站上有一个致力于成为忍者的页面。帮助他修复标题，以便他的标记为内容提供语义含义，并显示其部分的正确父子关系。将所有<code>h5</code>标签更改为正确的标题级别，以指示它们是<code>h2</code>标签的子部分。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有六个<code>h3</code>标签。
|
||||
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
|
||||
- text: 您的代码不应包含任何<code>h5</code>标记。
|
||||
testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: Use tabindex to Add Keyboard Focus to an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用tabindex将键盘焦点添加到元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> HTML <code>tabindex</code>属性有三个与元素键盘焦点相关的不同功能。当它在标签上时，它表示可以关注元素。值（一个正数，负数或零的整数）决定了行为。当用户在页面中进行选项卡时，某些元素（如链接和表单控件）会自动接收键盘焦点。它与HTML源标记中的元素的顺序相同。通过在其上放置<code>tabindex="0"</code>属性，可以将相同的功能赋予其他元素，例如<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）表示元素是可聚焦的，但键盘无法访问。此方法通常用于以编程方式将焦点集中到内容上（例如，当激活用于弹出窗口的<code>div</code>时），并且超出了这些挑战的范围。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat创建了一项新调查，以收集有关其用户的信息。他知道输入字段会自动获得键盘焦点，但他希望确保键盘用户在指示项目时暂停指示。将<code>tabindex</code>属性添加到<code>p</code>标记并将其值设置为“0”。奖金 - 使用<code>tabindex</code>还可以使CSS伪类<code>:focus</code>在<code>p</code>标签上工作。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该将<code>tabindex</code>属性添加到包含表单指令的<code>p</code>标记。
|
||||
testString: 'assert($("p").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.");'
|
||||
- text: 您的代码应将<code>p</code>标记上的<code>tabindex</code>属性设置为值0。
|
||||
testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用tabindex指定多个元素的键盘焦点顺序
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>tabindex</code>属性还指定元素的确切Tab键顺序。当属性的值被设置为1或更高的正数时，可以实现这一点。设置tabindex =“1”将首先将键盘焦点放在该元素上。然后循环显示指定<code>tabindex</code>值（2,3等）的序列，然后移至默认值和<code>tabindex="0"</code>项。重要的是要注意，当以这种方式设置Tab键顺序时，它会覆盖默认顺序（使用HTML源）。这可能会使期望从页面顶部开始导航的用户感到困惑。在某些情况下，这种技术可能是必要的，但就可访问性而言，在应用之前要小心。这是一个例子： <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在他的Inspirational Quotes页面上有一个搜索字段，他计划使用CSS在右上角定位。他希望搜索<code>input</code>并将<code>input</code>表单控件提交为Tab键顺序中的前两项。将<code>tabindex</code>属性设置为“1”到搜索<code>input</code> ， <code>tabindex</code>属性设置为“2”到提交<code>input</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该向搜索<code>input</code>标记添加<code>tabindex</code>属性。
|
||||
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
|
||||
- text: 您的代码应该向提交<code>input</code>标记添加<code>tabindex</code>属性。
|
||||
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
|
||||
- text: 您的代码应将搜索<code>input</code>标记上的<code>tabindex</code>属性设置为值1。
|
||||
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
|
||||
- text: 您的代码应将submit <code>input</code>标记上的<code>tabindex</code>属性设置为值2。
|
||||
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: Wrap Content in the article Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在文章元素中包装内容
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>article</code>是另一个新的HTML5元素，它为您的标记添加了语义含义。 <code>Article</code>是一个sectioning元素，用于包装独立的，自包含的内容。该标记适用于博客条目，论坛帖子或新闻文章。确定内容是否可以独立通常是一种判断调用，但您可以使用几种简单的测试。问问自己是否删除了所有周围环境，该内容是否仍然有意义？类似地，对于文本，如果它在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> 。 <blockquote> <div> - 分组内容<br> <section> - 分组相关内容<br> <article> - 分组独立，自包含的内容<br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat使用<code>article</code>标签将帖子包装在他的博客页面上，但他忘了在最顶层的帖子中使用它们。更改<code>div</code>标签以改为使用<code>article</code>标签。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该有三个<code>article</code>标签。
|
||||
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
|
||||
- text: 您的代码不应包含任何<code>div</code>标记。
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 lightening 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在字段集元素中包裹单选按钮以获得更好的可访问性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">下一个表单主题包括单选按钮的可访问性。每个选项都有一个<code>label</code>其中一个<code>for</code>属性与最后一个挑战中涵盖的相应项目的<code>id</code>相关联。由于单选按钮通常位于用户必须选择一个的组中，因此有一种方法可以在语义上显示选项是一组的一部分。 <code>fieldset</code>标记围绕整个单选按钮组以实现此目的。它通常使用<code>legend</code>标记来提供分组的描述，屏幕阅读器可以为<code>fieldset</code>元素中的每个选项读取该描述。当选项不言自明时，如性别选择，则不需要<code>fieldset</code>包装器和<code>legend</code>标签。使用带有每个单选按钮的<code>for</code>属性的<code>label</code>就足够了。这是一个例子： <blockquote> <FORM> <br> <字段集> <br> <legend>选择以下三个项目之一：</ legend> <br> <input id =“one”type =“radio”name =“items”value =“one”> <br> <label for =“one”> Choice One </ label> <br> <br> <input id =“two”type =“radio”name =“items”value =“two”> <br> <label for =“two”>选择二</ label> <br> <br> <input id =“three”type =“radio”name =“items”value =“three”> <br> <label for =“three”>选择三</ label> <br> </字段集> <br> </ FORM> <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat在注册其电子邮件列表时需要有关其用户的忍者级别的信息。他增加了一组单选按钮，并从我们过去的经验教训使用标签与标签<code>for</code>每个选择属性。去野营猫！但是，他的代码仍需要一些帮助。将单选按钮周围的<code>div</code>标签更改为<code>fieldset</code>标签，并将其中的<code>p</code>标签更改为<code>legend</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该在单选按钮集周围有一个<code>fieldset</code>标记。
|
||||
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
|
||||
- text: 确保您的<code>fieldset</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
|
||||
- text: 您的代码应该在文本周围有一个<code>legend</code>标记，询问用户的忍者级别。
|
||||
testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");'
|
||||
- text: 您的代码不应包含任何<code>div</code>标记。
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
- text: 你的代码不应该在文本周围有一个<code>p</code>标记，询问用户是什么级别的忍者。
|
||||
testString: 'assert($("p").length == 4, "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 lightening 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abe
|
||||
title: Add a box-shadow to a Card-like Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将盒子阴影添加到类似卡片的元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>box-shadow</code>属性将一个或多个阴影应用于元素。 <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>值是可选的。这是一个用于创建具有一些模糊的多个阴影的CSS的示例，大多数是透明的黑色： <blockquote> box-shadow：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,0,0,0.23）; </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">该元素现在具有<code>thumbnail</code> ID。使用此选择器，使用上面的示例CSS值在卡上放置一个<code>box-shadow</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应为<code>thumbnail</code> ID添加<code>box-shadow</code>属性。
|
||||
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.");'
|
||||
- text: 您应该使用给定的CSS作为<code>box-shadow</code>值。
|
||||
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*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), "You should use the given CSS for the <code>box-shadow</code> value.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: Adjust the background-color Property of Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 调整文本的背景颜色属性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以为包含要强调的文本的元素添加<code>background-color</code> ，而不是调整整体背景或文本颜色以使前景易于阅读。此挑战使用<code>rgba()</code>而不是<code>hex</code>代码或普通<code>rgb()</code> 。 <blockquote> rgba代表： <br> r =红色<br> g =绿色<br> b =蓝色<br> a = alpha /不透明度</blockquote> RGB值的范围可以是0到255.α值的范围可以从1（完全不透明或纯色）到0（完全透明或清晰）。 <code>rgba()</code>非常适合在这种情况下使用，因为它允许您调整不透明度。这意味着您不必完全阻挡背景。您将使用<code>background-color: rgba(45, 45, 45, 0.1)</code>来应对此挑战。它产生深灰色，在低不透明度值为0.1时几乎是透明的。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">要使文本更突出，请将<code>h4</code>元素的<code>background-color</code>调整为给定的<code>rgba()</code>值。同样对于<code>h4</code> ，删除<code>height</code>属性并添加10px的<code>padding</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '您的代码应该将<code>background-color</code>属性添加到设置为<code>rgba(45, 45, 45, 0.1)</code>的<code>h4</code>元素。'
|
||||
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.");'
|
||||
- text: 您的代码应该为<code>h4</code>元素添加<code>padding</code>属性并将其设置为10像素。
|
||||
testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.");'
|
||||
- text: 应删除<code>h4</code>元素上的<code>height</code>属性。
|
||||
testString: 'assert(!($("h4").css("height") == "25px"), "The <code>height</code> property on the <code>h4</code> element should be removed.");'
|
||||
|
||||
```
|
||||
|
||||
</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>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: Adjust the Color of Various Elements to Complementary Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将各种元素的颜色调整为互补色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>header</code>元素的<code>background-color</code>为＃09A7A1。
|
||||
testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");'
|
||||
- text: <code>footer</code>元素的<code>background-color</code>为＃09A7A1。
|
||||
testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");'
|
||||
- text: <code>h2</code>元素的<code>color</code>应为＃09A7A1。
|
||||
testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");'
|
||||
- text: <code>button</code>元素的<code>background-color</code>为＃FF790E。
|
||||
testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: Adjust the Height of an Element Using the height Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用height属性调整元素的高度
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用CSS中的<code>height</code>属性指定元素的<code>height</code> ，类似于<code>width</code>属性。这是一个将图像高度更改为20px的示例： <blockquote> img { <br>身高：20px; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>height</code>属性添加到<code>h4</code>标记并将其设置为25px。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应将<code>h4</code> <code>height</code>属性更改为25像素的值。
|
||||
testString: 'assert($("h4").css("height") == "25px", "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: Adjust the Hover State of an Anchor Tag
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 调整锚标记的悬停状态
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">这个挑战将涉及伪类的使用。伪类是可以添加到选择器的关键字，以便选择元素的特定状态。例如，可以使用<code>:hover</code>伪类选择器更改锚标记的样式以用于其悬停状态。这是用于在悬停状态期间将锚标记的<code>color</code>更改为红色的CSS： <blockquote> a：悬停{ <br>红色; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">代码编辑器有一个CSS规则样式的所有<code>a</code>标签黑色。加入规则，以便当用户将鼠标悬停在<code>a</code>标签时， <code>color</code>是蓝色。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '锚标记<code>color</code>应保持黑色，仅为<code>:hover</code>状态添加CSS规则。'
|
||||
testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");'
|
||||
- text: 锚标签应该有一个<code>color</code>的蓝色悬停。
|
||||
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: Adjust the Hue of a Color
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 调整颜色的色调
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">颜色具有几个特征，包括色调，饱和度和亮度。 CSS3引入了<code>hsl()</code>属性作为通过直接声明这些特征来选择颜色的替代方法。 <b>顺化</b>是人们通常认为的“颜色”。如果您在左侧以红色开始，在中间移动绿色，在右侧移动蓝色，则色调是沿着此线条的颜色。在<code>hsl()</code> ，色调使用色轮概念而不是光谱，其中圆上颜色的角度以0到360之间的值给出。 <b>饱和度</b>是颜色中的灰色量。完全饱和的颜色没有灰色，最低饱和的颜色几乎完全是灰色。这是以100％完全饱和的百分比给出的。 <b>亮度</b>是一种颜色的白色或黑色。给出百分比范围从0％（黑色）到100％（白色），其中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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>hsl()</code>根据类名（ <code>green</code> ， <code>cyan</code>或<code>blue</code> ）更改每个<code>div</code>元素的<code>background-color</code> 。这三个都应该具有完全饱和度和正常亮度。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>hsl()</code>属性将颜色声明为绿色。
|
||||
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color green.");'
|
||||
- text: 您的代码应使用<code>hsl()</code>属性来声明青色。
|
||||
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color cyan.");'
|
||||
- text: 您的代码应使用<code>hsl()</code>属性将颜色声明为蓝色。
|
||||
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color blue.");'
|
||||
- text: 具有<code>green</code>类的<code>div</code>元素应具有<code>green</code>的<code>background-color</code> 。
|
||||
testString: 'assert($(".green").css("background-color") == "rgb(0, 255, 0)", "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.");'
|
||||
- text: 具有<code>cyan</code>类的<code>div</code>元素应具有<code>cyan</code>的<code>background-color</code> 。
|
||||
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
|
||||
- text: 具有<code>blue</code>类的<code>div</code>元素应具有<code>blue</code>的<code>background-color</code> 。
|
||||
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: Adjust the Size of a Header Versus a Paragraph Tag
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 调整标题的大小与段落标记
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">标题标记（ <code>h1</code>到<code>h6</code> ）的字体大小通常应大于段落标记的字体大小。这使用户更容易在视觉上理解页面上所有内容的布局和重要性级别。您可以使用<code>font-size</code>属性调整元素中文本的大小。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">若要使标题明显大于段落，请将<code>h4</code>标记的<code>font-size</code>更改为27像素。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该将<code>font-size</code>属性添加到设置为27像素的<code>h4</code>元素。
|
||||
testString: 'assert($("h4").css("font-size") == "27px", "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: Adjust the Tone of a Color
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 调整颜色的色调
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS中的<code>hsl()</code>选项还可以轻松调整颜色的色调。混合白色和纯净的色调会产生这种颜色的色调，添加黑色会产生阴影。或者，通过添加灰色或通过着色和着色来产生色调。回想一下， <code>hsl()</code>的's'和'l'分别代表饱和度和亮度。饱和度百分比会改变灰度，亮度百分比决定颜色中白色或黑色的含量。当您拥有自己喜欢的基色调时，这很有用，但需要不同的变体。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">此站点上的导航栏当前从<code>header</code>元素继承其<code>background-color</code> 。从该颜色作为基础开始，为<code>nav</code>元素添加<code>background-color</code> ，使其使用相同的青色色调，但具有80％饱和度和25％亮度值，以改变其色调和阴影。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>nav</code>元素应使用<code>hsl()</code>属性具有调整后的青色调的<code>background-color</code> 。
|
||||
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: Adjust the Width of an Element Using the width Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用width属性调整元素的宽度
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用CSS中的<code>width</code>属性指定元素的<code>width</code> 。值可以以相对长度单位（例如em），绝对长度单位（例如px）或其包含的父元素的百分比给出。这是一个将图像宽度更改为220px的示例： <blockquote> img { <br>宽度：220px; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>width</code>属性添加到整个卡并将其设置为绝对值245px。使用<code>fullCard</code>类选择元素。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>fullCard</code>类选择器将卡的<code>width</code>属性更改为245像素。
|
||||
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: Animate Elements at Variable Rates
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 以可变速率动画元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有多种方法可以改变类似动画元素的动画速率。到目前为止，这是通过应用<code>animation-iteration-count</code>属性和设置<code>@keyframes</code>规则来实现的。为了说明，右侧的动画由两个“星星”组成，每个“星星”的大小和不透明度在<code>@keyframes</code>规则中的20％标记处<code>@keyframes</code> ，从而创建闪烁动画。您可以更改其中一个元素的<code>@keyframes</code>规则，以便星星以不同的速率闪烁。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">通过将其<code>@keyframes</code>规则更改为50％，更改类名为<code>star-1</code>的元素的动画速率。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>star-1</code>类的<code>@keyframes</code>规则应为50％。
|
||||
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: Animate Elements Continually Using an Infinite Animation Count
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 动画元素不断使用无限动画计数
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">之前的挑战涉及如何使用某些动画属性和<code>@keyframes</code>规则。另一个动画属性是<code>animation-iteration-count</code> ，它允许您控制循环动画的次数。这是一个例子： <code>animation-iteration-count: 3;</code>在这种情况下，动画将在运行3次后停止，但可以通过将该值设置为无限来使动画连续运行。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">要使球在连续循环中保持在右侧弹跳，请将<code>animation-iteration-count</code>属性更改为无限。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>animation-iteration-count</code>属性应具有无限值。
|
||||
testString: 'assert($("#ball").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property should have a value of infinite.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: Animate Multiple Elements at Variable Rates
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 以可变速率动画多个元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在之前的挑战中，您通过更改其<code>@keyframes</code>规则来更改两个相似动画元素的动画速率。您可以通过操纵多个元素的<code>animation-duration</code>来实现相同的目标。在代码编辑器中运行的动画中，天空中有三个“星星”在连续循环中以相同的速率闪烁。要使它们以不同的速率闪烁，可以将<code>animation-duration</code>属性设置为每个元素的不同值。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将类别为<code>star-1</code> ， <code>star-2</code>和<code>star-3</code>的元素的<code>animation-duration</code>设置为1s，0.9s和1.1s。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 具有<code>star-1</code>的星的<code>animation-duration</code>属性应保持为1秒。
|
||||
testString: 'assert($(".star-1").css("animation-duration") == "1s", "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.");'
|
||||
- text: <code>star-2</code>的星的<code>animation-duration</code>属性应为0.9秒。
|
||||
testString: 'assert($(".star-2").css("animation-duration") == "0.9s", "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.");'
|
||||
- text: <code>star-3</code>的星的<code>animation-duration</code>属性应为1.1秒。
|
||||
testString: 'assert($(".star-3").css("animation-duration") == "1.1s", "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: Center an Element Horizontally Using the margin Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用margin属性水平居中元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">另一种定位技术是将块元素水平居中。一种方法是将其<code>margin</code>设置为auto值。此方法也适用于图像。默认情况下，图像是内联元素，但在将<code>display</code>属性设置为block时可以更改为块元素。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">居中的<code>div</code>通过添加在页面上<code>margin</code>属性与汽车的价值。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>div</code>应该有一个设置为auto的<code>margin</code> 。
|
||||
testString: 'assert(code.match(/margin:\s*?auto;/g), "The <code>div</code> should have a <code>margin</code> set to auto.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512ac9
|
||||
title: Change an Element's Relative Position
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 更改元素的相对位置
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS将每个HTML元素视为自己的框，通常称为<code>CSS Box Model</code> 。块级项目自动从新行开始（想想标题，段落和div），而内联项目位于周围内容（如图像或跨度）中。以这种方式的元素的默认布局称为文档的<code>normal flow</code> ，但CSS提供position属性来覆盖它。当元素的位置设置为<code>relative</code> ，它允许您指定CSS应如何<i>相</i>对于页面正常流中的当前位置移动它。它与<code>left</code>或<code>right</code>以及<code>top</code>或<code>bottom</code>的CSS偏移属性配对。这些表示将物品从通常定位的位置<i>移开的</i>像素，百分比或ems的数量。以下示例将段落从底部移开10个像素： <blockquote> p { <br>位置：相对; <br>底部：10px; <br> } </blockquote>将元素的位置更改为相对位置不会将其从正常流中移除 - 其周围的其他元素仍然表现为该项位于其默认位置。 <strong>注意</strong> <br>定位为页面的可视化布局提供了很大的灵活性和强大功能。值得记住的是，无论元素的位置如何，底层的HTML标记都应该有条理，从上到下阅读时才有意义。这就是具有视觉障碍的用户（依赖屏幕阅读器等辅助设备）访问您的内容的方式。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>h2</code>的<code>position</code>更改为<code>relative</code> <code>position</code> ，并使用CSS偏移将其移动到距离正常流动位置<code>top</code> 15个像素的位置。请注意，周围的h1和p元素的位置没有影响。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>h2</code>元素的<code>position</code>属性应设置为<code>relative</code> 。
|
||||
testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");'
|
||||
- text: 您的代码应该使用CSS偏移来相对地将<code>h2</code> 15px定位在远离其正常位置的<code>top</code> 。
|
||||
testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae7
|
||||
title: Change Animation Timing with Keywords
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用关键字更改动画计时
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在CSS动画中， <code>animation-timing-function</code>属性控制动画元素在动画持续时间内的变化速度。如果动画是在给定时间（ <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>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 具有id <code>ball1</code>的元素的<code>animation-timing-function</code>属性的值应该是线性的。
|
||||
testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");'
|
||||
- text: 具有id <code>ball2</code>的元素的<code>animation-timing-function</code>属性的<code>ball2</code>应该是缓出的。
|
||||
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512acf
|
||||
title: Change the Position of Overlapping Elements with the z-index Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用z-index属性更改重叠元素的位置
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当元素定位为重叠时，默认情况下，HTML标记中稍后出现的元素将显示在其他元素的顶部。但是， <code>z-index</code>属性可以指定元素彼此堆叠的顺序。它必须是整数（即整数而不是小数），并且元素的<code>z-index</code>属性的较高值会使其在堆栈中的移动值高于具有较低值的值。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>z-index</code>属性添加到类名为<code>first</code> （红色矩形）的元素中，并将其设置为值2，以便覆盖另一个元素（蓝色矩形）。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 具有类<code>first</code>的元素的<code>z-index</code>值应为2。
|
||||
testString: 'assert($(".first").css("z-index") == "2", "The element with class <code>first</code> should have a <code>z-index</code> value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad6
|
||||
title: Create a Gradual CSS Linear Gradient
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建渐进的CSS线性渐变
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在HTML元素上应用颜色不仅限于一个平面色调。 CSS提供了在元素上使用颜色过渡（也称为渐变）的功能。这可以通过<code>background</code>属性的<code>linear-gradient()</code>函数访问。这是一般语法： <code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code>第一个参数指定颜色过渡开始的方向 - 它可以表示为度，其中90deg为垂直渐变，45deg的角度为反斜杠。以下参数指定渐变中使用的颜色顺序。示例： <code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">对<code>div</code>元素的<code>background</code>使用<code>linear-gradient()</code> ，并从35度的方向设置它以将颜色从<code>#CCFFFF</code>更改为<code>#FFCCCC</code> 。 <strong>注意</strong> <br>虽然还有其他方法可以指定颜色值，例如<code>rgb()</code>或<code>hsl()</code> ，但请为此挑战使用十六进制值。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>div</code>元素应具有指定方向和颜色的<code>linear-gradient</code> <code>background</code> 。
|
||||
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512add
|
||||
title: Create a Graphic Using CSS
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS创建图形
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">通过操纵不同的选择器和属性，您可以制作有趣的形状。其中一个更容易尝试的是月牙形状。对于此挑战，您需要使用设置元素<code>box-shadow</code>的<code>box-shadow</code>属性，以及控制元素角落圆度的<code>border-radius</code>属性。您将创建一个圆形透明对象，其阴影略微偏向侧面 - 阴影实际上将是您看到的月亮形状。要创建圆形对象， <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>更改为透明，然后将<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，颜色设置为蓝色。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>background-color</code>属性的值应设置为<code>transparent</code> 。
|
||||
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");'
|
||||
- text: <code>border-radius</code>属性的值应设置为<code>50%</code> 。
|
||||
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");'
|
||||
- text: <code>box-shadow</code>属性的值应设置为<code>offset-x</code>为25px， <code>offset-y</code>为10px， <code>blur-radius</code>为0， <code>spread-radius</code>为0，最后为颜色为蓝色。
|
||||
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: Create a Horizontal Line Using the hr Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用hr元素创建水平线
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>hr</code>标记在其包含元素的宽度上添加水平线。这可用于定义主题更改或直观地分隔内容组。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>h4</code>下面添加一个<code>hr</code>标签，其中包含卡片标题。 <strong>注意</strong> <br>在HTML中， <code>hr</code>是一个自动关闭标记，因此不需要单独的结束标记。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该在标记中添加<code>hr</code>标记。
|
||||
testString: 'assert($("hr").length == 1, "Your code should add an <code>hr</code> tag to the markup.");'
|
||||
- text: <code>hr</code>标签应位于标题和段落之间。
|
||||
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), "The <code>hr</code> tag should come between the title and the paragraph.");'
|
||||
|
||||
```
|
||||
|
||||
</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><s>Google</s>Alphabet</h4>
|
||||
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512ade
|
||||
title: Create a More Complex Shape Using CSS and HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS和HTML创建更复杂的形状
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">世界上最流行的形状之一是心形，在这个挑战中你将使用纯CSS创建一个。但首先，您需要了解<code>::before</code>和<code>::after</code>伪元素。这些伪元素用于在所选元素之前或之后添加内容。在以下示例中，使用<code>::before</code>伪元素将矩形添加到具有类<code>heart</code>的元素： <blockquote> .heart :: before { <br>内容：“”; <br>背景颜色：黄色; <br> border-radius：25％; <br>位置：绝对; <br>身高：50px; <br>宽度：70px; <br>顶部：-50px; <br>左：5px; <br> } </blockquote>要使<code>::before</code>和<code>::after</code>伪元素正常运行，它们必须具有已定义的<code>content</code>属性。此属性通常用于向所选元素添加照片或文本等内容。当使用<code>::before</code>和<code>::after</code>伪元素创建形状时，仍然需要<code>content</code>属性，但它被设置为空字符串。在上面的示例中，具有<code>heart</code>类的元素具有<code>::before</code>伪元素，该元素分别生成<code>height</code>和<code>width</code>分别为50px和70px的黄色矩形。这个矩形由于其25％的边界半径而具有圆角，并且绝对位于距离<code>left</code> 5px和高于元素<code>top</code> 50px的<code>top</code> 。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将屏幕上的元素转换为心形。在<code>heart::after</code>选择器中，将<code>background-color</code>更改为pink，将<code>border-radius</code>更改为50％。接下来，使用类<code>heart</code> （只是<code>heart</code> ）定位元素并填充<code>transform</code>属性。使用-45度的<code>rotate()</code>函数。 （ <code>rotate()</code>工作方式与<code>skewX()</code>和<code>skewY()</code>工作方式相同。最后，在<code>heart::before</code>选择器中，将其<code>content</code>属性设置为空字符串。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```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), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
|
||||
- text: '选择<code>heart::after</code>的<code>heart::after</code> <code>border-radius</code>应为50％。'
|
||||
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
|
||||
- text: <code>heart</code>类的<code>transform</code>属性应使用设置为-45度的<code>rotate()</code>函数。
|
||||
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
|
||||
- text: '该<code>content</code>的的<code>heart::before</code>选择应该是一个空字符串。'
|
||||
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: Create Movement Using CSS Animation
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS动画创建运动
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当元素具有指定<code>position</code> （例如<code>fixed</code>或<code>relative</code> ，可以在动画规则中使用<code>right</code> ， <code>left</code> ， <code>top</code>和<code>bottom</code>的CSS偏移属性来创建移动。如下面的示例所示，您可以通过将<code>50%</code>关键帧的<code>top</code>属性设置为50px向下然后向上推动项目，但将第一个（ <code>0%</code> ）和最后一个（ <code>100%</code> ）关键帧设置为0px。 <blockquote> @keyframes rainbow { <br> 0％{ <br>背景颜色：蓝色; <br>顶部：0px; <br> } <br> 50％{ <br>背景颜色：绿色; <br>上：50px; <br> } <br> 100％{ <br>背景颜色：黄色; <br>顶部：0px; <br> } <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为<code>div</code>动画添加水平运动。使用<code>left</code>偏移属性，添加到<code>@keyframes</code>规则，因此彩虹从<code>0%</code> 0像素开始，在<code>50%</code>移动到25像素，在<code>100%</code>以-25像素结束。不要替换编辑器中的<code>top</code>属性 - 动画应该具有垂直和水平运动。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>0%</code>的<code>@keyframes</code>规则应使用0px的<code>left</code>偏移量。
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.");'
|
||||
- text: <code>50%</code>的<code>@keyframes</code>规则应该使用25px的<code>left</code>偏移量。
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.");'
|
||||
- text: <code>100%</code>的<code>@keyframes</code>规则应使用-25px的<code>left</code>偏移量。
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad8
|
||||
title: Create Texture by Adding a Subtle Pattern as a Background Image
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 通过添加细微图案作为背景图像来创建纹理
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">为背景添加纹理和兴趣并让它更突出的一种方法是添加一种微妙的图案。关键是平衡，因为你不希望背景太突出，并从前景中拿走。 <code>background</code>属性支持<code>url()</code>函数，以便链接到所选纹理或图案的图像。链接地址用括号内的引号括起来。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>https://i.imgur.com/MJAkxbh.png</code>的网址，使用<code>body</code>选择器设置整个页面的<code>background</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>body</code>元素应该将<code>background</code>属性设置为具有给定链接的<code>url()</code> 。
|
||||
testString: 'assert(code.match(/background:\s*?url\(\s*("|"|)https:\/\/i\.imgur\.com\/MJAkxbh\.png\1\s*\)/gi), "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: Create Visual Balance Using the text-align Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用text-align属性创建视觉平衡
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">本课程的这一部分侧重于应用视觉设计。第一组挑战建立在给定的卡布局上，以显示许多核心原则。文本通常是Web内容的很大一部分。 CSS有几个选项可以将它与<code>text-align</code>属性<code>text-align</code> 。 <code>text-align: justify;</code>导致除最后一行之外的所有文本行都与行框的左右边缘相交。 <code>text-align: center;</code>文本<code>text-align: right;</code>右对齐文本和<code>text-align: left;</code> （默认值）左对齐文本。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>h4</code>标签的文本（称为“Google”）与中心对齐。然后证明段落标记是合理的，其中包含有关Google如何成立的信息。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用<code>h4</code>标记上的text-align属性将其设置为居中。
|
||||
testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the <code>h4</code> tag to set it to center.");'
|
||||
- text: 您的代码应使用<code>p</code>标记上的text-align属性将其设置为对齐。
|
||||
testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the <code>p</code> tag to set it to justify.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae2
|
||||
title: Create Visual Direction by Fading an Element from Left to Right
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 通过从左到右淡化元素来创建视觉方向
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">对于此挑战，您将更改动画元素的<code>opacity</code> ，使其在到达屏幕右侧时逐渐变淡。在显示的动画中，具有渐变背景的圆形元素按照<code>@keyframes</code>规则向右移动动画的50％标记。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用id为<code>ball</code>定位元素，并将<code>opacity</code>属性设置为0.1（ <code>50%</code> ，因此元素向右移动时会逐渐消失。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: fade的<code>keyframes</code>规则应将<code>opacity</code>属性设置为0.1为50％。
|
||||
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), "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: Decrease the Opacity of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 降低元素的不透明度
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS中的<code>opacity</code>属性用于调整不透明度，或相反，用于调整项目的透明度。 <blockquote>值1是不透明的，根本不透明。 <br>值0.5是半透明的。 <br>值0完全透明。 </blockquote>给定的值将应用于整个元素，无论是具有一定透明度的图像，还是文本块的前景色和背景色。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>links</code>类将锚标记的<code>opacity</code>设置为0.7以选择它们。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应通过选择<code>links</code>类将锚点标记上的<code>opacity</code>属性设置为0.7。
|
||||
testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad1
|
||||
title: Learn about Complementary Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 了解互补色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">色彩理论及其对设计的影响是一个深层次的主题，只有基础知识才能应对以下挑战。在网站上，颜色可以引起对内容的注意，唤起情感或创造视觉和谐。使用不同的颜色组合可以真正改变网站的外观，并且可以考虑选择适合您内容的调色板。色轮是一种有用的工具，用于可视化颜色彼此之间的关系 - 它是一个圆圈，其中相似的色调是邻居，不同的色调相距较远。当两种颜色在车轮上彼此相对时，它们被称为互补色。它们具有如下特征：如果它们组合，它们彼此“抵消”并产生灰色。然而，当并排放置时，这些颜色看起来更加生动，并产生强烈的视觉对比。补充颜色及其十六进制代码的一些示例是： <blockquote>红色（＃FF0000）和青色（＃00FFFF） <br>绿色（＃00FF00）和洋红色（＃FF00FF） <br>蓝色（＃0000FF）和黄色（＃FFFF00） </blockquote>这与我们许多人在学校教授的过时的RYB颜色模型不同，后者具有不同的主色和互补色。现代色彩理论使用加性RGB模型（如在计算机屏幕上）和减色CMY（K）模型（如在打印中）。请阅读<a href="https://en.wikipedia.org/wiki/Color_model" target="_blank">此处</a>了解有关此复杂主题的更多信息。网上有许多颜色挑选工具可以选择找到颜色的补充。 <strong>注意</strong> <br>对于所有颜色挑战：使用颜色可以是增加页面视觉兴趣的有效方式。但是，不应仅使用颜色作为传达重要信息的唯一方式，因为有视力障碍的用户可能不理解该内容。应用辅助功能挑战中将更详细地介绍此问题。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>blue</code>和<code>yellow</code>类的<code>background-color</code>属性更改为各自的颜色。注意颜色与白色背景相比看起来彼此不同。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 具有<code>blue</code>类的<code>div</code>元素应具有<code>blue</code>的<code>background-color</code> 。
|
||||
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
|
||||
- text: 类<code>yellow</code>的<code>div</code>元素应该具有<code>yellow</code>的<code>background-color</code> 。
|
||||
testString: 'assert($(".yellow").css("background-color") == "rgb(255, 255, 0)", "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: Learn about Tertiary Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 了解第三色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">计算机显示器和设备屏幕通过组合红色，绿色和蓝色光的数量来创建不同的颜色。这被称为现代色彩理论中的RGB加色模型。红色（R），绿色（G）和蓝色（B）被称为原色。混合两种基色会产生青色（G + B），品红色（R + B）和黄色（R + G）的二次色。您在Complementary Colors挑战中看到了这些颜色。这些次要颜色恰好是其创建时未使用的原色的补充，并且与色轮上的原色相反。例如，洋红色由红色和蓝色制成，是绿色的补充。三原色是将原色与其次要颜色邻居组合的结果。例如，红色（主要）和黄色（次要）使橙色。这为简单的色轮增加了六种颜色，总共十二种颜色。有多种选择不同颜色的方法可以在设计中实现和谐组合。可以使用三级颜色的一个示例称为分裂互补色方案。该方案以基色开始，然后将其与其补色相邻的两种颜色配对。三种颜色在设计中提供强烈的视觉对比度，但比使用两种互补色更微妙。以下是使用拆分补充方案创建的三种颜色： <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></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>orange</code> ， <code>cyan</code>和<code>raspberry</code>类的<code>background-color</code>属性更改为各自的颜色。确保使用十六进制代码，因为橙色和覆盆子不是浏览器识别的颜色名称。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 具有<code>orange</code>等级的<code>div</code>元素应具有<code>orange</code>的<code>background-color</code> 。
|
||||
testString: 'assert($(".orange").css("background-color") == "rgb(255, 125, 0)", "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.");'
|
||||
- text: 具有<code>cyan</code>类的<code>div</code>元素应具有<code>cyan</code>的<code>background-color</code> 。
|
||||
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
|
||||
- text: 具有类<code>raspberry</code>的<code>div</code>元素应该具有<code>raspberry</code>的<code>background-color</code> 。
|
||||
testString: 'assert($(".raspberry").css("background-color") == "rgb(255, 0, 125)", "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae8
|
||||
title: Learn How Bezier Curves Work
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 了解Bezier曲线的工作原理
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">最后一项挑战引入了<code>animation-timing-function</code>属性和一些在其持续时间内改变动画速度的关键字。 CSS提供了除关键字之外的选项，通过使用贝塞尔曲线，可以更好地控制动画的播放方式。在CSS动画中，贝塞尔曲线与<code>cubic-bezier</code>函数一起使用。曲线的形状表示动画的播放方式。曲线位于1乘1坐标系上。此坐标系的X轴是动画的持续时间（将其视为时间刻度），Y轴是动画中的变化。 <code>cubic-bezier</code>函数由四个主要点组成，这些点位于1 x 1网格上： <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>p1</code>和<code>p2</code> “锚”点的x和y值来完成的： <code>(x1, y1, x2, y2)</code> 。将它们全部拉到一起，这里是CSS代码中Bezier曲线的一个例子： <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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">对于id为<code>ball1</code>的元素，将<code>animation-timing-function</code>属性的值从<code>linear</code>更改为其等效的<code>cubic-bezier</code>函数值。使用上面示例中给出的点值。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 具有id <code>ball1</code>的元素的<code>animation-timing-function</code>属性的值应该是线性等效的cubic-bezier函数。
|
||||
testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.");'
|
||||
- text: 具有id <code>ball2</code>的元素的<code>animation-timing-function</code>属性的<code>ball2</code>不应更改。
|
||||
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512adf
|
||||
title: Learn How the CSS @keyframes and animation Properties Work
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 了解CSS @keyframes和动画属性的工作原理
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">要为元素设置动画，您需要了解动画属性和<code>@keyframes</code>规则。动画属性控制动画的行为方式， <code>@keyframes</code>规则控制动画期间发生的事情。总共有八个动画属性。这个挑战将保持简单，并首先覆盖两个最重要的： <code>animation-name</code>设置<code>animation-name</code> ，后来<code>@keyframes</code>使用<code>@keyframes</code>来告诉CSS哪些规则与哪些动画一起使用。 <code>animation-duration</code>设置<code>animation-duration</code>长度。 <code>@keyframes</code>是如何准确指定动画在整个持续时间内发生的事情。这是通过在动画期间为特定“帧”提供CSS属性来完成的，百分比范围为0％到100％。如果将其与电影进行比较，则0％的CSS属性是元素在开场场景中的显示方式。 100％的CSS属性是元素在信用点滚动之前的结尾显示的方式。然后CSS应用魔法在给定的持续时间内转换元素以执行场景。这是一个例子来说明<code>@keyframes</code>和动画属性的用法： <blockquote> #anim { <br>动画名称：多彩; <br>动画持续时间：3s; <br> } <br> @keyframes colorful { <br> 0％{ <br>背景颜色：蓝色; <br> } <br> 100％{ <br>背景颜色：黄色; <br> } <br> } </blockquote>对于具有<code>anim</code> ID的元素，上面的代码片段将<code>animation-name</code>为<code>colorful</code> ，并将<code>animation-duration</code>为3秒。然后<code>@keyframes</code>规则链接到名称为<code>colorful</code>的动画属性。它在动画开始时将颜色设置为蓝色（0％），在动画结束时将其转换为黄色（100％）。您不仅限于开始 - 结束转换，您可以为0％和100％之间的任何百分比设置元素的属性。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">通过将<code>animation-name</code>设置为rainbow并将<code>animation-duration</code>为4秒，为id为<code>rect</code>的元素创建动画。接下来，声明一个<code>@keyframes</code>规则，并将动画开头的<code>background-color</code> （ <code>0%</code> ）设置为蓝色，将动画的中间（ <code>50%</code> ）设置为绿色，将动画的结尾（ <code>100%</code> ）设置为黄色。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: id为<code>rect</code>的元素应该有一个<code>animation-name</code>属性，其值为rainbow。
|
||||
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");'
|
||||
- text: id为<code>rect</code>的元素应该具有值为4s的<code>animation-duration</code>属性。
|
||||
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");'
|
||||
- text: <code>@keyframes</code>规则应该使用rainbow的<code>animation-name</code> 。
|
||||
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");'
|
||||
- text: 彩虹的<code>@keyframes</code>规则应使用0％的蓝色<code>background-color</code> 。
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");'
|
||||
- text: 彩虹的<code>@keyframes</code>规则应使用50％的绿色<code>background-color</code> 。
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");'
|
||||
- text: 彩虹的<code>@keyframes</code>规则应使用100％的黄色<code>background-color</code> 。
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acb
|
||||
title: Lock an Element to its Parent with Absolute Positioning
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用绝对定位将元素锁定到其父级
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS <code>position</code>属性的下一个选项是<code>absolute</code> ，它将元素相对于其父容器锁定到位。与<code>relative</code>位置不同，这会从文档的正常流中移除元素，因此周围的项会忽略它。 CSS偏移属性（顶部或底部和左侧或右侧）用于调整位置。具有绝对定位的一个细微差别在于它将相对于其最近<em>定位的</em>祖先被锁定。如果您忘记向父项添加位置规则（通常使用<code>position: relative;</code> ），浏览器将继续查找链并最终默认为body标记。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">通过将其<code>position</code>声明为<code>absolute</code>将<code>#searchbar</code>元素锁定到其<code>section</code>的右上角。给它每个50像素的<code>top</code>和<code>right</code>偏移。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#searchbar</code>元素的<code>position</code>应设置为<code>absolute</code> 。'
|
||||
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
|
||||
- text: '您的代码应该在<code>#searchbar</code>元素上使用50像素的<code>top</code> CSS偏移量。'
|
||||
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
|
||||
- text: '您的代码应该在<code>#searchbar</code>元素上使用50像素的<code>right</code> CSS偏移量。'
|
||||
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
|
||||
|
||||
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acc
|
||||
title: Lock an Element to the Browser Window with Fixed Positioning
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用固定定位将元素锁定到浏览器窗口
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS提供的下一个布局方案是<code>fixed</code>位置，这是一种绝对定位，可以相对于浏览器窗口锁定元素。与绝对定位类似，它与CSS偏移属性一起使用，并且还从文档的正常流中移除元素。其他项目不再“实现”它所处的位置，这可能需要在其他地方进行一些布局调整。 <code>fixed</code>位置和<code>absolute</code>位置之间的一个关键区别是，当用户滚动时，具有固定位置的元素将不会移动。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在代码导航栏标有的一个id <code>navbar</code> 。将其<code>position</code>更改为<code>fixed</code> ，并将其偏离<code>top</code> 0像素和<code>left</code> 0像素。注意到（没有）对<code>h1</code>位置的影响，它没有被按下以容纳导航栏并且需要单独调整。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#navbar</code>元素的<code>position</code>应设置为<code>fixed</code> 。'
|
||||
testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");'
|
||||
- text: '您的代码应该使用<code>#navbar</code>元素上0像素的<code>top</code> CSS偏移量。'
|
||||
testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
|
||||
- text: '您的代码应使用<code>#navbar</code>元素上0像素的<code>left</code> CSS偏移量。'
|
||||
testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae4
|
||||
title: Make a CSS Heartbeat using an Infinite Animation Count
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用无限动画计数制作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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">通过为<code>back</code>类和<code>heart</code>类添加<code>animation-iteration-count</code>属性并将值设置为无限来保持心脏跳动。 <code>heart:before</code>和<code>heart:after</code>选择器<code>heart:after</code>不需要任何动画属性。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>heart</code>类的<code>animation-iteration-count</code>属性应具有无限值。
|
||||
testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.");'
|
||||
- text: <code>back</code>类的<code>animation-iteration-count</code>属性应具有无限值。
|
||||
testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512aea
|
||||
title: Make Motion More Natural Using a Bezier Curve
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用贝塞尔曲线使运动更自然
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">这一挑战激发了一个元素来复制被玩杂耍的球的运动。先前的挑战涵盖了<code>linear</code>和<code>ease-out</code>三次贝塞尔曲线，但两者都没有准确描述杂耍运动。您需要为此自定义Bezier曲线。当<code>animation-iteration-count</code>设置为无限时， <code>animation-timing-function</code>在每个关键帧处自动循环。由于在动画持续时间的中间设置了关键帧规则（ <code>50%</code> ），因此在球的向上和向下移动时会产生两个相同的动画进度。下面的三次贝塞尔曲线模拟了一个杂耍运动： <code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code>请注意，y2的值大于1.虽然三次贝塞尔曲线映射在1乘1坐标系上，并且它只能接受0到1的x值，但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.648。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 具有id <code>green</code>的元素的<code>animation-timing-function</code>属性的值应该是具有指定的x1，y1，x2，y2值的<code>cubic-bezier</code>函数。
|
||||
testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 58a7a6ebf9a6318348e2d5aa
|
||||
title: Modify Fill Mode of an Animation
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 修改动画的填充模式
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">设置<code>button:hover</code>的<code>animation-fill-mode</code>属性<code>button:hover</code> to <code>forwards</code>以便当用户将鼠标悬停在按钮上时按钮保持突出显示。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```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), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>Register</button>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512aca
|
||||
title: Move a Relatively Positioned Element with CSS Offsets
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS偏移移动相对定位的元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>top</code>或<code>bottom</code> ， <code>left</code>或<code>right</code>的CSS偏移告诉浏览器将项目相对于文档正常流程中的位置偏移多远。您将元素偏离给定的点，这会使元素远离引用的边（有效地，相反的方向）。正如您在上一次挑战中看到的那样，使用顶部偏移将<code>h2</code>向下移动。同样，使用左偏移会将项目向右移动。 <h2>说明</h2><section id="instructions">使用CSS偏移将<code>h2</code>移动15像素向右移动10像素。 </section><h2>测试</h2><section id="tests"><pre> <code class="language-yml">tests: - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'</code> </pre></section><h2>挑战种子</h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html"><head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body></code> </pre></div></section><h2>解</h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用CSS偏移将<code>h2</code>移动15像素向右移动10像素。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应使用CSS偏移量来相对定位<code>h2</code> 10px。换句话说，将它从通常所在位置的<code>bottom</code>移开10px。
|
||||
testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");'
|
||||
- text: 您的代码应该使用CSS偏移来相对地将<code>h2</code> 15px定位到右侧。换句话说，将它从通常所在的位置<code>left</code>移动15px。
|
||||
testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ace
|
||||
title: Push Elements Left or Right with the float Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用float属性向左或向右推送元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">下一个定位工具实际上不使用<code>position</code> ，而是设置元素的<code>float</code>属性。浮动元素从文档的正常流中移除，并推送到其包含的父元素的<code>left</code>或<code>right</code> 。它通常与<code>width</code>属性一起使用，以指定浮动元素需要多少水平空间。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">给定的标记可以很好地用作两列布局，其中<code>section</code>和<code>aside</code>元素彼此相邻。给<code>#left</code>项<code>float</code>的<code>left</code>和<code>#right</code>项<code>float</code>的<code>right</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: id为<code>left</code>的元素的<code>float</code>值应为<code>left</code> 。
|
||||
testString: 'assert($("#left").css("float") == "left", "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.");'
|
||||
- text: id为<code>right</code>的元素的<code>float</code>值应为<code>right</code> 。
|
||||
testString: 'assert($("#right").css("float") == "right", "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac2
|
||||
title: Set the font-size for Multiple Heading Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 设置多个标题元素的字体大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>font-size</code>属性用于指定给定元素中文本的大小。此规则可用于多个元素，以在页面上创建文本的视觉一致性。在此挑战中，您将设置所有<code>h1</code>到<code>h6</code>标记的值以平衡标题大小。 </section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应将<code>h1</code>标记的<code>font-size</code>属性设置为68像素。
|
||||
testString: 'assert($("h1").css("font-size") == "68px", "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.");'
|
||||
- text: 您的代码应将<code>h2</code>标记的<code>font-size</code>属性设置为52像素。
|
||||
testString: 'assert($("h2").css("font-size") == "52px", "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.");'
|
||||
- text: 您的代码应将<code>h3</code>标记的<code>font-size</code>属性设置为40像素。
|
||||
testString: 'assert($("h3").css("font-size") == "40px", "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.");'
|
||||
- text: 您的代码应将<code>h4</code>标记的<code>font-size</code>属性设置为32像素。
|
||||
testString: 'assert($("h4").css("font-size") == "32px", "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.");'
|
||||
- text: 您的代码应将<code>h5</code>标记的<code>font-size</code>属性设置为21像素。
|
||||
testString: 'assert($("h5").css("font-size") == "21px", "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.");'
|
||||
- text: 您的代码应将<code>h6</code>标记的<code>font-size</code>属性设置为14像素。
|
||||
testString: 'assert($("h6").css("font-size") == "14px", "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac4
|
||||
title: Set the font-size of Paragraph Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 设置段落文本的字体大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS中的<code>font-size</code>属性不限于标题，它可以应用于包含文本的任何元素。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将段落的<code>font-size</code>属性值更改为16px以使其更加可见。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>p</code>标签的<code>font-size</code>为16像素。
|
||||
testString: 'assert($("p").css("font-size") == "16px", "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac3
|
||||
title: Set the font-weight for Multiple Heading Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 设置多个标题元素的字体粗细
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您在最后一次挑战中设置每个标题标记的<code>font-size</code> ，在这里您将调整<code>font-weight</code> 。 <code>font-weight</code>属性设置文本部分中字符的粗细或粗细。 </section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应将<code>h1</code>标记的<code>font-weight</code>属性设置为800。
|
||||
testString: 'assert($("h1").css("font-weight") == "800", "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.");'
|
||||
- text: 您的代码应将<code>h2</code>标记的<code>font-weight</code>属性设置为600。
|
||||
testString: 'assert($("h2").css("font-weight") == "600", "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.");'
|
||||
- text: 您的代码应将<code>h3</code>标记的<code>font-weight</code>属性设置为500。
|
||||
testString: 'assert($("h3").css("font-weight") == "500", "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.");'
|
||||
- text: 您的代码应将<code>h4</code>标记的<code>font-weight</code>属性设置为400。
|
||||
testString: 'assert($("h4").css("font-weight") == "400", "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.");'
|
||||
- text: 您的代码应将<code>h5</code>标记的<code>font-weight</code>属性设置为300。
|
||||
testString: 'assert($("h5").css("font-weight") == "300", "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.");'
|
||||
- text: 您的代码应将<code>h6</code>标记的<code>font-weight</code>属性设置为200。
|
||||
testString: 'assert($("h6").css("font-weight") == "200", "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac5
|
||||
title: Set the line-height of Paragraphs
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 设置段落的行高
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS提供了<code>line-height</code>属性来更改文本块中每一行的高度。顾名思义，它会改变每行文本所获得的垂直空间量。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>line-height</code>属性添加到<code>p</code>标记并将其设置为25px。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应将<code>p</code>标记的<code>line-height</code>设置为25像素。
|
||||
testString: 'assert($("p").css("line-height") == "25px", "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae9
|
||||
title: Use a Bezier Curve to Move a Graphic
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用贝塞尔曲线移动图形
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">之前的挑战讨论了一个<code>ease-out</code>关键字，该关键字描述了动画更改，该动画更改先加速，然后在动画结束时减慢。在右侧，演示了<code>ease-out</code>关键字（对于蓝色元素）和<code>linear</code>关键字（对于红色元素）之间的差异。通过使用自定义三次贝塞尔曲线函数，可以实现对<code>ease-out</code>关键字的类似动画进展。通常，更改<code>p1</code>和<code>p2</code>锚点会驱动创建不同的贝塞尔曲线，这些曲线控制动画随时间推移的进展。下面是使用值来模拟缓出样式的贝塞尔曲线的示例： <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> y值为0，然后到<code>p2</code> y值为1）比在X轴上移动更快（0开始，然后是0对于<code>p1</code> ，对于<code>p2</code> ，高达0.58）。结果，动画元素的变化比该段的动画时间更快。接近曲线的末端，x和y值的变化之间的关系反转 - y值从1移动到1（无变化），x值从0.58移动到1，使得动画变化进展比较慢动画持续时间。 </section>
|
||||
|
||||
## 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>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```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)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
|
||||
- text: id为<code>red</code>的元素不应该具有linear的<code>animation-timing-function</code>属性。
|
||||
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'
|
||||
- text: 具有id <code>blue</code>的元素的<code>animation-timing-function</code>属性的值不应更改。
|
||||
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad7
|
||||
title: Use a CSS Linear Gradient to Create a Striped Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS线性渐变来创建条带元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>repeating-linear-gradient()</code>函数与<code>linear-gradient()</code>非常相似，主要区别在于它重复指定的渐变图案。 <code>repeating-linear-gradient()</code>接受各种值，但为简单起见，您将在此挑战中使用角度值和颜色停止值。角度值是梯度的方向。颜色停止类似于标记转换发生位置的宽度值，并且以百分比或像素数给出。在代码编辑器中演示的示例中，渐变以0像素处的<code>yellow</code>开始，在距离开始40像素处混合成第二种颜色<code>blue</code> 。由于下一个颜色停止也是40像素，因此渐变立即变为第三颜色<code>green</code> ，其本身混合为第四颜色值<code>red</code> ，因为距离渐变的开始是80像素。对于这个例子，它有助于将颜色停止视为每两种颜色混合在一起的对。 <code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code>如果每两个颜色停止值是相同的颜色，则混合不明显，因为它在相同的颜色之间，然后是硬转换到下一个颜色，所以你最终得到条纹。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">通过更改<code>repeating-linear-gradient()</code>以使用<code>45deg</code>度的渐变角度来<code>45deg</code> ，然后将前两个颜色停止设置为<code>yellow</code> ，最后将第二个两个颜色停止为<code>black</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>repeating-linear-gradient()</code>应为45度。
|
||||
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.");'
|
||||
- text: <code>repeating-linear-gradient()</code>不应再为90度
|
||||
testString: 'assert(!code.match(/90deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg");'
|
||||
- text: 0像素处的颜色停止应为<code>yellow</code> 。
|
||||
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be <code>yellow</code>.");'
|
||||
- text: 40像素的一个颜色停止应为<code>yellow</code> 。
|
||||
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be <code>yellow</code>.");'
|
||||
- text: 40像素的第二个色标应为<code>black</code> 。
|
||||
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be <code>black</code>.");'
|
||||
- text: 80像素的最后一个色标应为<code>black</code> 。
|
||||
testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be <code>black</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae0
|
||||
title: Use CSS Animation to Change the Hover State of a Button
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS动画更改按钮的悬停状态
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用CSS <code>@keyframes</code>更改悬停状态下按钮的颜色。以下是在悬停时更改图像宽度的示例： <blockquote> <风格> <br> img：hover { <br>动画名称：宽度; <br>动画持续时间：500ms; <br> } <br><br> @keyframes width { <br> 100％{ <br>宽度：40px; <br> } <br> } <br> </样式> <br><br> <img src =“https://bit.ly/smallgooglelogo"alt =”Google的徽标“/> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">请注意， <code>ms</code>表示毫秒，其中1000毫秒等于1秒。使用CSS <code>@keyframes</code>更改<code>button</code>元素的<code>background-color</code> ，以便当用户将鼠标悬停在其上时变为<code>#4791d0</code> 。 <code>@keyframes</code>规则应该只有<code>100%</code>的条目。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '@keyframes规则应使用<code>animation-name</code> background-color。'
|
||||
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the <code>animation-name</code> background-color.");'
|
||||
- text: '<code>@keyframes</code>下应该有一条规则将<code>background-color</code>更改为<code>#4791d0</code>为100％。'
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>Register</button>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adb
|
||||
title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS变换属性skewX沿X轴倾斜元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>transform</code>属性的下一个函数是<code>skewX()</code> ，它将选定元素沿其X（水平）轴倾斜给定的度数。以下代码沿X轴将段落元素倾斜-32度。 <blockquote> p { <br> transform：skewX（-32deg）; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>transform</code>属性将具有<code>bottom</code> id的元素沿X轴倾斜24度。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 具有id <code>bottom</code>的元素应沿其X轴倾斜24度。
|
||||
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adc
|
||||
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS变换属性skewY沿Y轴倾斜元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">假设<code>skewX()</code>函数沿X轴将选定元素倾斜给定的度数，则<code>skewY()</code>属性沿Y（垂直）轴倾斜元素<code>skewY()</code>不足为奇了。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>transform</code>属性，沿Y轴倾斜<code>top</code> -10度的元素。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: id <code>top</code>的元素应沿其Y轴倾斜-10度。
|
||||
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad9
|
||||
title: Use the CSS Transform scale Property to Change the Size of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS Transform scale属性更改元素的大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">要更改元素的比例，CSS具有<code>transform</code>属性及其<code>scale()</code>函数。以下代码示例将页面上所有段落元素的大小加倍： <blockquote> p { <br>变换：比例（2）; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>ball2</code>的id将元素的大小<code>ball2</code>原始大小的1.5倍。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```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), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ada
|
||||
title: Use the CSS Transform scale Property to Scale an Element on Hover
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS Transform scale属性在悬停上缩放元素
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>transform</code>属性具有多种功能，可让您缩放，移动，旋转，倾斜等元素。当与伪类（例如<code>:hover</code> ，指定元素的某个状态， <code>transform</code>属性可以轻松地为元素添加交互性。这是一个示例，当用户将鼠标悬停在原始大小上时，将段落元素缩放到原始大小的2.1倍： <blockquote> p：悬停{ <br>变换：规模（2.1）; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为<code>div</code>的<code>hover</code>状态添加CSS规则，并使用<code>transform</code>属性将<code>div</code>元素缩放到其原始大小的1.1倍，当用户将鼠标悬停在其上时。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 当用户将鼠标悬停在其上时， <code>div</code>元素的大小应缩放1.1倍。
|
||||
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab9
|
||||
title: Use the em Tag to Italicize Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用em标记来显示文本
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">要强调文本，您可以使用<code>em</code>标记。这显示文本为斜体，因为浏览器应用了<code>font-style: italic;</code>的CSS <code>font-style: italic;</code>对元素。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">围绕段落标记的内容包装<code>em</code>标记以强调它。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该在标记中添加<code>em</code>标记。
|
||||
testString: 'assert($("em").length == 1, "Your code should add an <code>em</code> tag to the markup.");'
|
||||
- text: <code>em</code>标签应该环绕<code>p</code>标签的内容，而不是<code>p</code>标签本身。
|
||||
testString: 'assert($("p").children().length == 1 && $("em").children().length == 2, "The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.");'
|
||||
|
||||
```
|
||||
|
||||
</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 was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512aba
|
||||
title: Use the s Tag to Strikethrough Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用s标记删除线文本
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">要删除文本，即水平线跨越字符时，可以使用<code>s</code>标记。它表明一段文字不再有效。使用<code>s</code>标签，浏览器应用<code>text-decoration: line-through;</code>的CSS <code>text-decoration: line-through;</code>对元素。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>s</code>标签包裹在<code>h4</code>标签内的“Google”周围，然后在其旁边添加单词Alphabet，它不应具有删除线格式。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应一个加<code>s</code>标签来标记。
|
||||
testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");'
|
||||
- text: <code>s</code>标记应该环绕<code>h4</code>标记中的Google文本。它不应包含单词Alphabet。
|
||||
testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.");'
|
||||
- text: 在<code>h4</code>标记中包含单词Alphabet，不带删除线格式。
|
||||
testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");'
|
||||
|
||||
```
|
||||
|
||||
</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><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab7
|
||||
title: Use the strong Tag to Make Text Bold
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用强标记使文字粗体
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">要使文本变为粗体，可以使用<code>strong</code>标记。这通常用于引起对文本的注意，并象征着它很重要。使用<code>strong</code>标记，浏览器应用CSS的<code>font-weight: bold;</code>对元素。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>p</code>标签内围绕“斯坦福大学”包裹一个<code>strong</code>的标签。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该在标记中添加一个<code>strong</code>标记。
|
||||
testString: 'assert($("strong").length == 1, "Your code should add one <code>strong</code> tag to the markup.");'
|
||||
- text: <code>strong</code>标记应该在<code>p</code>标记内。
|
||||
testString: 'assert($("p").children("strong").length == 1, "The <code>strong</code> tag should be inside the <code>p</code> tag.");'
|
||||
- text: <code>strong</code>标签应该包含“斯坦福大学”这个词。
|
||||
testString: 'assert($("strong").text().match(/^Stanford University$/gi), "The <code>strong</code> tag should wrap around the words "Stanford University".");'
|
||||
|
||||
```
|
||||
|
||||
</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 was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac0
|
||||
title: Use the text-transform Property to Make Text Uppercase
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用text-transform属性使文本为大写
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS中的<code>text-transform</code>属性用于更改文本的外观。这是一种方便的方法，可确保网页上的文字始终如一，而无需更改实际HTML元素的文本内容。下表显示了不同的<code>text-transform</code>值如何更改示例文本“转换我”。 <table class="table table-striped"><thead><tr><th>值</th><th>结果</th></tr></thead><tbody><tr><td> <code>lowercase</code> </td> <td> “改变我” </td></tr><tr><td> <code>uppercase</code> </td> <td> “改变我” </td></tr><tr><td> <code>capitalize</code> </td> <td> “改变我” </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>默认值：</strong>使用原始文本</td></tr></tbody></table></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>text-transform</code>属性将<code>h4</code>的<code>text-transform</code>为大写。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>h4</code>文本应为大写。
|
||||
testString: 'assert($("h4").css("text-transform") === "uppercase", "The <code>h4</code> text should be uppercase.");'
|
||||
- text: 不应更改h4的原始文本。
|
||||
testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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 was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab8
|
||||
title: Use the u Tag to Underline Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用u标签为文本加下划线
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">要为文本加下划线，您可以使用<code>u</code>标记。这通常用于表示一段文字很重要，或者需要记住的东西。使用<code>u</code>标签，浏览器应用<code>text-decoration: underline;</code>的CSS <code>text-decoration: underline;</code>对元素。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">仅在“Ph.D. students”文本周围包裹<code>u</code>标签。 <strong>注意</strong> <br>当它可能与链接混淆时尽量避免使用<code>u</code>标签。 Anchor标签也有默认的带下划线的格式。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应该在标记中添加<code>u</code>标记。
|
||||
testString: 'assert($("u").length === 1, "Your code should add a <code>u</code> tag to the markup.");'
|
||||
- text: <code>u</code>标签应该包含文本“Ph.D. students”。
|
||||
testString: 'assert($("u").text() === "Ph.D. students", "The <code>u</code> tag should wrap around the text "Ph.D. students".");'
|
||||
|
||||
```
|
||||
|
||||
</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 was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: Add a Negative Margin to an Element
|
||||
challengeType: 0
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/add-a-negative-margin-to-an-element'
|
||||
videoUrl: ''
|
||||
localeTitle: 向元素添加负边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">元素的<code>margin</code>控制元素<code>border</code>与周围元素之间的空间量。如果将元素的<code>margin</code>设置为负值，则元素将变大。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">尝试将<code>margin</code>设置为负值，如红色框的值。将蓝色框的<code>margin</code>更改为<code>-15px</code> ，因此它会填充其周围黄色框的整个水平宽度。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>-15px</code>的<code>margin</code>元素。
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: Add Borders Around Your Elements
|
||||
challengeType: 0
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/add-borders-around-your-elements'
|
||||
videoUrl: ''
|
||||
localeTitle: 添加元素周围的边框
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS边框具有<code>style</code> ， <code>color</code>和<code>width</code>等属性。例如，如果我们想要在HTML元素周围创建一个红色的5像素边框，我们可以使用此类： <blockquote> <风格> <br> .thin-red-border { <br>边框颜色：红色; <br> border-width：5px; <br>边框式：坚固; <br> } <br> </样式> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>thick-green-border</code> 。这个类应该在HTML元素周围添加一个10px的实心绿色边框。将课程应用于您的猫照片。请记住，您可以使用其<code>class</code>属性将多个类应用于元素，方法是使用空格分隔每个类名。例如： <code><img class="class1 class2"></code> </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>img</code>元素应该具有<code>smaller-image</code>类。
|
||||
testString: 'assert($("img").hasClass("smaller-image"), "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
|
||||
- text: 你的<code>img</code>元素应该有类<code>thick-green-border</code> 。
|
||||
testString: 'assert($("img").hasClass("thick-green-border"), "Your <code>img</code> element should have the class <code>thick-green-border</code>.");'
|
||||
- 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, "Give your image a border width of <code>10px</code>.");'
|
||||
- text: 为您的图像提供<code>solid</code>的边框样式。
|
||||
testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of <code>solid</code>.");'
|
||||
- text: <code>img</code>元素周围的边框应为绿色。
|
||||
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your <code>img</code> element should be green.");'
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: Add Different Margins to Each Side of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在元素的每一侧添加不同的边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时您会想要自定义元素，使其每边都有不同的<code>margin</code> 。 CSS允许您控制的<code>margin</code>与元素的所有四个单项两侧<code>margin-top</code> ， <code>margin-right</code> ， <code>margin-bottom</code> ，和<code>margin-left</code>属性。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">蓝色框的顶部和左侧<code>margin</code>为<code>40px</code> ，底部和右侧仅为<code>20px</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给元素顶部<code>40px</code>的<code>margin</code> 。
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
|
||||
- text: 您的<code>blue-box</code>类应该赋予元素<code>20px</code> <code>margin</code>的权利。
|
||||
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素的底部提供<code>20px</code>的<code>margin</code> 。
|
||||
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素左边<code>40px</code>的<code>margin</code> 。
|
||||
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: Add Different Padding to Each Side of an Element
|
||||
challengeType: 0
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/add-different-padding-to-each-side-of-an-element'
|
||||
videoUrl: ''
|
||||
localeTitle: 在元素的每一侧添加不同的填充
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时您会想要自定义一个元素，使其每边都有不同数量的<code>padding</code> 。 CSS允许您控制的<code>padding</code>与元素的所有四个单项两侧<code>padding-top</code> ， <code>padding-right</code> ， <code>padding-bottom</code> ，并<code>padding-left</code>属性。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在蓝色框的顶部和左侧给出<code>40px</code>的<code>padding</code> ，但在其底部和右侧只有<code>20px</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>40px</code> <code>padding</code>元素的顶部。
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>20px</code> <code>padding</code>元素的权利。
|
||||
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>20px</code> <code>padding</code>元素的底部。
|
||||
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.");'
|
||||
- text: 你的<code>blue-box</code>类应该给元素左边<code>padding</code> <code>40px</code> 。
|
||||
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: Add Rounded Corners with border-radius
|
||||
challengeType: 0
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/add-rounded-corners-a-border-radius'
|
||||
videoUrl: ''
|
||||
localeTitle: 添加带有border-radius的圆角
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">你的猫照片目前有尖角。我们可以使用名为<code>border-radius</code>的CSS属性来舍入这些角。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">您可以使用像素指定<code>border-radius</code> 。给你的猫照片<code>border-radius</code> <code>10px</code> 。注意：此挑战允许多种可能的解决方案。例如，您可以将<code>border-radius</code>添加到<code>.thick-green-border</code>类或<code>.smaller-image</code>类。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的图片元素应该具有“thick-green-border”类。
|
||||
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
|
||||
- text: 您的图像的边框半径应为<code>10px</code>
|
||||
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.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">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: Adjust the Margin of an Element
|
||||
challengeType: 0
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/adjust-the-margin-of-an-element'
|
||||
videoUrl: ''
|
||||
localeTitle: 调整元素的边距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">元素的<code>margin</code>控制元素<code>border</code>与周围元素之间的空间量。在这里，我们可以看到蓝色框和红色框嵌套在黄色框中。请注意，红色框的<code>margin</code>大于蓝色框，使其看起来更小。当您增加蓝框的<code>margin</code> ，它将增加其边框与周围元素之间的距离。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更改蓝色框的<code>margin</code>以匹配红色框的<code>margin</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>20px</code>的<code>margin</code>元素。
|
||||
testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: Adjust the Padding of an Element
|
||||
challengeType: 0
|
||||
guideUrl: 'https://chinese.freecodecamp.org/guide/certificates/adjust-the-padding-of-an-element'
|
||||
videoUrl: ''
|
||||
localeTitle: 调整元素的填充
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在让我们将我们的Cat Photo App放一段时间，了解更多关于样式HTML的信息。您可能已经注意到了这一点，但所有HTML元素基本上都是小矩形。三个重要属性控制每个HTML元素周围的空间： <code>padding</code> ， <code>margin</code>和<code>border</code> 。元素的<code>padding</code>控制元素内容与其<code>border</code>之间的空间量。在这里，我们可以看到蓝色框和红色框嵌套在黄色框中。请注意，红色框具有比蓝色框更多的<code>padding</code> 。当您增加蓝框的<code>padding</code> ，它将增加文本与其周围边框之间的距离（ <code>padding</code> ）。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更改蓝色框的<code>padding</code>以匹配红色框的<code>padding</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>blue-box</code>类应该给出<code>20px</code>的<code>padding</code>元素。
|
||||
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,254 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: Attach a Fallback value to a CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将Fallback值附加到CSS变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">将变量用作CSS属性值时，如果给定变量无效，则可以附加浏览器将恢复的回退值。 <strong>注意：</strong>此回退不用于增加浏览器兼容性，并且它不适用于IE浏览器。而是使用它，以便浏览器在无法找到变量时显示颜色。这是你如何做到的： <blockquote>背景：var（ - 企鹅皮，黑色）; </blockquote>如果未设置变量，则会将背景设置为黑色。请注意，这对于调试很有用。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">它看起来提供给<code>.penguin-top</code>和<code>.penguin-bottom</code>类的变量存在问题。而不是修复拼写错误，将<code>.penguin-top</code>值的<code>black</code>添加到<code>.penguin-top</code>和<code>.penguin-bottom</code>类的<code>background</code>属性中。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 的后退值应用于<code>black</code>为<code>background</code>的财产<code>penguin-top</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), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.");'
|
||||
- text: 将<code>black</code>的后备值应用于<code>penguin-bottom</code>类的<code>background</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), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
|
||||
|
||||
```
|
||||
|
||||
</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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,250 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: Cascading CSS variables
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 级联CSS变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">创建变量时，您可以在创建变量的元素内使用它。它也可以在嵌套在其中的任何元素中使用。这种效应称为<dfn>级联</dfn> 。由于级联，CSS变量通常在<dfn>：root</dfn>元素中定义。 <code>:root</code>是一个<dfn>伪类</dfn>选择器，它匹配文档的根元素，通常是<code></code>元件。通过在<code>:root</code>创建变量，它们将在全局可用，并且可以在样式表中的任何其他选择器中访问。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>:root</code>选择器中定义一个名为<code>--penguin-belly</code>的变量，并为其赋值<code>pink</code> 。然后，您可以在任何使用该变量的位置查看该值将如何级联以将值更改为粉红色。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```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), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,252 @@
|
||||
---
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: Change a variable for a specific area
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 更改特定区域的变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当您在创建变量<code>:root</code> ，他们将设置可变整个页面的价值。然后，您可以通过在特定元素中再次设置它们来覆盖这些变量。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>penguin</code>类<code>--penguin-belly</code>的值更改为<code>white</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>penguin</code>类应该将<code>--penguin-belly</code>变量重新分配为<code>white</code> 。
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: Change the Color of Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 更改文本的颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在让我们改变一些文字的颜色。我们可以通过改变你的<code>h2</code>元素的<code>style</code>来做到这一点。负责元素文本<code>color</code>属性是<code>color</code>样式属性。以下是将<code>h2</code>元素的文本颜色设置为蓝色的方法： <code><h2 style="color: blue;">CatPhotoApp</h2></code>请注意，最好使用<code>;</code>结束内联<code>style</code>声明<code>;</code> 。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">更改<code>h2</code>元素的样式，使其文本颜色为红色。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>h2</code>元素应该是红色的。
|
||||
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
|
||||
- text: 你的<code>style</code>声明应以a结尾<code>;</code> 。
|
||||
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\"|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\"|")>\s*CatPhotoApp\s*<\/h2>/)," Your <code>style</code> declaration should end with a <code>;</code> .");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: Change the Font Size of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 更改元素的字体大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">字体大小由<code>font-size</code> CSS属性控制，如下所示： <blockquote> h1 { <br> font-size：30px; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">里面的相同<code><style></code>包含您的标记<code>red-text</code>类，创建一个条目<code>p</code>元素和设置<code>font-size</code>为16个像素（ <code>16px</code> ）。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```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), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,245 @@
|
||||
---
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: Create a custom CSS Variable
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建自定义CSS变量
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">要创建一个CSS变量，你只需要给它一个<code>name</code>有<code>two dashes</code>在它前面，并为其分配一个<code>value</code>是这样的： <blockquote> - penguin-skin：灰色; </blockquote>这将创建一个名为<code>--penguin-skin</code>的变量，并为其赋值为<code>gray</code> 。现在，您可以在CSS中的其他位置使用该变量将其他元素的值更改为灰色。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在<code>penguin</code>类中，创建一个变量名称<code>--penguin-skin</code>并赋予它一个<code>gray</code>值</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>penguin</code>类应声明<code>--penguin-skin</code>变量并将其指定为<code>gray</code> 。
|
||||
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: Give a Background Color to a div Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 为div元素提供背景颜色
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>background-color</code>属性设置元素的背景颜色。例如，如果您希望元素的背景颜色为<code>green</code> ，则将其放在<code>style</code>元素中： <blockquote> .green-background { <br>背景颜色：绿色; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>silver-background</code>的类， <code>background-color</code>为银色。将此类分配给<code>div</code>元素。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 给你的<code>div</code>元素类<code>silver-background</code> 。
|
||||
testString: 'assert($("div").hasClass("silver-background"), "Give your <code>div</code> element the class <code>silver-background</code>.");'
|
||||
- text: 你的<code>div</code>元素应该有银色背景。
|
||||
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", "Your <code>div</code> element should have a silver background.");'
|
||||
- text: 定义一个类名为<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*}/), "Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.");'
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.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">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: Import a Google Font
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 导入Google字体
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">除了指定在大多数操作系统上找到的常用字体外，我们还可以指定在我们的网站上使用的非标准自定义Web字体。互联网上有各种网络字体来源，但在本例中，我们将重点关注Google字体库。 <a href="https://fonts.google.com/" target="_blank">Google字体</a>是一个免费的网络字体库，您可以通过引用字体的URL在CSS中使用它。因此，让我们继续导入并应用Google字体（请注意，如果Google在您所在的国家/地区被屏蔽，则需要跳过此挑战）。要导入Google字体，您可以从Google字体库中复制字体网址，然后将其粘贴到HTML中。对于这个挑战，我们将导入<code>Lobster</code>字体。为此，请复制以下代码段并将其粘贴到代码编辑器的顶部（在开始<code>style</code>元素之前）： <code><link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code>现在，您可以使用<code>Lobster</code>作为FAMILY_NAME在CSS中使用<code>Lobster</code>字体，如下例所示： <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code> 。 GENERIC_NAME是可选的，如果其他指定的字体不可用，则为后备字体。这将在下一个挑战中得到体现。系列名称区分大小写，如果名称中有空格，则需要用引号括起来。例如，您需要引号才能使用<code>"Open Sans"</code>字体，但不能使用<code>Lobster</code>字体。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建使用<code>Lobster</code>字体的<code>font-family</code> CSS规则，并确保它将应用于您的<code>h2</code>元素。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 导入<code>Lobster</code>字体。
|
||||
testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the <code>Lobster</code> font.");'
|
||||
- text: 你的<code>h2</code>元素应该使用字体<code>Lobster</code> 。
|
||||
testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your <code>h2</code> element should use the font <code>Lobster</code>.");'
|
||||
- text: 使用<code>h2</code> CSS选择器更改字体。
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an <code>h2</code> CSS selector to change the font.");'
|
||||
- text: 你的<code>p</code>元素仍然应该使用字体<code>monospace</code> 。
|
||||
testString: 'assert($("p").css("font-family").match(/monospace/i), "Your <code>p</code> element should still use the font <code>monospace</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 5b7d72c338cd7e35b63f3e14
|
||||
title: Improve Compatibility with Browser Fallbacks
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 改善与浏览器回退的兼容性
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使用CSS时，您可能会在某些时候遇到浏览器兼容性问题。这就是为什么提供浏览器回退以避免潜在问题的重要性。当您的浏览器解析网页的CSS时，它会忽略它无法识别或支持的任何属性。例如，如果使用CSS变量在站点上分配背景颜色，Internet Explorer将忽略背景颜色，因为它不支持CSS变量。在这种情况下，浏览器将使用它对该属性的任何值。如果找不到该属性的任何其他值集，它将恢复为默认值，这通常不理想。这意味着如果您确实希望提供浏览器回退，那么就像在声明之前提供另一个更广泛支持的值一样简单。这样，较旧的浏览器将有一些东西可以依赖，而较新的浏览器只会解释级联后期的任何声明。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">它看起来像一个变量用于设置<code>.red-box</code>类的背景颜色。让我们通过在现有声明之前添加另一个<code>background</code>声明来提高我们的浏览器兼容性，并将其值设置为红色。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>.red-box</code>规则应包括在现有<code>background</code>声明之前立即将<code>background</code>设置为红色的后备。
|
||||
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: Inherit Styles from the Body Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 从Body元素继承样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">现在我们已经证明每个HTML页面都有一个<code>body</code>元素，并且它的<code>body</code>元素也可以用CSS设置样式。记住，你可以风格你<code>body</code>元素，就像任何其他HTML元素，和所有其他元素将继承你的<code>body</code>元素的样式。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">首先，创建一个<code>h1</code>与文本元素<code>Hello World</code>然后，让我们给您的网页上的所有元素的颜色<code>green</code>中加入<code>color: green;</code>你的<code>body</code>元素的风格声明。最后，通过添加<code>font-family: monospace;</code> ，为你的<code>body</code>元素提供<code>monospace</code>的<code>font-family: monospace;</code>你的<code>body</code>元素的风格声明。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 创建一个<code>h1</code>元素。
|
||||
testString: 'assert(($("h1").length > 0), "Create an <code>h1</code> element.");'
|
||||
- text: 你的<code>h1</code>元素应该有文本<code>Hello World</code> 。
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), "Your <code>h1</code> element should have the text <code>Hello World</code>.");'
|
||||
- text: 确保您的<code>h1</code>元素具有结束标记。
|
||||
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, "Make sure your <code>h1</code> element has a closing tag.");'
|
||||
- text: 为你的<code>body</code>元素赋予<code>green</code>的<code>color</code>属性。
|
||||
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.");'
|
||||
- text: 为<code>body</code>元素提供<code>monospace</code>的<code>font-family</code>属性。
|
||||
testString: 'assert(($("body").css("font-family").match(/monospace/i)), "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该从你的<code>body</code>元素继承font <code>monospace</code> 。
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.");'
|
||||
- text: 您的<code>h1</code>元素应该从您的<code>body</code>元素继承绿色。
|
||||
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: Make Circular Images with a border-radius
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用border-radius制作圆形图像
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">除像素外，您还可以使用百分比指定<code>border-radius</code> 。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">给你的猫照片<code>border-radius</code>为<code>50%</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的图像应具有<code>50%</code>的边框半径，使其完美呈圆形。
|
||||
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Your image should have a border radius of <code>50%</code>, making it perfectly circular.");'
|
||||
- text: 请务必使用<code>50%</code>的百分比值。
|
||||
testString: 'assert(code.match(/50%/g), "Be sure to use a percentage value of <code>50%</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.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">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Override All Other Styles by using Important
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用重要覆盖所有其他样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">好极了！我们刚刚证明了内联样式将覆盖<code>style</code>元素中的所有CSS声明。可是等等。有一种覆盖CSS的最后一种方法。这是所有人中最强大的方法。但在我们这样做之前，让我们谈谈为什么你想要覆盖CSS。在许多情况下，您将使用CSS库。这些可能会意外地覆盖您自己的CSS。所以当你绝对需要确定一个元素有特定的CSS时，你可以使用<code>!important</code>让我们一直回到我们的<code>pink-text</code>类声明。请记住，我们的<code>pink-text</code>类被后续的类声明，id声明和内联样式覆盖。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">让我们在粉红色文本元素的颜色声明中添加关键字<code>!important</code> ，以100％确定你的<code>h1</code>元素是粉红色的。如何执行此操作的示例是： <code>color: red !important;</code> </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该有<code>blue-text</code> 。
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: 您的<code>h1</code>元素应具有<code>orange-text</code>的ID。
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
|
||||
- text: '您的<code>h1</code>元素应具有内联样式的<code>color: white</code> 。'
|
||||
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color: white</code>.");'
|
||||
- text: 你的<code>pink-text</code>类声明应该有<code>!important</code>关键字来覆盖所有其他声明。
|
||||
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'
|
||||
- text: 你的<code>h1</code>元素应该是粉红色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: Override Class Declarations by Styling ID Attributes
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 通过样式ID属性覆盖类声明
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们刚刚证明了浏览器从上到下读取CSS。这意味着，如果发生冲突，浏览器将使用最后的CSS声明。但我们还没有完成。还有其他方法可以覆盖CSS。你还记得id属性吗？让我们覆盖你的<code>pink-text</code>和<code>blue-text</code>类，并通过给<code>h1</code>元素一个id然后设置那个id样式，使你的<code>h1</code>元素变成橙色。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为你的<code>h1</code>元素提供<code>orange-text</code>的<code>id</code>属性。请记住，id样式如下所示： <code><h1 id="orange-text"></code>在<code>h1</code>元素上保留<code>blue-text</code>和<code>pink-text</code>类。在<code>style</code>元素中为您的<code>orange-text</code> id创建一个CSS声明。这是一个示例： <blockquote> ＃brown-text { <br>颜色：棕色; <br> } </blockquote>注意：无论您是在粉红色文本类之上还是之下声明此CSS都无关紧要，因为id属性始终优先。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该有<code>blue-text</code> 。
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: 为你的<code>h1</code>元素提供<code>orange-text</code>的id。
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Give your <code>h1</code> element the id of <code>orange-text</code>.");'
|
||||
- text: 应该只有一个<code>h1</code>元素。
|
||||
testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");'
|
||||
- text: 为您的<code>orange-text</code> ID创建一个CSS声明
|
||||
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your <code>orange-text</code> id");'
|
||||
- text: 不要给你的<code>h1</code>任何<code>style</code>属性。
|
||||
testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");'
|
||||
- text: 你的<code>h1</code>元素应该是橙色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your <code>h1</code> element should be orange.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: Override Class Declarations with Inline Styles
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用内联样式覆盖类声明
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">所以我们已经证明了id声明覆盖了类声明，无论它们在<code>style</code>元素CSS中的声明位置如何。还有其他方法可以覆盖CSS。你还记得内联样式吗？ </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>inline style</code>尝试使我们的<code>h1</code>元素变白。请记住，在线条样式中如下所示： <code><h1 style="color: green;"></code>在<code>h1</code>元素上保留<code>blue-text</code>和<code>pink-text</code>类。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该有<code>blue-text</code> 。
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: 您的<code>h1</code>元素应具有<code>orange-text</code>的ID。
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
|
||||
- text: 为您的<code>h1</code>元素提供内联样式。
|
||||
testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
|
||||
- text: 你的<code>h1</code>元素应该是白色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Override Styles in Subsequent CSS
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 覆盖后续CSS中的样式
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">我们的“粉红色文本”类覆盖了我们的<code>body</code>元素的CSS声明！我们刚刚证明我们的类将覆盖<code>body</code>元素的CSS。所以下一个合乎逻辑的问题是，我们可以做些什么来覆盖我们的<code>pink-text</code>类？ </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>blue-text</code>的附加CSS类，它为元素提供蓝色。确保它低于<code>pink-text</code>类声明。除了<code>pink-text</code>类之外，将<code>blue-text</code>类应用于<code>h1</code>元素，让我们看看哪个获胜。将多个类属性应用于HTML元素是通过它们之间的空格完成的，如下所示： <code>class="class1 class2"</code>注意：HTML元素中列出的类的顺序无关紧要。但是， <code><style></code>部分中的<code>class</code>声明的顺序是重要的。第二个声明将始终优先于第一个声明。因为<code>.blue-text</code>被声明为第二个，所以它会覆盖<code>.pink-text</code>的属性</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该有<code>blue-text</code> 。
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: <code>blue-text</code>和<code>pink-text</code>都应属于同一个<code>h1</code>元素。
|
||||
testString: 'assert($(".pink-text").hasClass("blue-text"), "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.");'
|
||||
- text: 你的<code>h1</code>元素应该是蓝色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your <code>h1</code> element should be blue.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: Prioritize One Style Over Another
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将一种风格优先于另一种风格
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时，您的HTML元素将收到多个彼此冲突的样式。例如，您的<code>h1</code>元素不能同时为绿色和粉红色。让我们看看当我们创建一个使文本变为粉红色的类，然后将其应用于元素时会发生什么。我们的类<em>会覆盖</em> <code>body</code>元素的<code>color: green;</code> CSS属性？ </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>pink-text</code>的CSS类，它为元素提供粉红色。为你的<code>h1</code>元素提供<code>pink-text</code>类。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>h1</code>元素应该具有<code>pink-text</code>类。
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 你的<code><style></code>应该有一个改变<code>color</code>的<code>pink-text</code> CSS类。
|
||||
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
|
||||
- text: 你的<code>h1</code>元素应该是粉红色的。
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: Set the Font Family of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 设置元素的字体系列
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>font-family</code>属性设置元素应使用的<code>font-family</code> 。例如，如果要将<code>h2</code>元素的字体设置为<code>sans-serif</code> ，则可以使用以下CSS： <blockquote> h2 { <br> font-family：sans-serif; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使所有<code>p</code>元素都使用<code>monospace</code>字体。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>p</code>元素应该使用字体<code>monospace</code> 。
|
||||
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your <code>p</code> elements should use the font <code>monospace</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## 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">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: bad87eee1348bd9aede07836
|
||||
title: Set the id of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 设置元素的id
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">除了类之外，每个HTML元素还可以具有<code>id</code>属性。使用<code>id</code>属性有几个好处：您可以使用<code>id</code>来设置单个元素的样式，稍后您将学习如何使用它来使用JavaScript选择和修改特定元素。 <code>id</code>属性应该是唯一的。浏览器不会强制执行此操作，但这是广泛认可的最佳实践。所以请不要给多个元素赋予相同的<code>id</code>属性。这里有一个例子，说明如何为你的<code>h2</code>元素提供<code>cat-photo-app</code> <code><h2 id="cat-photo-app"></code> ： <code><h2 id="cat-photo-app"></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为<code>form</code>元素添加id <code>cat-photo-form</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 为<code>form</code>元素添加<code>cat-photo-form</code>的id。
|
||||
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
.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">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,97 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdf08812
|
||||
title: Size Your Images
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 调整图像大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS有一个名为<code>width</code>的属性，用于控制元素的宽度。就像字体一样，我们将使用<code>px</code> （像素）来指定图像的宽度。例如，如果我们想要创建一个名为<code>larger-image</code>的CSS类，它给HTML元素的宽度为500像素，我们将使用： <blockquote> <风格> <br> .larger-image { <br>宽度：500px; <br> } <br> </样式> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个名为<code>smaller-image</code>的类，并使用它来调整图像大小，使其只有100像素宽。 <strong>注意</strong> <br>由于浏览器实现的差异，您可能需要100％缩放才能通过此挑战的测试。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的<code>img</code>元素应该具有<code>smaller-image</code>类。
|
||||
testString: 'assert($("img[src="https://bit.ly/fcc-relaxing-cat"]").attr("class") === "smaller-image", "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
|
||||
- text: 您的图片应为100像素宽。浏览器缩放应为100％。
|
||||
testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");'
|
||||
|
||||
```
|
||||
|
||||
</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">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user