chore: seed chinese traditional (#42005)
Seeds the chinese traditional files manually so we can deploy to staging.
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
e46e80e08f
commit
3da4be21bb
@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abe
|
||||
title: 給卡片元素添加 box-shadow
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZdUd'
|
||||
forumTopicId: 301031
|
||||
dashedName: add-a-box-shadow-to-a-card-like-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`box-shadow` 屬性用來給元素添加陰影，該屬性值是由逗號分隔的一個或多個陰影列表。
|
||||
|
||||
`box-shadow` 屬性的陰影依次由下面這些值描述：
|
||||
|
||||
<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><code>color</code></li>
|
||||
</ul>
|
||||
|
||||
其中 `blur-radius` 和 `spread-radius` 是可選的。
|
||||
|
||||
可以通過逗號分隔每個 `box-shadow` 元素的屬性來添加多個 box-shadow。
|
||||
|
||||
如下爲添加了模糊效果的例子，它使用了透明度較高的黑色作爲陰影：
|
||||
|
||||
```css
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
元素現在有一個 `thumbnail` id。 在這個選擇器中，使用上面的示例 CSS 值在卡片上加一個 `box-shadow`。
|
||||
|
||||
# --hints--
|
||||
|
||||
應該給 id 爲 `thumbnail` 的元素添加 `box-shadow` 屬性。
|
||||
|
||||
```js
|
||||
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||
```
|
||||
|
||||
`box-shadow` 屬性值應該是題目說明中指定的 CSS 值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: 調整文本的背景色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||
forumTopicId: 301032
|
||||
dashedName: adjust-the-background-color-property-of-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
爲了讓頁面更美觀，除了設置整個頁面的背景色以及文字顏色外，你還可以單獨設置文字的背景色，即在文字的父元素上添加 `background-color` 屬性。 在本挑戰裏我們將使用 `rgba()` 顏色，而不是之前學到的 `hex` 編碼或者 `rgb()` 顏色。
|
||||
|
||||
<blockquote>rgba 代表：<br> r = red 紅色<br> g = green 綠色<br> b = blue 藍色<br> a = alpha 透明度</blockquote>
|
||||
|
||||
RGB 值可以取在 0 到 255 之間。 alpha 值可取在 0 到 1 之間，其中 0 代表完全透明，1 代表完全不透明。 `rgba()` 在需要設置顏色透明度時十分有用， 這意味着你可以做出一些很漂亮的半透明效果。
|
||||
|
||||
在本挑戰裏你將會用到這個代碼 `background-color: rgba(45, 45, 45, 0.1)`。 它表示背景是黑灰色，因爲設置了透明度爲 0.1，所以幾乎是透明的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
爲了讓文字更醒目，設置 `h4` 元素的 `background-color` 屬性值爲上面指定的 `rgba()`。
|
||||
|
||||
同時移除 `h4` 的 `height` 屬性，並添加 `padding` 屬性，值爲 10px。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該給 `h4` 元素添加一個 `background-color` 屬性並且賦值 `rgba(45, 45, 45, 0.1)`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
|
||||
code.replace(/\s/g, '')
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`h4` 元素的 `padding` 屬性值應爲 10px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4').css('padding-top') == '10px' &&
|
||||
$('h4').css('padding-right') == '10px' &&
|
||||
$('h4').css('padding-bottom') == '10px' &&
|
||||
$('h4').css('padding-left') == '10px'
|
||||
);
|
||||
```
|
||||
|
||||
`h4` 元素不應有 `height` 屬性。
|
||||
|
||||
```js
|
||||
assert(!($('h4').css('height') == '25px'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: 將各種元素的顏色調整爲互補色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||
forumTopicId: 301033
|
||||
dashedName: adjust-the-color-of-various-elements-to-complementary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
通過前面關卡的學習，我們知道了補色搭配能形成強列的對比效果，讓內容更富生機。 但是如果使用不當效果會適得其反：比如將文字背景色和文字顏色設置爲互補色，這樣文字會很難看清。 通常的做法是，一種顏色做爲主要顏色，然後使用其補色用來裝點那些需要用戶特別注意的部分。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用深青色（`#09A7A1`）做爲頁面主色，用其補色橙色（`#FF790E`）來裝飾登錄按鈕。 把 `header` 和 `footer` 的 `background-color` 從黑色改成深青色。 然後把 `h2` 的文字 `color` 也改成深青色。 最後，把 `button` 的 `background-color` 改成橙色。
|
||||
|
||||
# --hints--
|
||||
|
||||
`header` 元素的 `background-color` 屬性值應爲 #09A7A1。
|
||||
|
||||
```js
|
||||
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`footer` 元素的 `background-color` 屬性值應爲 #09A7A1。
|
||||
|
||||
```js
|
||||
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`h2` 元素的 `color` 屬性值應爲 #09A7A1。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`button` 元素的 `background-color` 屬性值應爲 #FF790E。
|
||||
|
||||
```js
|
||||
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
button {
|
||||
background-color: white;
|
||||
}
|
||||
footer {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: #09A7A1;
|
||||
}
|
||||
button {
|
||||
background-color: #FF790E;
|
||||
}
|
||||
footer {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: 使用 height 屬性調整元素的寬度
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||
forumTopicId: 301034
|
||||
dashedName: adjust-the-height-of-an-element-using-the-height-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
和 `width` 屬性類似，你可以使用 CSS 裏面的 `height` 屬性來指定元素的高度。 下面這段代碼可以把圖片的高度設置爲 20px：
|
||||
|
||||
```css
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 `h4` 標籤添加 `height` 屬性並將屬性值設置爲 25px。
|
||||
|
||||
**注意：**可能需要將瀏覽器的縮放比調整爲 100% 才能通過這一挑戰。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` 的 `height` 屬性值應爲 25px。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
|
||||
25 &&
|
||||
/h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: 調整錨點的懸停狀態
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||
forumTopicId: 301035
|
||||
dashedName: adjust-the-hover-state-of-an-anchor-tag
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
本挑戰將要涉及到僞類。 僞類是可以添加到選擇器上的關鍵字，用來選擇特定狀態的元素。
|
||||
|
||||
比如，可以使用 `:hover` 僞類選擇器來選取超鏈接的懸停狀態。 下面的代碼可以在鼠標懸停在超鏈接上時將其 `color` 變成紅色：
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
代碼編輯器裏面已經有了一個 CSS 規則把所有的 `a` 標籤定義成了黑色。 請添加一個規則，使得用戶懸停在 `a` 標籤時，標籤的 `color` 變成藍色。
|
||||
|
||||
# --hints--
|
||||
|
||||
超鏈接的 `color` 應該保持黑色，應只添加 `:hover` CSS 規則。
|
||||
|
||||
```js
|
||||
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
懸停超鏈接時超鏈接的 `color` 應該變成藍色。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
a:hover {
|
||||
color: rgba(0,0,255,1);
|
||||
}
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
@ -0,0 +1,129 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: 調整顏色的色相
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||
forumTopicId: 301036
|
||||
dashedName: adjust-the-hue-of-a-color
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
顏色具有多種特性，包括色相、飽和度和亮度。 CSS3 引入了 `hsl()` 做爲顏色的描述方式。
|
||||
|
||||
**色相**是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。 以顏色光譜爲例，光譜左邊從紅色開始，移動到中間的綠色，一直到右邊的藍色，色相值就是沿着這條線的取值。 在 `hsl()` 裏面，色相用色環來代替光譜，色相值就是色環裏面的顏色對應的從 0 到 360 度的角度值。
|
||||
|
||||
**飽和度**是指色彩的純度，也就是顏色裏灰色的佔比。 飽和度越高則灰色佔比越少，色彩也就越純；反之則完全是灰色。 飽和度的取值範圍是表示灰色所佔百分比的 0 至 100。
|
||||
|
||||
**亮度**決定顏色的明暗程度，也就是顏色裏白色或者黑色的佔比。 其中，100% 的亮度表示純白色， 0% 的亮度則表示純黑色；而 50% 的亮度就表示在色相中選取的顏色。
|
||||
|
||||
下面是一些使用 `hsl()` 描述顏色的例子，顏色都爲滿飽和度，中等亮度:
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>顏色</th><th>HSL</th></tr></thead><tbody><tr><td>紅</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>黃</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>綠</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>藍綠</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>藍</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>品紅</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
將 class 爲 `green`、`cyan` 和 `blue` 的 `div` 的 `background-color` 屬性值設置爲使用 `hsl()` 表示的顏色。 顏色都爲滿飽和度，亮度中等。
|
||||
|
||||
# --hints--
|
||||
|
||||
應使用 `hsl()` 屬性來設置顏色爲 `green`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
應使用 `hsl()` 屬性來設置顏色爲 `cyan`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
應使用 `hsl()` 屬性來設置顏色爲 `blue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
class 爲 `green` 的 `div` 元素的 `background-color` 屬性值應爲綠色。
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
class 爲 `cyan` 的 `div` 元素的 `background-color` 屬性值應爲藍綠色。
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
class 爲 `blue` 的 `div` 元素的 `background-color` 屬性值應爲藍色。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: hsl(120, 100%, 50%);
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: hsl(180, 100%, 50%);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: 調整標題與段落的大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||
forumTopicId: 301037
|
||||
dashedName: adjust-the-size-of-a-header-versus-a-paragraph-tag
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
標題標籤的字體大小（從 `h1` 到 `h6`）一般應該大於段落標籤的字體大小。 這使用戶更容易在視覺上了解頁面上所有內容的佈局和重要程度。 你可以使用 `font-size` 屬性來設置元素內文字的大小。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `h4` 標籤的 `font-size` 的屬性值改成 27px，讓標題更醒目。
|
||||
|
||||
# --hints--
|
||||
|
||||
應給 `h4` 元素添加一個 `font-size` 屬性並將屬性值設置爲 27px。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '27px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: 調整顏色的色調
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||
forumTopicId: 301038
|
||||
dashedName: adjust-the-tone-of-a-color
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`hsl()` 使 CSS 更改顏色色調更加方便。 比如，給一個純色添加白色可以調出更淺的色調；添加黑色可以創造更深的色調。 另外，還可以通過給純色添加灰色來同時改變顏色的深淺和明暗。 回憶下 `hsl()` 裏面的 ‘s’ 和 ‘l’ 分辨代表飽和度和亮度。 飽和度代表灰色的佔比，亮度代表白色和黑色的佔比。 這在你想獲取一個基準色的變種的情景下會十分有用。
|
||||
|
||||
# --instructions--
|
||||
|
||||
所有元素的默認 `background-color` 都是 `transparent`。 當前頁面的導航欄 `nav` 背景色之所以看起來是藍綠色，是因爲它背後的 `header` 的 `background-color` 屬性值爲 `cyan`。 給 `nav` 元素增加一個 `background-color`，使它的顏色也爲 `cyan`，飽和度爲 `80%`，亮度爲 `25%`，以修改它的色調和陰影。
|
||||
|
||||
# --hints--
|
||||
|
||||
`nav` 元素應該有一個使用 `hsl()` 屬性調節藍綠色調的 `background-color` 屬性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: hsl(180, 80%, 25%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: 使用 width 屬性調整元素的寬度
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||
forumTopicId: 301039
|
||||
dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 CSS 裏的 `width` 屬性來指定元素的寬度。 屬性值可以是相對單位（比如 `em`），絕對單位（比如 `px`），或者包含塊（父元素）寬度的百分比。 下面這段代碼可以把圖片的寬度設置爲 220px：
|
||||
|
||||
```css
|
||||
img {
|
||||
width: 220px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
爲卡片元素添加 `width` 屬性，並將它的寬度設置爲 245px。 使用 `fullCard` class 來選擇卡片元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
應使用 `fullCard` class 選擇器將卡片的 `width` 屬性值設置爲 `245px`。
|
||||
|
||||
```js
|
||||
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||
assert(
|
||||
fullCard &&
|
||||
/width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
|
||||
$('.fullCard').css('maxWidth') === 'none'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: 以可變速率來給元素添加動畫
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||
forumTopicId: 301040
|
||||
dashedName: animate-elements-at-variable-rates
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
改變相似元素的動畫頻率的方法有很多。 目前我們接觸到的就有 `animation-iteration-count` 和 `@keyframes`。
|
||||
|
||||
舉例說明，右邊的動畫包含了兩個小星星，每個小星星都在 `@keyframes` 爲 20% 處變小並且透明度變低，也就是一閃一閃的動畫效果。 你可以通過改變其中一個元素的 `@keyframes` 規則以使兩個小星星以不同的頻率閃爍。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請將 class 爲 `star-1` 的元素的 `@keyframes` 爲設置爲 50%，以此改變其動畫頻率。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `star-1` 的元素的 `@keyframes` 規則應爲 50%。
|
||||
|
||||
```js
|
||||
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
50% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: 使用無限的動畫計數製作永不停止的動畫
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||
forumTopicId: 301041
|
||||
dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
之前的關卡里介紹了一些動畫屬性以及 `@keyframes` 規則的用法。 還有一個常用的動畫屬性是 `animation-iteration-count`，這個屬性允許你控制動畫循環的次數。 下面是一個例子：
|
||||
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
在這裏動畫會在運行 3 次後停止，如果想讓動畫一直運行，可以把值設置成 `infinite`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `animation-iteration-count` 屬性改成 `infinite`，使右邊的球一直跳躍。
|
||||
|
||||
# --hints--
|
||||
|
||||
`animation-iteration-count` 屬性的值應爲 `infinite`。
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 3;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: 以可變速率來給多個元素添加動畫
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||
forumTopicId: 301042
|
||||
dashedName: animate-multiple-elements-at-variable-rates
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在前面的關卡里，我們通過修改 `@keyframes` 改變了兩個相似動畫元素的頻率。 你也可以通過改變多個元素的 `animation-duration` 來達到同樣的效果。
|
||||
|
||||
在代碼編輯器裏運行的動畫中，天空中有三顆以同樣頻率不停閃爍的星星。 你可以設置每一個星星的 `animation-duration` 屬性爲不同的值，以使其具有不同的閃爍頻率。
|
||||
|
||||
# --instructions--
|
||||
|
||||
依次設置 class 爲 `star-1`、`star-2`、`star-3` 的元素的 `animation-duration` 爲 1s、0.9s、1.1s。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `star-1` 的 `animation-duration` 屬性值應該 1s。
|
||||
|
||||
```js
|
||||
assert($('.star-1').css('animation-duration') == '1s');
|
||||
```
|
||||
|
||||
class 爲 `star-2` 的 `animation-duration` 屬性值應該 0.9s。
|
||||
|
||||
```js
|
||||
assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
```
|
||||
|
||||
class 爲 `star-3` 的 `animation-duration` 屬性值應該 1.1s。
|
||||
|
||||
```js
|
||||
assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 0.9s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1.1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: 使用 margin 屬性將元素水平居中
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||
forumTopicId: 301043
|
||||
dashedName: center-an-element-horizontally-using-the-margin-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在應用設計中經常需要把一個塊級元素水平居中顯示。 一種常見的實現方式是把塊級元素的 `margin` 值設置爲 auto。
|
||||
|
||||
同樣的，這個方法也對圖片奏效。 圖片默認是內聯元素，但是可以通過設置其 `display` 屬性爲 `block`來把它變成塊級元素。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通過添加一個值爲 `auto` 的 `margin` 屬性，將 `div` 在頁面居中。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 應有一個 `margin`，設置爲 `auto`。
|
||||
|
||||
```js
|
||||
assert(code.match(/margin:\s*?auto;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512ac9
|
||||
title: 更改元素的相對位置
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVmMtZ'
|
||||
forumTopicId: 301044
|
||||
dashedName: change-an-elements-relative-position
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 裏一切 HTML 元素皆爲盒子，也就是通常所說的<dfn>盒模型</dfn>。 塊級元素自動從新的一行開始（比如標題、段落以及 div），行內元素排列在上一個元素後（比如圖片以及 span）。 元素默認按照這種方式佈局稱爲文檔的<dfn>普通流</dfn>，同時 CSS 提供了 position 屬性來覆蓋它。
|
||||
|
||||
當元素的定位設置爲 `relative` 時，它允許你通過 CSS 指定該元素在當前文檔流頁面下的*相對*偏移量。 CSS 裏控制各個方向偏移量的屬性是 `left`、`right`、`top` 和 `bottom`。 它們代表從原來位置向遠離該方向*偏移*指定的像素、百分比或者 em。 下面的例子展示了段落向上偏移 10px：
|
||||
|
||||
```css
|
||||
p {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
把元素的位置設置成相對，並不會改變該元素在佈局中所佔的位置，也不會對其它元素的位置產生影響。
|
||||
|
||||
**注意：**定位可以使頁面佈局更靈活、高效。 不管元素的定位是怎樣的，HTML 標記在從上到下閱讀起來時應該是整潔的、有意義的。 這樣可以讓視障人士（重度依賴輔助設備比如屏幕閱讀軟件的人們）也能夠無障礙地瀏覽你的網頁。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 `h2` 的 `position` 設置成 `relative`，使用相應的 CSS 屬性調整它的位置，使其相對 `top` 偏移 15px，同時還在文檔流中處於原來的位置。 這不會對 h1 和 p 元素的位置產生影響。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素應有一個值爲 `relative` 的 `position` 屬性。
|
||||
|
||||
```js
|
||||
assert($('h2').css('position') == 'relative');
|
||||
```
|
||||
|
||||
你應該使用 CSS 屬性調整 `h2` 的位置，使其從原來的位置相對 `top` 偏移 15px。
|
||||
|
||||
```js
|
||||
assert($('h2').css('top') == '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae7
|
||||
title: 使用關鍵字更改動畫定時器
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKvwCM'
|
||||
forumTopicId: 301045
|
||||
dashedName: change-animation-timing-with-keywords
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 動畫裏，`animation-timing-function` 用來定義動畫的速度曲線。 速度曲線決定了動畫從一套 CSS 樣式變爲另一套所用的時間。 如果要描述的動畫是一輛車在指定時間內（`animation-duration`）從 A 運動到 B，那麼 `animation-timing-function` 表述的就是車在運動中的加速和減速等過程。
|
||||
|
||||
有一些預定義的關鍵字可用於常見的選項。 比如，默認值是 `ease`，動畫以低速開始，然後加快，在結束前變慢。 其它常用的值包括 `ease-out`：動畫以高速開始，以低速結束；`ease-in`，動畫以低速開始，以高速結束；`linear`：動畫從頭到尾的速度是相同的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 id 爲 `ball1` 和 `ball2` 的元素添加 `animation-timing-function`，`ball1` 的屬性值爲 `linear`，`ball2` 的屬性值爲 `ease-out`。 它們的 `animation-duration` 都爲 2 秒，注意觀察它們在開始和結束時的不同。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 爲 `ball1` 的元素的 `animation-timing-function` 屬性值應爲 `linear`。
|
||||
|
||||
```js
|
||||
const ball1Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball1').css('animation-timing-function')
|
||||
);
|
||||
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
```
|
||||
|
||||
id 爲 `ball2` 的元素的 `animation-timing-function` 屬性值爲 `ease-out`。
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512acf
|
||||
title: 使用 z-index 屬性更改重疊元素的位置
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM94aHk'
|
||||
forumTopicId: 301046
|
||||
dashedName: change-the-position-of-overlapping-elements-with-the-z-index-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
當一些元素在位置上重疊時（例如，使用 `position: absolute | relative | fixed | sticky` 時），在 HTML 裏後出現的元素會默認顯示在更早出現的元素的上面。 你可以使用 `z-index` 屬性指定元素的堆疊次序。 `z-index` 的取值是整數，數值大的元素會疊放到數值小的元素上面。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 class 爲 `first` 的元素（紅色的方塊）添加 `z-index` 屬性並將屬性值設置爲 2，使它顯示在藍色方塊的上方。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `first` 的元素的 `z-index` 屬性值應爲 2。
|
||||
|
||||
```js
|
||||
assert($('.first').css('z-index') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad6
|
||||
title: 創建一個 CSS 線性漸變
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4dpt9'
|
||||
forumTopicId: 301047
|
||||
dashedName: create-a-gradual-css-linear-gradient
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 元素的背景色並不侷限於單色。 CSS 還爲我們提供了顏色漸變。 可通過 `background` 裏的 `linear-gradient()` 實現線性漸變， 以下是它的語法：
|
||||
|
||||
```css
|
||||
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||
```
|
||||
|
||||
第一個參數指定了顏色過渡的方向——它的值是角度，`90deg` 表示垂直漸變（從左到右），`45deg` 表示沿對角線漸變（從左下方到右上方）。 其他參數指定了漸變顏色的順序：
|
||||
|
||||
例如：
|
||||
|
||||
```css
|
||||
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `linear-gradient()` 給 `div` 元素添加 `background` 漸變色，漸變角度爲 35 度，從 `#CCFFFF` 過渡到 `#FFCCCC`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 元素應有一個指定方向和顏色的 `linear-gradient` `background`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div')
|
||||
.css('background-image')
|
||||
.match(
|
||||
/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512add
|
||||
title: 使用 CSS 創建一個圖形
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDWPs6'
|
||||
forumTopicId: 301048
|
||||
dashedName: create-a-graphic-using-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
通過使用不同的選擇器和屬性，你可以做出有趣的形狀， 一個簡單的例子是新月形狀。 在這個挑戰中，我們會學習如何使用 `box-shadow` 屬性來設置元素的陰影，以及使用 `border-radius` 屬性控制元素的圓角邊框。
|
||||
|
||||
首先我們來創建一個圓的、透明的圖形，它具有模糊陰影並略微向兩邊遞減。 如你所見，這個陰影其實就是新月形狀。
|
||||
|
||||
爲了創建一個圓形的對象，`border-radius` 應該被設置成 50%。
|
||||
|
||||
你應該還記得之前關卡的 `box-shadow` 屬性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和顏色值。 其中 `blur-radius` 和 `spread-radius` 是可選的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把編輯器裏的正方形元素變成新月形狀。 首先，把 `background-color` 改爲 `transparent`，接着把 `border-radius` 屬性設置成 50%，以創建一個圓形。 最後，更改 `box-shadow` 屬性，使其 `offset-x` 爲 25px，`offset-y` 爲 10px，`blur-radius` 爲 0，`spread-radius` 爲 0，顏色爲 `blue`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`background-color` 屬性值應爲 `transparent`。
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
```
|
||||
|
||||
`border-radius` 屬性的值應該設置爲 `50%`。
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
更改 `box-shadow` 屬性，使其 `offset-x` 爲 25px，`offset-y` 爲 10px，`blur-radius` 爲 0，`spread-radius` 爲 0，顏色爲 `blue`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
border-radius: 0px;
|
||||
box-shadow: 25px 10px 10px 10px green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
box-shadow: 25px 10px 0 0 blue;
|
||||
}
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: 使用 hr 標籤創建水平線
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bR8t7'
|
||||
forumTopicId: 301049
|
||||
dashedName: create-a-horizontal-line-using-the-hr-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以用 `hr` 標籤來創建一條寬度撐滿父元素的水平線。 這種水平分割線一般用來表示內容主題的改變，或在視覺上將文檔分隔成幾個部分。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在卡片標題元素 `h4` 下方添加一個 `hr` 標籤。
|
||||
|
||||
**注意：**HTML 中的 `hr` 是自閉合標籤，所以我們不需要爲它添加結束標籤。
|
||||
|
||||
# --hints--
|
||||
|
||||
應存在一個 `hr` 標籤。
|
||||
|
||||
```js
|
||||
assert($('hr').length == 1);
|
||||
```
|
||||
|
||||
`hr` 應在標題和段落之間。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512ade
|
||||
title: 使用 CSS 和 HTML 創建更復雜的形狀
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpz4fr'
|
||||
forumTopicId: 301050
|
||||
dashedName: create-a-more-complex-shape-using-css-and-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
世界上最流行的形狀非心形莫屬了，在本挑戰中我們將用純 CSS 創建一個心形。 但是首先你需要了解僞元素 `::before` 和 `::after`。 僞元素可以在所選元素之前或之後添加一些內容。 在下面的代碼中，`::before` 僞元素用來給 class 爲 `heart` 的元素添加一個正方形：
|
||||
|
||||
```css
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: yellow;
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 70px;
|
||||
top: -50px;
|
||||
left: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
`::before` 和 `::after` 必須配合 `content` 來使用。 這個屬性通常用來給元素添加內容諸如圖片或者文字。 儘管有時 `::before` 和 `::after` 是用來實現形狀而非文字，但 `content` 屬性仍然是必需的，此時它的值可以是空字符串。 在上面的例子裏，class 爲 `heart` 元素的 `::before` 僞類添加了一個黃色的長方形，長方形的高和寬分別爲 `50px` 和 `70px`。 這個矩形有圓角，因爲它的 `border-radius` 爲 25%，它的位置是絕對位置，位於離元素左邊和頂部分別是 `5px`、`50px` 的位置。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把屏幕裏的元素變成心形。 在 `heart::after` 選擇器裏，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。
|
||||
|
||||
接下來，用類選擇器選取 class 爲 `heart`（只是 `heart`）的元素，爲它添加 `transform` 屬性。 使用 `rotate()` 函數並設置角度爲 -45 度。
|
||||
|
||||
最後，在 `heart::before` 選擇器裏面，設置 `content` 屬性值爲空字符串。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart::after` 選擇器的 `background-color` 屬性值應爲 `pink`。
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
assert(
|
||||
/({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter)
|
||||
);
|
||||
```
|
||||
|
||||
`heart::after` 僞元素的 `border-radius` 屬性值應爲 50%。
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
```
|
||||
|
||||
class 爲 `heart` 的元素的 `transform` 屬性應使用 `rotate()` 函數並傳入參數 -45 度。
|
||||
|
||||
```js
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
`heart::before` 僞元素的 `content` 應爲空字符串。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: ;
|
||||
}
|
||||
.heart::after {
|
||||
background-color: blue;
|
||||
content: "";
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: ;
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.heart::after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: 使用 CSS 動畫創建動畫
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||
forumTopicId: 301051
|
||||
dashedName: create-movement-using-css-animation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在元素的 `position` 已有指定值（如 `fixed` 或者 `relative`）時，CSS 偏移屬性 `right`、`left`、`top`、`bottom` 可以用在動畫規則裏創建動作。
|
||||
|
||||
就像下面的例子展示的那樣，你可以在 `50%` keyframe 處設置 `top` 屬性爲 50px，在開始（`0%`）和結束（`100%`）keyframe 處設置爲 0px，以實現元素先向下運動，然後返回的動作效果。
|
||||
|
||||
```css
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
請實現讓 `div` 水平運動的效果。 使用 `left` 偏移屬性，添加 `@keyframes` 規則，讓 rainbow 在 `0%` 處偏移 0px，在 `50%` 處偏移 25px，在 `100%` 處偏移 -25px。 不要修改編輯器裏的 `top` 屬性，元素應該同時在水平和豎直方向運動。
|
||||
|
||||
# --hints--
|
||||
|
||||
`0%` 的 `@keyframes` 規則應爲向 `left` 偏移 0px。
|
||||
|
||||
```js
|
||||
assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
`50%` 的 `@keyframes` 規則應爲向 `left` 偏移 25px。
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
`100%` 的 `@keyframes` 規則應爲向 `left` 偏移 -25px。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
left: 25px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
left: -25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad8
|
||||
title: 通過添加細微圖案作爲背景圖像來創建紋理
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQdwJC8'
|
||||
forumTopicId: 301052
|
||||
dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
爲了增加背景圖的質感，我們可以爲它添加一個不那麼明顯的紋理圖案，這樣可以讓頁面更討喜。 但關鍵在於，我們需要找到一個平衡點，因爲我們不希望背景圖搶佔了內容的風頭，造成喧賓奪主的結果。 `background` 屬性支持使用 `url()` 函數作爲屬性值，這讓我們可以通過鏈接的方式引入紋理或樣式的圖片。 圖片鏈接的地址應寫在括號內，一般會用引號包起來。
|
||||
|
||||
# --instructions--
|
||||
|
||||
選取 `body` 元素，並設置整個頁面的 `background` 爲 url `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png` 的圖片。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` 元素選擇器應包含 `background` 屬性，且屬性值應爲給定的 `url`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: 使用 text-align 屬性創建視覺平衡
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3b4EAp'
|
||||
forumTopicId: 301053
|
||||
dashedName: create-visual-balance-using-the-text-align-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
這部分課程的主題是應用視覺設計。 開始的挑戰基於美化一個卡片組件的外觀，藉此展示了若干核心原則。
|
||||
|
||||
web 內容大部分都是文本。 CSS 裏面的 `text-align` 屬性可以控制文本的對齊方式。
|
||||
|
||||
`text-align: justify;` 可以讓除最後一行之外的文字兩端對齊，即每行的左右兩端都緊貼行的邊緣。
|
||||
|
||||
`text-align: center;` 可以讓文本居中對齊。
|
||||
|
||||
`text-align: right;` 可以讓文本右對齊。
|
||||
|
||||
`text-align: left;` 是默認值，它可以讓文本左對齊。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請讓內容文本爲 “Google” 的 `h4` 標籤居中對齊， 然後將介紹 Google 創立歷程的段落文本兩端對齊。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` 標籤應有值爲 `center` 的 text-align 屬性。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-align') == 'center');
|
||||
```
|
||||
|
||||
`p` 標籤應有值爲 `justify` 的 text-align 屬性。
|
||||
|
||||
```js
|
||||
assert($('p').css('text-align') == 'justify');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
|
||||
}
|
||||
p {
|
||||
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae2
|
||||
title: 通過從左到右淡化元素來創建視覺方向
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJqqAE'
|
||||
forumTopicId: 301054
|
||||
dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在本挑戰中，我們需要改變動畫元素的 `opacity` 屬性值，使其在到達屏幕右側時漸隱。
|
||||
|
||||
在示例動畫中，具有漸變背景的圓形元素在 `@keyframes` 爲 50% 的節點向右移動。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 id 選擇器選擇 id 爲 `ball` 的元素，在 @keyframes 爲 `50%` 的節點裏添加 `opacity` 屬性並設置屬性值爲 0.1，使其在向右移動時漸隱。
|
||||
|
||||
# --hints--
|
||||
|
||||
`keyframes` 爲 50% 的節點處應設置 `opacity` 屬性值爲 0.1，以使其漸隱。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: 降低元素的透明度
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||
forumTopicId: 301055
|
||||
dashedName: decrease-the-opacity-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 裏的 `opacity` 屬性用來設置元素的透明度。
|
||||
|
||||
<blockquote>屬性值爲 1 代表完全不透明。 <br>屬性值爲 0.5 代表半透明。 <br>屬性值爲 0 代表完全透明。</blockquote>
|
||||
|
||||
透明度會應用到元素內的所有內容，不論是圖片，還是文本，或是背景色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
將 class 爲 `links` 的所有超鏈接的 `opacity` 屬性值設置 0.7。
|
||||
|
||||
# --hints--
|
||||
|
||||
應使用 `links` class 選擇所有的超鏈接，並設置其 `opacity` 屬性值爲 0.7。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
|
||||
$('style').text()
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad1
|
||||
title: 瞭解互補色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MD3Tr'
|
||||
forumTopicId: 301056
|
||||
dashedName: learn-about-complementary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
色彩理論以及設計色彩學很複雜，這裏將只涉及基礎部分。 在網站設計裏，顏色能讓內容更醒目，能調動情緒，從而創造舒適的視覺體驗。 不同的顏色組合對網站的視覺效果影響很大，精妙的設計都需要適宜的顏色來美化頁面內容。
|
||||
|
||||
色環是我們認識顏色關係的好工具。它是一個近色相鄰、異色相離的圓環。 當兩個顏色恰好在色環的兩端時，這兩個顏色就互爲補色。 兩個互爲補色的顏色會在混合後變成灰色。 然而，補色搭配能形成強烈的視覺對比效果。
|
||||
|
||||
下面是一些以 hex 形式表示的補色例子：
|
||||
|
||||
<blockquote>紅色（#FF0000）和藍綠色 (#00FFFF)<br>綠色（#00FF00）和品紅色（#FF00FF）<br>藍色（#0000FF）和黃色（#FFFF00）</blockquote>
|
||||
|
||||
這與我們許多人在學校學的過時的 RYB 色彩模式不同，RYB 有不同的原色和補色。 現代色彩理論使用 RGB 模型（如在計算機屏幕上）和 CMY（K）模型（如在印刷中）。 在[這裏](https://en.wikipedia.org/wiki/Color_model)閱讀了解更多有關這個複雜主題的信息。
|
||||
|
||||
現在，很多在線選色工具也爲我們提供了尋找補色的功能。
|
||||
|
||||
**注意：**對於顏色相關的挑戰：顏色搭配是提起用戶興趣或吸引用戶注意的重要方式之一。 但我們不應讓顏色作爲傳達重要信息的唯一方式，因爲視覺障礙用戶可能無法像其他人一樣看出其中的含義。 我們將會在應用無障礙章節進行詳細介紹。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 class 爲 `blue` 和 `yellow` 的元素的 `background-color` 屬性改成相應的顏色。 注意觀察這兩個顏色的搭配效果，以及對比白色背景的視覺效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `blue` 的 `div` 元素應有一個 `background-color`，顏色爲藍色。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
class 爲 `yellow` 的 `div` 元素的 `background-color` 屬性，顏色爲黃色。
|
||||
|
||||
```js
|
||||
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #000000;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: 瞭解三次色
|
||||
challengeType: 0
|
||||
forumTopicId: 301057
|
||||
dashedName: learn-about-tertiary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
電腦顯示器和各類屏幕都是基於顏色疊加的模型：將紅（R）、綠（G）、藍（B）三原色的色光以不同的比例相加，就可以產生各種色彩光。 這在現代色彩理論中叫作三原色光模式（RGB Color Model）。 紅色（R）、綠色（G）和藍色（B）叫作三原色。 如果把兩種原色相加，就可以產生二次色：藍綠（G+B）、品紅（R+B）和黃色（R+G）， 我們在上一個挑戰裏已經見過這些顏色了。 這些二次色恰好是在合成它們時未使用的原色的補色，即在色環中位於兩端。 例如，品紅色是紅色和藍色相加產生，它是綠色的補色。
|
||||
|
||||
三次色是由原色和二次色相加產生的顏色， 例如，在 RGB 顏色模型中，紅色（原色）和黃色（二次色）相加產生橙色（三次色）。 將這六種顏色中相鄰的顏色相加，便產生了十二色色環。
|
||||
|
||||
設計裏面有很多種顏色搭配方法。 涉及到三次色的一種配色方法是分裂補色搭配法。 選定主色之後，在色環上選擇與它的補色相鄰的兩種顏色與之搭配。 此種搭配既有對比，又不失和諧。
|
||||
|
||||
下面是使用分裂補色搭配法創建的三個顏色：
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>顏色</th><th>HEX 顏色碼</th></tr></thead><thead></thead><tbody><tr><td>橙色</td><td>#FF7F00</td></tr><tr><td>藍綠色</td><td>#00FFFF</td></tr><tr><td>樹莓紅</td><td>#FF007F</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 class 爲 `orange`、`cyan` 和 `raspberry` 的 `background-color` 改成其對應的顏色。 在這個挑戰中，請使用顏色的十六進制符號（即 hex code）來表示。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 爲 `orange` 的 `div` 的 `background-color` 屬性值應爲橙色。
|
||||
|
||||
```js
|
||||
assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||
```
|
||||
|
||||
class 爲 `cyan` 的 `div` 的 `background-color` 屬性值應爲藍綠色。
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
class 爲 `raspberry` 的 `div` 的 `background-color` 屬性值應爲樹莓紅色。
|
||||
|
||||
```js
|
||||
assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||
```
|
||||
|
||||
所有的 `background-color` 應使用十六進制顏色碼，而不應使用顏色名稱。
|
||||
|
||||
```js
|
||||
assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #FF7F00;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #00FFFF;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #FF007F;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae8
|
||||
title: 學習貝塞爾曲線的原理
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
||||
forumTopicId: 301058
|
||||
dashedName: learn-how-bezier-curves-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
上一個挑戰中，我們介紹了 `animation-timing-function` 以及它的一些預設值，這些值定義了不同時間內的動畫速度。 除了預定義值之外，CSS 還提供了貝塞爾曲線（Bezier curves）來更細緻地控制動畫的速度曲線。
|
||||
|
||||
在 CSS 動畫裏，我們可以用 `cubic-bezier` 來定義貝塞爾曲線。 曲線的形狀代表了動畫的速度。 曲線在 1 * 1 的座標系統內， 其中 X 軸代表動畫的時間間隔（類似於時間比例尺），Y 軸代表動畫的改變。
|
||||
|
||||
`cubic-bezier` 函數包含了 1 * 1 網格里的4個點：`p0`、`p1`、`p2`、`p3`。 其中 `p0` 和 `p3` 是固定值，代表曲線的起始點和結束點，座標值依次爲 (0, 0) 和 (1, 1)。 你只需設置另外兩點的 x 值和 y 值，設置的這兩點確定了曲線的形狀從而確定了動畫的速度曲線。 在 CSS 裏面通過 `(x1, y1, x2, y2)` 來確定 `p1` 和 `p2`。 以下就是 CSS 貝塞爾曲線的例子：
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
```
|
||||
|
||||
在上面的例子裏，兩個點的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2）。如果你還記得幾何課的知識，結果是從原點到點 (1, 1) 的一條直線。 元素在動畫中的速度呈線性，效果和使用 `linear` 關鍵詞的效果一致。 換言之，元素勻速運動。
|
||||
|
||||
# --instructions--
|
||||
|
||||
對於 id 爲 `ball1` 的元素，把 `animation-timing-function` 屬性的值從 `linear` 改爲等價的 `cubic-bezier` 函數值。 也就是說使用上面例子給的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 爲 `ball1` 的元素的 `animation-timing-function` 屬性值應該爲和 linear 預定值等價的 `cubic-bezier` 函數值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#ball1').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
|
||||
);
|
||||
```
|
||||
|
||||
id 爲 `ball2` 的元素的 `animation-timing-function` 屬性值不應改變。
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512adf
|
||||
title: 瞭解 CSS 的關鍵幀和動畫是如何工作的
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||||
forumTopicId: 301059
|
||||
dashedName: learn-how-the-css-keyframes-and-animation-properties-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
如果要給元素添加動畫，你需要了解 animation 屬性以及 `@keyframes` 規則。 animation 屬性控制動畫的外觀，`@keyframes` 規則控制動畫中各階段的變化。 總共有 8 個 animation 屬性。 爲了便於理解，本挑戰中我們只會暫時涉及到兩個最常用的屬性。
|
||||
|
||||
`animation-name` 用來設置動畫的名稱，也就是我們稍後要在 `@keyframes` 裏用到的名稱。
|
||||
|
||||
`animation-duration` 設置動畫所花費的時間。
|
||||
|
||||
`@keyframes` 可以通過設置特定時間點的行爲來創建動畫。 爲此，我們只需要給持續時間內的特定幀（從 0% 到 100%）加上 CSS 規則。 如果用一部電影來做類比，那麼 CSS 裏面的 0% 關鍵幀就像是電影裏面的開場鏡頭；100% 關鍵幀就像是電影裏的片尾，就是那個之後會出現演職人員列表的片尾。 在動畫設定的時間內，CSS 會根據關鍵幀的規則來給元素添加動畫效果。 100% 位置的 CSS 屬性就是元素最後的樣子，相當於電影裏的演職員表或者鳴謝鏡頭。 然後CSS 應用魔法來在給定的時間內轉換元素以使其脫離場景。 下面舉例說明 `@keyframes` 和動畫屬性的用法：
|
||||
|
||||
```css
|
||||
#anim {
|
||||
animation-name: colorful;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes colorful {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
id 爲 `anim` 的元素，我們在代碼中將它的 `animation-name` 設置爲 `colorful`，同時設置 `animation-duration` 爲 3 秒。 然後我們把 `@keyframes` 規則添加到名爲 `colorful` 的動畫屬性上。 在動畫開始時（0%）的背景顏色爲藍色，在動畫結束時（100%）的背景顏色爲黃色。 注意我們不只可以設置開始和結束，而是從 0% 到 100% 間的任意位置都可以設置。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 id 爲 `rect` 的元素添加動畫，設置其 `animation-name` 爲 `rainbow`，設置其 `animation-duration` 爲 4 秒。 然後聲明 `@keyframes` 規則，設置動畫開始時（`0%`）的 `background-color` 爲藍色，動畫中間時（`50%`）爲綠色，動畫結束時（`100%`）爲爲黃色。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 爲 `rect` 的元素應該有一個值爲 `rainbow` 的 `animation-name` 屬性。
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-name') == 'rainbow');
|
||||
```
|
||||
|
||||
id 爲 `rect` 的元素應該有一個值爲 4s 的 `animation-duration` 屬性。
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-duration') == '4s');
|
||||
```
|
||||
|
||||
`@keyframes` 規則的 `animation-name` 應爲 `rainbow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
```
|
||||
|
||||
`@keyframes` 規則的 `rainbow` 在 0% 時的 `background-color` 應爲 `blue`。
|
||||
|
||||
```js
|
||||
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
```
|
||||
|
||||
`@keyframes` 規則的 `rainbow` 在 50% 時的 `background-color` 應爲 `green`。
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
```
|
||||
|
||||
`@keyframes` 規則的 rainbow 在 100% 時的 `background-color` 應爲 `yellow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acb
|
||||
title: 絕對定位的參照物是元素的父元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
||||
forumTopicId: 301060
|
||||
dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
接下來要介紹 CSS `position` 屬性的取值選項 `absolute`，它的含義是相對於其包含塊定位。 和 `relative` 定位不一樣，絕對定位會將元素從當前的文檔流裏面移除，周圍的元素會忽略它。 這樣我們就可以用 CSS 的 top、bottom、left、right 屬性來調整元素的位置。
|
||||
|
||||
絕對定位比較特殊的一點是元素的定位參照於最近的 *positioned* 祖先元素。 如果它的父元素沒有添加定位規則（默認是 `position: relative;`），瀏覽器會繼續尋找直到默認的 `body` 標籤。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通過設置 `position` 屬性值爲 `absolute`，將 `#searchbar` 元素固定到它的父元素 `section` 的右上角。 即設定其 `top` 和 `right` 爲 50 像素。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#searchbar` 元素的 `position` 屬性值應爲 `absolute`。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
`#searchbar` 元素的 `top` 屬性值應爲 50px。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('top') == '50px');
|
||||
```
|
||||
|
||||
`#searchbar` 元素的 `right` 屬性值應爲 50px。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('right') == '50px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
|
||||
|
||||
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acc
|
||||
title: 固定定位的參照物是瀏覽器的窗口
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDNUR'
|
||||
forumTopicId: 301061
|
||||
dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
接下來要介紹的是 `fixed` 定位，它是一種特殊的絕對（absolute）定位，將元素相對於瀏覽器窗口定位。 類似於絕對位置，它與 CSS 偏移屬性一起使用，並且也會將元素從當前的文檔流裏面移除。 其它元素會忽略它的存在，這樣也許需要調整其他位置的佈局。
|
||||
|
||||
但 `fixed` 和 `absolute` 的最明顯的區別在於，前者定位的元素不會隨着屏幕滾動而移動。
|
||||
|
||||
# --instructions--
|
||||
|
||||
我們已經將代碼裏導航欄的 id 設置爲了 `navbar`。 請把它的 `position` 設置成 `fixed`，同時分別設定其 `top` 和 `left` 屬性值爲 0 像素。 修改後，你可以滑動預覽窗口，觀察導航欄的位置。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#navbar` 元素的 `position` 屬性值應爲 `fixed`。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('position') == 'fixed');
|
||||
```
|
||||
|
||||
`#navbar` 元素的 `top` 屬性值應爲 0px。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('top') == '0px');
|
||||
```
|
||||
|
||||
`#navbar` 元素的 `left` 屬性值應爲 0px。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('left') == '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#navbar {
|
||||
|
||||
|
||||
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae4
|
||||
title: 使用無限的動畫計數製作 CSS 心跳
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cDZpDUr'
|
||||
forumTopicId: 301062
|
||||
dashedName: make-a-css-heartbeat-using-an-infinite-animation-count
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
這也是一個用 `animation-iteration-count` 屬性創造持續動畫的例子，它基於我們在前面挑戰中創建的心形。
|
||||
|
||||
心跳動畫的每一秒包含兩個部分。 `heart` 元素（包括 `:before` 和 `:after`）使用 `transform` 屬性改變其大小，背景 `div` 使用 `background` 屬性改變其顏色。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 `back` class 和 the `heart` class 添加 `animation-iteration-count` 屬性，將屬性值設置爲 `infinite`，使心保持跳動。 `heart:before` 和 `heart:after` 所選擇的元素則不需要添加動畫屬性。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart` class 的 `animation-iteration-count` 的屬性值應爲 `infinite`。
|
||||
|
||||
```js
|
||||
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
`back` class 的 `animation-iteration-count` 的屬性值應爲 `infinite`。
|
||||
|
||||
```js
|
||||
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512aea
|
||||
title: 使用貝塞爾曲線讓運動更加自然
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7akWUv'
|
||||
forumTopicId: 301063
|
||||
dashedName: make-motion-more-natural-using-a-bezier-curve
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在這個挑戰中，我們需要給元素添加動畫來模擬雜耍中被拋接的球。 之前的挑戰中，我們學習了 `linear` 和 `ease-out` 的貝塞爾曲線描述，但這兩個都無法完美地描述雜耍球的運動。 在本關裏你需要定製貝塞爾曲線。
|
||||
|
||||
當 `animation-iteration-count` 值爲 infinite 時，`animation-timing-function` 會自動循環 keyframe。 由於我們是在動畫週期的中間點（`50%` 處）設置的 keyframe 規則，最終的結果是球向上和球向下是兩個同樣的動畫過程。
|
||||
|
||||
下面的例子模擬了雜耍球運動：
|
||||
|
||||
```css
|
||||
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||
```
|
||||
|
||||
注意 y2 的值是大於 1 的。 雖然貝塞爾曲線是在 1*1 的座標系統內，x 值只能在 0 到 1，但是 y 值是可以大於 1 的。 這樣才能模擬雜耍球運動。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 id 爲 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函數，函數的參數 x1，y1，x2，y2 值依次爲 0.311、0.441、0.444、1.649。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 爲 `green` 的元素的 `animation-timing-function` 值應爲 `cubic-bezier` 函數，函數的參數 x1，y1，x2，y2 值應爲指定值。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#green').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.311, 0.441, 0.444, 1.649)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 58a7a6ebf9a6318348e2d5aa
|
||||
title: 修改動畫的填充模式
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDmcE'
|
||||
forumTopicId: 301064
|
||||
dashedName: modify-fill-mode-of-an-animation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
太棒了，但是現在還不完美。 注意動畫在 `500ms` 之後重置了，所以按鈕又變成了之前的顏色。 而我們想要的效果是按鈕在懸停時始終高亮。
|
||||
|
||||
爲此，我們可以通過把 `animation-fill-mode` 設置成 `forwards` 來實現。 `animation-fill-mode` 指定了在動畫結束時元素的樣式： 你可以這樣設置：
|
||||
|
||||
```css
|
||||
animation-fill-mode: forwards;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
設置 `button:hover` 的 `animation-fill-mode` 屬性爲 `forwards`，使用戶把鼠標懸停在按鈕上時，按鈕保持高亮。
|
||||
|
||||
# --hints--
|
||||
|
||||
`button:hover` 應有一個值爲 `forwards` 的 `animation-fill-mode` 屬性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512aca
|
||||
title: 使用 CSS 偏移移動相對定位的元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bQEA4'
|
||||
forumTopicId: 301065
|
||||
dashedName: move-a-relatively-positioned-element-with-css-offsets
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 裏面的 `top`、`bottom`、`left` 和 `right` 定義了元素在相應方位的偏移距離。 元素將從當前位置向屬性相反的方向偏移。 就像你在上一個挑戰看到的，`top` 屬性使 `h2` 向下移動。 同樣，使用 `left` 將項目移動到右邊。
|
||||
|
||||
<img src='https://i.imgur.com/eWWi3gZ.gif' alt='' />
|
||||
|
||||
# --instructions--
|
||||
|
||||
請通過 CSS 屬性把 `h2` 向上移動 10 像素，向右移動 15 像素。
|
||||
|
||||
# --hints--
|
||||
|
||||
應使用 CSS 屬性使 `h2` 相對當前位置向上移動 10px。 也就是說，從當前位置相對於 `bottom` 移動 10px。
|
||||
|
||||
```js
|
||||
assert($('h2').css('bottom') == '10px');
|
||||
```
|
||||
|
||||
應使用 CSS 屬性使 `h2` 相對當前位置向右移動 15px。 也就是說，從當前位置相對於 `left` 移動 15px。
|
||||
|
||||
```js
|
||||
assert($('h2').css('left') == '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
left: 15px;
|
||||
bottom: 10px;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ace
|
||||
title: 使用 float 屬性將元素左浮動或右浮動
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDqu2'
|
||||
forumTopicId: 301066
|
||||
dashedName: push-elements-left-or-right-with-the-float-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
接下來要介紹的定位機制並不是 `position` 屬性的選項，而是通過元素的 `float` 屬性來設置。 浮動元素不在文檔流中，它向 `left` 或 `right` 浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。 通常需要用 `width` 屬性來指定浮動元素佔據的水平空間。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使這兩個元素按兩列布局，`section` 和 `aside` 左右排列。 設置 `#left` 元素的 `float` 屬性值爲 `left`，設置 `#right` 元素的 `float` 屬性值爲 `right`。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 爲 `left` 的元素的 `float` 屬性值應爲 `left`。
|
||||
|
||||
```js
|
||||
assert($('#left').css('float') == 'left');
|
||||
```
|
||||
|
||||
id 爲 `right` 的元素的 `float` 屬性值應爲 `right`。
|
||||
|
||||
```js
|
||||
assert($('#right').css('float') == 'right');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
float: right;
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac2
|
||||
title: 設置多個標題元素的 font-size
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpQNT3'
|
||||
forumTopicId: 301067
|
||||
dashedName: set-the-font-size-for-multiple-heading-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`font-size` 屬性用來指定元素內文字的大小。 我們可以爲多個元素添加這個規則，讓頁面內不同元素的文字大小得以統一。 在本挑戰裏，你需要設置從 `h1` 到 `h6` 的文字大小。
|
||||
|
||||
# --instructions-- <p>在 <code>style</code> 標籤中, 對各元素的 <code>font-size</code> 進行如下設置：</p>
|
||||
|
||||
<ul>
|
||||
<li>將 <code>h1</code> 標籤的文字大小設爲 68px。</li>
|
||||
<li>將 <code>h2</code> 標籤的文字大小設爲 52px。</li>
|
||||
<li>將 <code>h3</code> 標籤的文字大小設爲 40px</li>
|
||||
<li>將 <code>h4</code> 標籤的文字大小設爲 32px</li>
|
||||
<li>將 <code>h5</code> 標籤的文字大小設爲 21px</li>
|
||||
<li>將 <code>h6</code> 標籤的文字大小設爲 14px</li>
|
||||
</ul>
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 標籤的 `font-size` 屬性值應爲 68px。
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-size') == '68px');
|
||||
```
|
||||
|
||||
`h2` 標籤的 `font-size` 屬性值應爲 52px。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-size') == '52px');
|
||||
```
|
||||
|
||||
`h3` 標籤的 `font-size` 屬性值應爲 40px。
|
||||
|
||||
```js
|
||||
assert($('h3').css('font-size') == '40px');
|
||||
```
|
||||
|
||||
`h4` 標籤的 `font-size` 屬性值應爲 32px。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '32px');
|
||||
```
|
||||
|
||||
`h5` 標籤的 `font-size` 屬性值應爲 21px。
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-size') == '21px');
|
||||
```
|
||||
|
||||
`h6` 標籤的 `font-size` 屬性值應爲 14px。
|
||||
|
||||
```js
|
||||
const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i;
|
||||
assert.strictEqual(true, regex.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac4
|
||||
title: 設置段落文本的 font-size
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJ36Cr'
|
||||
forumTopicId: 301068
|
||||
dashedName: set-the-font-size-of-paragraph-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 裏面的 `font-size` 屬性不只限於標題，還可以應用於任何包含文字的元素內。
|
||||
|
||||
# --instructions--
|
||||
|
||||
把段落的 `font-size` 屬性值設置爲 16px，讓它看起來更清晰。
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` 標籤的 `font-size` 屬性值應爲 16px。
|
||||
|
||||
```js
|
||||
assert($('p').css('font-size') == '16px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac3
|
||||
title: 設置多個標題元素的 font-weight
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWRHq'
|
||||
forumTopicId: 301069
|
||||
dashedName: set-the-font-weight-for-multiple-heading-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在上一個挑戰裏我們已經爲每個標題設置了 `font-size`，接下來我們將要設置 `font-weight`。
|
||||
|
||||
`font-weight` 屬性用於設置文本中字體的粗細。
|
||||
|
||||
# --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>
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 標籤的 `font-weight` 屬性值應爲 800。
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-weight') == '800');
|
||||
```
|
||||
|
||||
`h2` 標籤的 `font-weight` 屬性值應爲 600。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-weight') == '600');
|
||||
```
|
||||
|
||||
`h3` 標籤的 `font-weight` 屬性值應爲 500。
|
||||
|
||||
```js
|
||||
assert($('h3').css('font-weight') == '500');
|
||||
```
|
||||
|
||||
`h4` 標籤的 `font-weight` 屬性值應爲 400。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-weight') == '400');
|
||||
```
|
||||
|
||||
`h5` 標籤的 `font-weight` 屬性值應爲 300。
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-weight') == '300');
|
||||
```
|
||||
|
||||
`h6` 標籤的 `font-weight` 屬性值應爲 200。
|
||||
|
||||
```js
|
||||
assert($('h6').css('font-weight') == '200');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
font-weight: 800;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
font-weight: 600;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
font-weight: 300;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac5
|
||||
title: 設置段落的 line-height
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWdcv'
|
||||
forumTopicId: 301070
|
||||
dashedName: set-the-line-height-of-paragraphs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 提供 `line-height` 屬性來設置行間的距離。 行高，顧名思義，可以用來設置每行文字所佔據的垂直空間。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 `p` 標籤添加 `line-height` 屬性並賦值 25px。
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` 標籤的 `line-height` 屬性值應爲 25px。
|
||||
|
||||
```js
|
||||
assert($('p').css('line-height') == '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae9
|
||||
title: 使用貝塞爾曲線移動圖形
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bnRCK'
|
||||
forumTopicId: 301071
|
||||
dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前面的關卡涉及了使用 `ease-out` 預定義值描述了動畫以高速開始低速結束。 右邊的動畫展示了 `ease-out` 效果（藍色的元素）和 `linear` 效果（紅色的元素）的區別。 同樣的，`ease-out` 預定義值也可以用貝塞爾曲線函數實現。
|
||||
|
||||
通俗的講，將一條直線放在範圍只有 1 的座標軸中，並從中間拿 `p1` 和 `p2` 兩個點來拉扯（X 軸的取值區間是 \[0, 1]，Y 軸任意），最後形成的曲線就是動畫的貝塞爾速度曲線。 下面是貝塞爾曲線模仿 ease-out 預定義值的例子：
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
```
|
||||
|
||||
記住所有的 `cubic-bezier` 函數都是從座標爲 (0, 0) 的 `p0` 開始，在座標爲 (1, 1) 的 `p3` 結束。 在這個例子裏，曲線在 y 軸（從 0 開始，運動到 `p1` 的 0，然後運動到 `p2` 的 1）上移動得比在 x 軸（從 0 開始，運動到 `p1` 的 0，到 `p2` 的 0.58）上移動得快。 結果是，在這一段動畫內元素運動得快。 到曲線的結尾，x 和 y 之間的關係反過來了，y 值保持爲 1，沒有變化，x 值從 0.58 變爲 1，元素運動得慢。
|
||||
|
||||
# --instructions--
|
||||
|
||||
爲了看貝塞爾曲線的運動效果，把 id 爲 `red` 的元素的 `animation-timing-function` 屬性改爲 `cubic-bezier` 函數，其中 x1，y1，x2，y2 值分別爲 0、0、0.58、1。 這會使兩個元素運動過程類似。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 爲 `red` 的元素的 `animation-timing-function` 屬性應爲 `cubic-bezier` 函數，其中 x1、y1、x2、y2 值分別爲 0、0、0.58、1。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)'
|
||||
);
|
||||
```
|
||||
|
||||
id 爲 `red` 的元素不應有值爲 `linear` 的 `animation-timing-function` 屬性。
|
||||
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
```
|
||||
|
||||
id 爲 `blue` 的元素的 `animation-timing-function` 屬性值不應該改變。
|
||||
|
||||
```js
|
||||
const blueBallAnimation = __helpers.removeWhiteSpace(
|
||||
$('#blue').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
blueBallAnimation == 'ease-out' ||
|
||||
blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad7
|
||||
title: 使用 CSS 線性漸變創建條紋元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bmQh2'
|
||||
forumTopicId: 301072
|
||||
dashedName: use-a-css-linear-gradient-to-create-a-striped-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`repeating-linear-gradient()` 函數和 `linear-gradient()` 很像，主要區別是前者會重複指定的漸變。 `repeating-linear-gradient()` 有很多參數，爲了便於理解，本關只用到角度值和色標。
|
||||
|
||||
角度就是漸變的方向。 色標代表漸變顏色及發生漸變的位置，由百分比或者像素值表示。
|
||||
|
||||
在代碼編輯器的例子裏，漸變開始於 0 像素位置的 `yellow`，然後過渡到距離開始位置 40 像素的 `blue`。 由於下一個漸變顏色的起始位置也是 40 像素，所以顏色直接漸變成第三個顏色值 `green`，然後過渡到距離開始位置 80 像素的 `red`。
|
||||
|
||||
下面的代碼可以幫助理解成對的起止漸變顏色值是如何過渡的。
|
||||
|
||||
```css
|
||||
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
|
||||
```
|
||||
|
||||
如果每對起止漸變顏色值的顏色都是相同的，由於是在兩個相同的顏色間過渡，那麼中間的過渡色也爲同色，接着就是同色的過渡色和下一個起止顏色，最終產生的效果就是條紋。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `repeating-linear-gradient()` 函數創建一個漸變角度爲 `45deg` 的條紋，然後設置第一對漸變顏色爲 `yellow`，第二對漸變顏色爲 `black`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`repeating-linear-gradient()` 的漸變角度應爲 45deg。
|
||||
|
||||
```js
|
||||
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
```
|
||||
|
||||
`repeating-linear-gradient()` 的漸變角度應該不再是 90deg。
|
||||
|
||||
```js
|
||||
assert(!code.match(/90deg/gi));
|
||||
```
|
||||
|
||||
0px 處的漸變顏色應該是 `yellow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
40px 處的一個漸變顏色應該是 `yellow`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
```
|
||||
|
||||
40px 處的第二個漸變顏色應該是 `black`。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
```
|
||||
|
||||
80px 處的最後一個漸變顏色應該是 `black`。
|
||||
|
||||
```js
|
||||
assert(code.match(/black\s+?80px/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
yellow 0px,
|
||||
blue 40px,
|
||||
green 40px,
|
||||
red 80px
|
||||
);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
yellow 0px,
|
||||
yellow 40px,
|
||||
black 40px,
|
||||
black 80px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae0
|
||||
title: 使用CSS動畫更改按鈕的懸停狀態
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4vZAa'
|
||||
forumTopicId: 301073
|
||||
dashedName: use-css-animation-to-change-the-hover-state-of-a-button
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以在按鈕懸停時使用 `@keyframes` 改變按鈕的顏色。
|
||||
|
||||
下面是在圖片懸停時改變圖片寬度的例子：
|
||||
|
||||
```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" />
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
注意 `ms` 代表毫秒，1000ms 等於 1s。
|
||||
|
||||
使用 `@keyframes` 來改變 `button` 元素的 `background-color`，使其在懸停時變成 `#4791d0`。 `@keyframes` 規則應該只有一個 `100%` 條目。
|
||||
|
||||
# --hints--
|
||||
|
||||
@keyframes 規則的 `animation-name` 應該是 background-color。
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
```
|
||||
|
||||
在 `@keyframes` 爲 100% 的位置，應將 `background-color` 改成 `#4791d0`。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adb
|
||||
title: 使用 CSS Transform skex 屬性沿X軸傾斜元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLP8Sr'
|
||||
forumTopicId: 301074
|
||||
dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
接下來要介紹的 `transform` 屬性是 `skewX()`：它使選擇的元素沿着 X 軸（橫向）翻轉指定的角度。
|
||||
|
||||
下面的代碼沿着 X 軸翻轉段落元素 -32 度。
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: skewX(-32deg);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `transform` 屬性沿 X 軸翻轉 id 爲 `bottom` 的元素 24 度。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 爲 `bottom` 的元素應該沿着 X 軸翻轉 24 度。
|
||||
|
||||
```js
|
||||
assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adc
|
||||
title: 使用 CSS Transform skex 屬性沿Y軸傾斜元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
|
||||
forumTopicId: 301075
|
||||
dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`skewX` 函數使指定元素沿 X 軸翻轉指定的角度，想必你已經猜到了，`skewY` 屬性使指定元素沿 Y 軸（垂直方向）翻轉指定角度。
|
||||
|
||||
# --instructions--
|
||||
|
||||
使用 `transform` 屬性沿 Y 軸翻轉 id 爲 `top` 的元素 -10 度。
|
||||
|
||||
# --hints--
|
||||
|
||||
id 爲 `top` 的元素應該沿着 Y 軸翻轉 -10 度。
|
||||
|
||||
```js
|
||||
assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
transform: skewY(-10deg);
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad9
|
||||
title: 使用 CSS Transform scale 屬性可以更改元素的大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZVSg'
|
||||
forumTopicId: 301076
|
||||
dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 屬性 `transform` 裏面的 `scale()` 函數可以用來改變元素的顯示比例。 下面的例子把頁面的段落元素放大到了原來的 2 倍：
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: scale(2);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
把 id 爲 `ball2` 的元素放大到原始大小的 1.5 倍。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#ball2` 的 `transform` 屬性應該爲原始大小的 1.5 倍。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
</style>
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ada
|
||||
title: 使用CSS Transform scale 屬性在懸停時縮放元素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLPJuM'
|
||||
forumTopicId: 301077
|
||||
dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`transform` 屬性有很多函數可以調用，可以對元素進行調整大小、移動、旋轉、翻轉等操作。 當使用僞類選取元素的指定狀態（如 `:hover`）時，我們可以通過 `transform` 屬性非常方便地給元素添加交互。
|
||||
|
||||
下面是當用戶懸停在段落元素時，段落大小縮放到原始大小 2.1 倍的例子：
|
||||
|
||||
```css
|
||||
p:hover {
|
||||
transform: scale(2.1);
|
||||
}
|
||||
```
|
||||
|
||||
**注意：**給 `div` 元素添加 transform 也會影響這個 div 包裹的子元素。
|
||||
|
||||
# --instructions--
|
||||
|
||||
通過僞類，給 `div` 的 `hover` 狀態添加 `transform` 屬性，使 `div` 當鼠標懸停時大小縮放到原始大小的 1.1 倍。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 元素在懸停時大小應該縮放到原始大小的 1.1 倍。
|
||||
|
||||
```js
|
||||
assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
div:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab9
|
||||
title: 使用 em 標籤強調文本
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJRBtp'
|
||||
forumTopicId: 301078
|
||||
dashedName: use-the-em-tag-to-italicize-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 `em` 標籤來強調文本。 由於瀏覽器會自動給元素應用 `font-style: italic;`，所以文本會顯示爲斜體。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在段落標籤裏面嵌套 `em` 標籤來強調文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
應添加一個 `em` 標籤。
|
||||
|
||||
```js
|
||||
assert($('em').length == 1);
|
||||
```
|
||||
|
||||
`em` 標籤應包裹 `p` 標籤裏的內容，但不包裹 `p` 標籤本身。
|
||||
|
||||
```js
|
||||
assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512aba
|
||||
title: 使用 s 標籤給文本添加刪除線
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301079
|
||||
dashedName: use-the-s-tag-to-strikethrough-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以用 `s` 標籤來給文字添加刪除線。 刪除線是位於文字水平中央的一條線，它代表着一段文字不再有效。 添加了 `s` 標籤後，瀏覽器會自動給元素添加這段樣式：`text-decoration: line-through;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `h4` 標籤裏的 `Google` 文本外添加 `s` 標籤，然後在 s 標籤後面添加單詞 `Alphabet`，單詞不要有刪除線格式。
|
||||
|
||||
# --hints--
|
||||
|
||||
應添加一個 `s` 標籤。
|
||||
|
||||
```js
|
||||
assert($('s').length == 1);
|
||||
```
|
||||
|
||||
`s` 標籤應該在 `h4` 標籤內的 `Google` 文字外面， 它不應包含單詞 `Alphabet`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4 > s')
|
||||
.text()
|
||||
.match(/Google/gi) &&
|
||||
!$('h4 > s')
|
||||
.text()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`h4` 標籤內應有單詞 `Alphabet`，單詞不應有刪除線樣式。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4')
|
||||
.html()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s> Alphabet</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab7
|
||||
title: 使用 strong 標籤加粗文本
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/ceJNBSb'
|
||||
forumTopicId: 301080
|
||||
dashedName: use-the-strong-tag-to-make-text-bold
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 `strong` 標籤來加粗文字。 粗體文字一般用來吸引讀者注意或用來表示強調。 添加了 `strong` 標籤後，瀏覽器會自動給元素添加這段樣式：`font-weight:bold;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 `p` 標籤裏的 `Stanford University` 內容文本添加 `strong` 標籤。
|
||||
|
||||
# --hints--
|
||||
|
||||
應添加一個 `strong` 標籤。
|
||||
|
||||
```js
|
||||
assert($('strong').length == 1);
|
||||
```
|
||||
|
||||
`strong` 標籤應在 `p` 標籤裏。
|
||||
|
||||
```js
|
||||
assert($('p').children('strong').length == 1);
|
||||
```
|
||||
|
||||
`strong` 標籤的文本應爲 `Stanford University`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('strong')
|
||||
.text()
|
||||
.match(/^Stanford University\.?$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac0
|
||||
title: 使用 text-transform 屬性給文本添加大寫效果
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZQSP'
|
||||
forumTopicId: 301081
|
||||
dashedName: use-the-text-transform-property-to-make-text-uppercase
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 裏的 `text-transform` 屬性可以改變英文字母的大小寫。 使用這個屬性時，我們無需改變 HTML 元素中的文本也可以統一頁面裏英文的顯示。
|
||||
|
||||
下面的表格展示了 `text-transform` 的不同值對文字 “Transform me” 的影響：
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>值</th><th>結果</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>使用默認值</td></tr><tr><td><code>inherit</code></td><td>使用父元素的 <code>text-transform</code> 值。</td></tr><tr><td><code>none</code></td><td><strong>Default:</strong>不改變文字。</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
請使用 `text-transform` 屬性把 `h4` 內容文本中的所有字母變成大寫。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` 內容文本中的所有字母均應爲 `uppercase` 大寫 。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-transform') === 'uppercase');
|
||||
```
|
||||
|
||||
`h4` 內的原文不應改變。
|
||||
|
||||
```js
|
||||
assert($('h4').text() !== $('h4').text().toUpperCase());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab8
|
||||
title: 使用 u 標籤給文本添加下劃線
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6aQCL'
|
||||
forumTopicId: 301082
|
||||
dashedName: use-the-u-tag-to-underline-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 `u` 標籤來給文字添加下劃線。 下劃線通常用來表示重要內容或需要記憶的內容。 添加了 `u` 標籤後，瀏覽器會自動給元素添加這段樣式：`text-decoration: underline;`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`u` 標籤包裹的文本內容應爲 `Ph.D. students`。
|
||||
|
||||
**注意：** 如果使用 `u` 標籤添加下劃線，可能混淆文本和鏈接，則應避免使用它。 錨標籤也有默認的下劃線格式。
|
||||
|
||||
# --hints--
|
||||
|
||||
應添加一個 `u` 標籤。
|
||||
|
||||
```js
|
||||
assert($('u').length === 1);
|
||||
```
|
||||
|
||||
`u` 標籤的文本內容應爲 `Ph.D. students`。
|
||||
|
||||
```js
|
||||
assert($('u').text() === 'Ph.D. students');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user