mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-05 00:00:18 -04:00
chore(i18n,learn): processed translations (#49642)
This commit is contained in:
camperbot
@@ -7,7 +7,7 @@ dashedName: step-87
|
||||
|
||||
# --description--
|
||||
|
||||
الآن قم بتطبيق class الـ `address` على عنصر `p` الذي يحتوي على العنوان.
|
||||
Now apply the `address` class to the `p` element containing the street address `123 Free Code Camp Drive`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -22,14 +22,8 @@ assert(code.match(/\<html.*?\>/) && code.match(/\<\/html\>/));
|
||||
عنصر `html` الخاص بك يجب أن يحتوي على سمة `lang` بقيمة `en`. ربما تكون قد أغفلت السمة / القيمة، أو لديك خطأ إملائي.
|
||||
|
||||
```js
|
||||
const extraSpacesRemoved = code.replace(/\s+/g, ' ');
|
||||
assert(extraSpacesRemoved.match(/\<html lang\=("|')([a-z]+)\1\>/));
|
||||
```
|
||||
|
||||
على الرغم من أنك قمت بتعيين عنصر `html` سمة `lang` إلى `en`، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
const extraSpacesRemoved = code.replace(/\s+/g, " ");
|
||||
assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -13,7 +13,7 @@ dashedName: step-41
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب عليك إعطاء `input` توقع الاسم الأول (first name) السمة `name`. _لو كنت مكانك كنت ساختار `first-name`_
|
||||
You should give the `input` expecting a first name a `name` attribute. _لو كنت مكانك كنت ساختار `first-name`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name);
|
||||
|
||||
@@ -11,13 +11,13 @@ dashedName: assignment-with-a-returned-value
|
||||
|
||||
如果你還記得我們在這一節<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank" rel="noopener noreferrer nofollow">使用賦值運算符存儲值</a>中的討論，賦值之前，先完成等號右邊的操作。 這意味着我們可以獲取函數的返回值，並將其賦值給一個變量。
|
||||
|
||||
Assume we have defined a function `sum` which adds two numbers together.
|
||||
假設我們有一個預先定義的函數 `sum` ，它將兩個數相加。
|
||||
|
||||
```js
|
||||
ourSum = sum(5, 12);
|
||||
```
|
||||
|
||||
Calling the `sum` function with the arguments of `5` and `12` produces a return value of `17`. This return value is assigned to the `ourSum` variable.
|
||||
調用 `sum` 函數，參數爲 `5` 和 `12`，生成的返回值爲 `17`。 將返回值賦給 `ourSum` 變量。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ dashedName: escape-sequences-in-strings
|
||||
|
||||
<pre>
|
||||
FirstLine
|
||||
\SecondLine
|
||||
\SecondLine
|
||||
ThirdLine
|
||||
</pre>
|
||||
|
||||
|
||||
@@ -42,61 +42,61 @@ switch (val) {
|
||||
|
||||
# --hints--
|
||||
|
||||
不要使用 `else` 表達式。
|
||||
不要使用 `else` 表達式
|
||||
|
||||
```js
|
||||
assert(!/else/g.test(code));
|
||||
```
|
||||
|
||||
不要使用 `if` 表達式。
|
||||
不要使用 `if` 表達式
|
||||
|
||||
```js
|
||||
assert(!/if/g.test(code));
|
||||
```
|
||||
|
||||
你應該有至少 4 個 `break` 表達式。
|
||||
你應該有至少 4 個 `break` 表達式
|
||||
|
||||
```js
|
||||
assert(code.match(/break/g).length >= 4);
|
||||
```
|
||||
|
||||
`chainToSwitch("bob")` should return the string `Marley`
|
||||
`chainToSwitch("bob")` 應該返回字符串 `Marley`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch('bob') === 'Marley');
|
||||
```
|
||||
|
||||
`chainToSwitch(42)` should return the string `The Answer`
|
||||
`chainToSwitch(42)` 應該返回字符串 `The Answer`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(42) === 'The Answer');
|
||||
```
|
||||
|
||||
`chainToSwitch(1)` should return the string `There is no #1`
|
||||
`chainToSwitch(1)` 應該返回字符串 `There is no #1`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(1) === 'There is no #1');
|
||||
```
|
||||
|
||||
`chainToSwitch(99)` should return the string `Missed me by this much!`
|
||||
`chainToSwitch(99)`應該返回字符串 `Missed me by this much!`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(99) === 'Missed me by this much!');
|
||||
```
|
||||
|
||||
`chainToSwitch(7)` should return the string `Ate Nine`
|
||||
`chainToSwitch(7)` 應該返回字符串 `Ate Nine`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(7) === 'Ate Nine');
|
||||
```
|
||||
|
||||
`chainToSwitch("John")` should return `""` (empty string)
|
||||
`chainToSwitch("John")` 應該返回 `""`（空字符串）
|
||||
|
||||
```js
|
||||
assert(chainToSwitch('John') === '');
|
||||
```
|
||||
|
||||
`chainToSwitch(156)` should return `""` (empty string)
|
||||
`chainToSwitch(156)` 應該返回 `""`（空字符串）
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(156) === '');
|
||||
|
||||
@@ -28,15 +28,15 @@ const someFunc = function(done) {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a person schema called `personSchema` with the following shape:
|
||||
按下面的信息創建一個名爲 `personSchema` 的人員模式：
|
||||
|
||||
* A required `name` field of type `String`
|
||||
* An `age` field of type `Number`
|
||||
* A `favoriteFoods` field of type `[String]`
|
||||
* 必需的 `name` 字段，類型爲 `String`
|
||||
* `age` 字段，類型爲 `Number`
|
||||
* `favoriteFoods` 字段，類型爲 `[String]`
|
||||
|
||||
採用 Mongoose 基礎 schema 類型。 你如果還想添加更多的鍵，就請使用 required 或 unique 等簡單的驗證器（validators），並設置默認值。 查看我們的 <a href="https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/" target="_blank" rel="noopener noreferrer nofollow">Mongoose 文章</a>。
|
||||
|
||||
Now, create a model from the `personSchema` and assign it to the existing variable `Person`.
|
||||
現在，從 `personSchema` 創建一個模型，並將它分配給現有變量 `Person`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-16
|
||||
|
||||
# --description--
|
||||
|
||||
Every `region` role requires a label, which helps screen reader users understand the purpose of the region. One method for adding a label is to add a heading element inside the region and then reference it with the `aria-labelledby` attribute.
|
||||
每個 `region` role 都需要一個標籤，幫助屏幕閱讀者理解 region 的目的。 一個添加標籤的方法是在 region 內添加一個 heading 元素，然後使用 `aria-labelledby` 屬性來引用它。
|
||||
|
||||
Add the following `aria-labelledby` attributes to the `section` elements:
|
||||
給 `section` 元素添加以下 `aria-labelledby` 屬性：
|
||||
|
||||
- `student-info`
|
||||
- `html-questions`
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
Do not forget to give your `form` a submit button with the text `Send`.
|
||||
不要忘記給你的 `form` 一個提交按鈕，文本爲 `Send`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,25 +17,25 @@ Do not forget to give your `form` a submit button with the text `Send`.
|
||||
assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
You should place the submit button within the `form` element.
|
||||
你應該將提交按鈕放在 `form` 元素中。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
You should place the submit button after the last `section` element.
|
||||
你應該將提交按鈕放在最後一個 `section` 元素之後。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
|
||||
```
|
||||
|
||||
You should give the submit button a `type` of `submit`.
|
||||
你應該給提交按鈕添加 `type` 爲 `submit`。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
|
||||
```
|
||||
|
||||
The submit button should display the text `Send`.
|
||||
提交按鈕的文本應爲 `Send`。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Send');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-57
|
||||
|
||||
# --description--
|
||||
|
||||
To align the input boxes with each other, create a new ruleset that targets all `input` and `label` elements within an `.info` element and set the `display` property to `inline-block`.
|
||||
要使輸入框相互對齊，在 `.info` 中爲所有 `input` 和 `label` 元素創建一個新的規則集合，並設置 `display` 屬性爲 `inline-block`。
|
||||
|
||||
另外，將 `label` 元素的文本向右對齊。
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-87
|
||||
|
||||
# --description--
|
||||
|
||||
現在將 `address` class 應用於包含地址的 `p` 元素。
|
||||
現在給包含街道地址 `123 Free Code Camp Drive` 的 `p` 元素應用 `address` 類。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-51
|
||||
|
||||
有些東西看起來不對勁。 你將正確的 `class` 屬性值添加到 `p` 元素，其文本是 `Donut`，但你尚未爲其定義選擇器。
|
||||
|
||||
The CSS rule for the `flavor` class already sets the properties you want. Add the `dessert` class as an additional selector for this CSS rule.
|
||||
`flavor` 類的 CSS 規則已經設置了你想要的屬性。 添加 `dessert` 類作爲此 CSS 規則的附加選擇器。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,10 +7,10 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
請記住，`title` 元素爲搜索引擎提供了有關頁面的額外信息。 It also displays the content of that `title` element in two more ways:
|
||||
請記住，`title` 元素爲搜索引擎提供了有關頁面的額外信息。 它還通過以下兩種方式顯示 `title` 元素的內容：
|
||||
|
||||
* in the title bar when the page is open
|
||||
* in the browser tab for the page when you hover on it. Even if that tab is not active, once you hover on the tab, the `title` text is displayed.
|
||||
* 當頁面打開時，在標題欄中
|
||||
* 當你把鼠標懸停在該頁面上時，在瀏覽器標籤中。 即使該標籤未被激活，一旦你將鼠標懸停在該標籤上，`title` 文本就會顯示出來。
|
||||
|
||||
在 `head` 元素中，嵌套一個帶有文本 `Colored Markers` 的 `title` 元素。
|
||||
|
||||
|
||||
@@ -7,26 +7,26 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
You can have multiple self-closing `meta` elements on a web page. What distinguishes one `meta` element from the other is the attribute. You should add a new meta element for each attribute you want to specify.
|
||||
你可以在一個網頁上有多個自閉合的 `meta` 元素。 將一個 `meta` 元素和其他區別開來的是屬性。 你應該爲你想要指定的每個屬性添加一個新的 meta 元素。
|
||||
|
||||
Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices.
|
||||
在 `head` 中添加另一個自閉合的 `meta` 元素。 給它一個 `name` 屬性，值爲 `viewport`，和一個 `content` 屬性，值爲 `width=device-width, initial-scale=1.0`，這樣你的頁面在各種設備上看起來是一樣的。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `meta` elements.
|
||||
你應該有兩個 `meta` 元素。
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
Your new `meta` element should be a self-closing element.
|
||||
你的新 `meta` 元素應該是一個自閉合元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/meta>/i) === null);
|
||||
```
|
||||
|
||||
Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`.
|
||||
你的新 `meta` 元素應將 `name` 屬性設置爲 `viewport`，並將 `content` 屬性設置爲 `width=device-width, initial-scale=1.0`。
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-7
|
||||
|
||||
在這個項目中，你將使用外部 CSS 文件來設置頁面樣式。 我們已經爲你創建了一個 `styles.css` 文件。 但在你使用它之前，你需要將它鏈接到頁面上。
|
||||
|
||||
Nest a `link` element within the `head` element. 給它一個 `rel` 屬性，設置爲 `stylesheet`，和一個 `href` 屬性，設置爲 `styles.css`。
|
||||
在 `head` 元素中嵌套一個 `link` 元素。 給它一個 `rel` 屬性，設置爲 `stylesheet`，和一個 `href` 屬性，設置爲 `styles.css`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-9
|
||||
|
||||
現在，你將添加一些元素，最終將它們設置爲彩色筆。
|
||||
|
||||
First, within the `body` element, add a `div` element and set its `class` attribute to `container`. 確保 `div` 元素位於 `h1` 元素下方。
|
||||
首先，在 `body` 元素中，添加一個 `div` 元素，並將其 `class` 屬性設置爲 `container`。 確保 `div` 元素位於 `h1` 元素下方。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
Next, within the `div` element, add another `div` element and give it a class of `marker`.
|
||||
接下來，在 `div` 中，添加另一個 `div` 元素，併爲其添加一個 `marker` 類。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
The background color was applied, but since the marker `div` element has no content in it, it doesn't have any height by default.
|
||||
實際應用了背景顏色，但由於彩筆 `div` 元素中沒有內容，因此默認情況下它沒有任何高度。
|
||||
|
||||
在你的 `.marker` CSS 規則中，將 `height` 屬性設置爲 `25px`，並將 `width` 屬性設置爲 `200px`。
|
||||
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-13
|
||||
|
||||
# --description--
|
||||
|
||||
如果你的標記在頁面上居中，看起來會更好。 一個簡單的方法是使用 `margin` <dfn>簡寫屬性</dfn>。
|
||||
如果你的筆在頁面上居中，看起來會更好。 一個簡單的方法是使用 `margin` <dfn>簡寫屬性</dfn>。
|
||||
|
||||
在上一個項目中，你使用 `margin-top` 和 `margin-left` 等屬性分別設置元素的邊距區域。 `margin` 簡寫屬性可以方便地同時設置多個邊距區域。
|
||||
|
||||
要將標記在頁面上居中，請將其 `margin` 屬性設置爲 `auto`。 這會將 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left` 全部設置爲 `auto`。
|
||||
要將筆在頁面上居中，請將其 `margin` 屬性設置爲 `auto`。 這會將 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left` 全部設置爲 `auto`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,21 +13,21 @@ dashedName: step-16
|
||||
<div class="animal dog">
|
||||
```
|
||||
|
||||
If you add multiple classes to an HTML element, the styles of the first classes you list may be overridden by later classes.
|
||||
如果你給一個 HTML 元素添加多個類，你列出的前幾個類的樣式可能會被之後的類覆蓋。
|
||||
|
||||
To begin, add the class `one` to the first marker `div` element.
|
||||
首先，給第一個筆 `div` 元素添加 `one` class。
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `one` to the first marker `div` element.
|
||||
你應該給第一個筆 `div` 元素添加 `one` class。
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(containerFirstChild?.classList?.contains('one'));
|
||||
```
|
||||
|
||||
Your first marker `div` should have the classes `marker` and `one`.
|
||||
你的第一個筆 `div` 應該有 `marker` 和 `one` class。
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
|
||||
@@ -7,32 +7,32 @@ dashedName: step-19
|
||||
|
||||
# --description--
|
||||
|
||||
Add the class `two` to the second marker `div`, and add the class `three` to the third marker `div`.
|
||||
給第二個筆 `div` 添加 `two` class，給第三個筆 `div` 添加 `three` class。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `two` class 添加到 `container` `div` 中的第二個標記 `div` 元素。
|
||||
你應該將 `two` class 添加到 `container` `div` 中的第二個筆 `div` 元素。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('two'));
|
||||
```
|
||||
|
||||
你的第二個標記 `div` 應該有 `marker` class 和 `two` class。
|
||||
你的第二個筆 `div` 應該有 `marker` class 和 `two` class。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two'));
|
||||
```
|
||||
|
||||
你應該將 `three` class 添加到 `container` `div` 中的第三個標記 `div` 元素。
|
||||
你應該將 `three` class 添加到 `container` `div` 中的第三個筆 `div` 元素。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(containerThirdChild?.classList?.contains('three'));
|
||||
```
|
||||
|
||||
你的第三個標記 `div` 應該具有 `marker` class 和 `three` class。
|
||||
你的第三個筆 `div` 應該具有 `marker` class 和 `three` class。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
請注意，標記的 `background-color` 仍然是紅色的。 這是因爲你將 `rgb` 函數的紅色值設置爲最大值 `255`，即 100% 紅色，並將綠色和藍色值都設置爲 `0`。
|
||||
請注意，筆的 `background-color` 仍然是紅色的。 這是因爲你將 `rgb` 函數的紅色值設置爲最大值 `255`，即 100% 紅色，並將綠色和藍色值都設置爲 `0`。
|
||||
|
||||
現在使用 `rgb` 函數來設置其他顏色。
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-24
|
||||
|
||||
# --description--
|
||||
|
||||
雖然紅色和藍色標記看起來相同，但綠色標記比之前淺得多。 這是因爲 `green` 顏色關鍵字實際上是一個較暗的陰影，大約介於黑色和綠色最大值之間。
|
||||
雖然紅色和藍色筆看起來相同，但綠色筆比之前淺得多。 這是因爲 `green` 顏色關鍵字實際上是一個較暗的陰影，大約介於黑色和綠色最大值之間。
|
||||
|
||||
在 `.two` CSS 規則中，將 `rgb` 函數中的綠色值設置爲 `127` 以降低其強度。
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-34
|
||||
|
||||
還有三種複色：黃綠色（綠色+黃色）、天藍色（藍色+青色）、玫瑰色（紅色+品紅色）。
|
||||
|
||||
To create chartreuse green, update the `rgb` function in the `.one` CSS rule so that red is at `127`, and set green to the max value.
|
||||
要創建黃綠色，更新 `.one` CSS 規則中的 `rgb` 函數，使紅色的值是 `127`，綠色是最大值。
|
||||
|
||||
For azure, update the `rgb` function in the `.two` CSS rule so that green is at `127` and blue is at the max value.
|
||||
要創建天藍色，更新 `.two` CSS 規則中的 `rgb` 函數，使綠色的值是 `127`，藍色是最大值。
|
||||
|
||||
And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` CSS rule so that blue is at `127` and red is at the max value.
|
||||
對於有時被稱爲亮粉紅色的玫瑰色，更新 `.three` CSS 規則中的 `rgb` 函數，使藍色的值爲 `127`，紅色爲最大值。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-35
|
||||
|
||||
現在你已經學習了色輪上的所有原色、間色和複色，更容易理解其他顏色理論概念和它們如何影響設計。
|
||||
|
||||
First, in the CSS rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. 請記住 `rgb` 函數使用加成色模型。顏色起始爲黑色，隨紅色、綠色和藍色的值增加而變化。
|
||||
首先，在 CSS 規則 `.one`、`.two` 和 `.three` 中，調整 `rgb` 函數中的值，將每個元素的 `background-color` 設置爲純黑色。 請記住 `rgb` 函數使用加成色模型。顏色起始爲黑色，隨紅色、綠色和藍色的值增加而變化。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-37
|
||||
|
||||
選擇一種顏色作爲主要顏色， 並使用其補充顏色作爲強調來提醒訪問者注意頁面上的某些內容，是一種更好的方式。
|
||||
|
||||
First, in the `h1` rule, use the `rgb` function to set its `background-color` to cyan.
|
||||
首先，在 `h1` 規則中，使用 `rgb` 函數將其 `background-color` 設置爲 cyan（藍綠色）。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
Next, in the `.one` CSS rule, use the `rgb` function to set the `background-color` to black. And in the `.two` CSS rule, use the `rgb` function to set the `background-color` to red.
|
||||
下一步，在 `.one` CSS 規則中，使用 `rgb` 函數將 `background-color` 設置爲黑色。 下一步，在 `.two` CSS 規則中，使用 `rgb` 函數將 `background-color` 設置爲紅色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-39
|
||||
|
||||
除了補色之外，還有其他幾種重要的顏色組合，但稍後你會了解到這些。
|
||||
|
||||
For now, use the `rgb` function in the `.two` CSS rule to set the `background-color` to black.
|
||||
現在，使用 `.two` CSS 規則中的 `rgb` 函數將 `background-color` 設置爲黑色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
And in the `h1` CSS rule, remove the `background-color` property and value to go back to the default white color.
|
||||
在 `h1` CSS 規則中，刪除 `background-color` 屬性和值，改爲默認的白色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
Update the `.one` CSS rule to target the new `red` class.
|
||||
更新 `.one` CSS 規則以定位新的 `red` 類。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
And update the `rgb` function in the `.red` CSS rule so that the red value is at the max.
|
||||
更新 `.red` CSS 規則中的 `rgb` 函數，使紅色爲最大值。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,32 +7,32 @@ dashedName: step-44
|
||||
|
||||
# --description--
|
||||
|
||||
接下來，將第二個標記 `div` 中的 `two` 類更改爲 `green`，將第三個標記 `div` 中的 `three` 類更改爲 `blue`。
|
||||
接下來，將第二個筆 `div` 中的 `two` 類更改爲 `green`，將第三個筆 `div` 中的 `three` 類更改爲 `blue`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的第二個標記 `div` 不應該有 `two` 類。
|
||||
你的第二個筆 `div` 不應該有 `two` 類。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(!containerSecondChild?.classList?.contains('two'));
|
||||
```
|
||||
|
||||
你的第二個標記 `div` 應該有 `marker` 和 `green` 類。
|
||||
你的第二個筆 `div` 應該有 `marker` 和 `green` 類。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green'));
|
||||
```
|
||||
|
||||
你的第三個標記 `div` 不應具有類 `three`。
|
||||
你的第三個筆 `div` 不應具有類 `three`。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(!containerThirdChild?.classList?.contains('three'));
|
||||
```
|
||||
|
||||
你的第三個標記 `div` 應該具有 `marker` 類和 `blue` 類。
|
||||
你的第三個筆 `div` 應該具有 `marker` 類和 `blue` 類。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
更新 CSS 類選擇器 `.two` 使其定位新的 `green` 類。 And update the `.three` class selector so it targets the new `blue` class.
|
||||
更新 CSS 類選擇器 `.two` 使其定位新的 `green` 類。 並更新 `.three` 類選擇器，使其定位新的 `blue` 類。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-46
|
||||
|
||||
十六進制顏色值以 `#` 字符開頭，從 0-9 和 A-F 取六個字符。 第一對字符代表紅色，第二對代表綠色，第三對代表藍色。 例如，`#4B5320`。
|
||||
|
||||
In the `.green` class selector, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue.
|
||||
在 `.green` 類選擇器中，將 `background-color` 屬性設置爲十六進制顏色代碼，其值 `00` 表示紅色，`FF` 表示綠色，`00` 表示藍色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ dashedName: step-47
|
||||
|
||||
對於十六進制顏色，`00` 是該顏色的 0%，`FF` 是 100%。 所以 `#00FF00` 轉換爲 0% 紅色、100% 綠色和 0% 藍色，與 `rgb(0, 255, 0)` 相同。
|
||||
|
||||
Lower the intensity of green by setting the green value of the hex color to `7F`.
|
||||
通過將十六進制顏色的綠色值設置爲 `7F` 來降低綠色強度。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-48
|
||||
|
||||
<dfn>HSL</dfn> 顏色模型或色調、飽和度和亮度是表示顏色的另一種方式。
|
||||
|
||||
The CSS hsl function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness.
|
||||
CSS hsl 函數接受 3 個值：0 到 360 的數字表示色調，0 到 100 的百分比表示飽和度，0 到 100 的百分比表示亮度。
|
||||
|
||||
如果你想象一個色輪，色調紅色是 0 度，綠色是 120 度，藍色是 240 度。
|
||||
|
||||
Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. You must add the percent sign `%` to the saturation and lightness values.
|
||||
飽和度指純色的顏色強度從 0% 或灰色到 100%。 你必須給飽和度和亮度值添加百分比標誌 `%`。
|
||||
|
||||
亮度是顏色出現的亮度，從 0% 或全黑到 100% 或全白，其中 50% 爲中性。
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-70
|
||||
|
||||
# --description--
|
||||
|
||||
現在彩筆具有正確的顏色，是時候構建筆筒了。 從紅色標記開始。
|
||||
現在彩筆具有正確的顏色，是時候構建筆筒了。 從紅色筆開始。
|
||||
|
||||
Inside the red marker `div` element, create a new `div` element and give it a class of `sleeve`.
|
||||
在紅色筆 `div` 中，創建一個新的 `div`，並給它添加一個 `sleeve` 類。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,13 +15,13 @@ dashedName: step-75
|
||||
rgba(redValue, greenValue, blueValue, alphaValue);
|
||||
```
|
||||
|
||||
You can also use an alpha channel with `hsl` and `hex` colors. You will see how to do that soon.
|
||||
你也可以使用帶有 `hsl` 和 `hex` 顏色的 alpha 通道。 你將很快看到如何實現這一點。
|
||||
|
||||
In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity.
|
||||
在 `.sleeve` 規則中，使用 `rgba` 函數將 `background-color` 屬性設置爲具有 50% 不透明度的純白色。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`.
|
||||
你的 `.sleeve` CSS 規則應將 `background-color` 屬性設置爲 `rgba(255, 255, 255, 0.5)`。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-85
|
||||
|
||||
很好， 你的紅色筆看起來不錯。 現在你需要做的就是給其他彩筆添加筆蓋和筆筒。
|
||||
|
||||
爲綠色和藍色彩筆添加筆蓋和筆筒。 你只需從紅色標記中複製 `div` 元素，並將其粘貼到其他兩個標記中。
|
||||
爲綠色和藍色彩筆添加筆蓋和筆筒。 你只需從紅色筆中複製 `div` 元素，並將其粘貼到其他兩支筆中。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,22 +15,22 @@ dashedName: step-86
|
||||
box-shadow: offsetX offsetY color;
|
||||
```
|
||||
|
||||
Here's how the `offsetX` and `offsetY` values work:
|
||||
下面是 `offsetX` 和 `offsetY` 值的作用：
|
||||
|
||||
* both `offsetX` and `offsetY` accept number values in `px` and other CSS units
|
||||
* a positive `offsetX` value moves the shadow right and a negative value moves it left
|
||||
* a positive `offsetY` value moves the shadow down and a negative value moves it up
|
||||
* if you want a value of zero (`0`) for any or both `offsetX` and `offsetY`, you don't need to add a unit. Every browser understands that zero means no change.
|
||||
* `offsetX` 和 `offsetY` 都接受數字值，單位是 `px` 和其他 CSS 單位
|
||||
* 正 `offsetX` 值將陰影向右移動，負值將它向左移動
|
||||
* 正 `offsetY` 值將陰影向下移動，負值將它向上移動
|
||||
* 如果你想要 `offsetX` 和 `offsetY` 其中一個值爲零，或兩個都爲零（`0`），那麼你不需要添加單位。 每種瀏覽器都知道零意味着沒有變化。
|
||||
|
||||
The height and width of the shadow is determined by the height and width of the element it's applied to. You can also use an optional `spreadRadius` value to spread out the reach of the shadow. More on that later.
|
||||
陰影的高度和寬度由應用陰影的元素的高度和寬度決定。 你也可以使用可選的 `spreadRadius` 值來擴大陰影的範圍。 之後會介紹更多。
|
||||
|
||||
Start by adding a simple shadow to the red marker.
|
||||
首先爲紅色筆添加一個簡單的陰影。
|
||||
|
||||
In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`.
|
||||
在 `.red` CSS 規則中，添加 `box-shadow` 屬性，其中 `offsetX` 的值爲 `5px`，`offsetY` 爲 `5px`，`color` 爲 `red`。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`.
|
||||
你的 `.red` CSS 規則應該有一個 `box-shadow` 簡寫屬性，其值爲 `5px 5px red`。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-90
|
||||
|
||||
現在你已經熟悉了 `box-shadow` 屬性，你可以最終添加陰影，從紅色筆的陰影開始。
|
||||
|
||||
In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. Remember that you don't need to add units to a zero value.
|
||||
在 `.red` CSS 規則中，更新 `box-shadow` 屬性的值，使 `offsetX` 爲 `0`，`offsetY` 爲 `0`，`blurRadius` 爲 `20px`，`spreadRadius` 爲 `0`，而 `color` 爲 `red`。 請記住，你不需要爲零值添加單位。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -32,13 +32,13 @@ assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
|
||||
```
|
||||
|
||||
You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
|
||||
你應該給 `background` 一個以 `var(--building-color1)` 開始的 `linear-gradient`。
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
|
||||
```
|
||||
|
||||
You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
|
||||
你應該給 `background` 一個以 `var(--window-color1)` 結束的 `linear-gradient`。
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-15
|
||||
|
||||
# --description--
|
||||
|
||||
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
|
||||
在之前的步驟中，你使用了錨點元素將文本轉換爲鏈接。 也可以把其他類型的內容放在錨標籤中，將其轉換成一個鏈接。
|
||||
|
||||
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
|
||||
用必要的元素標籤包裹圖片，把它變成一個鏈接。 使用 `https://freecatphotoapp.com` 作爲錨點元素中 `href` 屬性的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
|
||||
`img` 元素的 `src` 屬性值應爲 `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`。 你可能不小心刪除了它。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -23,37 +23,37 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
||||
你的錨點元素（`a`）應該有一個開始標籤。 開始標籤的語法是：`<elementName>`。
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('a').length >= 2);
|
||||
```
|
||||
|
||||
You should only add one opening anchor (`a`) tag. Please remove any extras.
|
||||
你應該只添加一個錨點（`a`）開始標籤。 請刪除多餘的。
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('a').length === 2);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
|
||||
你的錨點元素（`a`）應該有一個結束標籤。 結束標籤在 `<` 字符後面要有一個 `/`。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a>/g).length >= 2);
|
||||
```
|
||||
|
||||
You should only add one closing anchor (`a`) tag. Please remove any extras.
|
||||
你應該只添加一個錨點（`a`）結束標籤。 請刪除多餘的。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a>/g).length === 2);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
你的錨點元素（`a`）缺少 `href` 屬性。 請檢查確認在開始標籤的名稱後面要有一個空格，且所有的屬性名稱前面也要有一個空格。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a').hasAttribute('href'));
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
|
||||
你的錨點元素（`a`）應該鏈接到 `https://freecatphotoapp.com`。 你可能省略了這個 URL 或者有拼寫錯誤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -62,7 +62,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
|
||||
你的 `img` 元素應該被嵌套在錨點元素（`a`）之中。 整個 `img` 元素應該置於錨點元素（`a`）的開始標籤和結束標籤之間。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').parentNode.nodeName === 'A');
|
||||
|
||||
@@ -55,7 +55,7 @@ assert.deepStrictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
You should only have one `ol` element.
|
||||
你應該只有一個 `ol` 元素。
|
||||
|
||||
```js
|
||||
assert([...document.querySelectorAll('ol')].length == 1);
|
||||
|
||||
@@ -22,7 +22,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
|
||||
你的第一個單選按鈕，`id` 爲 `indoor`，應該有 `checked` 屬性。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]')[0].hasAttribute('checked'));
|
||||
|
||||
@@ -22,14 +22,8 @@ assert(code.match(/\<html.*?\>/) && code.match(/\<\/html\>/));
|
||||
你的 `html` 元素應該有一個 `lang` 屬性，其值爲 `en`。 你可能忽略了屬性/值，或者有拼寫錯誤。
|
||||
|
||||
```js
|
||||
const extraSpacesRemoved = code.replace(/\s+/g, ' ');
|
||||
assert(extraSpacesRemoved.match(/\<html lang\=("|')([a-z]+)\1\>/));
|
||||
```
|
||||
|
||||
儘管你已將 `html` 元素的 `lang` 屬性設置爲 `en`，但建議始終將屬性的值放在引號中。
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
const extraSpacesRemoved = code.replace(/\s+/g, " ");
|
||||
assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-56
|
||||
|
||||
還有另一種方法可以將 `input` 元素的文本與元素本身相關聯。 你可以將文本嵌套在 `label` 元素中，並添加與 `input` 元素的 `id` 具有相同值的 `for` 屬性。
|
||||
|
||||
Associate the text `Loving` with the checkbox by nesting only the text `Loving` in a `label` element and giving it an appropriate `for` attribute.
|
||||
通過僅給 `label` 元素添加文本 `Loving`，並給它添加適當的 `for` 屬性值，將文本 `Loving` 與複選框相關聯。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ dashedName: step-41
|
||||
|
||||
# --hints--
|
||||
|
||||
應該給名字（first name）`input` 元素一個 `name` 屬性。 _提示：可以使用 `first-name`_
|
||||
You should give the `input` expecting a first name a `name` attribute. _提示：可以使用 `first-name`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-52
|
||||
|
||||
# --description--
|
||||
|
||||
創建一個選擇器來定位表格正文中的 `td` 元素。 給它們一個寬度以填充視口，最小值和最大值爲 `4rem`。 This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
|
||||
創建一個選擇器來定位表格正文中的 `td` 元素。 給它們一個寬度以填充視口，最小值和最大值爲 `4rem`。 這種方法確保寬度是固定的，而專門設置 `width`，將允許元素收縮到容器中。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-31
|
||||
|
||||
`rem` 單位代表 `root em`，與 `html` 元素的字體大小有關。
|
||||
|
||||
Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
|
||||
創建一個 `.small-text` 選擇器，並將 `font-size` 設置爲 `0.85rem`，計算結果大致爲 `13.6px`（記得你之前將 `html` 設置爲具有 `16px` 的 `font-size`）。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -29,13 +29,13 @@ assert(document.querySelector('.calories-info')?.querySelector('span'))
|
||||
assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
|
||||
```
|
||||
|
||||
Your `span` element should come after your `.left-container` element.
|
||||
你的 `span` 元素應該位於 `.left-container` 元素之後。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');
|
||||
```
|
||||
|
||||
Your `p` element should have the text `Calories`.
|
||||
你的 `p` 元素應包含文本 `Calories`。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.small-text')?.nextElementSibling?.innerText === 'Calories');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
在最後一個 `.divider` 元素之後，創建一個 `p` 元素併爲其指定文本 `Total Fat 8g 10%`。 Wrap the text `Total Fat` in a `span` element with the `class` of `bold`. Wrap the text `10%` in another `span` element with the `class` of `bold`. 最後：嵌套 `Total Fat` `span` 元素和文本 `8g` 在另一個 `span` 元素中，以實現對齊。
|
||||
在最後一個 `.divider` 元素之後，創建一個 `p` 元素併爲其指定文本 `Total Fat 8g 10%`。 將 `Total Fat` 包裹在 `span` 元素中，並將 `class` 設置爲 `bold`。 將文本 `10%` 包裹在另一個 `span` 元素中，並將 `class` 設置爲 `bold`。 最後：嵌套 `Total Fat` `span` 元素和文本 `8g` 在另一個 `span` 元素中，以實現對齊。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-53
|
||||
|
||||
# --description--
|
||||
|
||||
在最後一個 `.divider` 之後，使用文本 `Cholesterol 0mg 0%` 創建一個新的 `p` 元素。 Wrap the text `Cholesterol` in a `span` element, and give that `span` element the `class` of `bold`. Wrap the text `0%` in another `span` element, with the `class` of `bold`. Finally, nest the `Cholesterol` `span` element and the text `0mg` in an additional `span` element for alignment.
|
||||
在最後一個 `.divider` 之後，使用文本 `Cholesterol 0mg 0%` 創建一個新的 `p` 元素。 將文本 `Cholesterol` 包裹在 `span` 元素中，並給 `span` 元素一個 `class` 爲 `bold`。 將文本 `0%` 包裹在另一個 `span` 元素中，並將 `class` 設置爲 `bold`。 最後：嵌套 `Cholesterol` `span` 元素和文本 `0mg` 在另一個 `span` 元素中，以實現對齊。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,13 +11,13 @@ dashedName: assignment-with-a-returned-value
|
||||
|
||||
如果你还记得我们在这一节<a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank" rel="noopener noreferrer nofollow">使用赋值运算符存储值</a>中的讨论，赋值之前，先完成等号右边的操作。 这意味着我们可以获取函数的返回值，并将其赋值给一个变量。
|
||||
|
||||
Assume we have defined a function `sum` which adds two numbers together.
|
||||
假设我们有一个预先定义的函数 `sum` ，它将两个数相加。
|
||||
|
||||
```js
|
||||
ourSum = sum(5, 12);
|
||||
```
|
||||
|
||||
Calling the `sum` function with the arguments of `5` and `12` produces a return value of `17`. This return value is assigned to the `ourSum` variable.
|
||||
调用 `sum` 函数，参数为 `5` 和 `12`，生成的返回值为 `17`。 将返回值赋给 `ourSum` 变量。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ dashedName: escape-sequences-in-strings
|
||||
|
||||
<pre>
|
||||
FirstLine
|
||||
\SecondLine
|
||||
\SecondLine
|
||||
ThirdLine
|
||||
</pre>
|
||||
|
||||
|
||||
@@ -42,61 +42,61 @@ switch (val) {
|
||||
|
||||
# --hints--
|
||||
|
||||
不要使用 `else` 表达式。
|
||||
不要使用 `else` 表达式
|
||||
|
||||
```js
|
||||
assert(!/else/g.test(code));
|
||||
```
|
||||
|
||||
不要使用 `if` 表达式。
|
||||
不要使用 `if` 表达式
|
||||
|
||||
```js
|
||||
assert(!/if/g.test(code));
|
||||
```
|
||||
|
||||
你应该有至少 4 个 `break` 表达式。
|
||||
你应该有至少 4 个 `break` 表达式
|
||||
|
||||
```js
|
||||
assert(code.match(/break/g).length >= 4);
|
||||
```
|
||||
|
||||
`chainToSwitch("bob")` should return the string `Marley`
|
||||
`chainToSwitch("bob")` 应该返回字符串 `Marley`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch('bob') === 'Marley');
|
||||
```
|
||||
|
||||
`chainToSwitch(42)` should return the string `The Answer`
|
||||
`chainToSwitch(42)` 应该返回字符串 `The Answer`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(42) === 'The Answer');
|
||||
```
|
||||
|
||||
`chainToSwitch(1)` should return the string `There is no #1`
|
||||
`chainToSwitch(1)` 应该返回字符串 `There is no #1`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(1) === 'There is no #1');
|
||||
```
|
||||
|
||||
`chainToSwitch(99)` should return the string `Missed me by this much!`
|
||||
`chainToSwitch(99)`应该返回字符串 `Missed me by this much!`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(99) === 'Missed me by this much!');
|
||||
```
|
||||
|
||||
`chainToSwitch(7)` should return the string `Ate Nine`
|
||||
`chainToSwitch(7)` 应该返回字符串 `Ate Nine`
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(7) === 'Ate Nine');
|
||||
```
|
||||
|
||||
`chainToSwitch("John")` should return `""` (empty string)
|
||||
`chainToSwitch("John")` 应该返回 `""`（空字符串）
|
||||
|
||||
```js
|
||||
assert(chainToSwitch('John') === '');
|
||||
```
|
||||
|
||||
`chainToSwitch(156)` should return `""` (empty string)
|
||||
`chainToSwitch(156)` 应该返回 `""`（空字符串）
|
||||
|
||||
```js
|
||||
assert(chainToSwitch(156) === '');
|
||||
|
||||
@@ -28,15 +28,15 @@ const someFunc = function(done) {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a person schema called `personSchema` with the following shape:
|
||||
按下面的信息创建一个名为 `personSchema` 的人员模式：
|
||||
|
||||
* A required `name` field of type `String`
|
||||
* An `age` field of type `Number`
|
||||
* A `favoriteFoods` field of type `[String]`
|
||||
* 必需的 `name` 字段，类型为 `String`
|
||||
* `age` 字段，类型为 `Number`
|
||||
* `favoriteFoods` 字段，类型为 `[String]`
|
||||
|
||||
采用 Mongoose 基础 schema 类型。 你如果还想添加更多的键，就请使用 required 或 unique 等简单的验证器（validators），并设置默认值。 查看我们的 <a href="https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/" target="_blank" rel="noopener noreferrer nofollow">Mongoose 文章</a>。
|
||||
|
||||
Now, create a model from the `personSchema` and assign it to the existing variable `Person`.
|
||||
现在，从 `personSchema` 创建一个模型，并将它分配给现有变量 `Person`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-16
|
||||
|
||||
# --description--
|
||||
|
||||
Every `region` role requires a label, which helps screen reader users understand the purpose of the region. One method for adding a label is to add a heading element inside the region and then reference it with the `aria-labelledby` attribute.
|
||||
每个 `region` role 都需要一个标签，帮助屏幕阅读者理解 region 的目的。 一个添加标签的方法是在 region 内添加一个 heading 元素，然后使用 `aria-labelledby` 属性来引用它。
|
||||
|
||||
Add the following `aria-labelledby` attributes to the `section` elements:
|
||||
给 `section` 元素添加以下 `aria-labelledby` 属性：
|
||||
|
||||
- `student-info`
|
||||
- `html-questions`
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
Do not forget to give your `form` a submit button with the text `Send`.
|
||||
不要忘记给你的 `form` 一个提交按钮，文本为 `Send`。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,25 +17,25 @@ Do not forget to give your `form` a submit button with the text `Send`.
|
||||
assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
You should place the submit button within the `form` element.
|
||||
你应该将提交按钮放在 `form` 元素中。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
You should place the submit button after the last `section` element.
|
||||
你应该将提交按钮放在最后一个 `section` 元素之后。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
|
||||
```
|
||||
|
||||
You should give the submit button a `type` of `submit`.
|
||||
你应该给提交按钮添加 `type` 为 `submit`。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
|
||||
```
|
||||
|
||||
The submit button should display the text `Send`.
|
||||
提交按钮的文本应为 `Send`。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Send');
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-57
|
||||
|
||||
# --description--
|
||||
|
||||
To align the input boxes with each other, create a new ruleset that targets all `input` and `label` elements within an `.info` element and set the `display` property to `inline-block`.
|
||||
要使输入框相互对齐，在 `.info` 中为所有 `input` 和 `label` 元素创建一个新的规则集合，并设置 `display` 属性为 `inline-block`。
|
||||
|
||||
另外，将 `label` 元素的文本向右对齐。
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-87
|
||||
|
||||
# --description--
|
||||
|
||||
现在将 `address` class 应用于包含地址的 `p` 元素。
|
||||
现在给包含街道地址 `123 Free Code Camp Drive` 的 `p` 元素应用 `address` 类。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-51
|
||||
|
||||
有些东西看起来不对劲。 你将正确的 `class` 属性值添加到 `p` 元素，其文本是 `Donut`，但你尚未为其定义选择器。
|
||||
|
||||
The CSS rule for the `flavor` class already sets the properties you want. Add the `dessert` class as an additional selector for this CSS rule.
|
||||
`flavor` 类的 CSS 规则已经设置了你想要的属性。 添加 `dessert` 类作为此 CSS 规则的附加选择器。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,10 +7,10 @@ dashedName: step-3
|
||||
|
||||
# --description--
|
||||
|
||||
请记住，`title` 元素为搜索引擎提供了有关页面的额外信息。 It also displays the content of that `title` element in two more ways:
|
||||
请记住，`title` 元素为搜索引擎提供了有关页面的额外信息。 它还通过以下两种方式显示 `title` 元素的内容：
|
||||
|
||||
* in the title bar when the page is open
|
||||
* in the browser tab for the page when you hover on it. Even if that tab is not active, once you hover on the tab, the `title` text is displayed.
|
||||
* 当页面打开时，在标题栏中
|
||||
* 当你把鼠标悬停在该页面上时，在浏览器标签中。 即使该标签未被激活，一旦你将鼠标悬停在该标签上，`title` 文本就会显示出来。
|
||||
|
||||
在 `head` 元素中，嵌套一个带有文本 `Colored Markers` 的 `title` 元素。
|
||||
|
||||
|
||||
@@ -7,26 +7,26 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
You can have multiple self-closing `meta` elements on a web page. What distinguishes one `meta` element from the other is the attribute. You should add a new meta element for each attribute you want to specify.
|
||||
你可以在一个网页上有多个自闭合的 `meta` 元素。 将一个 `meta` 元素和其他区别开来的是属性。 你应该为你想要指定的每个属性添加一个新的 meta 元素。
|
||||
|
||||
Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices.
|
||||
在 `head` 中添加另一个自闭合的 `meta` 元素。 给它一个 `name` 属性，值为 `viewport`，和一个 `content` 属性，值为 `width=device-width, initial-scale=1.0`，这样你的页面在各种设备上看起来是一样的。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `meta` elements.
|
||||
你应该有两个 `meta` 元素。
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
Your new `meta` element should be a self-closing element.
|
||||
你的新 `meta` 元素应该是一个自闭合元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/meta>/i) === null);
|
||||
```
|
||||
|
||||
Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`.
|
||||
你的新 `meta` 元素应将 `name` 属性设置为 `viewport`，并将 `content` 属性设置为 `width=device-width, initial-scale=1.0`。
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-7
|
||||
|
||||
在这个项目中，你将使用外部 CSS 文件来设置页面样式。 我们已经为你创建了一个 `styles.css` 文件。 但在你使用它之前，你需要将它链接到页面上。
|
||||
|
||||
Nest a `link` element within the `head` element. 给它一个 `rel` 属性，设置为 `stylesheet`，和一个 `href` 属性，设置为 `styles.css`。
|
||||
在 `head` 元素中嵌套一个 `link` 元素。 给它一个 `rel` 属性，设置为 `stylesheet`，和一个 `href` 属性，设置为 `styles.css`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-9
|
||||
|
||||
现在，你将添加一些元素，最终将它们设置为彩色笔。
|
||||
|
||||
First, within the `body` element, add a `div` element and set its `class` attribute to `container`. 确保 `div` 元素位于 `h1` 元素下方。
|
||||
首先，在 `body` 元素中，添加一个 `div` 元素，并将其 `class` 属性设置为 `container`。 确保 `div` 元素位于 `h1` 元素下方。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
Next, within the `div` element, add another `div` element and give it a class of `marker`.
|
||||
接下来，在 `div` 中，添加另一个 `div` 元素，并为其添加一个 `marker` 类。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
The background color was applied, but since the marker `div` element has no content in it, it doesn't have any height by default.
|
||||
实际应用了背景颜色，但由于彩笔 `div` 元素中没有内容，因此默认情况下它没有任何高度。
|
||||
|
||||
在你的 `.marker` CSS 规则中，将 `height` 属性设置为 `25px`，并将 `width` 属性设置为 `200px`。
|
||||
|
||||
|
||||
@@ -7,11 +7,11 @@ dashedName: step-13
|
||||
|
||||
# --description--
|
||||
|
||||
如果你的标记在页面上居中，看起来会更好。 一个简单的方法是使用 `margin` <dfn>简写属性</dfn>。
|
||||
如果你的笔在页面上居中，看起来会更好。 一个简单的方法是使用 `margin` <dfn>简写属性</dfn>。
|
||||
|
||||
在上一个项目中，你使用 `margin-top` 和 `margin-left` 等属性分别设置元素的边距区域。 `margin` 简写属性可以方便地同时设置多个边距区域。
|
||||
|
||||
要将标记在页面上居中，请将其 `margin` 属性设置为 `auto`。 这会将 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left` 全部设置为 `auto`。
|
||||
要将笔在页面上居中，请将其 `margin` 属性设置为 `auto`。 这会将 `margin-top`、`margin-right`、`margin-bottom` 和 `margin-left` 全部设置为 `auto`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,21 +13,21 @@ dashedName: step-16
|
||||
<div class="animal dog">
|
||||
```
|
||||
|
||||
If you add multiple classes to an HTML element, the styles of the first classes you list may be overridden by later classes.
|
||||
如果你给一个 HTML 元素添加多个类，你列出的前几个类的样式可能会被之后的类覆盖。
|
||||
|
||||
To begin, add the class `one` to the first marker `div` element.
|
||||
首先，给第一个笔 `div` 元素添加 `one` class。
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the class `one` to the first marker `div` element.
|
||||
你应该给第一个笔 `div` 元素添加 `one` class。
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
assert(containerFirstChild?.classList?.contains('one'));
|
||||
```
|
||||
|
||||
Your first marker `div` should have the classes `marker` and `one`.
|
||||
你的第一个笔 `div` 应该有 `marker` 和 `one` class。
|
||||
|
||||
```js
|
||||
const containerFirstChild = [...document.querySelector('.container')?.children][0];
|
||||
|
||||
@@ -7,32 +7,32 @@ dashedName: step-19
|
||||
|
||||
# --description--
|
||||
|
||||
Add the class `two` to the second marker `div`, and add the class `three` to the third marker `div`.
|
||||
给第二个笔 `div` 添加 `two` class，给第三个笔 `div` 添加 `three` class。
|
||||
|
||||
# --hints--
|
||||
|
||||
你应该将 `two` class 添加到 `container` `div` 中的第二个标记 `div` 元素。
|
||||
你应该将 `two` class 添加到 `container` `div` 中的第二个笔 `div` 元素。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('two'));
|
||||
```
|
||||
|
||||
你的第二个标记 `div` 应该有 `marker` class 和 `two` class。
|
||||
你的第二个笔 `div` 应该有 `marker` class 和 `two` class。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two'));
|
||||
```
|
||||
|
||||
你应该将 `three` class 添加到 `container` `div` 中的第三个标记 `div` 元素。
|
||||
你应该将 `three` class 添加到 `container` `div` 中的第三个笔 `div` 元素。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(containerThirdChild?.classList?.contains('three'));
|
||||
```
|
||||
|
||||
你的第三个标记 `div` 应该具有 `marker` class 和 `three` class。
|
||||
你的第三个笔 `div` 应该具有 `marker` class 和 `three` class。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
请注意，标记的 `background-color` 仍然是红色的。 这是因为你将 `rgb` 函数的红色值设置为最大值 `255`，即 100% 红色，并将绿色和蓝色值都设置为 `0`。
|
||||
请注意，笔的 `background-color` 仍然是红色的。 这是因为你将 `rgb` 函数的红色值设置为最大值 `255`，即 100% 红色，并将绿色和蓝色值都设置为 `0`。
|
||||
|
||||
现在使用 `rgb` 函数来设置其他颜色。
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-24
|
||||
|
||||
# --description--
|
||||
|
||||
虽然红色和蓝色标记看起来相同，但绿色标记比之前浅得多。 这是因为 `green` 颜色关键字实际上是一个较暗的阴影，大约介于黑色和绿色最大值之间。
|
||||
虽然红色和蓝色笔看起来相同，但绿色笔比之前浅得多。 这是因为 `green` 颜色关键字实际上是一个较暗的阴影，大约介于黑色和绿色最大值之间。
|
||||
|
||||
在 `.two` CSS 规则中，将 `rgb` 函数中的绿色值设置为 `127` 以降低其强度。
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-34
|
||||
|
||||
还有三种复色：黄绿色（绿色+黄色）、天蓝色（蓝色+青色）、玫瑰色（红色+品红色）。
|
||||
|
||||
To create chartreuse green, update the `rgb` function in the `.one` CSS rule so that red is at `127`, and set green to the max value.
|
||||
要创建黄绿色，更新 `.one` CSS 规则中的 `rgb` 函数，使红色的值是 `127`，绿色是最大值。
|
||||
|
||||
For azure, update the `rgb` function in the `.two` CSS rule so that green is at `127` and blue is at the max value.
|
||||
要创建天蓝色，更新 `.two` CSS 规则中的 `rgb` 函数，使绿色的值是 `127`，蓝色是最大值。
|
||||
|
||||
And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` CSS rule so that blue is at `127` and red is at the max value.
|
||||
对于有时被称为亮粉红色的玫瑰色，更新 `.three` CSS 规则中的 `rgb` 函数，使蓝色的值为 `127`，红色为最大值。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-35
|
||||
|
||||
现在你已经学习了色轮上的所有原色、间色和复色，更容易理解其他颜色理论概念和它们如何影响设计。
|
||||
|
||||
First, in the CSS rules `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black. 请记住 `rgb` 函数使用加成色模型。颜色起始为黑色，随红色、绿色和蓝色的值增加而变化。
|
||||
首先，在 CSS 规则 `.one`、`.two` 和 `.three` 中，调整 `rgb` 函数中的值，将每个元素的 `background-color` 设置为纯黑色。 请记住 `rgb` 函数使用加成色模型。颜色起始为黑色，随红色、绿色和蓝色的值增加而变化。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-37
|
||||
|
||||
选择一种颜色作为主要颜色， 并使用其补充颜色作为强调来提醒访问者注意页面上的某些内容，是一种更好的方式。
|
||||
|
||||
First, in the `h1` rule, use the `rgb` function to set its `background-color` to cyan.
|
||||
首先，在 `h1` 规则中，使用 `rgb` 函数将其 `background-color` 设置为 cyan（蓝绿色）。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
Next, in the `.one` CSS rule, use the `rgb` function to set the `background-color` to black. And in the `.two` CSS rule, use the `rgb` function to set the `background-color` to red.
|
||||
下一步，在 `.one` CSS 规则中，使用 `rgb` 函数将 `background-color` 设置为黑色。 下一步，在 `.two` CSS 规则中，使用 `rgb` 函数将 `background-color` 设置为红色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-39
|
||||
|
||||
除了补色之外，还有其他几种重要的颜色组合，但稍后你会了解到这些。
|
||||
|
||||
For now, use the `rgb` function in the `.two` CSS rule to set the `background-color` to black.
|
||||
现在，使用 `.two` CSS 规则中的 `rgb` 函数将 `background-color` 设置为黑色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
And in the `h1` CSS rule, remove the `background-color` property and value to go back to the default white color.
|
||||
在 `h1` CSS 规则中，删除 `background-color` 属性和值，改为默认的白色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
Update the `.one` CSS rule to target the new `red` class.
|
||||
更新 `.one` CSS 规则以定位新的 `red` 类。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
And update the `rgb` function in the `.red` CSS rule so that the red value is at the max.
|
||||
更新 `.red` CSS 规则中的 `rgb` 函数，使红色为最大值。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,32 +7,32 @@ dashedName: step-44
|
||||
|
||||
# --description--
|
||||
|
||||
接下来，将第二个标记 `div` 中的 `two` 类更改为 `green`，将第三个标记 `div` 中的 `three` 类更改为 `blue`。
|
||||
接下来，将第二个笔 `div` 中的 `two` 类更改为 `green`，将第三个笔 `div` 中的 `three` 类更改为 `blue`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的第二个标记 `div` 不应该有 `two` 类。
|
||||
你的第二个笔 `div` 不应该有 `two` 类。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(!containerSecondChild?.classList?.contains('two'));
|
||||
```
|
||||
|
||||
你的第二个标记 `div` 应该有 `marker` 和 `green` 类。
|
||||
你的第二个笔 `div` 应该有 `marker` 和 `green` 类。
|
||||
|
||||
```js
|
||||
const containerSecondChild = [...document.querySelector('.container')?.children][1];
|
||||
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green'));
|
||||
```
|
||||
|
||||
你的第三个标记 `div` 不应具有类 `three`。
|
||||
你的第三个笔 `div` 不应具有类 `three`。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
assert(!containerThirdChild?.classList?.contains('three'));
|
||||
```
|
||||
|
||||
你的第三个标记 `div` 应该具有 `marker` 类和 `blue` 类。
|
||||
你的第三个笔 `div` 应该具有 `marker` 类和 `blue` 类。
|
||||
|
||||
```js
|
||||
const containerThirdChild = [...document.querySelector('.container')?.children][2];
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
更新 CSS 类选择器 `.two` 使其定位新的 `green` 类。 And update the `.three` class selector so it targets the new `blue` class.
|
||||
更新 CSS 类选择器 `.two` 使其定位新的 `green` 类。 并更新 `.three` 类选择器，使其定位新的 `blue` 类。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: step-46
|
||||
|
||||
十六进制颜色值以 `#` 字符开头，从 0-9 和 A-F 取六个字符。 第一对字符代表红色，第二对代表绿色，第三对代表蓝色。 例如，`#4B5320`。
|
||||
|
||||
In the `.green` class selector, set the `background-color` property to a hex color code with the values `00` for red, `FF` for green, and `00` blue.
|
||||
在 `.green` 类选择器中，将 `background-color` 属性设置为十六进制颜色代码，其值 `00` 表示红色，`FF` 表示绿色，`00` 表示蓝色。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ dashedName: step-47
|
||||
|
||||
对于十六进制颜色，`00` 是该颜色的 0%，`FF` 是 100%。 所以 `#00FF00` 转换为 0% 红色、100% 绿色和 0% 蓝色，与 `rgb(0, 255, 0)` 相同。
|
||||
|
||||
Lower the intensity of green by setting the green value of the hex color to `7F`.
|
||||
通过将十六进制颜色的绿色值设置为 `7F` 来降低绿色强度。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,11 +9,11 @@ dashedName: step-48
|
||||
|
||||
<dfn>HSL</dfn> 颜色模型或色调、饱和度和亮度是表示颜色的另一种方式。
|
||||
|
||||
The CSS hsl function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness.
|
||||
CSS hsl 函数接受 3 个值：0 到 360 的数字表示色调，0 到 100 的百分比表示饱和度，0 到 100 的百分比表示亮度。
|
||||
|
||||
如果你想象一个色轮，色调红色是 0 度，绿色是 120 度，蓝色是 240 度。
|
||||
|
||||
Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. You must add the percent sign `%` to the saturation and lightness values.
|
||||
饱和度指纯色的颜色强度从 0% 或灰色到 100%。 你必须给饱和度和亮度值添加百分比标志 `%`。
|
||||
|
||||
亮度是颜色出现的亮度，从 0% 或全黑到 100% 或全白，其中 50% 为中性。
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-70
|
||||
|
||||
# --description--
|
||||
|
||||
现在彩笔具有正确的颜色，是时候构建笔筒了。 从红色标记开始。
|
||||
现在彩笔具有正确的颜色，是时候构建笔筒了。 从红色笔开始。
|
||||
|
||||
Inside the red marker `div` element, create a new `div` element and give it a class of `sleeve`.
|
||||
在红色笔 `div` 中，创建一个新的 `div`，并给它添加一个 `sleeve` 类。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,13 +15,13 @@ dashedName: step-75
|
||||
rgba(redValue, greenValue, blueValue, alphaValue);
|
||||
```
|
||||
|
||||
You can also use an alpha channel with `hsl` and `hex` colors. You will see how to do that soon.
|
||||
你也可以使用带有 `hsl` 和 `hex` 颜色的 alpha 通道。 你将很快看到如何实现这一点。
|
||||
|
||||
In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity.
|
||||
在 `.sleeve` 规则中，使用 `rgba` 函数将 `background-color` 属性设置为具有 50% 不透明度的纯白色。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`.
|
||||
你的 `.sleeve` CSS 规则应将 `background-color` 属性设置为 `rgba(255, 255, 255, 0.5)`。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-85
|
||||
|
||||
很好， 你的红色笔看起来不错。 现在你需要做的就是给其他彩笔添加笔盖和笔筒。
|
||||
|
||||
为绿色和蓝色彩笔添加笔盖和笔筒。 你只需从红色标记中复制 `div` 元素，并将其粘贴到其他两个标记中。
|
||||
为绿色和蓝色彩笔添加笔盖和笔筒。 你只需从红色笔中复制 `div` 元素，并将其粘贴到其他两支笔中。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,22 +15,22 @@ dashedName: step-86
|
||||
box-shadow: offsetX offsetY color;
|
||||
```
|
||||
|
||||
Here's how the `offsetX` and `offsetY` values work:
|
||||
下面是 `offsetX` 和 `offsetY` 值的作用：
|
||||
|
||||
* both `offsetX` and `offsetY` accept number values in `px` and other CSS units
|
||||
* a positive `offsetX` value moves the shadow right and a negative value moves it left
|
||||
* a positive `offsetY` value moves the shadow down and a negative value moves it up
|
||||
* if you want a value of zero (`0`) for any or both `offsetX` and `offsetY`, you don't need to add a unit. Every browser understands that zero means no change.
|
||||
* `offsetX` 和 `offsetY` 都接受数字值，单位是 `px` 和其他 CSS 单位
|
||||
* 正 `offsetX` 值将阴影向右移动，负值将它向左移动
|
||||
* 正 `offsetY` 值将阴影向下移动，负值将它向上移动
|
||||
* 如果你想要 `offsetX` 和 `offsetY` 其中一个值为零，或两个都为零（`0`），那么你不需要添加单位。 每种浏览器都知道零意味着没有变化。
|
||||
|
||||
The height and width of the shadow is determined by the height and width of the element it's applied to. You can also use an optional `spreadRadius` value to spread out the reach of the shadow. More on that later.
|
||||
阴影的高度和宽度由应用阴影的元素的高度和宽度决定。 你也可以使用可选的 `spreadRadius` 值来扩大阴影的范围。 之后会介绍更多。
|
||||
|
||||
Start by adding a simple shadow to the red marker.
|
||||
首先为红色笔添加一个简单的阴影。
|
||||
|
||||
In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`.
|
||||
在 `.red` CSS 规则中，添加 `box-shadow` 属性，其中 `offsetX` 的值为 `5px`，`offsetY` 为 `5px`，`color` 为 `red`。
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`.
|
||||
你的 `.red` CSS 规则应该有一个 `box-shadow` 简写属性，其值为 `5px 5px red`。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-90
|
||||
|
||||
现在你已经熟悉了 `box-shadow` 属性，你可以最终添加阴影，从红色笔的阴影开始。
|
||||
|
||||
In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. Remember that you don't need to add units to a zero value.
|
||||
在 `.red` CSS 规则中，更新 `box-shadow` 属性的值，使 `offsetX` 为 `0`，`offsetY` 为 `0`，`blurRadius` 为 `20px`，`spreadRadius` 为 `0`，而 `color` 为 `red`。 请记住，你不需要为零值添加单位。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -32,13 +32,13 @@ assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
|
||||
```
|
||||
|
||||
You should give the `background` a `linear-gradient` starting from `var(--building-color1)`.
|
||||
你应该给 `background` 一个以 `var(--building-color1)` 开始的 `linear-gradient`。
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
|
||||
```
|
||||
|
||||
You should give the `background` a `linear-gradient` ending at `var(--window-color1)`.
|
||||
你应该给 `background` 一个以 `var(--window-color1)` 结束的 `linear-gradient`。
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
|
||||
|
||||
@@ -7,13 +7,13 @@ dashedName: step-15
|
||||
|
||||
# --description--
|
||||
|
||||
In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags.
|
||||
在之前的步骤中，你使用了锚点元素将文本转换为链接。 也可以把其他类型的内容放在锚标签中，将其转换成一个链接。
|
||||
|
||||
Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
|
||||
用必要的元素标签包裹图片，把它变成一个链接。 使用 `https://freecatphotoapp.com` 作为锚点元素中 `href` 属性的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it.
|
||||
`img` 元素的 `src` 属性值应为 `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`。 你可能不小心删除了它。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -23,37 +23,37 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
||||
你的锚点元素（`a`）应该有一个开始标签。 开始标签的语法是：`<elementName>`。
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('a').length >= 2);
|
||||
```
|
||||
|
||||
You should only add one opening anchor (`a`) tag. Please remove any extras.
|
||||
你应该只添加一个锚点（`a`）开始标签。 请删除多余的。
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('a').length === 2);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
|
||||
你的锚点元素（`a`）应该有一个结束标签。 结束标签在 `<` 字符后面要有一个 `/`。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a>/g).length >= 2);
|
||||
```
|
||||
|
||||
You should only add one closing anchor (`a`) tag. Please remove any extras.
|
||||
你应该只添加一个锚点（`a`）结束标签。 请删除多余的。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/a>/g).length === 2);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
你的锚点元素（`a`）缺少 `href` 属性。 请检查确认在开始标签的名称后面要有一个空格，且所有的属性名称前面也要有一个空格。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('a').hasAttribute('href'));
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
|
||||
你的锚点元素（`a`）应该链接到 `https://freecatphotoapp.com`。 你可能省略了这个 URL 或者有拼写错误。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -62,7 +62,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.
|
||||
你的 `img` 元素应该被嵌套在锚点元素（`a`）之中。 整个 `img` 元素应该置于锚点元素（`a`）的开始标签和结束标签之间。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').parentNode.nodeName === 'A');
|
||||
|
||||
@@ -55,7 +55,7 @@ assert.deepStrictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
You should only have one `ol` element.
|
||||
你应该只有一个 `ol` 元素。
|
||||
|
||||
```js
|
||||
assert([...document.querySelectorAll('ol')].length == 1);
|
||||
|
||||
@@ -22,7 +22,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your first radio button, with the `id` set to `indoor`, should have the `checked` attribute.
|
||||
你的第一个单选按钮，`id` 为 `indoor`，应该有 `checked` 属性。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]')[0].hasAttribute('checked'));
|
||||
|
||||
@@ -22,14 +22,8 @@ assert(code.match(/\<html.*?\>/) && code.match(/\<\/html\>/));
|
||||
你的 `html` 元素应该有一个 `lang` 属性，其值为 `en`。 你可能忽略了属性/值，或者有拼写错误。
|
||||
|
||||
```js
|
||||
const extraSpacesRemoved = code.replace(/\s+/g, ' ');
|
||||
assert(extraSpacesRemoved.match(/\<html lang\=("|')([a-z]+)\1\>/));
|
||||
```
|
||||
|
||||
尽管你已将 `html` 元素的 `lang` 属性设置为 `en`，但建议始终将属性的值放在引号中。
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
const extraSpacesRemoved = code.replace(/\s+/g, " ");
|
||||
assert(extraSpacesRemoved.match(/\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-56
|
||||
|
||||
还有另一种方法可以将 `input` 元素的文本与元素本身相关联。 你可以将文本嵌套在 `label` 元素中，并添加与 `input` 元素的 `id` 具有相同值的 `for` 属性。
|
||||
|
||||
Associate the text `Loving` with the checkbox by nesting only the text `Loving` in a `label` element and giving it an appropriate `for` attribute.
|
||||
通过仅给 `label` 元素添加文本 `Loving`，并给它添加适当的 `for` 属性值，将文本 `Loving` 与复选框相关联。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ dashedName: step-41
|
||||
|
||||
# --hints--
|
||||
|
||||
应该给名字（first name）`input` 元素一个 `name` 属性。 _提示：可以使用 `first-name`_
|
||||
You should give the `input` expecting a first name a `name` attribute. _提示：可以使用 `first-name`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name);
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-52
|
||||
|
||||
# --description--
|
||||
|
||||
创建一个选择器来定位表格正文中的 `td` 元素。 给它们一个宽度以填充视口，最小值和最大值为 `4rem`。 This approach ensures that the width is fixed, whereas setting `width` specifically would allow the elements to shrink to the container.
|
||||
创建一个选择器来定位表格正文中的 `td` 元素。 给它们一个宽度以填充视口，最小值和最大值为 `4rem`。 这种方法确保宽度是固定的，而专门设置 `width`，将允许元素收缩到容器中。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-31
|
||||
|
||||
`rem` 单位代表 `root em`，与 `html` 元素的字体大小有关。
|
||||
|
||||
Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
|
||||
创建一个 `.small-text` 选择器，并将 `font-size` 设置为 `0.85rem`，计算结果大致为 `13.6px`（记得你之前将 `html` 设置为具有 `16px` 的 `font-size`）。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user