fix(i18n): update Chinese translation of applied visual design (#37918)
This commit is contained in:
ZhichengChen
GitHub
@ -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-shadow：0 10px 20px rgba（0,0,0,0.19），0 6px 6px rgba（0,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>
|
||||
|
||||
@ -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> r = red 红色<br> g = green 绿色<br> b = blue 蓝色<br> a = alpha 透明度</blockquote>
|
||||
RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。<code>rgba()</code> 非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。
|
||||
在本挑战里你将会用到这个代码 <code>background-color: rgba(45, 45, 45, 0.1)</code>。它表示背景是黑灰色，因为设置了透明度为 0.1，所以几乎是透明的。
|
||||
</section>
|
||||
|
||||
## 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>
|
||||
|
||||
@ -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>© 2018 FCC Kitchen</footer>
|
||||
|
||||
<footer>©2020 freeCodeCamp 中国</footer>
|
||||
```
|
||||
|
||||
</div>
|
||||
@ -86,7 +90,9 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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> 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>
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>的's'和'l'分别代表饱和度和亮度。饱和度百分比会改变灰度，亮度百分比决定颜色中白色或黑色的含量。当您拥有自己喜欢的基色调时，这很有用，但需要不同的变体。 </section>
|
||||
<section id='description'>
|
||||
<code>hsl()</code> 使 CSS 更改色调更方便。给纯色添加白色可以创造更浅的色调，添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 <code>hsl()</code> 里面的 ‘s’ 和 ‘l’ 分辨代表饱和度和亮度。饱和度代表灰色的占比，亮度代表白色和黑色的占比。这在当你有了一个基色调却需要微调时非常有用。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">此站点上的导航栏当前从<code>header</code>元素继承其<code>background-color</code> 。从该颜色作为基础开始，为<code>nav</code>元素添加<code>background-color</code> ，使其使用相同的青色色调，但具有80％饱和度和25％亮度值，以改变其色调和阴影。 </section>
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>设置为1s，0.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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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-radius：25％; <br>位置：绝对; <br>身高：50px; <br>宽度：70px; <br>顶部：-50px; <br>左：5px; <br> } </blockquote>要使<code>::before</code>和<code>::after</code>伪元素正常运行，它们必须具有已定义的<code>content</code>属性。此属性通常用于向所选元素添加照片或文本等内容。当使用<code>::before</code>和<code>::after</code>伪元素创建形状时，仍然需要<code>content</code>属性，但它被设置为空字符串。在上面的示例中，具有<code>heart</code>类的元素具有<code>::before</code>伪元素，该元素分别生成<code>height</code>和<code>width</code>分别为50px和70px的黄色矩形。这个矩形由于其25％的边界半径而具有圆角，并且绝对位于距离<code>left</code> 5px和高于元素<code>top</code> 50px的<code>top</code> 。 </section>
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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模型（如在计算机屏幕上）和减色CMY（K）模型（如在打印中）。请阅读<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,0）和（1,1）的起点和终点。您可以为其他两个点设置x和y值，并将它们放置在网格中的位置决定了要遵循的动画曲线的形状。这是在CSS中通过以下形式声明<code>p1</code>和<code>p2</code> “锚”点的x和y值来完成的： <code>(x1, y1, x2, y2)</code> 。将它们全部拉到一起，这里是CSS代码中Bezier曲线的一个例子： <code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code>在上面的示例中，x和y值对于每个点都是等效的（x1 = 0.25 = y1和x2 = 0.75 = y2），如果您记得几何类，则会产生从原点延伸到点的线（1 ，1）。此动画是动画长度期间元素的线性变化，与使用<code>linear</code>关键字相同。换句话说，它以恒定的速度变化。 </section>
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>函数，x1，y1，x2，y2值分别设置为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> 函数，函数的参数 x1，y1，x2，y2 值依次为 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>属性的值应该是具有指定的x1，y1，x2，y2值的<code>cubic-bezier</code>函数。
|
||||
testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
|
||||
- text: 'id 为<code>green</code>的元素的<code>animation-timing-function</code>值应该为<code>cubic-bezier</code>函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。'
|
||||
testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'id 为<code>green</code>的元素的<code>animation-timing-function</code>值应该为<code>cubic-bezier</code>函数，函数的参数 x1，y1，x2，y2 值依次为 0.311、0.441、0.444、1.649。');
|
||||
|
||||
```
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'</code> </pre></section><h2>挑战种子</h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html"><head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body></code> </pre></div></section><h2>解</h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section></section>
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>函数，其中x1，y1，x2，y2值分别设置为0,0,0.58,1这将使两个元素同样在动画中前进。 </section>
|
||||
<section id='instructions'>
|
||||
为了看贝塞尔曲线的运动效果，把 id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性赋为 <code>cubic-bezier</code> 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。这会使两个元素运动过程类似。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'id为<code>red</code>的元素的<code>animation-timing-function</code>属性值应为<code>cubic-bezier</code>函数，x1，y1，x2，y2值分别设置为0,0,0.58,1。'
|
||||
testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
|
||||
- text: id为<code>red</code>的元素不应该具有linear的<code>animation-timing-function</code>属性。
|
||||
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'
|
||||
- text: 具有id <code>blue</code>的元素的<code>animation-timing-function</code>属性的值不应更改。
|
||||
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");'
|
||||
- text: 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性应当赋为 <code>cubic-bezier</code> 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。'
|
||||
testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'id 为 <code>red</code> 的元素的 <code>animation-timing-function</code> 属性应当赋为 <code>cubic-bezier</code> 函数，其中 x1，y1，x2，y2 值分别为 0，0，0.58，1。');
|
||||
- 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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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> <风格> <br> img：hover { <br>动画名称：宽度; <br>动画持续时间：500ms; <br> } <br><br> @keyframes width { <br> 100％{ <br>宽度：40px; <br> } <br> } <br> </样式> <br><br> <img src =“https://bit.ly/smallgooglelogo"alt =”Google的徽标“/> </blockquote></section>
|
||||
<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>
|
||||
|
||||
@ -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> transform：skewX（-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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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> 标签外面添加单词 Alphabet，Alphabet 不要有删除线格式。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 您的代码应一个加<code>s</code>标签来标记。
|
||||
testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");'
|
||||
- text: <code>s</code>标记应该环绕<code>h4</code>标记中的Google文本。它不应包含单词Alphabet。
|
||||
testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.");'
|
||||
- text: 在<code>h4</code>标记中包含单词Alphabet，不带删除线格式。
|
||||
testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");'
|
||||
- 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> 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。'
|
||||
testString: assert($('h4').html().match(/Alphabet/gi), '<code>h4</code> 标签内应该有单词 Alphabet，Alphabet 应该没有删除线样式。');
|
||||
|
||||
```
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user