mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-05 12:06:36 -05:00
chore(i18n,learn): processed translations (#46907)
This commit is contained in:
camperbot
@@ -8,7 +8,7 @@ dashedName: build-a-personal-portfolio-webpage
|
||||
|
||||
# --description--
|
||||
|
||||
**目標：** 構建一個功能類似於 <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank">https://personal-portfolio.freecodecamp.rocks</a> 的應用程序
|
||||
**目標：** 構建一個功能類似於 <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://personal-portfolio.freecodecamp.rocks</a> 的應用程序
|
||||
|
||||
**需求：**
|
||||
|
||||
@@ -172,11 +172,11 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Personal Portfolio</title>
|
||||
</head>
|
||||
<body>
|
||||
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
|
||||
<!--Font Reference-->
|
||||
<nav id="navbar">
|
||||
<a href="#projects">Projects</a> |
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: build-a-product-landing-page
|
||||
|
||||
# --description--
|
||||
|
||||
**目標：** 構建一個功能類似於 <a href="https://product-landing-page.freecodecamp.rocks" target="_blank">https://product-landing-page.freecodecamp.rocks</a> 的應用程序
|
||||
**目標：** 構建一個功能類似於 <a href="https://product-landing-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://product-landing-page.freecodecamp.rocks</a> 的應用程序
|
||||
|
||||
**需求：**
|
||||
|
||||
@@ -281,7 +281,7 @@ assert(usesFlex)
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Product Landing Page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: build-a-survey-form
|
||||
|
||||
# --description--
|
||||
|
||||
**目標：** 構建一個功能類似於 <a href="https://survey-form.freecodecamp.rocks" target="_blank">https://survey-form.freecodecamp.rocks</a> 的應用程序
|
||||
**目標：** 構建一個功能類似於 <a href="https://survey-form.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://survey-form.freecodecamp.rocks</a> 的應用程序
|
||||
|
||||
**需求：**
|
||||
|
||||
@@ -182,21 +182,21 @@ const el = document.getElementById('number-label')
|
||||
assert(!!el && el.tagName === 'LABEL')
|
||||
```
|
||||
|
||||
你的 `#name-label` 不應爲空。
|
||||
你的 `#name-label` 應包含描述輸入的文本。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('name-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
你的 `#email-label` 不應爲空。
|
||||
你的 `#email-label` 應包含描述輸入的文本。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('email-label')
|
||||
assert(!!el && el.innerText.length > 0)
|
||||
```
|
||||
|
||||
你的 `#number-label` 不應爲空。
|
||||
你的 `#number-label` 應該包含描述輸入的文本。
|
||||
|
||||
```js
|
||||
const el = document.getElementById('number-label')
|
||||
@@ -380,7 +380,7 @@ assert(!!el)
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Survey Form</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: build-a-technical-documentation-page
|
||||
|
||||
# --description--
|
||||
|
||||
**目標：** 構建一個功能類似於 <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank">https://technical-documentation-page.freecodecamp.rocks</a> 的應用程序
|
||||
**目標：** 構建一個功能類似於 <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a> 的應用程序
|
||||
|
||||
**需求：**
|
||||
|
||||
@@ -248,7 +248,7 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Technical Documentation Page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -8,17 +8,17 @@ dashedName: build-a-tribute-page
|
||||
|
||||
# --description--
|
||||
|
||||
**目標:** 構建一個應用，它在功能上類似於 <a href="https://tribute-page.freecodecamp.rocks" target="_blank">https://tribute-page.freecodecamp.rocks</a>
|
||||
**目標:** 構建一個功能類似於 <a href="https://tribute-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://tribute-page.freecodecamp.rocks</a> 的應用程序
|
||||
|
||||
**用戶需求:**
|
||||
|
||||
1. 你的致敬頁應該包含一個含有 `id="main"`的元素, 它應該包含所有其他元素
|
||||
1. 你的致敬頁應該包含一個 `id` 爲 `main` 的 `main` 元素，它應該包含所有其他元素
|
||||
1. 你的頁面應該包含一個元素，它的屬性 `id` 值爲`title`,，元素中包含一個字符串（例如 text）描述致敬頁的主題（例如 "Dr. Norman Borlaug"）
|
||||
1. 你應該有一個 `id` 爲 `img-div` 的 `figure` 或 `div` 元素
|
||||
1. 在 `#img-div` 元素中，你應該看到一個 `id="image"` 的 `img` 元素
|
||||
1. 在`#img-div`元素內，你應該看到一個 `id="img-caption"` 的元素，其中包含對 `#img-div` 中圖像的文本描述
|
||||
1. 你應該看到一個 `id="tribute-info"` 的元素，其中包含描述致敬頁主題的文本內容
|
||||
1. 你應該看到一個 `id="tribute-link"` 的元素，它鏈接到一個包含有關致敬頁主題額外信息的外部網頁。 提示：你必須爲元素提供 `target` 屬性，並設置其爲 `_blank`，以便可以在新選項卡中打開鏈接。
|
||||
1. 你應該看到一個 `id="tribute-link"` 的 `a` 元素，它鏈接到一個包含有關致敬頁主題額外信息的外部網頁。 提示：你必須爲元素提供 `target` 屬性，並設置其爲 `_blank`，以便可以在新選項卡中打開鏈接。
|
||||
1. 你的 `#image` 應該使用 `max-width` 和 `height` 屬性來響應式調整大小，相對於其父元素的寬度，但不超過其原始大小
|
||||
1. 你的 `img` 元素應該在其父元素內居中
|
||||
|
||||
@@ -207,14 +207,14 @@ assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Pacifico"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Lobster"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
|
||||
/>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css" />
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
<title>Tribute Page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-9
|
||||
|
||||
# --description--
|
||||
|
||||
如 [freeCodeCamp 樣式指南](https://design-style-guide.freecodecamp.org/)中所述，logo 應保持 `35 / 4` 的長寬比，並且文本週圍有 padding。
|
||||
如 <a href="https://design-style-guide.freecodecamp.org/" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp 樣式指南</a>中所述，logo 應保持 `35 / 4` 的長寬比，並且文本週圍有 padding。
|
||||
|
||||
首先，將 `background-color` 設置爲 `#0a0a23`，以便你能看見 logo。 然後，使用 `aspect-ratio` 屬性將所需的長寬比設置爲 `35 / 4`。 最後，在周圍添加 `0.4rem` 的 `padding`。
|
||||
|
||||
|
||||
@@ -7,14 +7,24 @@ dashedName: step-66
|
||||
|
||||
# --description--
|
||||
|
||||
將 `scroll-behavior`設置爲 `smooth` ，是大多數用戶的首選。 然而，有些用戶發現這種情況太慢，更願意讓滾動立即發生。
|
||||
某些類型的基於運動的動畫可能會給一些用戶帶來不適。 特別是，患有<dfn>前庭</dfn>功能障礙的人對某些運動觸發器敏感。
|
||||
|
||||
有一個媒體規則，用於根據用戶的瀏覽器設置來設置 CSS。 這個媒體規則被稱爲 `prefers-reduced-motion`，並可能有以下值之一：
|
||||
`@media` at-rule 有一個名爲 `prefers-reduced-motion` 的媒體功能，可以根據用戶的偏好設置 CSS。 它可以使用以下幾個值之一：
|
||||
|
||||
- `reduce`
|
||||
- `no-preference`
|
||||
- `reduce`
|
||||
- `no-preference`
|
||||
|
||||
將適當的規則包裹在 `prefers-reduced-motion` 媒體規則中，這樣只有在用戶的瀏覽器設置爲 `no-preference` 時纔會設置 `scroll-behavior` 爲 `smooth`。
|
||||
```CSS
|
||||
@media (feature: value) {
|
||||
selector {
|
||||
styles
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
將設置 `scroll-behavior: smooth` 的樣式規則放在 `@media` 規則中，其中媒體功能 `prefers-reduced-motion` 具有的值爲 `no-preference`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-1
|
||||
|
||||
之前在Cat Photo App的最後幾個步驟中提過，構建網頁前需要一個基本的結構。
|
||||
|
||||
添加標籤 `<!DOCTYPE html>` 和元素 `html` 。
|
||||
添加 `<!DOCTYPE html>` 標記和具有值爲 `en` 的 `lang` 屬性的 `html` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -19,10 +19,10 @@ dashedName: step-1
|
||||
assert(code.match(/<!DOCTYPE html>/i));
|
||||
```
|
||||
|
||||
需要一個起始標籤 `<html>`
|
||||
你應該有一個帶有值爲 `en` 的 `lang` 屬性的 `<html>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<html>/i));
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
需要一個閉合標籤 `<html>` 別忘了閉合標籤的尖括號 `<` 後需要有一個 `/`
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 5f3313e74582ad9d063e3a38
|
||||
title: 步驟 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 `html` 元素中添加一個 `head` 元素，接下來你可以添加 `title` 元素。 `title` 元素的文本應該是 `Cafe Menu`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你需要一個開始標籤 `<head>`
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
```
|
||||
|
||||
需要一個結束標籤 `</head>`
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
```
|
||||
|
||||
需要一個開始標籤 `<title>`
|
||||
|
||||
```js
|
||||
assert(code.match(/<title>/i));
|
||||
```
|
||||
|
||||
需要一個結束標籤 `</title>`
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/title>/i));
|
||||
```
|
||||
|
||||
所有的 `title` 元素都應嵌套在 `head` 元素中。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>\s*<title>.*<\/title>\s*<\/head>/si));
|
||||
```
|
||||
|
||||
你的 `title` 元素內應該有文本 `Cafe Menu`。 您可能需要檢查您的拼寫。
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('title')?.innerText, /Cafe Menu/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 5f331e55dfab7a896e53c3a1
|
||||
title: 步驟 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`title` 是網頁上幾個不可見附加信息之一，但它對搜索引擎和網頁如何顯示很有用。
|
||||
|
||||
在`head`元素中，嵌套一個 `meta` 元素，其屬性名爲 `charset`，值爲`utf-8`，以告訴瀏覽器如何對頁面進行編碼。 請注意，`meta` 元素是自閉合的。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `meta` 標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<meta.*?\/?>/is));
|
||||
```
|
||||
|
||||
你的 `meta` 標籤應該有一個 `charset` 屬性。
|
||||
|
||||
```js
|
||||
assert(code.match(/<meta charset=/i));
|
||||
```
|
||||
|
||||
你的 `charset` 屬性的值應該爲 `utf-8`。
|
||||
|
||||
```js
|
||||
assert(code.match(/charset=('|")utf-8\1/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 5f3326b143638ee1a09ff1e3
|
||||
title: 步驟 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
爲了準備創建一些實際的內容，在 `head` 元素下面添加一個 `body` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<body>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<body>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</body>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body>/i));
|
||||
```
|
||||
|
||||
你不應該改變你的 `head` 元素。 確認你沒有刪除結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
assert(code.match(/<\/head>/i));
|
||||
```
|
||||
|
||||
你的 `body` 元素應該在你的 `head` 元素之後。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head>[.\n\s]*<body>/im));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 5f33294a6af5e9188dbdb8f3
|
||||
title: 步驟 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
咖啡廳的名稱是 `CAMPER CAFE`。 你的 `body` 元素中應該有一個 `h1` 元素。 用大寫字母顯示咖啡店名，使其突出顯示。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<h1>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</h1>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h1>/i));
|
||||
```
|
||||
|
||||
你不應該改變你現有的 `body`元素。
|
||||
|
||||
```js
|
||||
assert($('body').length === 1);
|
||||
```
|
||||
|
||||
你的 `h1` 元素應該嵌套在你的 `body` 元素中。
|
||||
|
||||
```js
|
||||
assert($('h1')[0].parentElement.tagName === "BODY");
|
||||
```
|
||||
|
||||
你的 `h1` 元素應該有文字 `CAMPER CAFE`。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>CAMPER CAFE<\/h1>/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 5f332a88dc25a0fd25c7687a
|
||||
title: 步驟 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
爲了讓遊客知道這家咖啡館成立於 2020 年，在 `h1` 元素下面添加一個 `p`元素，文字爲 `Est. 2020`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<p>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</p>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>/i));
|
||||
```
|
||||
|
||||
你不應該改變你現有的 `h1` 元素。 確認你沒有刪除結束標籤。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
你的 `p` 元素應該在 `h1` 元素的下面。
|
||||
|
||||
```js
|
||||
assert($('p')[0].previousElementSibling.tagName === 'H1');
|
||||
```
|
||||
|
||||
你的 `p` 元素應該有文本 `Est. 2020`。
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>Est. 2020<\/p>/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>CAMPER CAFE</h1>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 5f332b23c2045fb843337579
|
||||
title: 步驟 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
由於上一步添加的 `p` 元素提供了關於咖啡館的補充信息，因此將 `h1` 和 `p` 元素都嵌套在一個 `header`元素中。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<header>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<header>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</header>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/header>/i));
|
||||
```
|
||||
|
||||
你的 `h1` 元素應該嵌套在你的 `header` 元素中。
|
||||
|
||||
```js
|
||||
const header = document.querySelectorAll('header')[0];
|
||||
assert(header.children[0].tagName === 'H1');
|
||||
```
|
||||
|
||||
你的 `p` 元素應該嵌套在你的 `header`元素中。
|
||||
|
||||
```js
|
||||
const header = document.querySelectorAll('header')[0];
|
||||
assert(header.children[1].tagName === "P");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 5f33310c1851c6c4da013250
|
||||
title: 步驟 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
是時候添加一些菜單內容。 在現有的 `header` 元素下面添加一個 `main`元素。 它最終將包含有關咖啡館提供的咖啡和甜點的價格信息。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<main>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</main>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/main>/i));
|
||||
```
|
||||
|
||||
你不應該改變你的 `header` 元素。 確認你沒有刪除結束標籤。
|
||||
|
||||
```js
|
||||
assert($('header').length === 1);
|
||||
```
|
||||
|
||||
你的 `main` 元素應該在你的 `header` 元素之後。
|
||||
|
||||
```js
|
||||
const main = document.querySelectorAll('main')[0];
|
||||
assert(main.previousElementSibling.tagName === 'HEADER');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 5f344f9c805cd193c33d829c
|
||||
title: 步驟 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以在 `style` 元素中指定一個樣式，併爲此設置一個屬性，像這樣：
|
||||
|
||||
```css
|
||||
element {
|
||||
property: value;
|
||||
}
|
||||
```
|
||||
|
||||
通過設置 `text-align` 屬性值爲 `center`，讓你的 `h1` 元素居中，。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `style` 元素中應該有一個 `h1` 元素。
|
||||
|
||||
```js
|
||||
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasSelector);
|
||||
```
|
||||
|
||||
你的 `text-align` 屬性的值應該是 `center`。
|
||||
|
||||
```js
|
||||
const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center');
|
||||
assert(hasTextAlign);
|
||||
```
|
||||
|
||||
你的 `h1` 選擇器應該將 `text-align` 屬性設置爲 `center`。
|
||||
|
||||
```js
|
||||
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
|
||||
assert(h1TextAlign === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
--fcc-editable-region--
|
||||
<style>
|
||||
</style>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 5f344fad8bf01691e71a30eb
|
||||
title: 步驟 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
到目前爲止，在你創建的內容的演示和外觀方面，你一直受到限制。 爲了開始控制，在 `head` 元素中添加一個 `style` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<style>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<style\s*>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</style>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/style\s*>/));
|
||||
```
|
||||
|
||||
你的 `style` 元素都應嵌套在 `head` 元素中。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 5f344fbc22624a2976425065
|
||||
title: 步驟 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 `section` 元素中創建一個 `h2` 元素，並在它裏面填寫文字 `Coffee`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<h2>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2\s*>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</h2>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h2\s*>/i));
|
||||
```
|
||||
|
||||
你不應該改變你現有的 `section` 元素。 確認你沒有刪除結束標籤。
|
||||
|
||||
```js
|
||||
assert($('section').length === 1);
|
||||
```
|
||||
|
||||
你的 `h2` 元素應該在 `section` 元素中。
|
||||
|
||||
```js
|
||||
const h2 = document.querySelector('h2');
|
||||
assert(h2.parentElement.tagName === 'SECTION');
|
||||
```
|
||||
|
||||
你的 `h2` 元素內應該有文本 `Coffee`。
|
||||
|
||||
```js
|
||||
const h2 = document.querySelector('h2');
|
||||
assert(h2.innerText === 'Coffee');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 5f344fc1520b6719f2e35605
|
||||
title: 步驟 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
菜單上將有兩個部分，一個是咖啡，一個是甜點。 在 `main` 元素中添加一個 `section` 元素，這樣你就有一個地方來放置所有可用的咖啡。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<section>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<section\s*>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</section>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/section\s*>/i));
|
||||
```
|
||||
|
||||
你不應該改變你現有的 `main` 元素。 確認你沒有刪除結束標籤。
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
你的 `section`元素應該在你的 `main` 元素中。
|
||||
|
||||
```js
|
||||
const main = document.querySelectorAll('main')?.[0];
|
||||
assert(main.children[0].tagName === 'SECTION');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 5f3477ae34c1239cafe128be
|
||||
title: 步驟 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你現在有三個樣式完全相同的類型選擇器。 你可以通過創建一個選擇器列表將同一組樣式添加到許多元素上。 每個選擇器都用逗號分隔，如下所示：
|
||||
|
||||
```css
|
||||
selector1, selector2 {
|
||||
property: value;
|
||||
}
|
||||
```
|
||||
|
||||
刪除三個現有的類型選擇器，並將它們替換爲一個選擇器列表，該列表使 `h1`、`h2` 和 `p` 元素的文本居中。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該對所有三個元素使用一個類型選擇器，`h1, h2, p`。 請一定按照這個順序。
|
||||
|
||||
```js
|
||||
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p');
|
||||
assert(hasSelector);
|
||||
```
|
||||
|
||||
`style` 元素中應該只有一個選擇器。
|
||||
|
||||
```js
|
||||
const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText)
|
||||
assert(selectors.length === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
--fcc-editable-region--
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 5f3477ae8466a9a3d2cc953c
|
||||
title: 步驟 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在你在 `styles.css` 文件中有了 CSS，繼續刪除 `style` 元素及其所有內容。 刪除後，居中的文本將移回左側。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代碼中不應該有任何 `style` 標籤。
|
||||
|
||||
```js
|
||||
assert(!code.match(/style/i));
|
||||
```
|
||||
|
||||
你的 HTML 文件中不應有任何 CSS 選擇器。
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
const html = getUserInput('editableContents');
|
||||
assert(!html.includes('style'));
|
||||
assert(!html.includes('text-align'));
|
||||
}
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
<style>
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 5f3477ae9675db8bb7655b30
|
||||
title: 步驟 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在上一步中，你使用 <dfn>類型選擇器</dfn> 來設置 `h1` 元素的樣式。 繼續將 `h2` 和 `p` 元素居中，每個元素都有一個新的類型選擇器。
|
||||
|
||||
# --hints--
|
||||
|
||||
你不應更改現有的 `h1` 選擇器。
|
||||
|
||||
```js
|
||||
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasH1);
|
||||
```
|
||||
|
||||
你應該添加一個新的 `h2` 選擇器。
|
||||
|
||||
```js
|
||||
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
|
||||
assert(hasH2);
|
||||
```
|
||||
|
||||
你應該添加一個新的 `p` 選擇器。
|
||||
|
||||
```js
|
||||
const hasP = new __helpers.CSSHelp(document).getStyle('p');
|
||||
assert(hasP);
|
||||
```
|
||||
|
||||
你的 `h1` 元素應該有一個 `text-align` 值爲 `center`。
|
||||
|
||||
```js
|
||||
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
|
||||
assert(h1TextAlign === 'center');
|
||||
```
|
||||
|
||||
你的 `h2` 元素應該有一個 `text-align` 值爲 `center`。
|
||||
|
||||
```js
|
||||
const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
|
||||
assert(h2TextAlign === 'center');
|
||||
```
|
||||
|
||||
你的 `p` 元素應該有一個 `text-align` 值爲 `center`。
|
||||
|
||||
```js
|
||||
const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
|
||||
assert(pTextAlign === 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
--fcc-editable-region--
|
||||
<style>
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5f3477aefa51bfc29327200b
|
||||
title: 步驟 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你已經通過在 `style` 標籤內編寫 CSS 來設置了三個元素的樣式。 這樣做可以，但由於會有更多的樣式，最好把所有的樣式放在一個單獨的文件中並鏈接到它。
|
||||
|
||||
我們已經爲你創建了一個單獨的 `styles.css` 文件，並將編輯器視圖切換到該文件。 你可以通過編輯器頂部的標籤在不同的文件之間轉換。
|
||||
|
||||
首先，將你創建的樣式改寫到 `styles.css` 文件中。 請確保排除開頭和結尾的 `style` 標籤。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `styles.css` 文件應該有 `h1, h2, p` 類型選擇器。
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/));
|
||||
}
|
||||
```
|
||||
|
||||
你的選擇器應將 `text-align` 屬性設置爲 `center`。
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
assert(getUserInput('editableContents').match(/text-align:\s*center;?/));
|
||||
}
|
||||
```
|
||||
|
||||
你應該只有一個選擇器。
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
assert(getUserInput('editableContents').match(/text-align:\s*center;?/)?.length === 1);
|
||||
}
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
<style>
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 5f3477cb2e27333b1ab2b955
|
||||
title: 步驟 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在你需要鏈接 `styles.css` 文件，以便再次應用這些樣式。 在 `head` 元素中嵌套一個自閉合 `link` 元素。 給它一個 `rel` 屬性，值爲 `stylesheet` 和一個 `href` 屬性，值爲 `styles.css`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代碼應該有一個 `link` 元素。
|
||||
|
||||
```js
|
||||
const link = document.querySelector('link');
|
||||
assert(link);
|
||||
```
|
||||
|
||||
你不應該改變你現有的 `head` 元素。 請確保你沒有刪除結束標記。
|
||||
|
||||
```js
|
||||
assert($('head').length === 1);
|
||||
```
|
||||
|
||||
你應該有一個自閉合的 `link` 元素。
|
||||
|
||||
```js
|
||||
const link = document.querySelectorAll('link');
|
||||
assert(link.length === 1);
|
||||
```
|
||||
|
||||
你的 `link` 元素應該在你的 `head` 元素中。
|
||||
|
||||
```js
|
||||
const link = document.querySelector('head > link');
|
||||
assert(link);
|
||||
```
|
||||
|
||||
你的 `link` 元素應該有一個 `rel` 屬性，其值爲 `stylesheet`。
|
||||
|
||||
```js
|
||||
const link = document.querySelector('link')
|
||||
const rel = link.getAttribute('rel')
|
||||
assert(rel == `stylesheet`)
|
||||
```
|
||||
|
||||
你的 `link` 元素應該有一個 `href` 屬性，其值爲 `styles.css`。
|
||||
|
||||
```js
|
||||
const link = document.querySelector('link')
|
||||
assert(link.dataset.href == 'styles.css')
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 5f3477cb303c5cb61b43aa9b
|
||||
title: 步驟 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
文本再次居中，因此指向 CSS 文件的鏈接是正常運行的。 將另一種樣式添加到文件中，將 `body` 元素的 `background-color` 屬性更改爲 `brown`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用一個 `body` 選擇器。
|
||||
|
||||
```js
|
||||
const hasBody = new __helpers.CSSHelp(document).getStyle('body');
|
||||
assert(hasBody);
|
||||
```
|
||||
|
||||
你應該將 `background-color` 屬性設置爲 `brown`。
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
你的 `body` 元素應該有一個 `brown` 背景。
|
||||
|
||||
```js
|
||||
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
|
||||
assert(bodyBackground === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5f3477cbcb6ba47918c1da92
|
||||
title: 步驟 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
爲了使頁面樣式在移動端看起來與在桌面或筆記本電腦上相似，你需要添加一個帶有特殊 `content` 屬性的 `meta` 元素。
|
||||
|
||||
在 `head` 元素中添加以下內容：
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有兩個 `meta` 元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<meta.*?\/?>/g).length === 2);
|
||||
```
|
||||
|
||||
你的 `meta` 元素應該有一個 `name` 屬性，其值爲 `viewport`。
|
||||
|
||||
```js
|
||||
const meta = $('meta');
|
||||
assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/));
|
||||
```
|
||||
|
||||
你的 `meta` 元素應該有一個 `content` 屬性，其值爲 `width=device-width, initial-scale=1.0`。
|
||||
|
||||
```js
|
||||
const meta = $('meta');
|
||||
assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 5f34a1fd611d003edeafd681
|
||||
title: 步驟 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
棕色的背景使閱讀文本變得困難。 將 `body` 元素的背景顏色更改爲 `burlywood`，使其具有一些顏色，但你仍然可以閱讀文本。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `background-color` 屬性設置爲 `burlywood`。
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
你的 `body` 元素應該有一個 `burlywood` 背景。
|
||||
|
||||
```js
|
||||
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
|
||||
assert(bodyBackground === 'burlywood');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 5f356ed60785e1f3e9850b6e
|
||||
title: 步驟 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在很容易看到文本在 `div` 元素內居中。 目前，`div` 元素的寬度以像素（`px`）爲單位。 將 `width` 屬性的值更改爲 `80%`，使其爲其父元素（`body`）的寬度的 80%。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `width` 屬性設置爲 `80%`。
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
你的 `width` 屬性值不應爲 `300px`。
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
|
||||
assert(!hasWidth);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 300px;
|
||||
background-color: burlywood;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 5f356ed60a5decd94ab66986
|
||||
title: 步驟 23
|
||||
challengeType: 0
|
||||
removeComments: false
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS 中的註釋看起來像這樣：
|
||||
|
||||
```css
|
||||
/* comment here */
|
||||
```
|
||||
|
||||
在你的樣式表中，註釋掉包含 `background-color` 屬性和值的行，這樣你就可以看到僅設置 `div` 元素樣式的效果。 這將使背景再次變成白色。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該在你的 CSS 中註釋掉 `background-color: burlywood;` 一行。
|
||||
|
||||
```js
|
||||
assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i));
|
||||
```
|
||||
|
||||
|
||||
你的 `body` 應該有一個白色的背景。
|
||||
|
||||
```js
|
||||
const bodyCSS = $('body').css('background-color');
|
||||
assert(bodyCSS === "rgba(0, 0, 0, 0)")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
--fcc-editable-region--
|
||||
background-color: burlywood;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 5f356ed6199b0cdef1d2be8f
|
||||
title: 步驟 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
到目前爲止，你一直在使用類型選擇器來設置元素的樣式。 <dfn>class 選擇器</dfn>由前面帶有一個點的名稱定義，如下所示：
|
||||
|
||||
```css
|
||||
.class-name {
|
||||
styles
|
||||
}
|
||||
```
|
||||
|
||||
將現有的 `div` 選擇器改爲類選擇器，用一個名爲 `menu` 的類代替 `div`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `.menu` 類選擇器。
|
||||
|
||||
```js
|
||||
const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
|
||||
assert(hasMenu);
|
||||
```
|
||||
|
||||
你不應該有一個 `div` 選擇器。
|
||||
|
||||
```js
|
||||
const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
|
||||
assert(!hasDiv);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5f356ed63c7807a4f1e6d054
|
||||
title: 步驟 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在的目標是使這個 `div` 不佔用整個頁面的寬度。 CSS 的 `width` 屬性在這方面是完美的。 在樣式表中創建一個新的類型選擇器，使你的 `div` 元素的寬度爲 `300px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `div` 類型選擇器。
|
||||
|
||||
```js
|
||||
const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
|
||||
assert(hasDiv);
|
||||
```
|
||||
|
||||
你應該將 `width` 屬性設置爲 `300px`。
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
你的 `div` 應該有 300px 的寬度。
|
||||
|
||||
```js
|
||||
const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
|
||||
assert(divWidth === '300px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 5f356ed63e0fa262326eef05
|
||||
title: 步驟 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在使用現有的 `div` 選擇器，將`div` 元素的背景顏色設置爲 `burlywood`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該把 `background-color`屬性設置爲`burlywood`。
|
||||
|
||||
```js
|
||||
const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
|
||||
assert(hasBackgroundColor);
|
||||
```
|
||||
|
||||
你的 `div` 應該有一個實木（burlywood）的背景。
|
||||
|
||||
```js
|
||||
const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
|
||||
assert(divBackground === 'burlywood');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 300px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 5f356ed656a336993abd9f7c
|
||||
title: 步驟 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
接下來，你要在水平方向上將 `div` 居中。 你可以通過把它的 `margin-left` 和 `margin-right` 屬性設置爲 `auto` 來做到這一點。 可以把頁邊距看作是元素周圍不可見的空間。 使用這兩個 margin 屬性，將 `div` 元素置於 `body` 元素的中心。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該把 `margin-left` 屬性設置爲 `auto`。
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
你應該把 `margin-right` 屬性設置爲 `auto`。
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
你應該把你的 `div` 的 `margin-left` 和 `margin-right` 屬性設置爲 `auto`。
|
||||
|
||||
```js
|
||||
const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right');
|
||||
const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left');
|
||||
assert(divMarginRight === 'auto');
|
||||
assert(divMarginLeft === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
div {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 5f356ed69db0a491745e2bb6
|
||||
title: 步驟 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
要將該類的樣式應用於 `div` 元素，請在 `div` 元素的開始標籤上添加一個 `class` 屬性，並將其值設置爲 `menu`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `div` 仍然應該渲染。 確保你沒有對 `<div>` 標籤進行格式化。
|
||||
|
||||
```js
|
||||
assert($('div').length === 1);
|
||||
```
|
||||
|
||||
你的 `div` 元素應該有 `menu` 類。
|
||||
|
||||
```js
|
||||
assert($('div').attr('class').includes('menu'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5f356ed6cf6eab5f15f5cfe6
|
||||
title: 步驟 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`div` 元素主要用於設計佈局，這與你迄今爲止使用的其他內容元素不同。 在 `body` 元素內添加一個 `div` 元素，然後將所有其他元素移到新的 `div` 內。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<div>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<div>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</div>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/div>/i));
|
||||
```
|
||||
|
||||
你不應該改變你現有的 `body` 元素。 確認你沒有刪除結束標籤。
|
||||
|
||||
```js
|
||||
assert($('body').length === 1);
|
||||
```
|
||||
|
||||
你的 `div` 元素應該嵌套在你的 `body` 元素中。
|
||||
|
||||
```js
|
||||
const div = $('div')[0];
|
||||
assert(div.parentElement.tagName === 'BODY');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 5f35e5c4321f818cdc4bed30
|
||||
title: 步驟 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
看起來很好。 是時候開始添加一些菜單項了。 在 `Coffee` 標題下添加一個空的 `article` 元素。 它將包含你當前提供的每種咖啡的風味和價格。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<article>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<article>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</article>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/article>/i));
|
||||
```
|
||||
|
||||
你不應更改現有的 `h2` 元素。
|
||||
|
||||
```js
|
||||
assert($('h2').length === 1);
|
||||
```
|
||||
|
||||
你的 `article` 元素應該在你的 `h2` 元素之後。
|
||||
|
||||
```js
|
||||
const article = $('article')[0];
|
||||
assert(article.previousElementSibling.tagName === 'H2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 5f35e5c44359872a137bd98f
|
||||
title: 步驟 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
由於咖啡館主要銷售的產品是咖啡，因此你可以使用咖啡豆的圖像作爲頁面背景。
|
||||
|
||||
刪除 `body` 類型選擇器中的註釋及其內容。 現在添加一個 `background-image` 屬性並將其值設置爲 `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該刪除註釋掉的 `background-color` 屬性。
|
||||
|
||||
```js
|
||||
assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i))
|
||||
```
|
||||
|
||||
你的 `body` 選擇器不應有任何註釋。
|
||||
|
||||
```js
|
||||
assert(!code.match(/body\s*{\s*\/\*/i));
|
||||
```
|
||||
|
||||
你應該將 `background-image` 屬性設置爲 `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`。
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`)
|
||||
assert(hasBackground)
|
||||
```
|
||||
|
||||
你的 `body` 元素應該有咖啡豆的背景圖片。
|
||||
|
||||
```js
|
||||
const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
|
||||
console.log(bodyBackground);
|
||||
assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
/*
|
||||
background-color: burlywood;
|
||||
*/
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 5f3c866d0fc037f7311b4ac8
|
||||
title: 步驟 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
這更接近了，但價格沒有停留在右邊的位置。 這是因爲 `inline-block` 元素只佔據其內容的寬度。 要將它們分散開，請將 `width` 屬性添加到 `flavor` 和 `price` class 選擇器，兩個屬性的值都是 `50%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該在 `.flavor` 選擇器中將 `width` 屬性設置爲 `50%`。
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '50%');
|
||||
```
|
||||
|
||||
你應該在 `.price` 選擇器中將 `width` 屬性值設置爲 `50%`。
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 5f3c866d28d7ad0de6470505
|
||||
title: 步驟 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
口味和價格目前堆疊在一起，並以各自的 `p` 元素居中。 如果口味在左邊，價格在右邊，那就太好了。
|
||||
|
||||
給 `French Vanilla` `p` 元素添加 `flavor` class。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該給 `p` 元素添加 `flavor` class。
|
||||
|
||||
```js
|
||||
assert(code.match(/<p\s*class=('|")flavor\1\s*>/i));
|
||||
```
|
||||
|
||||
應該只有一個元素有 `flavor` class。
|
||||
|
||||
```js
|
||||
assert($('.flavor').length === 1);
|
||||
```
|
||||
|
||||
你的 `flavor` class 應該在 `p` 元素上，並帶有文本 `French Vanilla`。
|
||||
|
||||
```js
|
||||
assert($('.flavor')[0].innerText.match(/French Vanilla/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
--fcc-editable-region--
|
||||
<p>French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 5f3c866d5414453fc2d7b480
|
||||
title: 步驟 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
從現有的咖啡/價格對開始，使用 `article` 元素添加以下咖啡和價格，每個元素內部有兩個嵌套的 `p` 元素。 和之前一樣，第一個 `p` 元素的文本應該包含咖啡風味，第二個 `p` 元素的文本應該包含價格。
|
||||
|
||||
```bash
|
||||
Caramel Macchiato 3.75
|
||||
Pumpkin Spice 3.50
|
||||
Hazelnut 4.00
|
||||
Mocha 4.50
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有五個 `article` 元素。
|
||||
|
||||
```js
|
||||
assert($('article').length === 5);
|
||||
```
|
||||
|
||||
每個 `article` 元素應該有兩個 `p` 元素。
|
||||
|
||||
```js
|
||||
const articles = $('article');
|
||||
assert(articles[0].children.length === 2);
|
||||
assert(articles[1].children.length === 2);
|
||||
assert(articles[2].children.length === 2);
|
||||
assert(articles[3].children.length === 2);
|
||||
assert(articles[4].children.length === 2);
|
||||
```
|
||||
|
||||
你的第一個 `article` 元素應該包含 `p` 元素，其中包含文本 `French Vanilla` 和 `3.00`。
|
||||
|
||||
```js
|
||||
const children = $('article')[0].children;
|
||||
assert(children[0].innerText.match(/French Vanilla/i));
|
||||
assert(children[1].innerText.match(/3\.00/i));
|
||||
```
|
||||
|
||||
你的第二個 `article` 元素應具有 `p` 元素，其中包含文本 `Caramel Macchiato` 和 `3.75`。
|
||||
|
||||
```js
|
||||
const children = $('article')[1].children;
|
||||
assert(children[0].innerText.match(/Caramel Macchiato/i));
|
||||
assert(children[1].innerText.match(/3\.75/i));
|
||||
```
|
||||
|
||||
你的第三個 `article` 元素應該包含 `p` 元素，其中包含文本 `Pumpkin Spice` 和 `3.50`。
|
||||
|
||||
```js
|
||||
const children = $('article')[2].children;
|
||||
assert(children[0].innerText.match(/Pumpkin Spice/i));
|
||||
assert(children[1].innerText.match(/3\.50/i));
|
||||
```
|
||||
|
||||
你的第四個 `article` 元素應該包含 `p` 元素，其中包含文本 `Hazelnut` 和 `4.00`。
|
||||
|
||||
```js
|
||||
const children = $('article')[3].children;
|
||||
assert(children[0].innerText.match(/Hazelnut/i));
|
||||
assert(children[1].innerText.match(/4\.00/i));
|
||||
```
|
||||
|
||||
你的第五個 `article` 元素應該包含帶有文本 `Mocha` 和 `4.50` 的 `p` 元素。
|
||||
|
||||
```js
|
||||
const children = $('article')[4].children;
|
||||
assert(children[0].innerText.match(/Mocha/i));
|
||||
assert(children[1].innerText.match(/4\.50/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 5f3c866daec9a49519871816
|
||||
title: 步驟 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`article` 元素通常包含多個具有相關信息的元素。 在這個示例裏，它將包含咖啡風味和該風味的價格。 在 `article` 元素中嵌套兩個 `p` 元素。 第一個的文本應該是 `French Vanilla`，第二個的文本應該是 `3.00`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你不應更改現有的 `article` 元素。
|
||||
|
||||
```js
|
||||
assert($('article').length === 1);
|
||||
```
|
||||
|
||||
你的 `article` 元素應該有兩個 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('article').children('p').length === 2);
|
||||
```
|
||||
|
||||
你的第一個 `p` 元素應該包含文本 `French Vanilla`。
|
||||
|
||||
```js
|
||||
const firstP = $('article').children('p')[0];
|
||||
assert(firstP.innerText.match(/French Vanilla/i));
|
||||
```
|
||||
|
||||
你的第二個 `p` 元素應該包含文本 `3.00`。
|
||||
|
||||
```js
|
||||
const secondP = $('article').children('p')[1];
|
||||
assert(secondP.innerText.match(/3\.00/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 5f3c866dbf362f99b9a0c6d0
|
||||
title: 步驟 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`p` 元素嵌套在具有 `item` 類屬性的 `article` 元素中。 你可以使用名爲 `item` 的 class 爲嵌套在元素中任何位置的所有 `p` 元素設置樣式，如下所示：
|
||||
|
||||
```css
|
||||
.item p { }
|
||||
```
|
||||
|
||||
使用上面的選擇器，添加一個值爲 `inline-block` 的 `display` 屬性，這樣 `p` 元素更像是內聯元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用 `.item p` 選擇器。
|
||||
|
||||
```js
|
||||
const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p');
|
||||
assert(hasItemP);
|
||||
```
|
||||
|
||||
你應該將 `display` 屬性設置爲 `inline-block`。
|
||||
|
||||
```js
|
||||
const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block');
|
||||
assert(hasDisplay);
|
||||
```
|
||||
|
||||
你的 `.item p` 選擇器應將 `display` 屬性設置爲 `inline-block`。
|
||||
|
||||
```js
|
||||
const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display');
|
||||
assert(itemPDisplay === 'inline-block');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 5f3c866dd0d0275f01d4d847
|
||||
title: 步驟 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
好吧，那樣做行不通。 給 `p` 元素添加 `inline-block` 樣式，並將它們放置在代碼中的單獨行上，會在第一個 `p` 元素的右側創建一個空格，導致第二個元素轉移到下一行。 解決此問題的一種方法是使每個 `p` 元素的寬度略小於 `50%`。
|
||||
|
||||
將每個 class 的 `width` 值更改爲 `49%`，看看會發生什麼。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該在 `.flavor` 選擇器中將 `width` 屬性設置爲 `49%`。
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '49%');
|
||||
```
|
||||
|
||||
你應該在 `.price` 選擇器中將 `width` 屬性設置爲 `49%`。
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '49%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5f3c866de7a5b784048f94b1
|
||||
title: 步驟 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
這正是你想要的，但如果口味和價格在同一條線上，那就太好了。 `p` 元素是 <dfn>塊級</dfn> 元素，因此它們佔據了其父元素的整個寬度。
|
||||
|
||||
要將它們放在同一行，你需要對 `p` 元素應用一些樣式，因此它們更像<dfn>內聯</dfn>元素。 將值爲 `item` 的 `class` 屬性添加到 `Coffee` 標題下的第一個 `article` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `item` class 應用於你的 `article` 元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/<article\s*class=('|")item\1\s*>/i))
|
||||
```
|
||||
|
||||
你應該只有一個 `item` class 元素。
|
||||
|
||||
```js
|
||||
assert($('.item').length === 1);
|
||||
```
|
||||
|
||||
你的第一個 `article` 元素應該具有 `item` class。
|
||||
|
||||
```js
|
||||
assert($('article')[0].className === 'item');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5f3cade94c6576e7f7b7953f
|
||||
title: 步驟 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在繼續把 `flavor` 和 `price` 類的寬度（width）都改成 `50%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該在你的 `.flavor` 選擇器中設置 `width` 屬性爲 `50%`。
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '50%');
|
||||
```
|
||||
|
||||
你應該在你的 `.price` 選擇器中設置 `width` 屬性爲 `50%`。
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '50%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 49%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 5f3cade9993019e26313fa8e
|
||||
title: 步驟 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在你知道它是有效的，你可以改變其餘的`article` 和 `p` 元素以匹配第一組。 首先，將 `item` 類添加到其他 `article` 元素中。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該只有五個 `article` 元素。
|
||||
|
||||
```js
|
||||
assert($('article').length === 5);
|
||||
```
|
||||
|
||||
你應該只有五個 `.item` 元素。
|
||||
|
||||
```js
|
||||
assert($('.item').length === 5);
|
||||
```
|
||||
|
||||
你的 `.item` 元素應該在 `article` 元素中。
|
||||
|
||||
|
||||
```js
|
||||
const articles = $('article');
|
||||
const items = $('.item');
|
||||
assert(articles[0] === items[0]);
|
||||
assert(articles[1] === items[1]);
|
||||
assert(articles[2] === items[2]);
|
||||
assert(articles[3] === items[3]);
|
||||
assert(articles[4] === items[4]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 5f3cade99dda4e6071a85dfd
|
||||
title: 步驟 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你將在幾個步驟中回到菜單的樣式的調整，但現在，繼續添加第二個 `section` 元素，在第一個部分下面顯示咖啡館提供的甜點。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `section` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<section>/ig).length === 2);
|
||||
```
|
||||
|
||||
你應該有一個 `section` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/section>/ig).length === 2);
|
||||
```
|
||||
|
||||
你不應該改變你現有的 `main` 元素。
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
你的新 `section` 元素應該嵌套在 `main` 元素中。
|
||||
|
||||
```js
|
||||
assert($('main').children('section').length === 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 5f3cade9fa77275d9f4efe62
|
||||
title: 步驟 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前面的方法是可行的，但是價格右側仍有一點空格。
|
||||
|
||||
你可以繼續嘗試各種百分比的寬度。 相反，只需將價格 `p` 元素移動到同一行，並確保它們之間沒有空格。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `p` 元素之間不應有任何空格。
|
||||
|
||||
```js
|
||||
assert(code.match(/Vanilla<\/p><p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
--fcc-editable-region--
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 49%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,158 @@
|
||||
---
|
||||
id: 5f3ef6e01f288a026d709587
|
||||
title: 步驟 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以使用 `hr` 元素在不同內容的部分之間顯示一個分隔符。
|
||||
|
||||
首先，在第一個 `header` 元素和 `main` 元素之間添加一個 `hr`元素。 注意：`hr` 元素是沒有結束標籤的。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該添加一個 `hr` 元素。 請注意，`hr` 元素是自閉合的。
|
||||
|
||||
```js
|
||||
assert(code.match(/<hr\s?\/?>/i));
|
||||
assert(!code.match(/<\/hr>/i));
|
||||
```
|
||||
|
||||
你不應該改變你現有的 `header` 元素。
|
||||
|
||||
```js
|
||||
assert($('header').length === 1);
|
||||
```
|
||||
|
||||
你不應該改變你現有的 `main` 元素。
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
你的 `hr` 元素應該在你的 `header` 元素和 `main` 元素之間。
|
||||
|
||||
```js
|
||||
assert($('hr')[0].previousElementSibling.tagName === 'HEADER');
|
||||
assert($('hr')[0].nextElementSibling.tagName === 'MAIN');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 5f3ef6e03d719d5ac4738993
|
||||
title: 步驟 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
菜單的當前寬度將總是佔到 `body` 元素寬度的80%。 在一個非常寬的屏幕上，咖啡和甜點看起來與它們的價格相差甚遠。
|
||||
|
||||
給 `menu` 類添加一個 `max-width` 的屬性，其值爲 `500px`，以防止它變得太寬。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `max-width` 屬性設置爲 `500px`。
|
||||
|
||||
```js
|
||||
const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px');
|
||||
assert(hasMaxWidth);
|
||||
```
|
||||
|
||||
你的 `.menu` 元素的 `max-width` 應該是 `500px`。
|
||||
|
||||
```js
|
||||
const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width');
|
||||
assert(menuMaxWidth === '500px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 5f3ef6e04559b939080db057
|
||||
title: 步驟 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
由於菜單的所有 4 個邊具有相同的內部間距，請繼續刪除四個屬性並設置 `padding` 屬性的值爲 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該刪除 `padding-left` 屬性。
|
||||
|
||||
```js
|
||||
assert(!code.match(/padding-left/i));
|
||||
```
|
||||
|
||||
你應該刪除 `padding-right` 屬性。
|
||||
|
||||
```js
|
||||
assert(!code.match(/padding-right/i));
|
||||
```
|
||||
|
||||
你應該刪除 `padding-top` 屬性。
|
||||
|
||||
```js
|
||||
assert(!code.match(/padding-top/i));
|
||||
```
|
||||
|
||||
你應該刪除 `padding-bottom` 屬性。
|
||||
|
||||
```js
|
||||
assert(!code.match(/padding-bottom/i));
|
||||
```
|
||||
|
||||
你應該將 `padding` 屬性設置爲 `20px`。
|
||||
|
||||
```js
|
||||
const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px');
|
||||
assert(hasPadding);
|
||||
```
|
||||
|
||||
你的 `.menu` 元素的 `padding` 值應爲 `20px`。
|
||||
|
||||
```js
|
||||
const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding');
|
||||
assert(menuPadding === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 5f3ef6e050279c7a4a7101d3
|
||||
title: 步驟 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
這看起來更好。 現在嘗試給菜單的頂部和底部添加 `20px` 的 padding。
|
||||
|
||||
# --hints--
|
||||
|
||||
你不應刪除 `padding-left` 或 `padding-right` 屬性。
|
||||
|
||||
```js
|
||||
const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
|
||||
assert(paddingLeft === '20px');
|
||||
const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
|
||||
assert(paddingRight === '20px');
|
||||
```
|
||||
|
||||
你應該將 `padding-top` 屬性設置爲 `20px`。
|
||||
|
||||
```js
|
||||
const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
|
||||
assert(hasPaddingTop);
|
||||
```
|
||||
|
||||
你應該將 `padding-bottom` 屬性設置爲 `20px`。
|
||||
|
||||
```js
|
||||
const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
|
||||
assert(hasPaddingBottom);
|
||||
```
|
||||
|
||||
你的 `.menu` 元素應具有 `padding-top` 值爲 `20px`。
|
||||
|
||||
```js
|
||||
const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top');
|
||||
assert(menuPaddingTop === '20px');
|
||||
```
|
||||
|
||||
你的 `.menu` 元素應具有 `padding-bottom` 值爲 `20px`。
|
||||
|
||||
```js
|
||||
const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom');
|
||||
assert(menuPaddingBottom === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 5f3ef6e05473f91f948724ab
|
||||
title: 步驟 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以更改文本的 `font-family`，使其看起來與瀏覽器的默認字體不同。 每個瀏覽器都有一些可用的常用字體。
|
||||
|
||||
通過添加值爲 `sans-serif` 的 `font-family` 屬性來更改 `body` 中的所有文本。 這是一種相當常見的字體，易於閱讀。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `font-family` 屬性設置爲 `sans-serif`。
|
||||
|
||||
```js
|
||||
const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif');
|
||||
```
|
||||
|
||||
你的 `body` 應該有一個值爲 `sans-serif` 的 `font-family`。
|
||||
|
||||
```js
|
||||
const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family');
|
||||
assert(bodyFontFamily === 'sans-serif');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 5f3ef6e056bdde6ae6892ba2
|
||||
title: 步驟 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
所有的文字都有相同的 `font-family`，這有點無聊。 你仍然可以讓大部分文字都是 `sans-serif` ，只是用不同的選擇器使 `h1`和 `h2` 元素不同。
|
||||
|
||||
對 `h1` 和 `h2` 元素進行樣式設計，使這些元素的文本只使用 `Impact` 字體。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用 `h1, h2` 選擇器。
|
||||
|
||||
```js
|
||||
const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2');
|
||||
assert(h1h2Selector);
|
||||
```
|
||||
|
||||
你應該把 `font-family` 設置爲 `Impact`。
|
||||
|
||||
```js
|
||||
const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact');
|
||||
assert(hasFontFamily);
|
||||
```
|
||||
|
||||
你的 `h1` 元素應該有一個 `Impact` 的 `font-family`。
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-family').match(/impact/i));
|
||||
```
|
||||
|
||||
你的 `h2` 元素應該有一個 `Impact` 的 `font-family`。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-family').match(/impact/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 5f3ef6e06d34faac0447fc44
|
||||
title: 步驟 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
通過創建一個 `established` 類選擇器，並賦予其 `font-style` 屬性值 `italic`，使 `Est. 2020` 的文本變成斜體。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `.established` 選擇器。
|
||||
|
||||
```js
|
||||
const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established');
|
||||
assert(hasEstablished);
|
||||
```
|
||||
|
||||
你應該將 `font-style` 屬性設置爲 `italic`。
|
||||
|
||||
```js
|
||||
const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic');
|
||||
assert(hasFontStyle);
|
||||
```
|
||||
|
||||
你的 `.established` 選擇器應該將 `font-style` 屬性設置爲 `italic`。
|
||||
|
||||
```js
|
||||
const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style');
|
||||
assert(establishedFontStyle === 'italic');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
id: 5f3ef6e07276f782bb46b93d
|
||||
title: 步驟 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 `main` 元素下方添加 `footer` 元素，你可以在其中添加一些附加信息。
|
||||
|
||||
# --hints--
|
||||
|
||||
您應該有一個 `<footer>` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<footer>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `</footer>` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/footer>/i));
|
||||
```
|
||||
|
||||
你不應修改現有的 `main` 元素。
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
你的 `footer` 元素應該在你的 `main` 元素之下。
|
||||
|
||||
```js
|
||||
const footer = $('footer')[0]
|
||||
assert(footer.previousElementSibling.tagName === 'MAIN');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 5f3ef6e0819d4f23ca7285e6
|
||||
title: 步驟 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 `Desserts` 標題下添加一個空的 `article` 元素。 給它一個 `class` 屬性與 `item` 值。
|
||||
|
||||
# --hints--
|
||||
|
||||
你不應該改變你現有的 `h2` 元素。
|
||||
|
||||
```js
|
||||
assert($('h2').length === 2);
|
||||
```
|
||||
|
||||
你的 `article` 元素應該在你的 `h2` 元素下面。
|
||||
|
||||
```js
|
||||
assert($('section')[1].children[1].tagName === 'ARTICLE');
|
||||
```
|
||||
|
||||
你的新 `article` 元素應該有 `item` 類。
|
||||
|
||||
```js
|
||||
assert($('section')[1].children[1].className === 'item');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 5f3ef6e087d56ed3ffdc36be
|
||||
title: 步驟 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在將 `established` 類應用於文本 `Est. 2020`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `p` 元素的 `class` 設置爲 `established`
|
||||
|
||||
```js
|
||||
assert(code.match(/<p class=('|")established\1>/i));
|
||||
```
|
||||
|
||||
在具有文字 `Est. 2020` 的元素上應該有 `established` 類。
|
||||
|
||||
```js
|
||||
const established = $('.established');
|
||||
assert(established[0].innerText.match(/Est\.\s2020/i));
|
||||
```
|
||||
|
||||
你的 `established` 類元素應該有斜體字。
|
||||
|
||||
```js
|
||||
assert($('.established').css('font-style') === 'italic');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 5f3ef6e0a81099d9a697b550
|
||||
title: 步驟 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 `footer` 中，添加一個 `p` 元素。 然後，在 `p` 中嵌套一個錨（`a`）元素，鏈接到 `https://www.freecodecamp.org`，並有文字 `Visit our website`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你不應該修改現有的 `footer` 元素。
|
||||
|
||||
```js
|
||||
assert($('footer').length === 1);
|
||||
```
|
||||
|
||||
你的新 `p`元素應該嵌套在你的 `footer` 元素中。
|
||||
|
||||
```js
|
||||
assert($('footer').children('p').length === 1);
|
||||
```
|
||||
|
||||
你的新 `a` 元素應該嵌套在你的新 `p` 元素中。
|
||||
|
||||
```js
|
||||
assert($('footer').children('p').children('a').length === 1);
|
||||
```
|
||||
|
||||
你的新 `a` 元素應該有文本 `Visit our website`。
|
||||
|
||||
```js
|
||||
assert($('footer').find('a')[0].innerText.match(/Visit our website/i));
|
||||
```
|
||||
|
||||
你的新 `a` 元素應該鏈接到 `https://www.freecodecamp.org`。 請記住 `a` 元素使用 `href` 屬性來創建鏈接。
|
||||
|
||||
```js
|
||||
assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 5f3ef6e0b431cc215bb16f55
|
||||
title: 步驟 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在帶有鏈接的元素下方添加第二個 `p` 元素，併爲其添加文本 `123 Free Code Camp Drive`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該在你的 `footer` 添加第二個 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('footer').children('p').length === 2);
|
||||
```
|
||||
|
||||
你的新 `p` 元素應該有 `123 Free Code Camp Drive`。 請確保你的新元素在你現有的元素之後。
|
||||
|
||||
```js
|
||||
assert($('footer').children('p').last().text().match(/123 Free Code Camp Drive/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
--fcc-editable-region--
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
--fcc-editable-region--
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 5f3ef6e0e0c3feaebcf647ad
|
||||
title: 步驟 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在新的章節中添加一個 `h2` 元素，並給它文本 `Desserts`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你不應該改變你現有的 `section` 元素。
|
||||
|
||||
```js
|
||||
assert($('section').length === 2);
|
||||
```
|
||||
|
||||
你應該在你的第二個 `section` 元素中添加一個 `h2` 元素。
|
||||
|
||||
```js
|
||||
assert($('section')[1].children[0].tagName === 'H2');
|
||||
```
|
||||
|
||||
你的新 `h2` 元素應該有文字 `Desserts`。
|
||||
|
||||
```js
|
||||
assert($('h2')[1].innerText.match(/Desserts/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 5f3ef6e0e9629bad967cd71e
|
||||
title: 步驟 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以通過添加另一個用逗號分隔的字體名稱來爲 font-family 添加一個<dfn>後備</dfn>值。 Fallback 是在初始值找不到/無法使用的情況下使用的。
|
||||
|
||||
在 `Impact` 字體之後添加後備（fallback）字體`serif`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該爲 `Impact` 字體添加 `serif`，作爲後備字體。
|
||||
|
||||
```js
|
||||
const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family');
|
||||
assert(fontFamily === 'Impact, serif');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1, h2 {
|
||||
font-family: Impact;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 5f3ef6e0eaa7da26e3d34d78
|
||||
title: 步驟 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你可以用各種 `padding` 屬性給你的菜單在內容和側面之間留一些空間。
|
||||
|
||||
給 `menu` 類一個 `padding-left` 和一個 `padding-right`，數值都是 `20px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `padding-left` 屬性設置爲 `20px`。
|
||||
|
||||
```js
|
||||
const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px');
|
||||
assert(hasPaddingLeft);
|
||||
```
|
||||
|
||||
你應該將 `padding-right` 屬性設置爲 `20px`。
|
||||
|
||||
```js
|
||||
const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px');
|
||||
assert(hasPaddingRight);
|
||||
```
|
||||
|
||||
你的 `.menu` 元素應該有一個 `20px` 的 `padding-left`。
|
||||
|
||||
```js
|
||||
const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
|
||||
assert(menuPaddingLeft === '20px');
|
||||
```
|
||||
|
||||
你的 `.menu` 元素應該有一個 `20px` 的 `padding-right`。
|
||||
|
||||
```js
|
||||
const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
|
||||
assert(menuPaddingRight === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 5f3ef6e0f8c230bdd2349716
|
||||
title: 步驟 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
標題元素（如 `h1`、`h2`）的排版是由用戶瀏覽器的默認值設置的。
|
||||
|
||||
添加兩個新的類選擇器（`h1` 和 `h2`）。 對兩者都使用 `font-size` 屬性，但對 `h1` 使用 `40px`，對 `h2` 使用 `30px` 的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用 `h1` 選擇器。
|
||||
|
||||
```js
|
||||
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasH1);
|
||||
```
|
||||
|
||||
你應該使用 `h2` 選擇器。
|
||||
|
||||
```js
|
||||
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
|
||||
assert(hasH2);
|
||||
```
|
||||
|
||||
你的 `h1` 元素應該有一個 `40px` 的 `font-size`。
|
||||
|
||||
```js
|
||||
const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
|
||||
assert(h1FontSize === '40px');
|
||||
```
|
||||
|
||||
你的 `h2` 元素應該有一個 `30px` 的 `font-size`。
|
||||
|
||||
```js
|
||||
const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
|
||||
assert(h2FontSize === '30px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 5f3f26fa39591db45e5cd7a0
|
||||
title: 步驟 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`hr` 元素的默認屬性將使其顯示爲淺灰色細線。 你可以通過爲 `height` 屬性指定一個值來改變線條的高度。
|
||||
|
||||
將 `hr` 元素的高度更改爲 `3px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用 `hr` 選擇器。
|
||||
|
||||
```js
|
||||
const hasHr = new __helpers.CSSHelp(document).getStyle('hr');
|
||||
assert(hasHr);
|
||||
```
|
||||
|
||||
你應該將 `height` 屬性設置爲 `3px`。
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '3px');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
你的 `hr` 元素的高度應爲 `3px`。
|
||||
|
||||
```js
|
||||
const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
|
||||
assert(hrHeight === '3px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 5f459225127805351a6ad057
|
||||
title: 步驟 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
將 `hr` 元素的背景顏色更改爲 `brown`，使其與咖啡豆的顏色相匹配。
|
||||
|
||||
# --hints--
|
||||
|
||||
您應該將 `background-color` 屬性的值設置爲 `brown`。
|
||||
|
||||
```js
|
||||
const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
|
||||
```
|
||||
|
||||
你的 `hr` 元素應該具有 `background-color` 值爲 `brown`。
|
||||
|
||||
```js
|
||||
const hrBackgroundColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('background-color');
|
||||
assert(hrBackgroundColor === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 3px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 5f459a7ceb8b5c446656d88b
|
||||
title: 步驟 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
注意沿線邊緣的灰色。 這些邊緣叫作 <dfn>borders</dfn>。 元素的每一面都可以有不同的顏色，或者它們都可以相同。
|
||||
|
||||
使用 `border-color` 屬性使 `hr` 元素的所有邊緣與其背景顏色相同。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `border-color` 屬性設置爲 `brown`。
|
||||
|
||||
```js
|
||||
const hasBorderColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-color'] === 'brown');
|
||||
assert(hasBorderColor);
|
||||
```
|
||||
|
||||
你的 `hr` 元素的 `border-color` 應爲 `brown`。
|
||||
|
||||
```js
|
||||
const hrBorderColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('border-color');
|
||||
assert(hrBorderColor === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 5f459cf202c2a3472fae6a9f
|
||||
title: 步驟 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
注意到線條如何更粗了嗎？ 對於 `hr` 元素的所有邊緣，名爲 `border-width` 的屬性的默認值爲 `1px`。 通過將邊框改爲與背景相同的顏色，線條的總高度爲 `5px`（`3px` 加上上下邊框寬度 `1px`）。
|
||||
|
||||
將 `hr` 的 `height` 屬性改爲 `2px`，這樣它的總高度就變成了 `4px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `height` 屬性設置爲 `2px`。
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
你的 `hr` 元素的 `height` 應爲 `2px`。
|
||||
|
||||
```js
|
||||
const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
|
||||
assert(hrHeight === '2px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
---
|
||||
id: 5f459fd48bdc98491ca6d1a3
|
||||
title: 步驟 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
繼續在 `main` 元素和 `footer` 元素之間添加另一個 `hr` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該添加第二個 `hr` 元素。
|
||||
|
||||
```js
|
||||
assert($('hr').length === 2);
|
||||
```
|
||||
|
||||
你的新 `hr` 元素應位於 `main` 元素和 `footer` 元素之間。
|
||||
|
||||
```js
|
||||
assert($('hr')[1].previousElementSibling.tagName === 'MAIN');
|
||||
assert($('hr')[1].nextElementSibling.tagName === 'FOOTER');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
---
|
||||
id: 5f45a05977e2fa49d9119437
|
||||
title: 步驟 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
要在菜單週圍創建更多空間，請使用 `padding` 屬性在 `body` 元素的內部添加 `20px` 空間。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `padding` 屬性設置爲 `20px`。
|
||||
|
||||
```js
|
||||
assert(code.match(/padding:\s*20px;?/i));
|
||||
```
|
||||
|
||||
你的 `body` 元素應該有一個 `20px` 的 `padding`。
|
||||
|
||||
```js
|
||||
const bodyPadding = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('padding');
|
||||
assert(bodyPadding === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 5f45a276c093334f0f6e9df4
|
||||
title: 步驟 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
關注菜單上的項目和價格，每一行之間有相當大的差距。
|
||||
|
||||
定位所有嵌套在 `class` 名爲 `item` 的元素中的 `p` 元素，並將它們的頂部和底部 margin 設置爲 `5px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `margin-top` 屬性設置爲 `5px`。
|
||||
|
||||
```js
|
||||
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '5px');
|
||||
assert(hasMarginTop);
|
||||
```
|
||||
|
||||
你應該將 `margin-bottom` 屬性設置爲 `5px`。
|
||||
|
||||
```js
|
||||
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px');
|
||||
assert(hasMarginBottom);
|
||||
```
|
||||
|
||||
你應該使用現有的 `.item p` 選擇器。
|
||||
|
||||
```js
|
||||
const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
|
||||
assert(hasOneSelector.length === 1);
|
||||
```
|
||||
|
||||
嵌套在 `.item` 元素中的 `p` 元素應該具有 `5px` 的 `margin-top`。
|
||||
|
||||
```js
|
||||
const itemPMarginTop = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-top');
|
||||
assert(itemPMarginTop === '5px');
|
||||
```
|
||||
|
||||
嵌套在 `.item` 元素中的 `p` 元素應具有 `5px` 的 `margin-bottom`。
|
||||
|
||||
```js
|
||||
const itemPMarginBottom = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-bottom');
|
||||
assert(itemPMarginBottom === '5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
id: 5f45a5a7c49a8251f0bdb527
|
||||
title: 步驟 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
使用與上一步相同的樣式選擇器，通過將值設置爲 `18px` 來增大商品和價格的字體大小。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `font-size` 屬性設置爲 `18px`。
|
||||
|
||||
```js
|
||||
const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '18px');
|
||||
assert(hasFontSize);
|
||||
```
|
||||
|
||||
你應該使用現有的 `.item p` 選擇器。
|
||||
|
||||
```js
|
||||
const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
|
||||
assert(hasOneSelector.length === 1);
|
||||
```
|
||||
|
||||
嵌套在 `.item` 元素中的 `p` 元素的 `font-size` 應爲 `18px`。
|
||||
|
||||
```js
|
||||
const itemPFontSize = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('font-size');
|
||||
assert(itemPFontSize === '18px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
---
|
||||
id: 5f45a66d4a2b0453301e5a26
|
||||
title: 步驟 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
向下移動到 `footer` 元素，使所有文本的字體大小爲 `14px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `footer` 選擇器。
|
||||
|
||||
```js
|
||||
const hasFooter = new __helpers.CSSHelp(document).getStyle('footer');
|
||||
assert(hasFooter);
|
||||
```
|
||||
|
||||
你的 `footer` 選擇器應該在你的評論下方。
|
||||
|
||||
```js
|
||||
assert(code.match(/\/\*\s*FOOTER\s*\*\/\s*footer/i));
|
||||
```
|
||||
|
||||
你應該將 `font-size` 屬性設置爲 `14px`。
|
||||
|
||||
|
||||
```js
|
||||
const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '14px');
|
||||
assert(hasFontSize);
|
||||
```
|
||||
|
||||
你的 `footer` 元素的 `font-size` 應該是 `14px`。
|
||||
|
||||
```js
|
||||
const footerFontSize = new __helpers.CSSHelp(document).getStyle('footer')?.getPropertyValue('font-size');
|
||||
assert(footerFontSize === '14px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
id: 5f45b0731d39e15d54df4dfc
|
||||
title: 步驟 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
鏈接在未點擊狀態下的默認顏色通常爲藍色。 已經在頁面上被訪問過的鏈接的默認顏色通常是紫色。
|
||||
|
||||
要使 `footer` 鏈接的顏色相同，無論是否已訪問鏈接，請爲錨元素（`a`）使用類型選擇器，並將 `color` 屬性設置爲 `black`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用 `a` 選擇器。
|
||||
|
||||
```js
|
||||
const hasASelector = new __helpers.CSSHelp(document).getStyle('a');
|
||||
assert(hasASelector);
|
||||
```
|
||||
|
||||
你應該將 `color` 屬性設置爲 `black`。
|
||||
|
||||
```js
|
||||
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'black');
|
||||
```
|
||||
|
||||
你的 `a` 元素的 `color` 應該是 `black`。
|
||||
|
||||
```js
|
||||
const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color');
|
||||
assert(aColor === 'black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 5f45b25e7ec2405f166b9de1
|
||||
title: 步驟 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
當鏈接被實際訪問時，你可以使用類似 `a:visited { propertyName: propertyValue; }` 的 <dfn>pseudo-selector</dfn> 來更改鏈接的屬性。
|
||||
|
||||
當用戶訪問鏈接時，將頁腳 `Visit our website` 鏈接的顏色更改爲 `grey`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用 `a:visited` 僞選擇器。
|
||||
|
||||
```js
|
||||
const hasAVisited = new __helpers.CSSHelp(document).getStyle('a:visited');
|
||||
assert(hasAVisited);
|
||||
```
|
||||
|
||||
你應該將 `color` 屬性設置爲 `grey`。
|
||||
|
||||
```js
|
||||
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => (x.style.color === 'grey' || x.style.color === 'gray'));
|
||||
assert(hasColor);
|
||||
```
|
||||
|
||||
你的 `a:visited` 的 `color` 應該是 `grey`。
|
||||
|
||||
```js
|
||||
const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color');
|
||||
assert(aVisitedColor === 'grey' || aVisitedColor === 'gray');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
---
|
||||
id: 5f45b3c93c027860d9298dbd
|
||||
title: 步驟 82
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
當鼠標懸停在鏈接上時，你可以使用類似於 `a:hover { propertyName: propertyValue; }` 的 <dfn>pseudo-selector</dfn> 更改鏈接的屬性。
|
||||
|
||||
當用戶將鼠標懸停在頁腳 `Visit our website` 鏈接上時，將其顏色更改爲 `brown`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用 `a:hover` 僞選擇器。
|
||||
|
||||
```js
|
||||
const hasAHover = new __helpers.CSSHelp(document).getStyle('a:hover');
|
||||
assert(hasAHover);
|
||||
```
|
||||
|
||||
你應該將 `color` 屬性設置爲 `brown`。
|
||||
|
||||
```js
|
||||
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'brown');
|
||||
assert(hasColor);
|
||||
```
|
||||
|
||||
你的 `a:hover` 的 `color` 應該爲 `brown`。
|
||||
|
||||
```js
|
||||
const aHoverColor = new __helpers.CSSHelp(document).getStyle('a:hover')?.getPropertyValue('color');
|
||||
assert(aHoverColor === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
---
|
||||
id: 5f45b45d099f3e621fbbb256
|
||||
title: 步驟 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
當鏈接被實際點擊時，你可以使用類似 `a:active { propertyName: propertyValue; }` 的 <dfn>pseudo-selector</dfn> 來更改鏈接的屬性。
|
||||
|
||||
將頁腳 `Visit our website` 鏈接的顏色更改爲 `white`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用 `a:active` 僞選擇器。
|
||||
|
||||
```js
|
||||
const hasAActive = new __helpers.CSSHelp(document).getStyle('a:active');
|
||||
assert(hasAActive);
|
||||
```
|
||||
|
||||
你應該將 `color` 屬性設置爲 `white`。
|
||||
|
||||
```js
|
||||
const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'white');
|
||||
assert(hasColor);
|
||||
```
|
||||
|
||||
你的 `a:active` 的 `color` 應該是 `white`。
|
||||
|
||||
```js
|
||||
const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color');
|
||||
assert(aActiveColor === 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,182 @@
|
||||
---
|
||||
id: 5f45b4c81cea7763550e40df
|
||||
title: 步驟 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
爲了和你已經使用的顏色主題（黑色和棕色）保持一致，將訪問鏈接時的顏色更改爲 `black`，並在實際點擊鏈接時將其顏色設置爲 使用 `brown`。
|
||||
|
||||
# --hints--
|
||||
|
||||
當鏈接被 `visited` 時，你應該將 `color` 屬性設置爲 `black`。
|
||||
|
||||
```js
|
||||
const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color');
|
||||
assert(aVisitedColor === 'black');
|
||||
```
|
||||
|
||||
當鏈接 `active` 時，你應該將 `color` 屬性設置爲 `brown`。
|
||||
|
||||
```js
|
||||
const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color');
|
||||
assert(aActiveColor === 'brown');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
a:visited {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: white;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
---
|
||||
id: 5f45b715301bbf667badc04a
|
||||
title: 步驟 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
菜單文本 `CAMPER CAFE` 的頂部空間與菜單底部的地址空間不同。 這是由於瀏覽器對 `h1` 元素有一些默認頂部 margin。
|
||||
|
||||
將 `h1` 元素的頂部 margin 更改爲 `0` 以刪除所有頂部 margin。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `margin-top` 屬性設置爲 `0`。
|
||||
|
||||
```js
|
||||
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '0px');
|
||||
assert(hasMarginTop);
|
||||
```
|
||||
|
||||
你的 `h1` 元素的 `margin-top` 應爲 `0`。
|
||||
|
||||
```js
|
||||
const h1MarginTop = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-top');
|
||||
assert(h1MarginTop === '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
---
|
||||
id: 5f46e270702a8456a664f0df
|
||||
title: 步驟 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
爲了去除 `h1` 元素和文本 `Est. 2020` 之間的一些垂直空間，將 `h1` 的底邊距改爲 `15px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該把 `margin-bottom` 屬性設置爲 `15px`。
|
||||
|
||||
```js
|
||||
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px');
|
||||
assert(hasMarginBottom);
|
||||
```
|
||||
|
||||
你的 `h1` 元素的 `margin-bottom` 應爲 `15px`。
|
||||
|
||||
```js
|
||||
const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom');
|
||||
assert(h1MarginBottom === '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 5f46e36e745ead58487aabf2
|
||||
title: 步驟 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在頂部的間隔看起來很好。 菜單底部地址下方的空間比菜單頂部和 `h1` 元素的空間大一點。
|
||||
|
||||
要減少地址 `p` 元素下方的默認 margin 空間，請創建一個名爲 `address` 的 class 選擇器，併爲 `margin-bottom` 屬性設置值 `5px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該添加一個 `.address` 選擇器。
|
||||
|
||||
```js
|
||||
const hasAddress = new __helpers.CSSHelp(document).getStyle('.address');
|
||||
assert(hasAddress);
|
||||
```
|
||||
|
||||
你應該將 `margin-bottom` 屬性設置爲 `5px`。
|
||||
|
||||
```js
|
||||
const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px');
|
||||
assert(hasMarginBottom);
|
||||
```
|
||||
|
||||
你的 `.address` 選擇器應該將 `margin-bottom` 屬性設置爲 `5px`。
|
||||
|
||||
```js
|
||||
const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom');
|
||||
assert(addressMarginBottom === '5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
---
|
||||
id: 5f46e7a4750dd05b5a673920
|
||||
title: 步驟 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在將 `address` class 應用於包含地址的 `p` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該應用 `class="address"` 屬性。
|
||||
|
||||
```js
|
||||
assert(code.match(/class=('|")address\1/i));
|
||||
```
|
||||
|
||||
你的 `.address` 元素應該是你的 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('.address')[0].tagName === 'P');
|
||||
```
|
||||
|
||||
你的 `.address` 元素應包含文本 `123 Free Code Camp Drive`。
|
||||
|
||||
```js
|
||||
assert($('.address')[0].innerText.match(/123 Free Code Camp Drive/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,194 @@
|
||||
---
|
||||
id: 5f46e8284aae155c83015dee
|
||||
title: 步驟 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
菜單看起來不錯，但除了咖啡豆的背景圖片外，主要就是文字。
|
||||
|
||||
在 `Coffee` 標題下，使用 Url `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg` 添加一張圖片。 給圖像一個 `alt` 值 `coffee icon`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `<img>` 標籤。 請記住，`img` 元素是自閉合的。
|
||||
|
||||
```js
|
||||
assert($('img').length === 1);
|
||||
```
|
||||
|
||||
你的 `img` 元素應具有值爲 `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg` 的 `src` 屬性。
|
||||
|
||||
```js
|
||||
assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
|
||||
```
|
||||
|
||||
你的 `img` 元素應該具有值爲 `coffee icon` 的 `alt` 屬性。
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt').match(/coffee icon/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Coffee</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 5f46ede1ff8fec5ba656b44c
|
||||
title: 步驟 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
接下來你將要調整 `footer` 元素。 爲了保持 CSS 的條理性，在 `styles.css` 的末尾添加一個註釋，文字爲 `FOOTER`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個CSS註釋，上面寫着 `FOOTER`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\/\*\s*FOOTER\s*\*\//i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
---
|
||||
id: 5f46fc57528aa1c4b5ea7c2e
|
||||
title: 步驟 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
將 `margin-bottom` 更改爲 `5px`，看起來很棒。 但是，現在 `Cinnamon Roll` 菜單項和第二個 `hr` 元素之間的空間與頂部 `hr` 元素和 `Coffee` 標題之間的空間不匹配。
|
||||
|
||||
通過創建一個名爲 `bottom-line` 的 class，將 `margin-top` 屬性設置爲 `25px`，來添加更多空間。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該添加一個 `.bottom-line` 選擇器。
|
||||
|
||||
```js
|
||||
const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line');
|
||||
assert(hasBottomLine);
|
||||
```
|
||||
|
||||
你應該將 `margin-top` 屬性設置爲 `25px`。
|
||||
|
||||
```js
|
||||
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px');
|
||||
assert(hasMarginTop);
|
||||
```
|
||||
|
||||
你的 `.bottom-line` 選擇器應該有值爲 `25px` 的 `margin-top`。
|
||||
|
||||
```js
|
||||
const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top');
|
||||
assert(bottomLineMargin === '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr>
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
id: 5f4701b942c824109626c3d8
|
||||
title: 步驟 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在將 `bottom-line` 類添加到第二個 `hr` 元素中，這樣樣式就生效。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該添加具有 `bottom-line` 值的 `class` 屬性。
|
||||
|
||||
```js
|
||||
assert(code.match(/class=('|")bottom-line\1/i));
|
||||
```
|
||||
|
||||
你的 `bottom-line` 類應該應用於你的第二個 `hr` 元素。
|
||||
|
||||
```js
|
||||
assert($('hr')[1].className === 'bottom-line');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<hr>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p>123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 5f475bb508746c16c9431d42
|
||||
title: 步驟 90
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
你添加的圖像不像其上方的 `Coffee` 標題那樣水平居中。 `img` 元素“像是”內聯元素。
|
||||
|
||||
要使圖像表現得像標題元素（塊級），請創建一個 `img` 類型選擇器，爲 `display` 設限設置值 `block`，並使用適用的 `margin-left` 和 `margin-right` 值將其水平居中。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該使用 `img` 選擇器。
|
||||
|
||||
```js
|
||||
const hasImg = new __helpers.CSSHelp(document).getStyle('img');
|
||||
assert(hasImg);
|
||||
```
|
||||
|
||||
你應該將 `display` 屬性設置爲 `block`。
|
||||
|
||||
```js
|
||||
const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'block');
|
||||
assert(hasDisplay);
|
||||
```
|
||||
|
||||
你應該將 `margin-left` 屬性設置爲 `auto`。
|
||||
|
||||
```js
|
||||
const marginLeftFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-left'] === 'auto');
|
||||
assert(marginLeftFilter.length === 2);
|
||||
```
|
||||
|
||||
你應該將 `margin-right` 屬性設置爲 `auto`。
|
||||
|
||||
```js
|
||||
const marginRightFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-right'] === 'auto');
|
||||
assert(marginRightFilter.length === 2);
|
||||
```
|
||||
|
||||
你的 `img` 元素的 `display` 值應爲 `block`。
|
||||
|
||||
```js
|
||||
const imgDisplay = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('display');
|
||||
assert(imgDisplay === 'block');
|
||||
```
|
||||
|
||||
你的 `img` 元素的 `margin-left` 和 `margin-right` 的值應爲 `auto`。
|
||||
|
||||
```js
|
||||
const imgMarginLeft = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-left');
|
||||
assert(imgMarginLeft === 'auto');
|
||||
const imgMarginRight = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-right');
|
||||
assert(imgMarginRight === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
---
|
||||
id: 5f475e1c7f71a61d913836c6
|
||||
title: 步驟 91
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
使用 URL `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg` 在 `Desserts` 標題下添加最後一張圖片。 給圖像添加 `alt` 值 `pie icon`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該添加第二個 `img` 元素。
|
||||
|
||||
```js
|
||||
assert($('img').length === 2);
|
||||
```
|
||||
|
||||
你的新 `img` 元素應具有 `src` 值爲 `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`。
|
||||
|
||||
```js
|
||||
assert($('img').last().attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg');
|
||||
```
|
||||
|
||||
你的新 `img` 元素應該具有 `alt` 值爲 `pie icon`。
|
||||
|
||||
```js
|
||||
assert($('img').last().attr('alt').match(/pie icon/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 5f47633757ae3469f2d33d2e
|
||||
title: 第46步：
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
如果你將頁面預覽的寬度調小，那麼調小的過程中會注意到，左側的一些文本會開始換到下一行 這是因爲左側 `p` 元素的寬度只能佔用 `50%` 的空間。
|
||||
|
||||
由於你知道右側價格的字符明顯減少，因此將 `flavor` class 的 `width` 值更改爲 `75%`，將 `price` class 的 `width` 值爲更改爲 `25%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該在 `.flavor` 選擇器中將 `width` 屬性設置爲 `75%`。
|
||||
|
||||
```js
|
||||
const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
|
||||
assert(flavorWidth === '75%');
|
||||
```
|
||||
|
||||
你應該在 `.price` 選擇器中將 `width` 屬性設置爲 `25%`。
|
||||
|
||||
```js
|
||||
const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
|
||||
assert(priceWidth === '25%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,363 @@
|
||||
---
|
||||
id: 5f47fe7e31980053a8d4403b
|
||||
title: 步驟 92
|
||||
challengeType: 0
|
||||
dashedName: step-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
如果 `h2` 元素及其相關圖標之間的垂直空間更小，那就太好了。 `h2` 元素具有默認的頂部和底部 margin 空間，因此你可以將 `h2` 元素的底部 margin 更改爲 `0` 或其他數字。
|
||||
|
||||
有一種更簡單的方法，只需向 `img` 元素添加一個負的頂部 margin，以將它們從當前位置拉上來。 負值是通過在值前面添加 `-` 創建的。 要完成這個項目，請繼續在 `img` 類型選擇器中使用 `25px` 的負頂部 margin。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `margin-top` 屬性設置爲 `-25px`。
|
||||
|
||||
```js
|
||||
const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '-25px');
|
||||
assert(hasMarginTop);
|
||||
```
|
||||
|
||||
你的 `img` 元素的 `margin-top` 值應爲 `-25px`。
|
||||
|
||||
```js
|
||||
const imgMarginTop = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-top');
|
||||
assert(imgMarginTop === '-25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p class="established">Est. 2020</p>
|
||||
</header>
|
||||
<hr>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<hr class="bottom-line">
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
|
||||
</p>
|
||||
<p class="address">123 Free Code Camp Drive</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.established {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: brown;
|
||||
border-color: brown;
|
||||
}
|
||||
|
||||
.bottom-line {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: Impact, serif;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
footer {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 5f716ad029ee4053c7027a7a
|
||||
title: 步驟 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在 `article` 元素中嵌套兩個 `p` 元素。 第一個的文本應該是 `Donut`，第二個的文本應該是 `1.50`。 把它們放在同一行，確保它們之間沒有空格。
|
||||
|
||||
# --hints--
|
||||
|
||||
你不應更改現有的 `article` 元素。
|
||||
|
||||
```js
|
||||
assert($('article').length === 6);
|
||||
```
|
||||
|
||||
你的新 `article` 元素應該有兩個 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('article').last().children('p').length === 2);
|
||||
```
|
||||
|
||||
你的第一個 `p` 元素應該包含文本 `Donut`。
|
||||
|
||||
```js
|
||||
assert($('article').last().children('p')[0].innerText.match(/Donut/i));
|
||||
```
|
||||
|
||||
你的第二個 `p` 元素應該包含文本 `1.50`。
|
||||
|
||||
```js
|
||||
assert($('article').last().children('p')[1].innerText.match(/1\.50/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
id: 5f716bee5838c354c728a7c5
|
||||
title: 步驟 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
在你剛剛添加的甜點下方，使用另外三個 `article` 元素添加其餘的甜點和價格，每個元素都有兩個嵌套的 `p` 元素。 每個元素都應該有正確的甜點和價格文本，並且它們都應該有正確的類。
|
||||
|
||||
```bash
|
||||
Cherry Pie 2.75
|
||||
Cheesecake 3.00
|
||||
Cinnamon Roll 2.50
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
你的第二個 `section` 中應該有四個 `article` 元素。
|
||||
|
||||
```js
|
||||
const secondSection = document.querySelectorAll('section')[1]
|
||||
const articles = secondSection.querySelectorAll('article')
|
||||
assert(articles.length === 4)
|
||||
```
|
||||
|
||||
你應該有四個 `.dessert` 元素。
|
||||
|
||||
```js
|
||||
assert($('.dessert').length === 4);
|
||||
```
|
||||
|
||||
你應該有四個新的 `.price` 元素。
|
||||
|
||||
```js
|
||||
assert($('section').last().find('.price').length === 4);
|
||||
```
|
||||
|
||||
你的 `section` 元素應該有八個 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('section').last().find('p').length === 8);
|
||||
```
|
||||
|
||||
你的 `.dessert` 元素應包含文本 `Donut`、`Cherry Pie`、`Cheesecake` 和 `Cinnamon Roll`。
|
||||
|
||||
```js
|
||||
const dessert = $('.dessert');
|
||||
assert(dessert[0].innerText.match(/donut/i));
|
||||
assert(dessert[1].innerText.match(/cherry pie/i));
|
||||
assert(dessert[2].innerText.match(/cheesecake/i));
|
||||
assert(dessert[3].innerText.match(/cinnamon roll/i));
|
||||
```
|
||||
|
||||
你的新 `.price` 元素應包含文本 `1.50`、`2.75`、`3.00` 和 `2.50`。
|
||||
|
||||
```js
|
||||
const prices = $('section').last().find('.price');
|
||||
assert(prices[0].innerText.match(/1\.50/));
|
||||
assert(prices[1].innerText.match(/2\.75/));
|
||||
assert(prices[2].innerText.match(/3\.00/));
|
||||
assert(prices[3].innerText.match(/2\.50/));
|
||||
```
|
||||
|
||||
`p` 元素之間不應有任何空格。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<\/p>\s+<p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor, .dessert {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 5f7691dafd882520797cd2f0
|
||||
title: 步驟 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
接下來，將其他 `p` 元素定位在同一條線上，它們之間沒有間隔空間。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的 `p` 元素之間不應該有任何空格。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<\/p>\s+<p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
id: 5f7692f7c5b3ce22a57788b6
|
||||
title: 步驟 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
爲了完成樣式設計，在所有剩餘的 `p` 元素上添加適用的類名稱 `flavor` 和 `price`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有五個 `.flavor` 元素。
|
||||
|
||||
```js
|
||||
assert($('.flavor').length === 5);
|
||||
```
|
||||
|
||||
你應該有五個 `.price` 元素。
|
||||
|
||||
```js
|
||||
assert($('.price').length === 5);
|
||||
```
|
||||
|
||||
你的 `.flavor` 元素應該是帶有 `French Vanilla`、`Caramel Macchiato`、`Pumpkin Spice`、`Hazelnut` 和 `Mocha` 文本的 `p` 元素。
|
||||
|
||||
```js
|
||||
const p = $('p');
|
||||
const flavor = $('.flavor');
|
||||
assert(p[1] === flavor[0]);
|
||||
assert(p[3] === flavor[1]);
|
||||
assert(p[5] === flavor[2]);
|
||||
assert(p[7] === flavor[3]);
|
||||
assert(p[9] === flavor[4]);
|
||||
```
|
||||
|
||||
你的 `.price` 元素應該是帶有文本 `3.00`、`3.75`、`3.50`、`4.00` 和 `4.50` 的 `p` 元素。
|
||||
|
||||
```js
|
||||
const p = $('p');
|
||||
const price = $('.price');
|
||||
assert(p[2] === price[0]);
|
||||
assert(p[4] === price[1]);
|
||||
assert(p[6] === price[2]);
|
||||
assert(p[8] === price[3]);
|
||||
assert(p[10] === price[4]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
<article class="item">
|
||||
<p>Caramel Macchiato</p><p>3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Pumpkin Spice</p><p>3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Hazelnut</p><p>4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p>Mocha</p><p>4.50</p>
|
||||
</article>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 5f769541be494f25449b292f
|
||||
title: 步驟 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
使用你的新 `flavor` class 作爲選擇器，將 `text-align` 屬性的值設置爲 `left`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `flavor` class 選擇器。
|
||||
|
||||
```js
|
||||
const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor');
|
||||
assert(hasFlavor);
|
||||
```
|
||||
|
||||
你應該將 `text-align` 屬性設置爲 `left`。
|
||||
|
||||
```js
|
||||
const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left');
|
||||
assert(hasTextAlign);
|
||||
```
|
||||
|
||||
你的 `flavor` class 選擇器應將 `text-align` 屬性設置爲 `left`。
|
||||
|
||||
```js
|
||||
const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align');
|
||||
assert(flavorTextAlign === 'left');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p>3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 5f76967fad478126d6552b0d
|
||||
title: 步驟 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
接着，你想要將價格（price）右對齊。 給你的 `p` 元素添加一個名爲 `price` 的類，其文本爲 `3.00`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該把 `price` 類添加到你的 `p` 元素中。
|
||||
|
||||
```js
|
||||
assert(code.match(/<p\s*class=('|")price\1\s*>/i));
|
||||
```
|
||||
|
||||
具有 `price` 類應該只有一個元素。
|
||||
|
||||
```js
|
||||
assert($('.price').length === 1);
|
||||
```
|
||||
|
||||
你的 `price` 類應該在 `p` 元素上，文字是 `3.00`。
|
||||
|
||||
```js
|
||||
assert($('.price')[0].innerText.match(/3\.00/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
--fcc-editable-region--
|
||||
<p>3.00</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 5f769702e6e33127d14aa120
|
||||
title: 步驟 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
現在將文本與具有 `price` class 的元素的對齊方式設置爲 `right`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個 `price` class 選擇器。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.price\s*{/i));
|
||||
```
|
||||
|
||||
你的 `price` class 選擇器應將 `text-align` 屬性設置爲 `right`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i));
|
||||
```
|
||||
|
||||
你的 `.price` 元素應該靠右對齊。
|
||||
|
||||
```js
|
||||
assert($('.price').css('text-align') === 'right');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article>
|
||||
<p class="flavor">French Vanilla</p>
|
||||
<p class="price">3.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Caramel Macchiato</p>
|
||||
<p>3.75</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Pumpkin Spice</p>
|
||||
<p>3.50</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Hazelnut</p>
|
||||
<p>4.00</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Mocha</p>
|
||||
<p>4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 5f7b87422a560036fd03ccff
|
||||
title: 步驟 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
對於剛剛添加的兩個 `p` 元素，添加 `dessert` 作爲第一個 `p` 元素的 `class` 屬性的值，然後添加 `price` 作爲第二個 `p` 元素的 `class` 屬性的值。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該有一個帶有 `dessert` class 的 `p` 元素。
|
||||
|
||||
```js
|
||||
assert($('.dessert').length === 1);
|
||||
```
|
||||
|
||||
帶有文本 `Donut` 的 `p` 元素應該具有 `dessert` class。
|
||||
|
||||
```js
|
||||
assert($('.dessert')[0].innerText.match(/donut/i));
|
||||
```
|
||||
|
||||
帶有文本 `1.50` 的 `p` 元素應該具有 `price` class。
|
||||
|
||||
```js
|
||||
assert($('.price').last().text().match(/1\.50/));
|
||||
```
|
||||
|
||||
`p` 元素之間不應有任何空格。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<\/p>\s+<p/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
--fcc-editable-region--
|
||||
<p>Donut</p><p>1.50</p>
|
||||
--fcc-editable-region--
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5f7b88d37b1f98386f04edc0
|
||||
title: 步驟 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
有些東西看起來不對勁。 你將正確的 `class` 屬性值添加到 `p` 元素，其文本是 `Donut`，但你尚未爲其定義選擇器。
|
||||
|
||||
由於 `flavor` class 選擇器已經具有你想要的屬性，只需將 `dessert` class 名添加到其中即可。
|
||||
|
||||
# --hints--
|
||||
|
||||
你應該將 `.dessert` 選擇器添加到你的 `.flavor` 選擇器中。
|
||||
|
||||
```js
|
||||
const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor');
|
||||
assert(selector)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cafe Menu</title>
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="menu">
|
||||
<header>
|
||||
<h1>CAMPER CAFE</h1>
|
||||
<p>Est. 2020</p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Coffee</h2>
|
||||
<article class="item">
|
||||
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
|
||||
</article>
|
||||
<article class="item">
|
||||
<p class="flavor">Mocha</p><p class="price">4.50</p>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Desserts</h2>
|
||||
<article class="item">
|
||||
<p class="dessert">Donut</p><p class="price">1.50</p>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
|
||||
}
|
||||
|
||||
h1, h2, p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 80%;
|
||||
background-color: burlywood;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.item p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.flavor {
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
width: 25%
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 6140c7e645d8e905819f1dd4
|
||||
title: 步驟 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
從標準樣板開始。 添加 `DOCTYPE` 聲明、`html` 元素、 `head` 和 `body` 元素。
|
||||
|
||||
在 `meta` 元素中添加正確的 `charset`、`title` 元素和鏈接 `./styles.css` 文件的 `link` 元素。
|
||||
|
||||
將 `title` 設置爲 `Ferris Wheel`。
|
||||
|
||||
# --hints--
|
||||
|
||||
你的代碼應包含 `DOCTYPE` 引用。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
你應該在 `DOCTYPE` 引用後添加一個空格。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
你應該將文檔類型定義爲 `html`。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
你應該在類型之後使用 `>` 結束 `DOCTYPE` 聲明。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
你的 `html` 元素應該有一個帶有值爲 `en` 的 `lang` 屬性的開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
你的 `html` 元素應該有一個結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
你的 `DOCTYPE` 聲明應位於 HTML 的開頭。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `head` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `head` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `body` 開始標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
你應該有一個 `body` 結束標籤。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
`head` 和 `body` 元素應該是兄弟元素。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
`head` 元素應該在 `html` 元素內。
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
`body` 元素應該在 `html` 元素內。
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
你的代碼應該有一個 `meta` 元素。
|
||||
|
||||
```js
|
||||
const meta = document.querySelector('meta');
|
||||
assert.exists(meta);
|
||||
```
|
||||
|
||||
你的 `meta` 元素應該有一個 `charset` 屬性，其值爲 `UTF-8`。
|
||||
|
||||
```js
|
||||
assert.match(code, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/i)
|
||||
```
|
||||
|
||||
你的代碼應該有一個 `title` 元素。
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
你的項目應該有一個 `Ferris Wheel` 標題。
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim()?.toLowerCase(), 'ferris wheel')
|
||||
```
|
||||
|
||||
記住，標題的大小寫和拼寫很重要。
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title?.text?.trim(), 'Ferris Wheel');
|
||||
```
|
||||
|
||||
你的代碼應該有一個 `link` 元素。
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
你應該有一個自閉合的 `link` 元素。
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('link').length === 1);
|
||||
```
|
||||
|
||||
你的 `link` 元素應該在你的 `head` 元素中。
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('head > link'));
|
||||
```
|
||||
|
||||
你的 `link` 元素應該有一個 `rel` 屬性，其值爲 `stylesheet`。
|
||||
|
||||
```js
|
||||
const link_element = document.querySelector('link');
|
||||
const rel = link_element.getAttribute("rel");
|
||||
assert.equal(rel, "stylesheet");
|
||||
```
|
||||
|
||||
你的 `link` 元素應該有一個 `href` 屬性，其值爲 `styles.css`。
|
||||
|
||||
```js
|
||||
const link = document.querySelector('link');
|
||||
assert.equal(link.dataset.href, "styles.css");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user