fix(i18n): update Chinese translation of applied visual design (#37918)

This commit is contained in:
ZhichengChen
2020-02-11 15:46:34 +08:00
committed by GitHub
parent 4f32fedb8e
commit 5eed674c3a
52 changed files with 1291 additions and 735 deletions

View File

@ -2,25 +2,46 @@
id: 587d781b367417b2b2512abe
title: Add a box-shadow to a Card-like Element
challengeType: 0
videoUrl: ''
localeTitle: 将盒子阴影添加到类似卡片的元素
videoUrl: 'https://scrimba.com/c/cvVZdUd'
forumTopicId: 301031
localeTitle: 给卡片元素添加 box-shadow
---
## 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-shadow0 10px 20px rgba0,0,0,0.190 6px 6px rgba0,0,0,0.23; </blockquote></section>
<section id='description'>
<code>box-shadow</code> 属性用来给元素添加阴影,该属性值是由逗号分隔的一个或多个阴影列表。
<code>box-shadow</code> 属性的阴影依次由下面这些值描述:
<ul>
<li><code>offset-x</code> 阴影的水平偏移量;</li>
<li><code>offset-y</code> 阴影的垂直偏移量;</li>
<li><code>blur-radius</code> 模糊半径;</li>
<li><code>spread-radius</code> 阴影扩展半径;</li>
<li>颜色。</li>
</ul>
其中 <code>blur-radius</code><code>spread-radius</code> 是可选的。
可以通过逗号分隔每个 <code>box-shadow</code> 元素的属性来添加多个 box-shadow。
如下为添加了模糊效果的例子,它使用了透明度较高的黑色作为阴影:
```css
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
```
</section>
## Instructions
<section id="instructions">该元素现在具有<code>thumbnail</code> ID。使用此选择器使用上面的示例CSS值在卡上放置一个<code>box-shadow</code></section>
<section id='instructions'>
现在该卡片添加了值为 <code>thumbnail</code> 的 id 属性。把上面的 <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.");'
- text: '你应该给 id 为 <code>thumbnail</code> 的元素添加 <code>box-shadow</code> 属性。'
testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), '你应该给 id 为 <code>thumbnail</code> 的元素添加 <code> box-shadow</code> 属性。');
- text: '<code>box-shadow</code> 值应该是指定的 CSS 值。'
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), ''<code>box-shadow</code> 值应该是指定的 CSS 值。'');'
```
@ -46,9 +67,9 @@ tests:
text-align: left;
color: black;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
@ -68,15 +89,14 @@ tests:
<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>
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -88,7 +108,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,27 +2,36 @@
id: 587d781b367417b2b2512abc
title: Adjust the background-color Property of Text
challengeType: 0
videoUrl: ''
localeTitle: 调整文本的背景颜色属性
videoUrl: 'https://scrimba.com/c/cEDqwA6'
forumTopicId: 301032
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>
<section id='description'>
为了让页面更美观,除了设置整个页面的背景色以及文字颜色外,你还可以单独设置文字的背景色,即在文字的父元素上添加 <code>background-color</code> 属性。在本挑战里我们将使用 <code>rgba()</code> 颜色,而不是之前学到的 <code>hex</code> 编码或者 <code>rgb()</code> 颜色。
<blockquote>rgba 代表:<br>&nbsp;&nbsp;r = red 红色<br>&nbsp;&nbsp;g = green 绿色<br>&nbsp;&nbsp;b = blue 蓝色<br>&nbsp;&nbsp;a = alpha 透明度</blockquote>
RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间,其中 0 代表完全透明1 代表完全不透明。<code>rgba()</code> 非常棒,因为你可以设置颜色的透明度,这意味着你可以做出一些很漂亮的半透明效果。
在本挑战里你将会用到这个代码 <code>background-color: rgba(45, 45, 45, 0.1)</code>。它表示背景是黑灰色,因为设置了透明度为 0.1,所以几乎是透明的。
</section>
## 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>
<section id='instructions'>
为了让文字更醒目,设置 <code>h4</code> 元素的 <code>background-color</code> 属性值为上面指定的 <code>rgba()</code>
同时移除 <code>h4</code><code>height</code> 属性,并添加 <code>padding</code> 属性,值为 10px。
</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.");'
- text: '你应该给 <code>h4</code> 元素添加一个 <code>background-color</code> 属性并且赋值 <code>rgba(45, 45, 45, 0.1)</code>。'
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), ''你应该给 <code>h4</code> 元素添加一个 <code>background-color</code> 属性并且赋值 <code>rgba(45, 45, 45, 0.1)</code>。'');'
- text: '你应该给 <code>h4</code> 元素添加一个 <code>padding</code> 属性并且赋值 <code>10px</code>。'
testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', '你应该给 <code>h4</code> 元素添加一个 <code>padding</code> 属性并且赋值 <code>10px</code>。');
- text: '<code>h4</code> 元素的 <code>height</code> 属性应该被移除。'
testString: assert(!($('h4').css('height') == '25px'), '<code>h4</code> 元素的 <code>height</code> 属性应该被移除。');
```
@ -38,8 +47,8 @@ tests:
h4 {
text-align: center;
height: 25px;
}
p {
text-align: justify;
@ -67,15 +76,14 @@ tests:
<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>
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -87,7 +95,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,29 +2,34 @@
id: 587d78a4367417b2b2512ad3
title: Adjust the Color of Various Elements to Complementary Colors
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/cWmPpud'
forumTopicId: 301033
localeTitle: 将各种元素的颜色调整为互补色
---
## Description
<section id="description">互补色挑战表明,色轮上的相反颜色可以使并排放置时彼此显得更加生动。然而,如果在网站上过度使用,强烈的视觉对比可能会很刺耳,如果将文本置于互补色背景上,有时可能会使文本难以阅读。在实践中,其中一种颜色通常占主导地位,补充用于将视觉注意力集中在页面上的某些内容上。 </section>
<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>
<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.");'
- text: '<code>header</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。'
testString: assert($('header').css('background-color') == 'rgb(9, 167, 161)', '<code>header</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。');
- text: '<code>footer</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code>CSS 属性。'
testString: assert($('footer').css('background-color') == 'rgb(9, 167, 161)', '<code>footer</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>background-color</code> CSS 属性。');
- text: '<code>h2</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>color</code> CSS 属性。'
testString: assert($('h2').css('color') == 'rgb(9, 167, 161)', '<code>h2</code> 元素应该有一个值为 <code>#09A7A1</code> 的 <code>color</code> CSS 属性。');
- text: '<code>button</code> 元素应该有一个值为 <code>#FF790E</code> 的 <code>background-color</code> CSS 属性。'
testString: assert($('button').css('background-color') == 'rgb(255, 121, 14)', '<code>button</code> 元素应该有一个值为 <code>#FF790E</code> 的 <code>background-color</code> CSS 属性。');
```
@ -58,23 +63,22 @@ tests:
}
</style>
<header>
<h1>Cooking with FCC!</h1>
<h1>freeCodeCamp 中国</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>
<h2>freeCodeCamp 成都社区</h2>
<p>【freeCodeCamp 成都社区】是一个非营利性的公益性技术社区,由一群编程技术爱好者利用业余时间搭建的一个友好的交流、学习、互助的平台,帮助开发者、技术爱好者提升个人技术能力,同时帮助企业解决人才问题。</p>
<button><a href="https://freecodecamp-chengdu.github.io/" target="_blank">更多</a></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>
<h2>freeCodeCamp 深圳社区</h2>
<p>【freeCodeCamp 深圳社区】面向深圳所有有意学习编程、热爱编程、甚至想要通过编程找到一份好工作的学生和社会群众,传承 freeCodeCamp 中文社区的主旨思想,倡导人人皆可编程。</p>
<button><a href="https://freecodecamp-shenzhen.github.io/" target="_blank">更多</a></button>
</article>
</main>
<br>
<footer>&copy; 2018 FCC Kitchen</footer>
<footer>&copy;2020 freeCodeCamp 中国</footer>
```
</div>
@ -86,7 +90,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,36 @@
id: 587d7791367417b2b2512ab5
title: Adjust the Height of an Element Using the height Property
challengeType: 0
videoUrl: ''
localeTitle: 使用height属性调整元素的高度
videoUrl: 'https://scrimba.com/c/cEDaDTN'
forumTopicId: 301034
localeTitle: 使用 height 属性调整元素的宽度
---
## Description
<section id="description">您可以使用CSS中的<code>height</code>属性指定元素的<code>height</code> ,类似于<code>width</code>属性。这是一个将图像高度更改为20px的示例 <blockquote> img { <br>身高20px; <br> } </blockquote></section>
<section id='description'>
<code>width</code> 属性类似,你可以使用 CSS 里面的 <code>height</code> 属性来指定元素的高度。下面这个例子把图片的高度设置为 20px
```css
img {
height: 20px;
}
```
</section>
## Instructions
<section id="instructions"><code>height</code>属性添加到<code>h4</code>标记并将其设置为25px。 </section>
<section id='instructions'>
<code>h4</code> 标签添加 <code>height</code> 属性并设置值为 25px。
<strong>注意:</strong> 可能需要将浏览器的缩放比调整为 100% 才能通过这一挑战。
</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.");'
- text: '你应该设置 <code>h4</code> <code>height</code> 属性,使其值为 <code>25px</code>。'
testString: assert($('h4').css('height') == '25px', '你应该设置 <code>h4</code> <code>height</code> 属性,使其值为 <code>25px</code>。');
```
@ -33,7 +46,7 @@ tests:
<style>
h4 {
text-align: center;
}
p {
text-align: justify;
@ -57,15 +70,14 @@ tests:
<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>
<p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</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>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -77,7 +89,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,38 @@
id: 587d781d367417b2b2512ac8
title: Adjust the Hover State of an Anchor Tag
challengeType: 0
videoUrl: ''
localeTitle: 调整锚标记的悬停状态
videoUrl: 'https://scrimba.com/c/cakRGcm'
forumTopicId: 301035
localeTitle: 调整锚点的悬停状态
---
## Description
<section id="description">这个挑战将涉及伪类的使用。伪类是可以添加到选择器的关键字,以便选择元素的特定状态。例如,可以使用<code>:hover</code>伪类选择器更改锚标记的样式以用于其悬停状态。这是用于在悬停状态期间将锚标记的<code>color</code>更改为红色的CSS <blockquote> a悬停{ <br>红色; <br> } </blockquote></section>
<section id='description'>
本挑战将要涉及到伪类。伪类是可以添加到选择器上的关键字,用来选择元素的指定状态。
比如,超链接可以使用 <code>:hover</code> 伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS
```css
a:hover {
color: red;
}
```
</section>
## Instructions
<section id="instructions">代码编辑器有一个CSS规则样式的所有<code>a</code>标签黑色。加入规则,以便当用户将鼠标悬停在<code>a</code>标签时, <code>color</code>是蓝色。 </section>
<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.");'
- text: '超链接的 <code>color</code> 应该保持黑色,只添加 <code>:hover</code> CSS 规则。'
testString: 'assert($(''a'').css(''color'') == ''rgb(0, 0, 0)'', ''超链接的 <code>color</code> 应该保持黑色,只添加 <code>:hover</code> CSS 规则。'');'
- text: '悬停超链接时超链接 <code>color</code> 应该变成蓝色。'
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), ''悬停超链接时超链接 <code>color</code> 应该变成蓝色。'');'
```
@ -36,12 +49,11 @@ tests:
a {
color: #000;
}
</style>
<a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
<a href="http://freecatphotoapp.com/" target="_blank">猫咪相册 App</a>
```
</div>
@ -53,7 +65,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,33 +2,43 @@
id: 587d78a4367417b2b2512ad4
title: Adjust the Hue of a Color
challengeType: 0
videoUrl: ''
localeTitle: 调整颜色的色调
videoUrl: 'https://scrimba.com/c/cPp38TZ'
forumTopicId: 301036
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> hsl0,10050 </td></tr><tr><td>黄色</td><td> hsl60,10050 </td></tr><tr><td>绿色</td><td> hsl120,10050 </td></tr><tr><td>青色</td><td> hsl18010050 </td></tr><tr><td>蓝色</td><td> hsl240,10050 </td></tr><tr><td>品红</td><td> hsl300,10050 </td></tr></tbody></table></section>
<section id='description'>
HSL 色彩空间模型是一种将 RGB 色彩模型中的点放在圆柱坐标系中的表示法描述了色相hue、饱和度saturation、亮度lightness。CSS3 引入了对应的 <code>hsl()</code> 属性做为对应的颜色描述方式。
<b>色相</b>是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。以颜色光谱为例,光谱左边从红色开始,移动到中间的绿色,一直到右边的蓝色,色相值就是沿着这条线的取值。在 <code>hsl()</code> 里面,色相用色环来代替光谱,色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。
<b>饱和度</b>是指色彩的纯度也就是颜色里灰色的占比越高色彩越纯低则逐渐变灰取0-100%的数值。
<b>亮度</b>决定颜色的明暗程度也就是颜色里白色或者黑色的占比100% 亮度是白色, 0% 亮度是黑色,而 50% 亮度是“一般的”。
下面是一些使用 <code>hsl()</code> 描述颜色的例子,颜色都为满饱和度,中等亮度:
<table class="table table-striped"><thead><tr><th>颜色</th><th>HSL</th></tr></thead><tbody><tr><td></td><td>hsl(0, 100%, 50%)</td></tr><tr><td></td><td>hsl(60, 100%, 50%)</td></tr><tr><td>绿</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>蓝绿</td><td>hsl(180, 100%, 50%)</td></tr><tr><td></td><td>hsl(240, 100%, 50%)</td></tr><tr><td>品红</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
</section>
## Instructions
<section id="instructions">使用<code>hsl()</code>根据类名( <code>green</code> <code>cyan</code><code>blue</code> )更改每个<code>div</code>元素的<code>background-color</code> 。这三个都应该具有完全饱和度和正常亮度。 </section>
<section id='instructions'>
把 class 为 <code>green</code><code>cyan</code><code> blue </code> <code>div</code><code>background-color</code> 使用 <code>hsl()</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.");'
- text: '你应该使用 <code>hsl()</code> 属性来表示绿色。'
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 <code>hsl()</code> 属性来表示绿色。'');'
- text: '你应该使用 <code>hsl()</code> 属性来表示蓝绿色。'
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 <code>hsl()</code> 属性来表示蓝绿色。'');'
- text: '你应该使用 <code>hsl()</code> 属性来表示蓝色。'
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), ''你应该使用 <code>hsl()</code> 属性来表示蓝色。'');'
- text: 'class 为 <code>green</code><code>div</code> 应该有绿色的 <code>background-color</code> CSS 属性。'
testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'class <code>green</code> 的 <code>div</code> 应该有绿色的 <code>background-color</code> CSS 属性。');
- text: 'class 为 <code>cyan</code><code>div</code> 应该有蓝绿色的 <code>background-color</code> CSS 属性。'
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 <code>cyan</code> <code>div</code> 应该有蓝绿色的 <code>background-color</code> CSS 属性。');
- text: 'class 为 <code>blue</code><code>div</code> 应该有蓝色的 <code>background-color</code> CSS 属性。'
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 <code>cyan</code> <code>div</code> 应该有蓝色的 <code>background-color</code> CSS 属性。');
```
@ -44,30 +54,29 @@ tests:
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>
@ -79,7 +88,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,28 @@
id: 587d781b367417b2b2512abd
title: Adjust the Size of a Header Versus a Paragraph Tag
challengeType: 0
videoUrl: ''
localeTitle: 调整标题的大小与段落标记
videoUrl: 'https://scrimba.com/c/c3bRPTz'
forumTopicId: 301037
localeTitle: 调整标题与段落的大小
---
## Description
<section id="description">标题标记( <code>h1</code><code>h6</code> )的字体大小通常应大于段落标记的字体大小。这使用户更容易在视觉上理解页面上所有内容的布局和重要性级别。您可以使用<code>font-size</code>属性调整元素中文本的大小。 </section>
<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>
<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.");'
- text: '你应该给 <code>h4</code> 元素添加一个 <code>font-size</code> 属性并且赋值 <code>27px</code>。'
testString: assert($('h4').css('font-size') == '27px', '你应该给 <code>h4</code> 元素添加一个 <code>font-size</code> 属性并且赋值 <code>27px</code>。');
```
@ -35,7 +40,7 @@ tests:
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
}
p {
text-align: justify;
@ -63,15 +68,14 @@ tests:
<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>
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -83,7 +87,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,28 @@
id: 587d78a4367417b2b2512ad5
title: Adjust the Tone of a Color
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/cEDJvT7'
forumTopicId: 301038
localeTitle: 调整颜色的色调
---
## Description
<section id="description"> CSS中的<code>hsl()</code>选项还可以轻松调整颜色的色调。混合白色和纯净的色调会产生这种颜色的色调,添加黑色会产生阴影。或者,通过添加灰色或通过着色和着色来产生色调。回想一下, <code>hsl()</code>&#39;s&#39;&#39;l&#39;分别代表饱和度和亮度。饱和度百分比会改变灰度,亮度百分比决定颜色中白色或黑色的含量。当您拥有自己喜欢的基色调时,这很有用,但需要不同的变体。 </section>
<section id='description'>
<code>hsl()</code> 使 CSS 更改色调更方便。给纯色添加白色可以创造更浅的色调,添加黑色可以创造更深的色调。另外,还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 <code>hsl()</code> 里面的 sl 分辨代表饱和度和亮度。饱和度代表灰色的占比,亮度代表白色和黑色的占比。这在当你有了一个基色调却需要微调时非常有用。
</section>
## Instructions
<section id="instructions">此站点上的导航栏当前从<code>header</code>元素继承其<code>background-color</code> 。从该颜色作为基础开始,为<code>nav</code>元素添加<code>background-color</code> 使其使用相同的青色色调但具有80饱和度和25亮度值以改变其色调和阴影。 </section>
<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.");'
- text: '<code>nav</code> 元素应该有一个使用 <code>hsl()</code> 属性调节蓝绿色调的 <code>background-color</code> CSS 属性。'
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), ''<code>nav</code> 元素应该有一个使用 <code>hsl()</code> 调节蓝绿色调的 <code>background-color</code> CSS 属性。'');'
```
@ -35,43 +40,44 @@ tests:
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>
<h1>FCC 中国</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Contact</a></li>
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">论坛</a></li>
<li><a href="">新闻</a></li>
<li><a href="">设置</a></li>
</ul>
</nav>
</header>
```
</div>
@ -83,7 +89,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,35 @@
id: 587d7791367417b2b2512ab4
title: Adjust the Width of an Element Using the width Property
challengeType: 0
videoUrl: ''
localeTitle: 使用width属性调整元素的宽度
videoUrl: 'https://scrimba.com/c/cvVLPtN'
forumTopicId: 301039
localeTitle: 使用 width 属性调整元素的宽度
---
## Description
<section id="description">您可以使用CSS中的<code>width</code>属性指定元素的<code>width</code> 。值可以以相对长度单位例如em绝对长度单位例如px或其包含的父元素的百分比给出。这是一个将图像宽度更改为220px的示例 <blockquote> img { <br>宽度220px; <br> } </blockquote></section>
<section id='description'>
你可以使用 CSS 里面的 <code>width</code> 属性来指定元素的宽度。属性值可以是相对单位(比如 em绝对单位比如 px或者包含块父元素宽度的百分比。下面这个例子把图片的宽度设置为 220px
```css
img {
width: 220px;
}
```
</section>
## Instructions
<section id="instructions"><code>width</code>属性添加到整个卡并将其设置为绝对值245px。使用<code>fullCard</code>类选择元素。 </section>
<section id='instructions'>
给卡片添加 <code>width</code> 属性,设置它的宽度为 245px。使用 <code>fullCard</code> class 来选择元素。
</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.");'
- text: '你应该使用 <code>fullCard</code> class 选择器将卡片的 <code>width</code> 宽度属性更改为 <code>245px</code>。'
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), ''你应该使用 <code>fullCard</code> class 选择器将卡片的 <code>width</code> 宽度属性更改为 <code>245px</code>。'');'
```
@ -42,7 +54,7 @@ tests:
text-align: left;
}
.fullCard {
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
@ -56,15 +68,14 @@ tests:
<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>
<p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</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>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -76,7 +87,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,29 @@
id: 587d78a8367417b2b2512ae5
title: Animate Elements at Variable Rates
challengeType: 0
videoUrl: ''
localeTitle: 以可变速率动画元素
videoUrl: 'https://scrimba.com/c/cZ89WA4'
forumTopicId: 301040
localeTitle: 以可变速率来给元素添加动画
---
## Description
<section id="description">有多种方法可以改变类似动画元素的动画速率。到目前为止,这是通过应用<code>animation-iteration-count</code>属性和设置<code>@keyframes</code>规则来实现的。为了说明,右侧的动画由两个“星星”组成,每个“星星”的大小和不透明度在<code>@keyframes</code>规则中的20标记处<code>@keyframes</code> ,从而创建闪烁动画。您可以更改其中一个元素的<code>@keyframes</code>规则,以便星星以不同的速率闪烁。 </section>
<section id='description'>
改变相似元素的动画频率的方法有很多。目前接触到的就有 <code>animation-iteration-count</code><code>@keyframes</code>
举例说明,右边的动画包含了两个小星星,每个小星星都在 20% <code>@keyframes</code> 处变小并且 opacity 变为 20%,也就是一闪一闪的动画效果。你可以通过改变其中一个星星的 <code>@keyframes</code> 规则以使两个小星星以不同的频率闪烁。
</section>
## Instructions
<section id="instructions">通过将其<code>@keyframes</code>规则更改为50更改类名为<code>star-1</code>的元素的动画速率。 </section>
<section id='instructions'>
通过改变 class 为 <code>star-1</code> 的元素的 <code>@keyframes</code> 为 50% 以改变其动画频率。
</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%.");'
- text: '<code>star-1</code> class 的 <code>@keyframes</code> 规则应为50%。'
testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g), '<code>star-1</code>class 的 <code>@keyframes</code> 规则应该为50%。');
```
@ -40,7 +46,7 @@ tests:
}
.star-1 {
margin-top: 15%;
margin-top: 15%;
margin-left: 60%;
animation-name: twinkle-1;
animation-duration: 1s;
@ -82,7 +88,6 @@ tests:
<div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
```
</div>
@ -94,7 +99,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,30 @@
id: 587d78a8367417b2b2512ae3
title: Animate Elements Continually Using an Infinite Animation Count
challengeType: 0
videoUrl: ''
localeTitle: 动画元素不断使用无限动画计数
videoUrl: 'https://scrimba.com/c/cVJDVfq'
forumTopicId: 301041
localeTitle: 使用无限的动画计数制作永不停止的动画
---
## Description
<section id="description">之前的挑战涉及如何使用某些动画属性和<code>@keyframes</code>规则。另一个动画属性是<code>animation-iteration-count</code> ,它允许您控制循环动画的次数。这是一个例子: <code>animation-iteration-count: 3;</code>在这种情况下动画将在运行3次后停止但可以通过将该值设置为无限来使动画连续运行。 </section>
<section id='description'>
之前的关卡里介绍了一些动画属性以及 <code>@keyframes</code> 规则的用法。还有一个常用的动画属性是 <code>animation-iteration-count</code>,这个属性允许你控制动画循环的次数。下面是一个例子:
<code>animation-iteration-count: 3;</code>
在这里动画会在运行 3 次后停止,如果想让动画一直运行,可以把值设置成 infinite。
</section>
## Instructions
<section id="instructions">要使球在连续循环中保持在右侧弹跳,请将<code>animation-iteration-count</code>属性更改为无限。 </section>
<section id='instructions'>
<code>animation-iteration-count</code> 属性改成 infinite以使右边的球持续跳跃。
</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.");'
- text: '<code>animation-iteration-count</code> 属性值应该为 infinite。'
testString: assert($('#ball').css('animation-iteration-count') == 'infinite', '<code>animation-iteration-count</code> 属性值应该为 infinite。');
```
@ -63,7 +70,6 @@ tests:
}
</style>
<div id="ball"></div>
```
</div>
@ -75,7 +81,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,27 +2,33 @@
id: 587d78a8367417b2b2512ae6
title: Animate Multiple Elements at Variable Rates
challengeType: 0
videoUrl: ''
localeTitle: 以可变速率动画多个元素
videoUrl: 'https://scrimba.com/c/cnpWZc9'
forumTopicId: 301042
localeTitle: 以可变速率来给多个元素添加动画
---
## Description
<section id="description">在之前的挑战中,您通过更改其<code>@keyframes</code>规则来更改两个相似动画元素的动画速率。您可以通过操纵多个元素的<code>animation-duration</code>来实现相同的目标。在代码编辑器中运行的动画中,天空中有三个“星星”在连续循环中以相同的速率闪烁。要使它们以不同的速率闪烁,可以将<code>animation-duration</code>属性设置为每个元素的不同值。 </section>
<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>设置为1s0.9s和1.1s。 </section>
<section id='instructions'>
依次设置 class 为 <code>star-1</code><code>star-2</code><code>star-3</code><code>animation-duration</code> 为 1s、0.9s、1.1s。
</section>
## 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.");'
- text: 'class 为 <code>star-1</code><code>animation-duration</code> 属性值应该 1s。'
testString: assert($('.star-1').css('animation-duration') == '1s', 'class <code>star-1</code> 的 <code>animation-duration</code> 属性值应该 1s。');
- text: 'class 为 <code>star-2</code><code>animation-duration</code> 属性值应该 0.9s。'
testString: assert($('.star-2').css('animation-duration') == '0.9s', 'class 为 <code>star-2</code> 的 <code>animation-duration</code> 属性值应该 0.9s。');
- text: 'class 为 <code>star-3</code><code>animation-duration</code> 属性值应该 1.1s。'
testString: assert($('.star-3').css('animation-duration') == '1.1s', 'class 为 <code>star-3</code> 的 <code>animation-duration</code> 属性值应该 1.1s。');
```
@ -44,7 +50,7 @@ tests:
}
.star-1 {
margin-top: 15%;
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;
@ -87,7 +93,6 @@ tests:
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>
```
</div>
@ -99,7 +104,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,29 @@
id: 587d78a3367417b2b2512ad0
title: Center an Element Horizontally Using the margin Property
challengeType: 0
videoUrl: ''
localeTitle: 使用margin属性水平居中元素
videoUrl: 'https://scrimba.com/c/cyLJqU4'
forumTopicId: 301043
localeTitle: 使用 margin 属性将元素水平居中
---
## Description
<section id="description">另一种定位技术是将块元素水平居中。一种方法是将其<code>margin</code>设置为auto值。此方法也适用于图像。默认情况下图像是内联元素但在将<code>display</code>属性设置为block时可以更改为块元素。 </section>
<section id='description'>
在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的 <code>margin</code> 值设置为 <code>auto</code>
同样的,这个方法也对图片奏效。图片默认是内联元素,但是可以通过设置其 <code>display</code> 属性为 <code>block</code>来把它变成块级元素。
</section>
## Instructions
<section id="instructions">居中的<code>div</code>通过添加在页面上<code>margin</code>属性与汽车的价值。 </section>
<section id='instructions'>
通过给页面中的 <code>div</code> 添加值为 <code>auto</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.");'
- text: '<code>div</code><code>margin</code> 应该为 <code>auto</code>。'
testString: 'assert(code.match(/margin:\s*?auto;/g), ''<code>div</code> <code>margin</code> 应该为 <code>auto</code>。'');'
```
@ -35,11 +41,10 @@ tests:
background-color: blue;
height: 100px;
width: 100px;
}
</style>
<div></div>
```
</div>
@ -51,7 +56,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,41 @@
id: 587d781e367417b2b2512ac9
title: Change an Element's Relative Position
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/czVmMtZ'
forumTopicId: 301044
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>
<section id='description'>
在 CSS 里一切 HTML 元素皆为盒子,也就是通常所说的 <code>盒模型</code>。块级元素自动从新的一行开始(比如标题、段落以及 div行内元素排列在上一个元素后比如图片以及 span。元素默认按照这种方式布局称为文档的 <code>普通流</code>,同时 CSS 提供了 position 属性来覆盖它。
当元素的 position 设置为 <code>relative</code> 时,它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是 <code>left</code><code>right</code><code>top</code><code>bottom</code>。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems。下面的例子展示了段落向上偏移 10 像素:
```css
p {
position: relative;
bottom: 10px;
}
```
把元素的 position 设置成 relative 并不会改变该元素在普通流布局所占的位置,也不会对其它元素的位置产生影响。
<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>
<section id='instructions'>
<code>h2</code><code>position</code> 设置成 <code>relative</code>,使用相应的 CSS 属性调整 <code>h2</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.");'
- text: '<code>h2</code> 元素应该添加 <code>position</code> 属性并赋值 <code>relative</code>。'
testString: assert($('h2').css('position') == 'relative', '<code>h2</code> 元素应该添加<code>position</code> 属性并赋值 <code>relative</code>。');
- text: '你应该使用 CSS 属性调整 <code>h2</code> 的位置使其从原来的位置向下偏移 <code>15px</code>。'
testString: assert($('h2').css('top') == '15px', '你应该使用 CSS 属性调整 <code>h2</code> 的位置使其从原来的位置向下偏移 <code>15px</code>。');
```
@ -34,16 +50,15 @@ tests:
```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>
<h1>论如何优雅定位</h1>
<h2>我要离 h1 远一点!</h2>
<p>我觉得 h2 没变,还是在它原来的位置,相离莫相忘,且行且珍惜。</p>
</body>
```
</div>
@ -55,7 +70,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,31 @@
id: 587d78a8367417b2b2512ae7
title: Change Animation Timing with Keywords
challengeType: 0
videoUrl: ''
localeTitle: 使用关键字更改动画计时
videoUrl: 'https://scrimba.com/c/cJKvwCM'
forumTopicId: 301045
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>
<section id='description'>
在 CSS 动画里,<code>animation-timing-function</code> 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。如果要描述的动画是一辆车在指定时间内(<code>animation-duration</code>)从 A 运动到 B那么 <code>animation-timing-function</code> 表述的就是车在运动中的加速和减速等过程。
已经有了很多预定义的值可以直接使用于大部分场景。比如,默认的值是 <code>ease</code>,动画以低速开始,然后加快,在结束前变慢。其它常用的值包括 <code>ease-out</code>,动画以高速开始,以低速结束;<code>ease-in</code>,动画以低速开始,以高速结束;<code>linear</code>,动画从头到尾的速度是相同的。
</section>
## 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>
<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.");'
- text: 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 linear。'
testString: assert($('#ball1').css('animation-timing-function') == 'linear', 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 linear。');
- text: 'id 为 <code>ball2</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 ease-out。'
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 <code>ball2</code> 的元素的 <code>animation-timing-function</code> 属性值应该为 ease-out。');
```
@ -41,7 +47,7 @@ tests:
#ccffff,
#ffcccc
);
position: fixed;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
@ -49,29 +55,28 @@ tests:
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
#ball1 {
left:27%;
}
#ball2 {
#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>
@ -83,7 +88,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,28 @@
id: 587d78a3367417b2b2512acf
title: Change the Position of Overlapping Elements with the z-index Property
challengeType: 0
videoUrl: ''
localeTitle: 使用z-index属性更改重叠元素的位置
videoUrl: 'https://scrimba.com/c/cM94aHk'
forumTopicId: 301046
localeTitle: 使用 z-index 属性更改重叠元素的位置
---
## Description
<section id="description">当元素定位为重叠时默认情况下HTML标记中稍后出现的元素将显示在其他元素的顶部。但是 <code>z-index</code>属性可以指定元素彼此堆叠的顺序。它必须是整数(即整数而不是小数),并且元素的<code>z-index</code>属性的较高值会使其在堆栈中的移动值高于具有较低值的值。 </section>
<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>
<section id='instructions'>
给 class 为 <code>first</code> 的元素(红色的方块)添加 <code>z-index</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.");'
- text: 'class 为 <code>first</code> 的元素的 <code>z-index</code> 值应该为 2。'
testString: assert($('.first').css('z-index') == '2', 'class <code>first</code> 的元素的 <code>z-index</code> 值应该为 2。');
```
@ -36,11 +41,11 @@ tests:
height: 200px;
margin-top: 20px;
}
.first {
background-color: red;
position: absolute;
}
.second {
background-color: blue;
@ -53,7 +58,6 @@ tests:
<div class="first"></div>
<div class="second"></div>
```
</div>
@ -65,7 +69,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,33 @@
id: 587d78a5367417b2b2512ad6
title: Create a Gradual CSS Linear Gradient
challengeType: 0
videoUrl: ''
localeTitle: 创建渐进的CSS线性渐变
videoUrl: 'https://scrimba.com/c/cg4dpt9'
forumTopicId: 301047
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>
<section id='description'>
HTML 元素的背景色并不局限于单色。CSS 还提供了颜色过渡,也就是渐变。可以通过 <code>background</code> 里面的 <code>linear-gradient()</code> 来实现线性渐变,下面是它的语法:
<code>background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 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>
<section id='instructions'>
使用 <code>linear-gradient()</code><code>div</code> 添加 <code>background</code> 渐变色,渐变角度 35deg<code>#CCFFFF</code> 过渡到 <code>#FFCCCC</code>
<strong>注意</strong><br>有很多种方式指定颜色值,如 <code>rgb()</code> 或者 <code>hsl()</code>。在本关里请使用 hex 颜色码。
</section>
## 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.");'
- 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), ''<code>div</code> 元素应该有一个指定方向和颜色的 <code>linear-gradient</code> <code>background</code> 渐变色。'');'
```
@ -31,19 +41,17 @@ tests:
```html
<style>
div{
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}
</style>
<div></div>
```
</div>
@ -55,7 +63,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,27 +2,36 @@
id: 587d78a6367417b2b2512add
title: Create a Graphic Using CSS
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS创建图形
videoUrl: 'https://scrimba.com/c/cEDWPs6'
forumTopicId: 301048
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>
<section id='description'>
术语表blur-radius => 模糊半径spread-radius => 辐射半径transparent => 透明的border-radius => 圆角边框。
通过使用选择器选择不同的元素并改变其属性,你可以创造一些有趣的形状。比如新月。你可以使用 <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>
<section id='instructions'>
把编辑器里的正方形元素变成新月形状。首先,把 <code>background-color</code> 改为 transparent接着把 <code>border-radius</code> 属性设置成 50%,以创建一个圆形。最后,更改 <code>box-shadow</code> 属性,使其 <code>offset-x</code> 为 25px<code>offset-y</code> 为 10px<code>blur-radius</code> 为 0<code>spread-radius</code> 为 0<code>color</code> 为 blue。
</section>
## 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.");'
- text: '<code>background-color</code> 属性应该取值 <code>transparent</code>。'
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), ''<code>background-color</code> 属性应该取值 <code>transparent</code>。'');'
- text: '<code>border-radius</code> 属性应该取值 <code>50%</code>。'
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), ''<code>border-radius</code>属性应该取值<code>50%</code>。'');'
- text: '<code>box-shadow</code> 属性的 <code>offset-x</code><code>offset-y</code><code>blur-radius</code><code>spread-radius</code> 和 <code>color</code> 应该依次取值<code>25px</code>、<code>10px</code>、<code>0</code>、<code>0</code> 和 <code>blue</code>。'
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), ''<code>box-shadow</code> 属性的 <code>offset-x</code><code>offset-y</code><code>blur-radius</code><code>spread-radius</code> 和 <code>color</code> 应该依次取值<code>25px</code>、<code>10px</code>、<code>0</code>、<code>0</code> 和 <code>blue</code>。'');'
```
@ -35,8 +44,7 @@ tests:
```html
<style>
.center
{
.center{
position: absolute;
margin: auto;
top: 0;
@ -47,12 +55,11 @@ tests:
height: 100px;
background-color: blue;
border-radius: 0px;
box-shadow: 25px 10px 10px 10px green;
box-shadow: 25px 10px 10px 10px green;
}
</style>
<div class="center"></div>
```
</div>
@ -64,7 +71,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,32 @@
id: 587d781b367417b2b2512abb
title: Create a Horizontal Line Using the hr Element
challengeType: 0
videoUrl: ''
localeTitle: 使用hr元素创建水平线
videoUrl: 'https://scrimba.com/c/c3bR8t7'
forumTopicId: 301049
localeTitle: 使用 hr 标签创建水平线
---
## Description
<section id="description">您可以使用<code>hr</code>标记在其包含元素的宽度上添加水平线。这可用于定义主题更改或直观地分隔内容组。 </section>
<section id='description'>
术语Horizontal Rule => hr => 水平线。
你可以用 <code>hr</code> 标签来创建一条宽度撑满父元素的水平线。它一般用来表示文档主题的改变,在视觉上将文档分隔成几个部分。
</section>
## Instructions
<section id="instructions"><code>h4</code>下面添加一个<code>hr</code>标签,其中包含卡片标题。 <strong>注意</strong> <br>在HTML中 <code>hr</code>是一个自动关闭标记,因此不需要单独的结束标记。 </section>
<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.");'
- text: '你应该添加一个 <code>hr</code> 标签。'
testString: assert($('hr').length == 1, '你应该添加一个 <code>hr</code> 标签。');
- text: '<code>hr</code> 标签应该在标题和段落之间。'
testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), '<code>hr</code> 标签应该在标题和段落之间。');
```
@ -63,15 +70,14 @@ tests:
<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>
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -83,7 +89,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,29 +2,52 @@
id: 587d78a6367417b2b2512ade
title: Create a More Complex Shape Using CSS and HTML
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS和HTML创建更复杂的形状
videoUrl: 'https://scrimba.com/c/cPpz4fr'
forumTopicId: 301050
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-radius25; <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>
<section id='description'>
世界上最流行的形状非心形莫属了,在本关里你将用纯 CSS 创建一个心形。但是首先你需要了解 <code>::before</code><code>::after</code> 伪类。这些伪类用来在选择元素之前和之后添加一些内容。在下面的例子里,<code>::before</code> 伪类元素用来给 class 为 <code>heart</code> 的元素添加一个正方形。
```css
.heart::before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
```
<code>::before</code><code>::after</code> 必须配合 <code>content</code> 来使用。这个属性通常用来给元素添加内容诸如图片或者文字。当 <code>::before</code><code>::after</code>伪类用来添加某些形状而不是图片或文字时,<code>content</code> 属性仍然是必需的,但是它的值可以是空字符串。
在上面的例子里class 为 <code>heart</code> 元素的 <code>::before</code> 伪类添加了一个黄色的长方形,长方形的 <code>height</code><code>width</code> 分别为 50px 和 70px。由于设置了其边框半径为 25%,所以长方形为圆角长方形,同时其相对位置为距离 <code>left</code> 5px以及向 <code>top</code> 偏移 50px。
</section>
## 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>
<section id='instructions'>
把屏幕里的元素变成心形。在 <code>heart::after</code> 选择器里面,把 <code>background-color</code> 改成粉色pink<code>border-radius</code> 改成 50%。
接下来,在 <code>heart</code> class 选择器(单纯的 <code>heart</code> 元素)里面,完善 <code>transform</code> 属性。使用 <code>rotate()</code> 函数并赋参 -45 度。(<code>rotate()</code>用法和 <code>skewX</code> 以及 <code>skewY</code> 类似)。
最后,在 <code>heart::before</code> 选择器里面,设置 <code>content</code> 属性为空字符串。
</section>
## 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.");'
- text: '<code>heart::after</code> 选择器的 <code>background-color</code> 属性值应该为粉色。'
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), ''<code>heart::after</code> 选择器的 <code>background-color</code> 属性值应该为粉色。'');'
- text: '<code>heart::after</code> 选择器的 <code>border-radius</code> 属性值应该为 50%。'
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, ''<code>heart::after</code> 选择器的 <code>border-radius</code> 属性值应该为 50%。'');'
- text: '<code>heart</code> class 的 <code>transform</code> 属性应使用 <code>rotate()</code> 函数并赋参为 <code>-45deg</code>。'
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), ''<code>heart</code> class 的 <code>transform</code> 属性应该使用 <code>rotate()</code> 函数并赋参为 <code>-45deg</code>。'');'
- text: '<code>heart::before</code>选择器的<code>content</code>应该为空字符串。'
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|'')\1\s*?;/gi), ''<code>heart::before</code> 选择器的 <code>content</code> 应该为空字符串。'');'
```
@ -70,8 +93,7 @@ tests:
left: 0px;
}
</style>
<div class = "heart"></div>
<div class="heart"></div>
```
</div>
@ -83,7 +105,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,27 +2,51 @@
id: 587d78a7367417b2b2512ae1
title: Create Movement Using CSS Animation
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS动画创建运动
videoUrl: 'https://scrimba.com/c/c7amZfW'
forumTopicId: 301051
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>
<section id='description'>
当元素的 <code>position</code> 被指定,如 <code>fixed</code> 或者 <code>relative</code>CSS 偏移属性 <code>right</code><code>left</code><code>top</code><code>bottom</code>可以用在动画规则里创建动作。
就像下面的例子展示的那样,你可以在 <code>50%</code >keyframe 处设置 <code>top</code> 属性为 50px 在开始0%和最后100%keframe 处设置为 0px以产生项目向下运动然后返回的动作效果。
```css
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
```
</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>
<section id='instructions'>
<code>div</code> 水平运动。使用 <code>left</code> 偏移属性,添加 <code>@keyframes</code> 规则,让 rainbow 在 <code>0%</code> 的 0 像素开始,在 <code>50%</code> 时移动到 25 像素,在 <code>100%</code> 时时移动到 -25 像素。不要替换编辑器里的 <code>top</code> 属性,动画应该同时向水平和竖直方向运动。
</section>
## 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.");'
- text: '<code>0%</code><code>@keyframes</code> 规则应该为向 <code>left</code> 偏移 <code>0px</code>。'
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0px;\s*?left:\s*?0px;\s*?}/gi), ''<code>0%</code> 的 <code>@keyframes</code> 规则应该为向 <code>left</code> 偏移 <code>0px</code>。'');'
- text: '<code>50%</code><code>@keyframes</code> 规则应该为向 <code>left</code> 偏移<code>25px</code>。'
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), ''<code>50%</code> 的 <code>@keyframes</code> 规则应该为向<code>left</code> 偏移 <code>25px</code>。'');'
- text: '<code>100%</code><code>@keyframes</code> 规则应该为向 <code>left</code> 偏移<code>-25px</code>。'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0px;\s*?left:\s*?-25px;\s*?}/gi), ''<code>100%</code> 的 <code>@keyframes</code> 规则应该为向<code>left</code> 偏移 <code>-25px</code>。'');'
```
@ -53,23 +77,22 @@ tests:
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
</style>
<div id="rect"></div>
```
</div>
@ -81,7 +104,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,28 @@
id: 587d78a5367417b2b2512ad8
title: Create Texture by Adding a Subtle Pattern as a Background Image
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/cQdwJC8'
forumTopicId: 301052
localeTitle: 通过添加细微图案作为背景图像来创建纹理
---
## Description
<section id="description">为背景添加纹理和兴趣并让它更突出的一种方法是添加一种微妙的图案。关键是平衡,因为你不希望背景太突出,并从前景中拿走。 <code>background</code>属性支持<code>url()</code>函数,以便链接到所选纹理或图案的图像。链接地址用括号内的引号括起来。 </section>
<section id='description'>
添加一个精致的背景图,可以增加页面的质感,让页面更美观。关键是要找到一个平衡点,抢了内容的风头,喧宾夺主可就不妙了。<code>background</code> 属性支持使用 <code>url()</code> 函数通过链接的方式引入一个指定纹理或样式的图片。图片链接地址在括号内,一般会用引号包起来。
</section>
## Instructions
<section id="instructions">使用<code>https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png</code>的网址,使用<code>body</code>选择器设置整个页面的<code>background</code></section>
<section id='instructions'>
<code>body</code> 选择器设置整个页面的 <code>background</code> 为 url <code>https://i.imgur.com/MJAkxbh.png</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:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/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.");'
- 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), ''<code>body</code> 元素选择器应包含 <code>background</code> 属性,且值为给定的 <code>url</code>。'');'
```
@ -32,10 +37,9 @@ tests:
```html
<style>
body {
}
</style>
```
</div>
@ -47,7 +51,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,35 @@
id: 587d7791367417b2b2512ab3
title: Create Visual Balance Using the text-align Property
challengeType: 0
videoUrl: ''
localeTitle: 使用text-align属性创建视觉平衡
videoUrl: 'https://scrimba.com/c/c3b4EAp'
forumTopicId: 301053
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>
<section id='description'>
这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则,代码基于一个指定的卡片布局。
web 内容大部分都是文本。CSS 里面的 <code>text-align</code> 属性可以控制文本的对齐方式。
<code>text-align: justify;</code> 可以让除最后一行之外的文字两端对齐,即每行的左右两端都紧贴行的边缘。
<code>text-align: center;</code> 可以让文本居中对齐。
<code>text-align: right;</code> 可以让文本右对齐。
<code>text-align: left;</code><code>text-align</code> 的默认值,它可以让文本左对齐。
</section>
## Instructions
<section id="instructions"><code>h4</code>标签的文本称为“Google”与中心对齐。然后证明段落标记是合理的其中包含有关Google如何成立的信息。 </section>
<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.");'
- text: '你应该在 <code>h4</code> 标签上使用 text-align 属性设置文本居中对齐。'
testString: assert($('h4').css('text-align') == 'center', '你应该在 <code>h4</code> 标签上使用 text-align 属性设置文本居中对齐。');
- text: '你应该在 <code>p</code> 标签上使用 text-align 属性设置文本两端对齐。'
testString: assert($('p').css('text-align') == 'justify', '你应该在 <code>p</code> 标签上使用 text-align 属性设置文本两端对齐。');
```
@ -34,14 +44,14 @@ tests:
```html
<style>
h4 {
}
p {
}
.links {
margin-right: 20px;
}
.fullCard {
border: 1px solid #ccc;
@ -57,15 +67,14 @@ tests:
<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>
<p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</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>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -77,7 +86,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,29 @@
id: 587d78a7367417b2b2512ae2
title: Create Visual Direction by Fading an Element from Left to Right
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/cGJqqAE'
forumTopicId: 301054
localeTitle: 通过从左到右淡化元素来创建视觉方向
---
## Description
<section id="description">对于此挑战,您将更改动画元素的<code>opacity</code> ,使其在到达屏幕右侧时逐渐变淡。在显示的动画中,具有渐变背景的圆形元素按照<code>@keyframes</code>规则向右移动动画的50标记。 </section>
<section id='description'>
在本关里,你将要改变动画元素的 <code>opacity</code>,使其在到达屏幕右侧时渐隐。
在展示的动画里,具有渐变背景的圆形元素在 50% 标记的 <code>@keyframes</code> 规则处向右移动。
</section>
## Instructions
<section id="instructions">使用id为<code>ball</code>定位元素,并将<code>opacity</code>属性设置为0.1 <code>50%</code> ,因此元素向右移动时会逐渐消失。 </section>
<section id='instructions'>
使用 id 选择器选择 id 为 <code>ball</code> 的元素,在 <code>50%</code> 里添加 <code>opacity</code> 属性并赋值 0.1,使其在向右移动时渐隐。
</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%.");'
- text: '50% 处 <code>keyframes</code> 规则应该设置 <code>opacity</code> 属性值为 0.1 以使其渐隐。'
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), ''50% 处 <code>keyframes</code> 规则应该设置 <code>opacity</code> 属性值为 0.1 以使其渐隐。'');'
```
@ -51,14 +57,13 @@ tests:
@keyframes fade {
50% {
left: 60%;
}
}
</style>
<div id="ball"></div>
```
</div>
@ -70,7 +75,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,30 @@
id: 587d781c367417b2b2512abf
title: Decrease the Opacity of an Element
challengeType: 0
videoUrl: ''
localeTitle: 降低元素的不透明度
videoUrl: 'https://scrimba.com/c/c7aKqu4'
forumTopicId: 301055
localeTitle: 降低元素的 opactiy
---
## Description
<section id="description"> CSS中的<code>opacity</code>属性用于调整不透明度,或相反,用于调整项目的透明度。 <blockquote>值1是不透明的根本不透明。 <br>值0.5是半透明的。 <br>值0完全透明。 </blockquote>给定的值将应用于整个元素,无论是具有一定透明度的图像,还是文本块的前景色和背景色。 </section>
<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>
<section id='instructions'>
使用 <code>links</code> class 选择所有的超链接并设置其 <code>opacity</code> 值为 0.7。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应通过选择<code>links</code>类将 <code>a</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>.");'
- text: '你应该使用 <code>links</code> class 选择所有的超链接并设置其 <code>opacity</code> 值为 0.7。'
testString: assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, '你应该使用 <code>links</code> class 选择所有的超链接并设置其 <code>opacity</code> 值为 0.7。');
```
@ -43,7 +50,7 @@ tests:
.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);
@ -67,15 +74,14 @@ tests:
<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>
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -87,7 +93,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,35 @@
id: 587d78a3367417b2b2512ad1
title: Learn about Complementary Colors
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/c2MD3Tr'
forumTopicId: 301056
localeTitle: 了解互补色
---
## Description
<section id="description">色彩理论及其对设计的影响是一个深层次的主题,只有基础知识才能应对以下挑战。在网站上,颜色可以引起对内容的注意,唤起情感或创造视觉和谐。使用不同的颜色组合可以真正改变网站的外观,并且可以考虑选择适合您内容的调色板。色轮是一种有用的工具,用于可视化颜色彼此之间的关系 - 它是一个圆圈,其中相似的色调是邻居,不同的色调相距较远。当两种颜色在车轮上彼此相对时,它们被称为互补色。它们具有如下特征:如果它们组合,它们彼此“抵消”并产生灰色。然而,当并排放置时,这些颜色看起来更加生动,并产生强烈的视觉对比。补充颜色及其十六进制代码的一些示例是: <blockquote>红色FF0000和青色00FFFF <br>绿色00FF00和洋红色FF00FF <br>蓝色0000FF和黄色FFFF00 </blockquote>这与我们许多人在学校教授的过时的RYB颜色模型不同后者具有不同的主色和互补色。现代色彩理论使用加性RGB模型如在计算机屏幕上和减色CMYK模型如在打印中。请阅读<a href="https://en.wikipedia.org/wiki/Color_model" target="_blank">此处</a>了解有关此复杂主题的更多信息。网上有许多颜色挑选工具可以选择找到颜色的补充。 <strong>注意</strong> <br>对于所有颜色挑战:使用颜色可以是增加页面视觉兴趣的有效方式。但是,不应仅使用颜色作为传达重要信息的唯一方式,因为有视力障碍的用户可能不理解该内容。应用辅助功能挑战中将更详细地介绍此问题。 </section>
<section id='description'>
色彩理论以及设计色彩学很复杂,这里将只涉及很基础的部分。在网站设计里,颜色能让内容更醒目,能调动情绪,从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大,精妙的设计都需要适宜的颜色来美化页面内容。
一半是科学,一半是艺术,色环是我们认识颜色关系的好工具 - 它是一个近色相邻异色相离的圆环。当两个颜色恰好在色环的两端时,这两个颜色叫做补色。绘画中两只补色在混合后会变成灰色。补色搭配能形成强列的对比效果,传达出活力、能量、兴奋等意义。
下面是一些十六进制码hex code补色的例子
<blockquote>红色(#FF0000)和蓝绿色 (#00FFFF)<br>绿色(#00FF00)和品红色(#FF00FF<br>蓝色(#0000FF)和黄色(#FFFF00</blockquote>
现在很多的在线选色工具都有寻找补色的功能。
<strong>注意</strong><br>对于所有的颜色关卡: 颜色能吸引用户的注意,但不是唯一的方式,切勿喧宾夺主,过度使用会适得其反。详细会在应用无障碍章节介绍。
</section>
## Instructions
<section id="instructions"><code>blue</code><code>yellow</code>类的<code>background-color</code>属性更改为各自的颜色。注意颜色与白色背景相比看起来彼此不同。 </section>
<section id='instructions'>
<code>blue</code><code>yellow</code> class 的 <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.");'
- text: 'class 为 <code>blue</code><code>div</code> 元素应该有值为蓝色的 <code>background-color</code> CSS 属性。'
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'class 为 <code>blue</code> <code>div</code> 元素应该有值为蓝色的 <code>background-color</code> CSS 属性。');
- text: 'class 为 <code>yellow</code><code>div</code> 元素应该有值为黄色的 <code>background-color</code> CSS 属性。'
testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'class <code>yellow</code> 的 <code>div</code> 元素应该有值为黄色的 <code>background-color</code> CSS 属性。');
```
@ -50,7 +60,6 @@ tests:
</style>
<div class="blue"></div>
<div class="yellow"></div>
```
</div>
@ -62,7 +71,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,27 +2,38 @@
id: 587d78a4367417b2b2512ad2
title: Learn about Tertiary Colors
challengeType: 0
videoUrl: ''
localeTitle: 了解第三色
videoUrl: 'https://scrimba.com/c/c3bRDAb'
forumTopicId: 301057
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>
<section id='description'>
电脑显示器和手机屏幕是一种加色模型将红R、绿G、蓝B三原色的色光以不同的比例相加以产生多种多样的色光。两种原色相加产生二次色蓝绿G+B、品红R+B和黄色R+G。你在上一个挑战里已经见过这些颜色了。这些二次色恰好是在合成它们时未使用的原色的补色即在色环中位于两端。例如品红色是红色和蓝色相加产生它是绿色的补色。
三次色是由原色和二次色相加产生的颜色,例如红色(原色)和黄色(二次色)相加产生橙色。将这六种颜色中相邻的颜色相加,便产生了十二色色环。
设计里面有很多种颜色搭配方法。涉及到三次色的一种配色方法是分裂补色搭配法。选定主色之后,在色环上选择与它的补色相邻的两种颜色与之搭配。此种搭配既有对比,又不失和谐。
下面是使用分裂补色搭配法创建的三个颜色:
<table class="table table-striped"><thead><tr><th>颜色</th><th>HEX 颜色码</th></tr><thead><tbody><tr><td>橙色</td><td>#FF7D00</td></tr><tr><td>蓝绿色</td><td>#00FFFF</td></tr><tr><td>树莓红</td><td>#FF007D</td></tr></tbody></table>
</section>
## Instructions
<section id="instructions"><code>orange</code> <code>cyan</code><code>raspberry</code>类的<code>background-color</code>属性更改为各自的颜色。确保使用十六进制代码,因为橙色和覆盆子不是浏览器识别的颜色名称。 </section>
<section id='instructions'>
把 class 为 <code>orange</code><code>cyan</code><code>rasberry</code><code>background-color</code> 改成其对应的颜色。由于 rasberry 不在浏览器 17 种标准色之内,不能直接用作颜色名,所以要使用 HEX 颜色码。
</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.");'
- text: 'class 为 <code>orange</code><code>div</code> 应该有值为橙色的 <code>background-color</code> CSS 属性。'
testString: assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'class <code>orange</code> 的 <code>div</code> 应该有值为橙色的 <code>background-color</code> CSS 属性。');
- text: 'class 为 <code>cyan</code><code>div</code> 应该有值为蓝绿色的 <code>background-color</code> CSS 属性。'
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'class 为 <code>cyan</code> <code>div</code> 应该有值为蓝绿色的 <code>background-color</code> CSS 属性。');
- text: 'class 为 <code>raspberry</code><code>div</code> 应该有值为树莓红色的 <code>background-color</code> CSS 属性。'
testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'class <code>raspberry</code> 的 <code>div</code> 应该有值为树莓红色的 <code>background-color</code> CSS 属性。');
- text: 'corlor classes 里的所有的 <code>background-color</code> 应该是 HEX 颜色码而不是颜色名称。'
testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
```
@ -38,30 +49,29 @@ tests:
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>
@ -73,7 +83,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,34 @@
id: 587d78a9367417b2b2512ae8
title: Learn How Bezier Curves Work
challengeType: 0
videoUrl: ''
localeTitle: 了解Bezier曲线的工作原理
videoUrl: 'https://scrimba.com/c/c9bDrs8'
forumTopicId: 301058
localeTitle: 学习贝塞尔曲线的原理
---
## 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,01,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>
<section id='description'>
上一关卡介绍了 <code>animation-timing-function</code> 以及它的一些预定义的值。这些值定义了不同时间内的动画速度。除了预定义值之外CSS 还提供了贝塞尔曲线Bezier curves来更出色的控制动画的速度曲线。
在 CSS 动画里,用 <code>cubic-bezier</code> 来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1*1 的坐标系统内,曲线的 X 轴代表动画的时间间隔类似于时间比例尺Y 轴代表动画的改变。
<code>cubic-bezier</code> 函数包含了 1 * 1 网格里的4个点<code>p0</code><code>p1</code><code>p2</code><code>p3</code>。其中 <code>p0</code><code>p3</code> 是固定值,代表曲线的起始点和结束点,坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值,设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过<code>(x1, y1, x2, y2)</code>来确定 <code>p1</code><code>p2</code>。综上,下面就是 CSS 贝塞尔曲线的例子:
<code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code>
在上面的例子里,两个点的 x 和 y 值相等x1 = 0.25 = y1 和 x2 = 0.75 = y2如果你还记得初中几何结果是从原点到点 (1, 1) 的一条直线。动画速度呈线性,效果和 <code>linear</code> 一致。换言之,元素匀速运动。
</section>
## Instructions
<section id="instructions">对于id为<code>ball1</code>的元素,将<code>animation-timing-function</code>属性的值从<code>linear</code>更改为其等效的<code>cubic-bezier</code>函数值。使用上面示例中给出的点值。 </section>
<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.");'
- text: 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性值应该为和 linear 预定值等价的贝塞尔函数值。'
testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'id 为 <code>ball1</code> 的元素的 <code>animation-timing-function</code> 属性应该为和 linear 预定值等价的贝塞尔函数值。');
- text: 'id 为 <code>ball2</code> 元素的 <code>animation-timing-function</code> 属性值应该保持不变。'
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'id 为 <code>ball2</code> 元素的 <code>animation-timing-function</code> 属性值应该保持不变。');
```
@ -41,7 +50,7 @@ tests:
#ccffff,
#ffcccc
);
position: fixed;
position: fixed;
width: 50px;
height: 50px;
margin-top: 50px;
@ -49,11 +58,11 @@ tests:
animation-duration: 2s;
animation-iteration-count: infinite;
}
#ball1 {
#ball1 {
left: 27%;
animation-timing-function: linear;
}
#ball2 {
#ball2 {
left: 56%;
animation-timing-function: ease-out;
}
@ -61,17 +70,16 @@ tests:
@keyframes bounce {
0% {
top: 0px;
}
}
100% {
top: 249px;
}
}
}
</style>
<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>
```
</div>
@ -83,7 +91,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,33 +2,60 @@
id: 587d78a7367417b2b2512adf
title: Learn How the CSS @keyframes and animation Properties Work
challengeType: 0
videoUrl: ''
localeTitle: 了解CSS @keyframes和动画属性的工作原理
videoUrl: 'https://scrimba.com/c/cakprhv'
forumTopicId: 301059
localeTitle: 了解 CSS 的关键帧和动画是如何工作的
---
## 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>
<section id='description'>
如果要给元素添加动画,你需要了解 <code>animation</code> 属性以及 <code>@keyframes</code> 规则。 <code>animation</code> 属性控制动画的外观,<code>@keyframes</code> 规则控制动画中各阶段的变化。总共有 8 个 <code>animation</code> 属性。为了便于理解,本关暂时只涉及到两个最常用的属性。
<code>animation-name</code> 设置动画的名称, 也就是要绑定的选择器的 <code>@keyframes</code> 的名称。
<code>animation-duration</code> 设置动画所花费的时间。
<code>@keyframes</code> 能够创建动画。 创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。具体是通过设置动画期间对应的“frames”的 CSS 的属性以百分比来规定改变的时间或者通过关键词“from”和“to”等价于 0% 和 100%。打个比方CSS 里面的 0% 属性就像是电影里面的开场镜头。CSS 里面的 100% 属性就是元素最后的样子相当于电影里的演职员表或者鸣谢镜头。CSS 在对应的时间内给元素过渡添加效果。下面举例说明 <code>@keyframes</code> 和动画属性的用法:
```css
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
```
id 为 <code>anim</code> 的元素,代码设置 <code>animation-name</code><code>colorful</code>,设置 <code>animation-duration</code> 为 3 秒。然后把 <code>@keyframes</code> 引用到名为 <code>colorful</code> 的动画属性上。<code>colorful</code> 在动画开始时0%设置颜色为蓝色在动画结束时100%设置颜色为黄色。注意不是只有开始和结束的过渡可以设置0% 到 100% 间的任意百分比你都可以设置。
</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>
<section id='instructions'>
给 id 为 <code>rect</code> 的元素添加动画,设置其 <code>animation-name</code> 为 rainbow设置其 <code>animation-duration</code> 为 4 秒。然后声明 <code>@keyframes</code> 规则设置动画开始时0%)的 <code>background-color</code> 为蓝色动画中间时50%为绿色动画结束时100%)为为黄色。
</section>
## 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%.");'
- text: 'id 为 <code>rect</code> 的元素应该有一个值为 rainbow 的 <code>animation-name</code> 属性。'
testString: assert($('#rect').css('animation-name') == 'rainbow', 'id <code>rect</code> 的元素应该有一个值为 rainbow 的 <code>animation-name</code> 属性。');
- text: 'id 为 <code>rect</code> 的元素应该有一个值为 4s<code>animation-duration</code> 属性。'
testString: assert($('#rect').css('animation-duration') == '4s', 'id <code>rect</code> 的元素应该有一个值为 4s 的 <code>animation-duration</code> 属性。');
- text: '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该为 rainbow。'
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g), '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该为 rainbow。');
- text: '<code>@keyframes</code> 规则的 rainbow 在 0% 时的 <code>background-color</code> 应该为蓝色。'
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), ''<code>@keyframes</code> 规则的 rainbow 在 0% 时的 <code>background-color</code> 应该为蓝色。'');'
- text: '<code>@keyframes</code> 规则的 rainbow 在 50% 时的 <code>background-color</code> 应该为绿色。'
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), ''<code>@keyframes</code> 规则的 rainbow 在 50% 时的 <code>background-color</code> 应该为绿色。'');'
- text: '<code>@keyframes</code> 规则的 rainbow 在 100% 时的 <code>background-color</code> 应该为黄色。'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), ''<code>@keyframes</code> 规则的 rainbow 在 100% 时的 <code>background-color</code> 应该为黄色。'');'
```
@ -50,16 +77,15 @@ tests:
}
#rect {
}
</style>
<div id="rect"></div>
```
</div>
@ -71,7 +97,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,27 +2,33 @@
id: 587d781e367417b2b2512acb
title: Lock an Element to its Parent with Absolute Positioning
challengeType: 0
videoUrl: ''
localeTitle: 使用绝对定位将元素锁定到其父级
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
forumTopicId: 301060
localeTitle: 绝对定位的参照物是元素的父元素
---
## Description
<section id="description"> CSS <code>position</code>属性的下一个选项是<code>absolute</code> ,它将元素相对于其父容器锁定到位。与<code>relative</code>位置不同,这会从文档的正常流中移除元素,因此周围的项会忽略它。 CSS偏移属性顶部或底部和左侧或右侧用于调整位置。具有绝对定位的一个细微差别在于它将相对于其最近<em>定位的</em>祖先被锁定。如果您忘记向父项添加位置规则(通常使用<code>position: relative;</code> 浏览器将继续查找链并最终默认为body标记。 </section>
<section id='description'>
接下来要介绍 CSS <code>position</code> 属性的取值选项 <code>absolute</code><code>absolute</code> 相对于其包含块定位。和 <code>relative</code> 定位不一样,<code>absolute</code> 定位会将元素从当前的文档流里面移除,周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。
<code>absolute</code> 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则(默认是 <code>position:relative;</code>,浏览器会继续寻找直到默认的 body 标签。
</section>
## Instructions
<section id="instructions">通过将其<code>position</code>声明为<code>absolute</code><code>#searchbar</code>元素锁定到其<code>section</code>的右上角。给它每个50像素的<code>top</code><code>right</code>偏移。 </section>
<section id='instructions'>
通过声明 <code>position</code><code>absolute</code>,固定 <code>#searchbar</code> 元素到它父元素 <code>section</code> 的右上角。即设定其 <code>top</code><code>right</code> 为 50 像素。
</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.");'
- text: '<code>#searchbar</code> 元素应当有一个值为 <code>absolute</code><code>position</code> CSS 属性。'
testString: assert($('#searchbar').css('position') == 'absolute', '<code>#searchbar</code> 元素应当有一个值为 <code>absolute</code> <code>position</code> CSS 属性。');
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>top</code> CSS 属性。'
testString: assert($('#searchbar').css('top') == '50px', '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>top</code> CSS 属性。');
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>right</code> CSS 属性。'
testString: assert($('#searchbar').css('right') == '50px', '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>right</code> CSS 属性。');
```
@ -36,25 +42,24 @@ tests:
```html
<style>
#searchbar {
}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<h1>欢迎!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<label for="search">搜索:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>
```
</div>
@ -66,7 +71,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,27 +2,33 @@
id: 587d781e367417b2b2512acc
title: Lock an Element to the Browser Window with Fixed Positioning
challengeType: 0
videoUrl: ''
localeTitle: 使用固定定位将元素锁定到浏览器窗口
videoUrl: 'https://scrimba.com/c/c2MDNUR'
forumTopicId: 301061
localeTitle: 固定定位的参照物是浏览器的窗口
---
## Description
<section id="description"> CSS提供的下一个布局方案是<code>fixed</code>位置这是一种绝对定位可以相对于浏览器窗口锁定元素。与绝对定位类似它与CSS偏移属性一起使用并且还从文档的正常流中移除元素。其他项目不再“实现”它所处的位置这可能需要在其他地方进行一些布局调整。 <code>fixed</code>位置和<code>absolute</code>位置之间的一个关键区别是,当用户滚动时,具有固定位置的元素将不会移动。 </section>
<section id='description'>
接下来要介绍的是 <code>fixed</code> 定位它是一种特殊的绝对absolute定位区别是其包含块是浏览器窗口。和绝对定位类似<code>fixed</code> 定位使用 top、bottom、left 和 right 属性来调整元素的位置,并且会将元素从当前的文档流里面移除,其它元素会忽略它的存在。
<code>fixed</code> 定位和 <code>absolute</code> 定位的最明显的区别是 <code>fixed</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>
<section id='instructions'>
代码里的导航栏已经添加了值为 <code>navbar</code> 的 id。把它的 <code>position</code> 设置成<code>fixed</code>,设定其 <code>top</code ><code>left</code> 为 0 像素。注意观察对 <code>h1</code> 的影响,<code>h1</code> 并没有被导航栏挤下来,而是遮盖住了,为了显示完全需要单独调整<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.");'
- text: '<code>>#navbar</code> 元素应当有一个值为 <code>fixed</code><code>position</code> CSS 属性'
testString: assert($('#navbar').css('position') == 'fixed', '<code>#navbar</code> 元素应当有一个值为 <code>fixed</code> <code>position</code> CSS 属性');
- text: '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>top</code> CSS 属性。'
testString: assert($('#navbar').css('top') == '0px', '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>top</code> CSS 属性。');
- text: '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>left</code> CSS 属性。'
testString: assert($('#navbar').css('left') == '0px', '你的 <code>#navbar</code> 元素应当有值为 <code>0px</code> 的 <code>left</code> CSS 属性。');
```
@ -36,9 +42,9 @@ tests:
```html
<style>
#navbar {
width: 100%;
background-color: #767676;
}
@ -56,17 +62,16 @@ tests:
</style>
<body>
<header>
<h1>Welcome!</h1>
<h1>欢迎!</h1>
<nav id="navbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Contact</a></li>
<li><a href="">网站首页</a></li>
<li><a href="">联系我们</a></li>
</ul>
</nav>
</header>
<p>I shift up when the #navbar is fixed to the browser window.</p>
<p>当导航条固定在浏览器窗口上时,我会上移。</p>
</body>
```
</div>
@ -78,7 +83,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,31 @@
id: 587d78a8367417b2b2512ae4
title: Make a CSS Heartbeat using an Infinite Animation Count
challengeType: 0
videoUrl: ''
localeTitle: 使用无限动画计数制作CSS心跳
videoUrl: 'https://scrimba.com/c/cDZpDUr'
forumTopicId: 301062
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>
<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>
<section id='instructions'>
<code>back</code> class和 <code>heart</code> class添加值为 infinite 的 <code>animation-iteration-count</code> 属性,使心脏持续跳动。<code>heart:before</code><code>heart:after</code> 选择器不需要添加动画属性。
</section>
## 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.");'
- text: '<code>heart</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinte。'
testString: assert($('.heart').css('animation-iteration-count') == 'infinite', '<code>heart</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。');
- text: '<code>back</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。'
testString: assert($('.back').css('animation-iteration-count') == 'infinite', '<code>back</code> class 的 <code>animation-iteration-count</code> 属性应该赋值 infinite。');
```
@ -43,8 +49,8 @@ tests:
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-duration: 1s;
}
.heart {
@ -60,7 +66,7 @@ tests:
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
}
.heart:after {
background-color: pink;
@ -101,7 +107,6 @@ tests:
</style>
<div class="back"></div>
<div class="heart"></div>
```
</div>
@ -113,7 +118,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,32 @@
id: 587d78a9367417b2b2512aea
title: Make Motion More Natural Using a Bezier Curve
challengeType: 0
videoUrl: ''
localeTitle: 使用贝塞尔曲线使运动更自然
videoUrl: 'https://scrimba.com/c/c7akWUv'
forumTopicId: 301063
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>
<section id='description'>
本关的元素模拟的是杂技抛接球。之前的关卡涉及了 <code>linear</code><code>ease-out</code> 的贝塞尔曲线描述,如你所见,这两个都无法完美的描述杂耍球的运动。在本关里你需要定制贝塞尔曲线。
<code>animation-iteration-count</code> 值为 infinite 时 <code>animation-timing-function</code> 会自动循环 keyframe。由于是在动画周期中间50%处)设置的 keyframe 规则,最终的结果是球向上和球向下是两个同样的动画过程。
下面的例子模拟了杂耍球运动:
<code>cubic-bezier(0.3, 0.4, 0.5, 1.6); </code>
注意 y2 的值是大于 1 的。虽然贝塞尔曲线是在 1*1 的坐标系统内 x 值只能在 0 到 1但是 y 值是可以大于 1 的。这样才能模拟杂耍球运动。
</section>
## Instructions
<section id="instructions">将id为<code>green</code>的元素的<code>animation-timing-function</code>的值更改为<code>cubic-bezier</code>函数x1y1x2y2值分别设置为0.311,0.441,0.444,1.648。 </section>
<section id='instructions'>
把 id 为 <code>green</code> 的元素的 <code>animation-timing-function</code> 值改成 <code>cubic-bezier</code> 函数,函数的参数 x1y1x2y2 值依次为 0.311、0.441、0.444、1.649。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 具有id <code>green</code>的元素的<code>animation-timing-function</code>属性的值应该是具有指定的x1y1x2y2值的<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.'
- text: 'id <code>green</code>的元素的<code>animation-timing-function</code>值应该为<code>cubic-bezier</code>函数,函数的参数 x1y1x2y2 值依次为 0.311、0.441、0.444、1.649。'
testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'id 为<code>green</code>的元素的<code>animation-timing-function</code>值应该为<code>cubic-bezier</code>函数,函数的参数 x1y1x2y2 值依次为 0.311、0.441、0.444、1.649。');
```
@ -33,7 +42,7 @@ tests:
<style>
.balls {
border-radius: 50%;
position: fixed;
position: fixed;
width: 50px;
height: 50px;
top: 60%;
@ -66,7 +75,6 @@ tests:
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>
```
</div>
@ -78,7 +86,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,30 @@
id: 58a7a6ebf9a6318348e2d5aa
title: Modify Fill Mode of an Animation
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/cVJDmcE'
forumTopicId: 301064
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>
<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>
<section id='instructions'>
设置 <code>button:hover</code><code>animation-fill-mode</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>.");'
- 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> 应该有一个值为 <code>forwards</code> 的 <code>animation-fill-mode</code> 的属性。'');'
```
@ -41,7 +48,7 @@ tests:
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
/* add your code above this line */
}
@keyframes background-color {
@ -50,8 +57,7 @@ tests:
}
}
</style>
<button>Register</button>
<button>注册</button>
```
</div>
@ -63,7 +69,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,31 @@
id: 587d781e367417b2b2512aca
title: Move a Relatively Positioned Element with CSS Offsets
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS偏移移动相对定位的元素
videoUrl: 'https://scrimba.com/c/c9bQEA4'
forumTopicId: 301065
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: &#39;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 10px upwards. In other words, move it 10px away from the &lt;code&gt;bottom&lt;/code&gt; of where it normally sits.&#39; testString: &#39;assert($(&quot;h2&quot;).css(&quot;bottom&quot;) == &quot;10px&quot;, &quot;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 10px upwards. In other words, move it 10px away from the &lt;code&gt;bottom&lt;/code&gt; of where it normally sits.&quot;);&#39; - text: &#39;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px towards the right. In other words, move it 15px away from the &lt;code&gt;left&lt;/code&gt; of where it normally sits.&#39; testString: &#39;assert($(&quot;h2&quot;).css(&quot;left&quot;) == &quot;15px&quot;, &quot;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px towards the right. In other words, move it 15px away from the &lt;code&gt;left&lt;/code&gt; of where it normally sits.&quot;);&#39;</code> </pre></section><h2>挑战种子</h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html">&lt;head&gt; &lt;style&gt; h2 { position: relative; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;On Being Well-Positioned&lt;/h1&gt; &lt;h2&gt;Move me!&lt;/h2&gt; &lt;p&gt;I still think the h2 is where it normally sits.&lt;/p&gt; &lt;/body&gt;</code> </pre></div></section><h2></h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section></section>
<section id='description'>
CSS 里面的 <code>top</code><code>bottom</code><code>left</code><code>right</code> 定义了元素在相应方位的偏移距离。元素将从当前位置,向属性相反的方向偏移。就像你在上一个挑战看到的,<code>top</code> 属性使 <code>h2</code> 向下移动。<code>left</code> 属性使元素向右移动。
<img src='https://i.imgur.com/eWWi3gZ.gif' alt='' />
</section>
## Instructions
<section id="instructions">使用CSS偏移将<code>h2</code>移动15像素向右移动10像素。 </section>
<section id='instructions'>
通过 CSS 属性把 <code>h2</code> 向上移动 10 像素,向右移动 15 像素。
</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.");'
- text: '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向上移动 <code>10px</code>。也就是说,从 <code>h2</code> 当前位置远离 <code>bottom</code> <code>10px</code>。'
testString: assert($('h2').css('bottom') == '10px', '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向上移动 <code>10px</code>。也就是说,从 <code>h2</code> 当前位置远离 <code>bottom</code> <code>10px</code>。');
- text: '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向右移动 <code>15px</code>。也就是说,从 <code>h2</code> 当前位置远离 <code>left</code> <code>15px</code>。'
testString: assert($('h2').css('left') == '15px', '你应该使用 CSS 属性使 <code>h2</code> 相对当前位置向右移动 <code>15px</code>。也就是说,从 <code>h2</code> 当前位置远离<code>left</code> <code>15px</code>。');
```
@ -36,19 +42,20 @@ tests:
<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>
<h1>论如何优雅定位</h1>
<h2>我要离 h1 近一点!</h2>
<p>我觉得 h2 没变,还是在它原来的位置,相离莫相忘,且行且珍惜。</p>
</body>
```
</div>
@ -58,7 +65,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,30 @@
id: 587d78a3367417b2b2512ace
title: Push Elements Left or Right with the float Property
challengeType: 0
videoUrl: ''
localeTitle: 使用float属性向左或向右推送元素
videoUrl: 'https://scrimba.com/c/c2MDqu2'
forumTopicId: 301066
localeTitle: 使用 float 属性将元素左浮动或右浮动
---
## Description
<section id="description">下一个定位工具实际上不使用<code>position</code> ,而是设置元素的<code>float</code>属性。浮动元素从文档的正常流中移除,并推送到其包含的父元素的<code>left</code><code>right</code> 。它通常与<code>width</code>属性一起使用,以指定浮动元素需要多少水平空间。 </section>
<section id='description'>
接下来要介绍的定位机制并不是 <code>position</code> 属性的选项,它通过元素的 <code>float</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>
<section id='instructions'>
设置 <code>#left</code> 元素的 <code>float</code><code>left</code>,设置 <code>#right</code> 元素的 <code>float</code><code>right</code>。使这两个元素按两列布局,<code>section</code><code>aside</code> 左右排列。
</section>
## 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>.");'
- text: 'id 为 <code>left</code> 的元素应该有一个值为 <code>left</code><code>float</code> CSS 属性。'
testString: assert($('#left').css('float') == 'left', 'id <code>left</code> 的元素应该有一个值为 <code>left</code> <code>float</code> CSS 属性。');
- text: 'id 为 <code>right</code> 的元素应该有一个值为 <code>right</code><code>float</code> CSS 属性。'
testString: assert($('#right').css('float') == 'right', 'id 为 <code>right</code> 的元素应该有一个值为 <code>right</code> <code>float</code> CSS 属性。');
```
@ -35,11 +40,11 @@ tests:
<head>
<style>
#left {
width: 50%;
}
#right {
width: 40%;
}
aside, section {
@ -50,18 +55,17 @@ tests:
</head>
<body>
<header>
<h1>Welcome!</h1>
<h1>欢迎!</h1>
</header>
<section id="left">
<h2>Content</h2>
<p>Good stuff</p>
<h2>内容</h2>
<p>好样的</p>
</section>
<aside id="right">
<h2>Sidebar</h2>
<p>Links</p>
<h2>侧边栏</h2>
<p>一些链接</p>
</aside>
</body>
```
</div>
@ -73,7 +77,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,33 +2,38 @@
id: 587d781c367417b2b2512ac2
title: Set the font-size for Multiple Heading Elements
challengeType: 0
videoUrl: ''
localeTitle: 设置多个标题元素的字体大小
videoUrl: 'https://scrimba.com/c/cPpQNT3'
forumTopicId: 301067
localeTitle: 设置多个标题元素的 font-size
---
## Description
<section id="description"> <code>font-size</code>属性用于指定给定元素中文本的大小。此规则可用于多个元素,以在页面上创建文本的视觉一致性。在此挑战中,您将设置所有<code>h1</code><code>h6</code>标记的值以平衡标题大小。 </section>
<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>
<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.");'
- text: '你应该设置 <code>h1</code> 标签的 <code>font-size</code> 为 <code>68px</code>。'
testString: assert($('h1').css('font-size') == '68px', '你应该设置 <code>h1</code> 标签的 <code>font-size</code> <code>68px</code>。');
- text: '你应该设置 <code>h2</code> 标签的 <code>font-size</code> 为 <code>52px</code>。'
testString: assert($('h2').css('font-size') == '52px', '你应该设置<code>h2</code>标签的<code>font-size</code> <code>52px</code>。');
- text: '你应该设置 <code>h3</code> 标签的 <code>font-size</code> 为 <code>40px</code>。'
testString: assert($('h3').css('font-size') == '40px', '你应该设置 <code>h3</code> 标签的 <code>font-size</code> <code>40px</code>。');
- text: '你应该设置 <code>h4</code> 标签的 <code>font-size</code> 为 <code>32px</code>。'
testString: assert($('h4').css('font-size') == '32px', '你应该设置 <code>h4</code> 标签的 <code>font-size</code> <code>32px</code>。');
- text: '你应该设置 <code>h5</code> 标签的 <code>font-size</code> 为 <code>21px</code>。'
testString: assert($('h5').css('font-size') == '21px', '你应该设置 <code>h6</code> 标签的 <code>font-size</code> <code>21px</code>。');
- text: '你应该设置 <code>h6</code> 标签的 <code>font-size</code> 为 <code>14px</code>。'
testString: assert($('h6').css('font-size') == '14px', '你应该设置 <code>h6</code> 标签的 <code>font-size</code> <code>14px</code>。');
```
@ -41,20 +46,19 @@ tests:
```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>
<h1>我是 h1 文字</h1>
<h2>我是 h2 文字</h2>
<h3>我是 h3 文字</h3>
<h4>我是 h4 文字</h4>
<h5>我是 h5 文字</h5>
<h6>我是 h6 文字</h6>
```
</div>
@ -66,7 +70,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,28 @@
id: 587d781c367417b2b2512ac4
title: Set the font-size of Paragraph Text
challengeType: 0
videoUrl: ''
localeTitle: 设置段落文本的字体大小
videoUrl: 'https://scrimba.com/c/cVJ36Cr'
forumTopicId: 301068
localeTitle: 设置段落文本的 font-size
---
## Description
<section id="description"> CSS中的<code>font-size</code>属性不限于标题,它可以应用于包含文本的任何元素。 </section>
<section id='description'>
CSS 里面的 <code>font-size</code> 属性不只限于标题,它可以应用于任何包含文字的元素内。
</section>
## Instructions
<section id="instructions">将段落的<code>font-size</code>属性值更改为16px以使其更加可见。 </section>
<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.");'
- text: '你的 <code>p</code> 标签应该包含一个 <code>font-size</code> 属性并且值为 <code>16px</code>。'
testString: assert($('p').css('font-size') == '16px', '你的 <code>p</code> 标签应该包含一个 <code>font-size</code> 属性并且值为 <code>16px</code>。');
```
@ -36,9 +41,8 @@ tests:
}
</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>
@ -50,7 +54,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,33 +2,39 @@
id: 587d781c367417b2b2512ac3
title: Set the font-weight for Multiple Heading Elements
challengeType: 0
videoUrl: ''
localeTitle: 设置多个标题元素的字体粗细
videoUrl: 'https://scrimba.com/c/crVWRHq'
forumTopicId: 301069
localeTitle: 设置多个标题元素的 font-weight
---
## Description
<section id="description">您在最后一次挑战中设置每个标题标记的<code>font-size</code> ,在这里您将调整<code>font-weight</code><code>font-weight</code>属性设置文本部分中字符的粗细或粗细。 </section>
<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>
<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.");'
- text: '你应该设置 <code>h1</code> 标签的 <code>font-weight</code>800。'
testString: assert($('h1').css('font-weight') == '800', '你应该设置 <code>h1</code> 标签的 <code>font-weight</code> 为 800。');
- text: '你应该设置 <code>h2</code> 标签的 <code>font-weight</code>600。'
testString: assert($('h2').css('font-weight') == '600', '你应该设置 <code>h2</code> 标签的 <code>font-weight</code> 为 600。');
- text: '你应该设置 <code>h3</code> 标签的 <code>font-weight</code>500。'
testString: assert($('h3').css('font-weight') == '500', '你应该设置 <code>h3</code> 标签的 <code>font-weight</code> 为 500。');
- text: '你应该设置 <code>h4</code> 标签的 <code>font-weight</code>400。'
testString: assert($('h4').css('font-weight') == '400', '你应该设置 <code>h4</code> 标签的 <code>font-weight</code> 为 400。');
- text: '你应该设置 <code>h5</code> 标签的 <code>font-weight</code>300。'
testString: assert($('h5').css('font-weight') == '300', '你应该设置 <code>h5</code> 标签的 <code>font-weight</code> 为 300。');
- text: '你应该设置 <code>h6</code> 标签的 <code>font-weight</code>200。'
testString: assert($('h6').css('font-weight') == '200', '你应该设置 <code>h6</code> 标签的 <code>font-weight</code> 为 200。');
```
@ -43,36 +49,35 @@ tests:
<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>
<h1>我是 h1 文字</h1>
<h2>我是 h2 文字</h2>
<h3>我是 h3 文字</h3>
<h4>我是 h4 文字</h4>
<h5>我是 h5 文字</h5>
<h6>我是 h6 文字</h6>
```
</div>
@ -84,7 +89,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,28 @@
id: 587d781d367417b2b2512ac5
title: Set the line-height of Paragraphs
challengeType: 0
videoUrl: ''
localeTitle: 设置段落的行高
videoUrl: 'https://scrimba.com/c/crVWdcv'
forumTopicId: 301070
localeTitle: 设置段落的 line-height
---
## Description
<section id="description"> CSS提供了<code>line-height</code>属性来更改文本块中每一行的高度。顾名思义,它会改变每行文本所获得的垂直空间量。 </section>
<section id='description'>
CSS 提供 <code>line-height</code> 属性来设置行间的距离。行高,顾名思义,用来设置每行文字所占据的垂直空间。
</section>
## Instructions
<section id="instructions"><code>line-height</code>属性添加到<code>p</code>标记并将其设置为25px。 </section>
<section id='instructions'>
<code>p</code> 标签添加 <code>line-height</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.");'
- text: '你应该给 <code>p</code> 标签添加 <code>line-height</code> 属性并赋值 <code>25px</code>。'
testString: assert($('p').css('line-height') == '25px', '你应该给 <code>p</code> 标签添加 <code>line-height</code> 属性并赋值 <code>25px</code>。');
```
@ -33,13 +38,12 @@ tests:
<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>
@ -51,7 +55,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,27 +2,35 @@
id: 587d78a9367417b2b2512ae9
title: Use a Bezier Curve to Move a Graphic
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/c6bnRCK'
forumTopicId: 301071
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>
<section id='description'>
前面的关卡涉及的 <code>ease-out</code> 预定义值描述了动画以高速开始低速结束。右边的动画展示了 <code>ease-out</code> 预定义值(蓝色的元素)和 <code>linear</code> 预定义值(红色的元素)的区别。同样的,<code>ease-out</code> 预定义值也可以用贝塞尔曲线函数实现。
通俗的讲,将一条直线放在范围只有 1 的坐标轴中,并从中间拿 <code>p1</code><code>p2</code> 两个点来拉扯X 轴的取值区间是 [0, 1]Y 轴任意),最后形成的曲线就是动画的贝塞尔速度曲线。下面是贝塞尔曲线模仿 ease-out 预定义值的例子:
<code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code>
记住所有的 <code>cubic-bezier</code> 函数都是从坐标为 (0, 0) 的 <code>p0</code> 开始,在坐标为 (1, 1) 的 <code>p3</code> 结束。在这个例子里,曲线在 y 轴(从 0 开始,运动到 <code>p1</code> 的 0然后运动到 <code>p2</code> 的 1上移动的比在 x 轴(从 0 开始,运动到 <code>p1</code> 的 0<code>p2</code> 的 0.58上移动的快。结果是在这一段动画内元素运动的快。到曲线的结尾x 和 y 之间的关系反过来了y 值保持为1没有变化x 值从 0.58 变为 1元素运动的慢。
</section>
## Instructions
<section id="instructions">要查看此贝塞尔曲线的效果请将id为<code>red</code>的元素的<code>animation-timing-function</code>更改为<code>cubic-bezier</code>函数其中x1y1x2y2值分别设置为0,0,0.58,1这将使两个元素同样在动画中前进。 </section>
<section id='instructions'>
为了看贝塞尔曲线的运动效果,把 id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性赋为 <code>cubic-bezier</code> 函数,其中 x1y1x2y2 值分别为 000.581。这会使两个元素运动过程类似。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'id<code>red</code>的元素的<code>animation-timing-function</code>属性值应为<code>cubic-bezier</code>函数x1y1x2y2值分别设置为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.");'
- text: 'id<code>red</code> 的元素的 <code>animation-timing-function</code> 属性应当赋为 <code>cubic-bezier</code> 函数,其中 x1y1x2y2 值分别为 000.581。'
testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性应当赋为 <code>cubic-bezier</code> 函数,其中 x1y1x2y2 值分别为 000.581。');
- text: 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性不应该取值 linear。'
testString: assert($('#red').css('animation-timing-function') !== 'linear', 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性不应该取值 linear。');
- text: 'id 为 <code>blue</code> 的元素的 <code>animation-timing-function</code> 属性不应该被改变。'
testString: assert($('#blue').css('animation-timing-function') == 'ease-out', 'id 为 <code>blue</code> 的元素的 <code>animation-timing-function</code> 属性不应该被改变。');
```
@ -66,7 +74,6 @@ tests:
</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>
```
</div>
@ -78,7 +85,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,33 +2,43 @@
id: 587d78a5367417b2b2512ad7
title: Use a CSS Linear Gradient to Create a Striped Element
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS线性渐变来创建条带元素
videoUrl: 'https://scrimba.com/c/c6bmQh2'
forumTopicId: 301072
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>
<section id='description'>
<code>repeating-linear-gradient()</code> 函数和 <code>linear-gradient()</code> 很像,主要区别是 <code>repeating-linear-gradient()</code> 重复指定的渐变。 <code>repeating-linear-gradient()</code> 有很多参数,为了便于理解,本关只用到角度值和起止渐变颜色值。
角度就是渐变的方向。起止渐变颜色值代表渐变颜色及其宽度值,由颜色值和起止位置组成,起止位置用百分比或者像素值表示。
在代码编辑器的例子里,渐变开始于 0 像素位置的 <code>yellow</code>,然后过渡到距离开始位置 40 像素的 <code>blue</code>。由于下一个起止渐变颜色值的起止位置也是 40 像素,所以颜色直接渐变成第三个颜色值 <code>green</code>,然后过渡到距离开始位置 80 像素的 <code>red</code>
下面的代码可以帮助理解成对的起止渐变颜色值是如何过渡的。
<code>0px [黄色 -- 过渡 -- 蓝色] 40px [绿色 -- 过渡 -- 红色] 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>
<section id='instructions'>
修改 <code>repeating-linear-gradient()</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>.");'
- text: '<code>repeating-linear-gradient()</code> 的渐变角度应该为 <code>45deg</code>。'
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), ''<code>repeating-linear-gradient()</code> 的渐变角度应该为 <code>45deg</code>。'');'
- text: '<code>repeating-linear-gradient()</code> 的渐变角度应该不在是 <code>90deg</code>。'
testString: assert(!code.match(/90deg/gi), '<code>repeating-linear-gradient()</code> 的渐变角度不应该是 <code>90deg</code>。');
- text: '<code>0px</code> 处的渐变颜色应该为 <code>yellow</code>。'
testString: assert(code.match(/yellow\s+?0px/gi), '<code>0px</code> 处的渐变颜色应该为 <code>yellow</code>。');
- text: '<code>40px</code> 处的第一个渐变颜色应该为 <code>yellow</code>。'
testString: assert(code.match(/yellow\s+?40px/gi), '<code>40px</code> 处的第一个渐变颜色应该为 <code>yellow</code>。');
- text: '<code>40px</code> 处的第二个渐变颜色应该为 <code>black</code>。'
testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), '<code>40px</code> 处的第二个渐变颜色应该为 <code>black</code>。');
- text: '<code>80px</code> 处最后一个渐变颜色应该为 <code>black</code>。'
testString: assert(code.match(/black\s+?80px/gi), '<code>80px</code> 处最后一个渐变颜色应该为 <code>black</code>。');
```
@ -42,7 +52,7 @@ tests:
```html
<style>
div{
div{
border-radius: 20px;
width: 70%;
height: 400px;
@ -59,7 +69,6 @@ tests:
</style>
<div></div>
```
</div>
@ -71,7 +80,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,50 @@
id: 587d78a7367417b2b2512ae0
title: Use CSS Animation to Change the Hover State of a Button
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/cg4vZAa'
forumTopicId: 301073
localeTitle: 使用CSS动画更改按钮的悬停状态
---
## Description
<section id="description">您可以使用CSS <code>@keyframes</code>更改悬停状态下按钮的颜色。以下是在悬停时更改图像宽度的示例: <blockquote> &lt;风格&gt; <br> imghover { <br>动画名称:宽度; <br>动画持续时间500ms; <br> } <br><br> @keyframes width { <br> 100{ <br>宽度40px; <br> } <br> } <br> &lt;/样式&gt; <br><br> &lt;img src =“https://bit.ly/smallgooglelogo&quot;alt =”Google的徽标“/&gt; </blockquote></section>
<section id='description'>
你可以在按钮悬停时使用 <code>@keyframes</code> 改变按钮的颜色。
下面是在图片悬停时改变图片宽度的例子:
```html
<style>
img:hover {
animation-name: width;
animation-duration: 500ms;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
```
</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>
<section id='instructions'>
注意 <code>ms</code> 代表毫秒1000ms 等于 1s。
使用 <code>@keyframes</code> 来改变 <code>button</code> 元素的 <code>background-color</code>,使其当悬停时变成 <code>#4791d0</code><code>@keyframes</code> 规则应该只有一个 <code>100%</code> 条目。
</section>
## 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%.");'
- text: '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该是 background-color。'
testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g), '<code>@keyframes</code> 规则的 <code>animation-name</code> 应该是 background-color。');
- text: '<code>@keyframes</code> 的 <code>100%</code> 条目里应该把 <code>background-color</code> 改成 <code>#4791d0</code>。'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), ''在 <code>@keyframes</code> 的 <code>100%</code> 条目里应该把 <code>background-color</code> 改成 <code>#4791d0</code>。'');'
```
@ -39,17 +64,16 @@ tests:
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
}
</style>
<button>Register</button>
<button>注册</button>
```
</div>
@ -61,7 +85,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,36 @@
id: 587d78a6367417b2b2512adb
title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS变换属性skewX沿X轴倾斜元素
videoUrl: 'https://scrimba.com/c/cyLP8Sr'
forumTopicId: 301074
localeTitle: 使用 CSS Transform skex 属性沿X轴倾斜元素
---
## Description
<section id="description"> <code>transform</code>属性的下一个函数是<code>skewX()</code> 它将选定元素沿其X水平轴倾斜给定的度数。以下代码沿X轴将段落元素倾斜-32度。 <blockquote> p { <br> transformskewX-32deg; <br> } </blockquote></section>
<section id='description'>
接下来要介绍的 <code>transform</code> 属性是 <code>skewX</code><code>skewX</code> 使选择的元素沿着 X 轴(横向)翻转指定的角度。
下面的代码沿着 X 轴翻转段落元素 -32 度。
```css
p {
transform: skewX(-32deg);
}
```
</section>
## Instructions
<section id="instructions">使用<code>transform</code>属性将具有<code>bottom</code> id的元素沿X轴倾斜24度。 </section>
<section id='instructions'>
使用 <code>transform</code> 属性沿 X 轴翻转 id 为 <code>bottom</code> 的元素 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.");'
- text: 'id 为 <code>bottom</code> 的元素应该沿着 X 轴翻转 24 度。'
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), ''id <code>bottom</code> 的元素应该沿着 X 轴翻转 24 度。'');'
```
@ -31,7 +44,7 @@ tests:
```html
<style>
div {
div {
width: 70%;
height: 100px;
margin: 50px auto;
@ -41,13 +54,12 @@ tests:
}
#bottom {
background-color: blue;
}
</style>
<div id="top"></div>
<div id="bottom"></div>
```
</div>
@ -59,7 +71,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,28 @@
id: 587d78a6367417b2b2512adc
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS变换属性skewY沿Y轴倾斜元素
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
forumTopicId: 301075
localeTitle: 使用 CSS Transform skex 属性沿Y轴倾斜元素
---
## Description
<section id="description">假设<code>skewX()</code>函数沿X轴将选定元素倾斜给定的度数<code>skewY()</code>属性沿Y垂直轴倾斜元素<code>skewY()</code>不足为奇了。 </section>
<section id='description'>
<code>skewX</code> 函数使指定元素沿 X 轴翻转指定的角度,想必你已经猜到了,<code>skewY</code> 属性使指定元素沿 Y 轴(垂直方向)翻转指定角度。
</section>
## Instructions
<section id="instructions">使用<code>transform</code>属性沿Y轴倾斜<code>top</code> -10度的元素。 </section>
<section id='instructions'>
使用 <code>transform</code> 属性沿 Y 轴翻转 id 为 <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.");'
- text: 'id 为 <code>top</code> 的元素应该沿着 Y 轴翻转 -10 度。'
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), ''id <code>top</code> 的元素应该沿着 Y 轴翻转 -10 度。'');'
```
@ -31,14 +36,14 @@ tests:
```html
<style>
div {
div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;
@ -48,7 +53,6 @@ tests:
<div id="top"></div>
<div id="bottom"></div>
```
</div>
@ -60,7 +64,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,35 @@
id: 587d78a5367417b2b2512ad9
title: Use the CSS Transform scale Property to Change the Size of an Element
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS Transform scale属性更改元素的大小
videoUrl: 'https://scrimba.com/c/c2MZVSg'
forumTopicId: 301076
localeTitle: 使用 CSS Transform scale 属性可以更改元素的大小
---
## Description
<section id="description">要更改元素的比例CSS具有<code>transform</code>属性及其<code>scale()</code>函数。以下代码示例将页面上所有段落元素的大小加倍: <blockquote> p { <br>变换比例2; <br> } </blockquote></section>
<section id='description'>
CSS 属性 <code>transform</code> 里面的 <code>scale()</code> 函数,可以用来改变元素的显示比例。下面的例子把页面的段落元素放大了 2 倍:
```css
p {
transform: scale(2);
}
```
</section>
## Instructions
<section id="instructions">使用<code>ball2</code>的id将元素的大小<code>ball2</code>原始大小的1.5倍。 </section>
<section id='instructions'>
把 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.");'
- 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), ''<code>#ball2</code> 的 <code>transform</code> 属性应该为原始大小的 1.5 倍。'');'
```
@ -31,7 +43,7 @@ tests:
```html
<style>
.ball {
.ball {
width: 40px;
height: 40px;
margin: 50 auto;
@ -48,7 +60,7 @@ tests:
}
#ball2 {
left: 65%;
}
@ -56,7 +68,6 @@ tests:
<div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>
```
</div>
@ -68,7 +79,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,23 +2,38 @@
id: 587d78a5367417b2b2512ada
title: Use the CSS Transform scale Property to Scale an Element on Hover
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS Transform scale属性在悬停上缩放元素
videoUrl: 'https://scrimba.com/c/cyLPJuM'
forumTopicId: 301077
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>
<section id='description'>
<code>transform</code> 属性有很多函数,可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如 <code>:hover</code> 时,<code>transform</code> 属性可以方便的给元素添加交互。
下面是当用户悬停段落元素时,段落大小缩放到原始大小 2.1 倍的例子:
```css
p:hover {
transform: scale(2.1);
}
```
<strong>注意:</strong><code>div</code> 元素添加 transform 也会影响这个 div 包裹的子元素。
</section>
## Instructions
<section id="instructions"><code>div</code><code>hover</code>状态添加CSS规则并使用<code>transform</code>属性将<code>div</code>元素缩放到其原始大小的1.1倍,当用户将鼠标悬停在其上时。 </section>
<section id='instructions'>
<code>div</code> 伪类 <code>hover</code> 添加 <code>transform</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.");'
- text: '<code>div</code> 元素在悬停时大小应缩放到原始大小的 1.1 倍。'
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), ''<code>div</code> 元素在悬停时大小应该缩放到原始大小的 1.1 倍。'');'
```
@ -31,7 +46,7 @@ tests:
```html
<style>
div {
div {
width: 70%;
height: 100px;
margin: 50px auto;
@ -41,13 +56,12 @@ tests:
#ffcccf
);
}
</style>
<div></div>
```
</div>
@ -59,7 +73,10 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,31 @@
id: 587d781a367417b2b2512ab9
title: Use the em Tag to Italicize Text
challengeType: 0
videoUrl: ''
localeTitle: 使用em标记来显示文本
videoUrl: 'https://scrimba.com/c/cVJRBtp'
forumTopicId: 301078
localeTitle: 使用 em 标签强调文本
---
## Description
<section id="description">要强调文本,您可以使用<code>em</code>标记。这显示文本为斜体,因为浏览器应用了<code>font-style: italic;</code>的CSS <code>font-style: italic;</code>对元素。 </section>
<section id='description'>
术语emphasis => em => 强调。
你可以使用 <code>em</code> 标签来强调文本。由于浏览器会自动给元素应用 <code>font-style: italic;</code>,所以文本会显示为斜体。
</section>
## Instructions
<section id="instructions">围绕段落标记的内容包装<code>em</code>标记以强调它。 </section>
<section id='instructions'>
<code>p</code> 标签里面嵌套 <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.");'
- text: '你应该添加一个 <code>em</code> 标签。'
testString: assert($('em').length == 1, '你应该添加一个 <code>em</code> 标签。');
- text: '<code>em</code> 标签应该嵌套在 <code>p</code> 标签里面。'
testString: assert($('p').children().length == 1 && $('em').children().length == 2, '<code>em</code> 标签应该嵌套在 <code>p</code> 标签里面。');
```
@ -62,15 +68,14 @@ tests:
<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>
<p>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</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>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -82,7 +87,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -3,26 +3,32 @@ id: 587d781b367417b2b2512aba
title: Use the s Tag to Strikethrough Text
challengeType: 0
videoUrl: ''
localeTitle: 使用s标记删除线文本
forumTopicId: 301079
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>
<section id='description'>
术语Strikethrough => s => 删除线。
你可以用 <code>s</code> 标签来给文字添加删除线,<s>我是明晃晃的删除线</s>,它代表着这段文字不再有效。添加了 <code>s</code> 标签后,浏览器会自动给元素应用 <code>text-decoration: line-through;</code>
</section>
## Instructions
<section id="instructions"><code>s</code>标签包裹在<code>h4</code>标签内的“Google”周围然后在其旁边添加单词Alphabet它不应具有删除线格式。 </section>
<section id='instructions'>
<code>h4</code> 标签里的 “Google” 外添加 <code>s</code> 标签,然后在 <code>s</code> 标签外面添加单词 AlphabetAlphabet 不要有删除线格式。
</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.");'
- text: '你应该添加一个 <code>s</code> 标签。'
testString: assert($('s').length == 1, '你应该添加一个<code>s</code>标签。');
- text: ' <code>s</code> 标签应该在 <code>h4</code> 标签内的 Google 文字外面,它不应包含单词 Alphabet。'
testString: assert($('s').text().match(/Google/gi) && !$('s').text().match(/Alphabet/gi), '<code>s</code> 标签应该在 <code>h4</code> 标签内的 Google 文字外面,它不应该包含单词 Alphabet。');
- text: '<code>h4</code> 标签内应该有单词 AlphabetAlphabet 应该没有删除线式。'
testString: assert($('h4').html().match(/Alphabet/gi), '<code>h4</code> 标签内应该有单词 AlphabetAlphabet 应该没有删除线样式。');
```
@ -64,15 +70,14 @@ tests:
<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>
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -84,7 +89,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,27 +2,33 @@
id: 587d781a367417b2b2512ab7
title: Use the strong Tag to Make Text Bold
challengeType: 0
videoUrl: ''
localeTitle: 使用强标记使文字粗体
videoUrl: 'https://scrimba.com/c/ceJNBSb'
forumTopicId: 1
localeTitle: 使用 strong 标签加粗文本
---
## Description
<section id="description">要使文本变为粗体,可以使用<code>strong</code>标记。这通常用于引起对文本的注意,并象征着它很重要。使用<code>strong</code>标记浏览器应用CSS的<code>font-weight: bold;</code>对元素。 </section>
<section id='description'>
术语Strong => s => 加粗。
你可以使用 <code>strong</code> 标签来加粗文字。添加了 <code>strong</code> 标签后,浏览器会自动给元素应用 <code>font-weight:bold;</code>
</section>
## Instructions
<section id="instructions"><code>p</code>标签内围绕“斯坦福大学”包裹一个<code>strong</code>的标签。 </section>
<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".");'
- text: '你应该有一个 <code>strong</code> 标签。'
testString: assert($('strong').length == 1, '你应该有一个 <code>strong</code> 标签。');
- text: '<code>strong</code> 标签应该在 <code>p</code> 标签里。'
testString: assert($('p').children('strong').length == 1, '<code>strong</code> 标签应该在 <code>p</code> 标签里。');
- text: '<code>strong</code> 标签应该包“斯坦福大学”。'
testString: assert($('strong').text().match(/^斯坦福大学$/gi), '<code>strong</code> 标签应该包围 “斯坦福大学”。');
```
@ -64,15 +70,14 @@ tests:
<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>
<p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</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>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -87,4 +92,6 @@ tests:
```js
// solution required
```
</section>

View File

@ -2,25 +2,32 @@
id: 587d781c367417b2b2512ac0
title: Use the text-transform Property to Make Text Uppercase
challengeType: 0
videoUrl: ''
localeTitle: 使用text-transform属性使文本为大写
videoUrl: 'https://scrimba.com/c/cvVZQSP'
forumTopicId: 301081
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>
<section id='description'>
CSS 里面的 <code>text-transform</code> 属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示,且无需直接改变 HTML 元素中的文本。
下面的表格展示了<code>text-transform</code> 的不同值对文字 “Transform me” 的影响。
<table class="table table-striped"><thead><th>Value<th>Result<tbody><tr><td><code>lowercase</code><td>"transform me"<tr><td><code>uppercase</code><td>"TRANSFORM ME"<tr><td><code>capitalize</code><td>"Transform Me"<tr><td><code>initial</code><td>使用默认值<tr><td><code>inherit</code><td>使用父元素的 <code>text-transform</code> 值。<tr><td><code>none</code><td><strong>Default:</strong>不改变文字。</td></table>
</section>
## Instructions
<section id="instructions">使用<code>text-transform</code>属性将<code>h4</code><code>text-transform</code>为大写。 </section>
<section id='instructions'>
使用 <code>text-transform</code> 属性把 <code>h4</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.");'
- text: '<code>h4</code> 内的英文的所有字母应该为大写。'
testString: assert($('h4').css('text-transform') === 'uppercase', '<code>h4</code> 内的英文的所有字母应该为大写。');
- text: '<code>h4</code> 内的原文不能被改变。'
testString: assert(($('h4').text() !== $('h4').text().toUpperCase()), '<code>h4</code> 内的原文不能被改变。');
```
@ -38,7 +45,7 @@ tests:
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}
p {
text-align: justify;
@ -70,15 +77,14 @@ tests:
<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>
<p><em>Google 由在<strong>斯坦福大学</strong>攻读<u>理工博士</u>的拉里·佩奇和谢尔盖·布林共同创建。</em></p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -90,7 +96,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

View File

@ -2,25 +2,34 @@
id: 587d781a367417b2b2512ab8
title: Use the u Tag to Underline Text
challengeType: 0
videoUrl: ''
localeTitle: 使用u标签为文本加下划线
videoUrl: 'https://scrimba.com/c/cN6aQCL'
forumTopicId: 301082
localeTitle: 使用 u 标签给文本添加下划线
---
## Description
<section id="description">要为文本加下划线,您可以使用<code>u</code>标记。这通常用于表示一段文字很重要,或者需要记住的东西。使用<code>u</code>标签,浏览器应用<code>text-decoration: underline;</code>的CSS <code>text-decoration: underline;</code>对元素。 </section>
<section id='description'>
术语Underline => u => 下划线。
你可以使用 <code>u</code> 标签来给文字添加下划线。添加了 <code>u</code> 标签后,浏览器会自动给元素应用 <code>text-decoration: underline;</code>
</section>
## Instructions
<section id="instructions">仅在“Ph.D. students”文本周围包裹<code>u</code>标签。 <strong>注意</strong> <br>当它可能与链接混淆时尽量避免使用<code>u</code>标签。 Anchor标签也有默认的带下划线的格式。 </section>
<section id='instructions'>
给 “理工博士” 添加 <code>u</code> 标签,不要给整个 class 为 <code>cardText</code> 的父 <code>div</code> 添加。
<strong>注意:</strong>锚点默认给文本添加下划线,如果 <code>u</code> 标签的下划线和页面的锚点混淆,请避免使用它。
</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".");'
- text: '你应该有一个 <code>u</code> 标签。'
testString: assert($('u').length === 1, '你应该有一个 <code>u</code> 标签。');
- text: '<code>u</code> 标签应该包围 “理工博士”。'
testString: assert($('u').text() === '理工博士', '<code>u</code> 标签应该包围 “理工博士”。');
- text: '<code>u</code> 标签内不应包含额外的 <code>div</code> 标签。'
testString: assert($('u').children('div').length === 0, '<code>u</code> 标签内不应包含额外的 <code>div</code> 标签。');
```
@ -62,15 +71,14 @@ tests:
<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>
<p>Google 由在<strong>斯坦福大学</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>
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">拉里·佩奇</a><br><br>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">谢尔盖·布林</a>
</div>
</div>
</div>
```
</div>
@ -82,7 +90,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>