chore: seed chinese traditional (#42005)
Seeds the chinese traditional files manually so we can deploy to staging.
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
e46e80e08f
commit
3da4be21bb
@ -1,84 +1,84 @@
|
|||||||
{
|
{
|
||||||
"responsive-web-design": {
|
"responsive-web-design": {
|
||||||
"title": "响应式网页设计",
|
"title": "響應式網頁設計",
|
||||||
"intro": [
|
"intro": [
|
||||||
"在响应式网页设计认证中，你将学习开发者用来编写网页的语言：HTML（超文本标记语言）用于创建内容，CSS（级联样式表）用于样式设计。",
|
"在響應式網頁設計認證中，你將學習開發者用來編寫網頁的語言：HTML（超文本標記語言）用於創建內容，CSS（級聯樣式表）用於樣式設計。",
|
||||||
"首先，你将通过编写一个展示猫咪图片的应用，学习 HTML 和 CSS 的基本知识。 然后，通过画企鹅来学习像 CSS 变量这样的现代技术，以及通过构建网页表单来学习无障碍的最佳实践。",
|
"首先，你將通過編寫一個展示貓咪圖片的應用，學習 HTML 和 CSS 的基本知識。 然後，通過畫企鵝來學習像 CSS 變量這樣的現代技術，以及通過構建網頁表單來學習無障礙的最佳實踐。",
|
||||||
"最后，你将学习使用 flexbox（弹性盒子）构建一个 Twitter 卡片，以及使用 CSS 网格构建复杂的博客布局，以此学习制作适应不同屏幕大小的网页。"
|
"最後，你將學習使用 flexbox（彈性盒子）構建一個 Twitter 卡片，以及使用 CSS 網格構建複雜的博客佈局，以此學習製作適應不同屏幕大小的網頁。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"basic-html-and-html5": {
|
"basic-html-and-html5": {
|
||||||
"title": "基础 HTML 和 HTML5",
|
"title": "基礎 HTML 和 HTML5",
|
||||||
"intro": [
|
"intro": [
|
||||||
"HTML 是一种标记语言，使用特殊的语法或标记来向浏览器描述网页的结构。HTML 元素由开始和结束标签构成，标签之间是文本内容。 不同的标签可以让文本内容以标题、段落、列表等形式展现。",
|
"HTML 是一種標記語言，使用特殊的語法或標記來向瀏覽器描述網頁的結構。HTML 元素由開始和結束標籤構成，標籤之間是文本內容。 不同的標籤可以讓文本內容以標題、段落、列表等形式展現。",
|
||||||
"在这个课程中，你将通过编写一个展示猫咪图片的应用，学习最常见的 HTML 元素——它们可以用来构成任何网页。"
|
"在這個課程中，你將通過編寫一個展示貓咪圖片的應用，學習最常見的 HTML 元素——它們可以用來構成任何網頁。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"basic-css": {
|
"basic-css": {
|
||||||
"title": "基础 CSS",
|
"title": "基礎 CSS",
|
||||||
"intro": [
|
"intro": [
|
||||||
"CSS（级联样式表）告诉浏览器如何显示你在 HTML 中写入的文本和其他内容。你可以使用 CSS 控制 HTML 元素的颜色、字体、大小、间距等许多\b属性。",
|
"CSS（級聯樣式表）告訴瀏覽器如何顯示你在 HTML 中寫入的文本和其他內容。你可以使用 CSS 控制 HTML 元素的顏色、字體、大小、間距等許多\b屬性。",
|
||||||
"现在你已经写好了猫图应用的基本结构，接下来我们用 CSS 给它加一些样式。"
|
"現在你已經寫好了貓圖應用的基本結構，接下來我們用 CSS 給它加一些樣式。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"applied-visual-design": {
|
"applied-visual-design": {
|
||||||
"title": "应用视觉设计",
|
"title": "應用視覺設計",
|
||||||
"intro": [
|
"intro": [
|
||||||
"视觉设计结合了排版、色彩理论、图形、动画、页面布局等，以表达独特的信息。",
|
"視覺設計結合了排版、色彩理論、圖形、動畫、頁面佈局等，以表達獨特的信息。",
|
||||||
"在这个课程中，你将学习如何将这些不同的视觉设计元素应用到网页上。"
|
"在這個課程中，你將學習如何將這些不同的視覺設計元素應用到網頁上。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"applied-accessibility": {
|
"applied-accessibility": {
|
||||||
"title": "应用无障碍",
|
"title": "應用無障礙",
|
||||||
"intro": [
|
"intro": [
|
||||||
"在网页开发中，可访问性是指网页内容和用户界面可以被用户理解、浏览并与之交互。这里的用户包括有视觉障碍、听觉障碍或认知障碍的用户。",
|
"在網頁開發中，可訪問性是指網頁內容和用戶界面可以被用戶理解、瀏覽並與之交互。這裏的用戶包括有視覺障礙、聽覺障礙或認知障礙的用戶。",
|
||||||
"在这个课程中，你将学习提升网站可访问性的最佳实践。"
|
"在這個課程中，你將學習提升網站可訪問性的最佳實踐。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"responsive-web-design-principles": {
|
"responsive-web-design-principles": {
|
||||||
"title": "响应式网页设计原则",
|
"title": "響應式網頁設計原則",
|
||||||
"intro": [
|
"intro": [
|
||||||
"人们可能通过形状和大小不同的设备来访问网页。通过响应式网页设计，你可以设计出能灵活适应不同屏幕大小、方向和分辨率的网页。",
|
"人們可能通過形狀和大小不同的設備來訪問網頁。通過響應式網頁設計，你可以設計出能靈活適應不同屏幕大小、方向和分辨率的網頁。",
|
||||||
"在这个课程中，你将学习如何使用 CSS 让你的网页在不同设备上看起来都不错。"
|
"在這個課程中，你將學習如何使用 CSS 讓你的網頁在不同設備上看起來都不錯。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"css-flexbox": {
|
"css-flexbox": {
|
||||||
"title": "CSS 弹性盒子",
|
"title": "CSS 彈性盒子",
|
||||||
"intro": [
|
"intro": [
|
||||||
"Flexbox（弹性盒子）是最新版本的 CSS（即 CSS3）中引入的一种强大且兼容性好的布局方法。使用 flexbox，我们可以很容易地处理好页面上的元素布局，并创建可以自动缩小和放大的动态用户界面。",
|
"Flexbox（彈性盒子）是最新版本的 CSS（即 CSS3）中引入的一種強大且兼容性好的佈局方法。使用 flexbox，我們可以很容易地處理好頁面上的元素佈局，並創建可以自動縮小和放大的動態用戶界面。",
|
||||||
"在这个课程中，你将通过构建一个 Twitter 卡片来学习 flexbox 和动态布局的基础知识。"
|
"在這個課程中，你將通過構建一個 Twitter 卡片來學習 flexbox 和動態佈局的基礎知識。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"css-grid": {
|
"css-grid": {
|
||||||
"title": "CSS 网格",
|
"title": "CSS 網格",
|
||||||
"intro": [
|
"intro": [
|
||||||
"CSS 网格是一个较新的标准，用于构建复杂的响应布局。它通过把 HTML 元素转换为具有行和列的网格容器，以便将子元素放置在所需要的位置。",
|
"CSS 網格是一個較新的標準，用於構建複雜的響應佈局。它通過把 HTML 元素轉換爲具有行和列的網格容器，以便將子元素放置在所需要的位置。",
|
||||||
"在这个课程中，你将通过构建不同的复杂布局（包括博客）来学习 CSS 网格的基础知识。"
|
"在這個課程中，你將通過構建不同的複雜佈局（包括博客）來學習 CSS 網格的基礎知識。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"responsive-web-design-projects": {
|
"responsive-web-design-projects": {
|
||||||
"title": "响应式网页设计项目",
|
"title": "響應式網頁設計項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"是时候使用你新学到的技能了。通过构建这些项目，你将有机会应用之前学到的所有技巧、原则和概念：HTML、CSS、视觉设计、无障碍等等。",
|
"是時候使用你新學到的技能了。通過構建這些項目，你將有機會應用之前學到的所有技巧、原則和概念：HTML、CSS、視覺設計、無障礙等等。",
|
||||||
"完成下面的五个网页编程项目，获得响应式网页设计认证。"
|
"完成下面的五個網頁編程項目，獲得響應式網頁設計認證。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"basic-html-cat-photo-app": {
|
"basic-html-cat-photo-app": {
|
||||||
"title": "基础 HTML 猫图应用",
|
"title": "基礎 HTML 貓圖應用",
|
||||||
"intro": [
|
"intro": [
|
||||||
"",
|
"",
|
||||||
""
|
""
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"basic-css-cafe-menu": {
|
"basic-css-cafe-menu": {
|
||||||
"title": "基础 CSS 咖啡菜单",
|
"title": "基礎 CSS 咖啡菜單",
|
||||||
"intro": [
|
"intro": [
|
||||||
"",
|
"",
|
||||||
""
|
""
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"css-variables-skyline": {
|
"css-variables-skyline": {
|
||||||
"title": "CSS 变量 Skyline",
|
"title": "CSS 變量 Skyline",
|
||||||
"intro": [
|
"intro": [
|
||||||
"",
|
"",
|
||||||
""
|
""
|
||||||
@ -87,101 +87,101 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"javascript-algorithms-and-data-structures": {
|
"javascript-algorithms-and-data-structures": {
|
||||||
"title": "JavaScript 算法和数据结构",
|
"title": "JavaScript 算法和數據結構",
|
||||||
"intro": [
|
"intro": [
|
||||||
"HTML 和 CSS 控制页面的内容和样式，JavaScript 则用于页面交互。在 JavaScript 算法和数据结构认证中，你将学习 JavaScript 的基础知识，包括变量、 数组、 对象、 循环和函数。",
|
"HTML 和 CSS 控制頁面的內容和樣式，JavaScript 則用於頁面交互。在 JavaScript 算法和數據結構認證中，你將學習 JavaScript 的基礎知識，包括變量、 數組、 對象、 循環和函數。",
|
||||||
"打好基础之后，你将会通过创建算法来操作字符串、进行阶乘运算甚至计算国际空间站的轨道来应用这些知识。",
|
"打好基礎之後，你將會通過創建算法來操作字符串、進行階乘運算甚至計算國際空間站的軌道來應用這些知識。",
|
||||||
"在这个过程中，你还会学习两种重要的编程方式或模式：面向对象的编程（OOP）和函数式编程（FP）。"
|
"在這個過程中，你還會學習兩種重要的編程方式或模式：面向對象的編程（OOP）和函數式編程（FP）。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"basic-javascript": {
|
"basic-javascript": {
|
||||||
"title": "基础 JavaScript",
|
"title": "基礎 JavaScript",
|
||||||
"intro": [
|
"intro": [
|
||||||
"JavaScript 是一种用于网页交互的脚本语言。它和 HTML 和 CSS 一样，是网站的核心技术之一。所有现代浏览器都支持 JavaScript。",
|
"JavaScript 是一種用於網頁交互的腳本語言。它和 HTML 和 CSS 一樣，是網站的核心技術之一。所有現代瀏覽器都支持 JavaScript。",
|
||||||
"在这个课程中，你将学习JavaScript 中的基本编程概念。你将从数字和字符串等基本数据结构开始，然后学习使用数组、对象、函数、循环、if/else 语句等等。"
|
"在這個課程中，你將學習JavaScript 中的基本編程概念。你將從數字和字符串等基本數據結構開始，然後學習使用數組、對象、函數、循環、if/else 語句等等。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"es6": {
|
"es6": {
|
||||||
"title": "ES6",
|
"title": "ES6",
|
||||||
"intro": [
|
"intro": [
|
||||||
"ECMAScript（ES）是 JavaScript 的标准。因为所有主流浏览器都遵循此规范，所以 ECMAScript 和 JavaScript 是可以互换的。",
|
"ECMAScript（ES）是 JavaScript 的標準。因爲所有主流瀏覽器都遵循此規範，所以 ECMAScript 和 JavaScript 是可以互換的。",
|
||||||
"截至目前你所学到的 JavaScript 大多是在 2009 年定稿的 ES5（ECMAScript5）。你仍然可以使用 ES5 编写程序。JavaScript 在不断迭代，每年都会发布新功能。",
|
"截至目前你所學到的 JavaScript 大多是在 2009 年定稿的 ES5（ECMAScript5）。你仍然可以使用 ES5 編寫程序。JavaScript 在不斷迭代，每年都會發布新功能。",
|
||||||
"2015 年发布的 ES6 为该语言增加了许多强大的新功能。在这个课程中，你将学习这些新功能，包括 <code>let</code>、<code>const</code>、箭头函数、类、promises 和模块。"
|
"2015 年發佈的 ES6 爲該語言增加了許多強大的新功能。在這個課程中，你將學習這些新功能，包括 <code>let</code>、<code>const</code>、箭頭函數、類、promises 和模塊。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"regular-expressions": {
|
"regular-expressions": {
|
||||||
"title": "正则表达式",
|
"title": "正則表達式",
|
||||||
"intro": [
|
"intro": [
|
||||||
"正则表达式，常常缩写为 “regex” 或 “regexp”，是帮助程序员匹配、搜索和替换文本的模式。正则表达式非常强大，但可能难以阅读，因为它们使用特殊字符来做更复杂更灵活的匹配。",
|
"正則表達式，常常縮寫爲 “regex” 或 “regexp”，是幫助程序員匹配、搜索和替換文本的模式。正則表達式非常強大，但可能難以閱讀，因爲它們使用特殊字符來做更復雜更靈活的匹配。",
|
||||||
"在这个课程中，你将学习如何使用特殊字符、捕获组、正向或负向先行断言以及其他技巧来匹配你想要的文本。"
|
"在這個課程中，你將學習如何使用特殊字符、捕獲組、正向或負向先行斷言以及其他技巧來匹配你想要的文本。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"debugging": {
|
"debugging": {
|
||||||
"title": "调试",
|
"title": "調試",
|
||||||
"intro": [
|
"intro": [
|
||||||
"调试是检查代码、发现并修复问题的过程。",
|
"調試是檢查代碼、發現並修復問題的過程。",
|
||||||
"代码中的问题通常有三种形式：1）语法错误导致程序停止运行， 2）代码无法执行或具有意外行为导致运行时错误，3）代码有语义（逻辑）错误，没有实现原来的意图。",
|
"代碼中的問題通常有三種形式：1）語法錯誤導致程序停止運行， 2）代碼無法執行或具有意外行爲導致運行時錯誤，3）代碼有語義（邏輯）錯誤，沒有實現原來的意圖。",
|
||||||
"在这个课程中，你将学习如何使用 JavaScript 控制台来调试程序，防止出现常见问题。"
|
"在這個課程中，你將學習如何使用 JavaScript 控制檯來調試程序，防止出現常見問題。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"basic-data-structures": {
|
"basic-data-structures": {
|
||||||
"title": "基础数据结构",
|
"title": "基礎數據結構",
|
||||||
"intro": [
|
"intro": [
|
||||||
"我们可以通过多种方式存储和访问数据。你已经知道数组和对象了，它们都是常见的 JavaScript 数据结构。",
|
"我們可以通過多種方式存儲和訪問數據。你已經知道數組和對象了，它們都是常見的 JavaScript 數據結構。",
|
||||||
"在基础数据结构课程中，你会更深入地了解数组和对象之间的差异，以及在不同情况下应该使用哪个。你还将学习到一些好用的 JS 方法，例如 <code>splice()</code>，以及使用 <code>Object.keys()</code> 来访问和操作数据。"
|
"在基礎數據結構課程中，你會更深入地瞭解數組和對象之間的差異，以及在不同情況下應該使用哪個。你還將學習到一些好用的 JS 方法，例如 <code>splice()</code>，以及使用 <code>Object.keys()</code> 來訪問和操作數據。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"basic-algorithm-scripting": {
|
"basic-algorithm-scripting": {
|
||||||
"title": "基础算法",
|
"title": "基礎算法",
|
||||||
"intro": [
|
"intro": [
|
||||||
"算法是描述如何处理某个问题的一系列步骤。",
|
"算法是描述如何處理某個問題的一系列步驟。",
|
||||||
"要写一个有效的算法，你需要先将一个特定的问题分解为小的部分，并仔细思考如何用代码解决每个部分。",
|
"要寫一個有效的算法，你需要先將一個特定的問題分解爲小的部分，並仔細思考如何用代碼解決每個部分。",
|
||||||
"在这个课程中，你将通过编写算法来实现诸如转换温度、处理复杂的二维数组等，来学习算法思维的基础知识。"
|
"在這個課程中，你將通過編寫算法來實現諸如轉換溫度、處理複雜的二維數組等，來學習算法思維的基礎知識。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"object-oriented-programming": {
|
"object-oriented-programming": {
|
||||||
"title": "面向对象编程",
|
"title": "面向對象編程",
|
||||||
"intro": [
|
"intro": [
|
||||||
"OOP，即面向对象编程，是软件开发过程的主要方法之一。在 OOP 中，我们用对象和类来组织代码，以描述事物的特点以及它们可以做什么。",
|
"OOP，即面向對象編程，是軟件開發過程的主要方法之一。在 OOP 中，我們用對象和類來組織代碼，以描述事物的特點以及它們可以做什麼。",
|
||||||
"在这个课程中，你将会学习 JavaScript 中面向对象编程的基本原则，例如 <code>this</code> 关键词、原型链、构造器和继承。"
|
"在這個課程中，你將會學習 JavaScript 中面向對象編程的基本原則，例如 <code>this</code> 關鍵詞、原型鏈、構造器和繼承。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"functional-programming": {
|
"functional-programming": {
|
||||||
"title": "函数式编程",
|
"title": "函數式編程",
|
||||||
"intro": [
|
"intro": [
|
||||||
"函数式编程是另一种软件开发方法。在函数式编程中，代码被组织成较小的基本的函数，可以结合起来构建复杂的程序。",
|
"函數式編程是另一種軟件開發方法。在函數式編程中，代碼被組織成較小的基本的函數，可以結合起來構建複雜的程序。",
|
||||||
"在这个课程中，你将学习函数式编程的核心概念，包括纯函数，如何避免突变，如何使用 <code>.map()</code> 和 <code>.filter()</code> 等方法编写更整洁的代码。"
|
"在這個課程中，你將學習函數式編程的核心概念，包括純函數，如何避免突變，如何使用 <code>.map()</code> 和 <code>.filter()</code> 等方法編寫更整潔的代碼。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"intermediate-algorithm-scripting": {
|
"intermediate-algorithm-scripting": {
|
||||||
"title": "中级算法",
|
"title": "中級算法",
|
||||||
"intro": [
|
"intro": [
|
||||||
"现在你了解了算法的基础知识、面向对象编程以及函数式编程。接下来我们将进入中级算法挑战来测试你的技能。"
|
"現在你瞭解了算法的基礎知識、面向對象編程以及函數式編程。接下來我們將進入中級算法挑戰來測試你的技能。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"javascript-algorithms-and-data-structures-projects": {
|
"javascript-algorithms-and-data-structures-projects": {
|
||||||
"title": "JavaScript 算法和数据结构项目",
|
"title": "JavaScript 算法和數據結構項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"是时候用上你新学到的 JavaScript 技能了！接下来的项目和前面的算法挑战很相近，但是难度会更高。",
|
"是時候用上你新學到的 JavaScript 技能了！接下來的項目和前面的算法挑戰很相近，但是難度會更高。",
|
||||||
"完成这 5 个 JavaScript 项目，以获得 JavaScript 算法和数据结构认证。"
|
"完成這 5 個 JavaScript 項目，以獲得 JavaScript 算法和數據結構認證。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"basic-javascript-rpg-game": {
|
"basic-javascript-rpg-game": {
|
||||||
"title": "基础 JavaScript RPG 游戏",
|
"title": "基礎 JavaScript RPG 遊戲",
|
||||||
"intro": [
|
"intro": [
|
||||||
"",
|
"",
|
||||||
""
|
""
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"intermediate-javascript-calorie-counter": {
|
"intermediate-javascript-calorie-counter": {
|
||||||
"title": "中级 JavaScript 卡路里计算器",
|
"title": "中級 JavaScript 卡路里計算器",
|
||||||
"intro": [
|
"intro": [
|
||||||
"",
|
"",
|
||||||
""
|
""
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"functional-programming-spreadsheet": {
|
"functional-programming-spreadsheet": {
|
||||||
"title": "函数式编程电子表格",
|
"title": "函數式編程電子表格",
|
||||||
"intro": [
|
"intro": [
|
||||||
"",
|
"",
|
||||||
""
|
""
|
||||||
@ -190,97 +190,97 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"front-end-libraries": {
|
"front-end-libraries": {
|
||||||
"title": "前端开发库",
|
"title": "前端開發庫",
|
||||||
"intro": [
|
"intro": [
|
||||||
"你已经熟悉了 HTML、CSS 和 JavaScript。现在学习行业中一些流行的前端库来提升你的技能吧。",
|
"你已經熟悉了 HTML、CSS 和 JavaScript。現在學習行業中一些流行的前端庫來提升你的技能吧。",
|
||||||
"在前端库认证中，你将学习如何使用 Bootstrap 快速设置网站样式，以及如何在 CSS 样式中添加逻辑，并使用 Sass 对其进行扩展。",
|
"在前端庫認證中，你將學習如何使用 Bootstrap 快速設置網站樣式，以及如何在 CSS 樣式中添加邏輯，並使用 Sass 對其進行擴展。",
|
||||||
"稍后，你将建立一个购物车和其他应用程序，学习如何使用 React 和 Redux 创建强大的单页应用程序（SPAs）。"
|
"稍後，你將建立一個購物車和其他應用程序，學習如何使用 React 和 Redux 創建強大的單頁應用程序（SPAs）。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"bootstrap": {
|
"bootstrap": {
|
||||||
"title": "Bootstrap",
|
"title": "Bootstrap",
|
||||||
"intro": [
|
"intro": [
|
||||||
"Bootstrap 一个是用于设计响应性网页和应用程序的前端框架。它对网页开发采用移动优先的方法，具有预定义的 CSS 样式和 class，以及一些 JavaScript 功能。",
|
"Bootstrap 一個是用於設計響應性網頁和應用程序的前端框架。它對網頁開發採用移動優先的方法，具有預定義的 CSS 樣式和 class，以及一些 JavaScript 功能。",
|
||||||
"在这个课程中，你将学习如何使用 Bootstrap 来建立响应式网页，并使用它的 class 来设置按钮、图像、表格、导航和其他常见元素的样式。"
|
"在這個課程中，你將學習如何使用 Bootstrap 來建立響應式網頁，並使用它的 class 來設置按鈕、圖像、表格、導航和其他常見元素的樣式。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"jquery": {
|
"jquery": {
|
||||||
"title": "jQuery",
|
"title": "jQuery",
|
||||||
"intro": [
|
"intro": [
|
||||||
"jQuery 是开发者们最常用的 JavaScript 库之一。",
|
"jQuery 是開發者們最常用的 JavaScript 庫之一。",
|
||||||
"在 jQuery 于 2006 年发布时，各种常用浏览器处理 JavaScript 的方式都略有不同。jQuery 简化了编写客户端 JavaScript 的过程，并确保代码在所有浏览器中以同样的方式运行。",
|
"在 jQuery 於 2006 年發佈時，各種常用瀏覽器處理 JavaScript 的方式都略有不同。jQuery 簡化了編寫客戶端 JavaScript 的過程，並確保代碼在所有瀏覽器中以同樣的方式運行。",
|
||||||
"在这个课程中，你将学习如何使用 jQuery 选择、移除、克隆和修改页面上的不同元素。"
|
"在這個課程中，你將學習如何使用 jQuery 選擇、移除、克隆和修改頁面上的不同元素。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"sass": {
|
"sass": {
|
||||||
"title": "SASS",
|
"title": "SASS",
|
||||||
"intro": [
|
"intro": [
|
||||||
"Sass，英文全称为 “Syntactically Awesome StyleSheets”，是对 CSS 的扩展。它添加了一些 CSS 语法不具有的新特性。Sass 简化了 CSS，这让维护样式表变得更容易。",
|
"Sass，英文全稱爲 “Syntactically Awesome StyleSheets”，是對 CSS 的擴展。它添加了一些 CSS 語法不具有的新特性。Sass 簡化了 CSS，這讓維護樣式表變得更容易。",
|
||||||
"在 Sass 课程中，你将学习如何将数据存储在变量中、嵌套 CSS、创建可重用的样式、为样式添加逻辑和循环等等。"
|
"在 Sass 課程中，你將學習如何將數據存儲在變量中、嵌套 CSS、創建可重用的樣式、爲樣式添加邏輯和循環等等。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"react": {
|
"react": {
|
||||||
"title": "React",
|
"title": "React",
|
||||||
"intro": [
|
"intro": [
|
||||||
"React 是一个流行的 JavaScript 库，用于为网页或应用程序构建可重用的组件驱动的用户界面。",
|
"React 是一個流行的 JavaScript 庫，用於爲網頁或應用程序構建可重用的組件驅動的用戶界面。",
|
||||||
"React 将 HTML 与 JavaScript 结合在了一起，以此创建出一个新的标签语言 JSX。React 还使得管理整个应用程序的数据流变得更容易。",
|
"React 將 HTML 與 JavaScript 結合在了一起，以此創建出一個新的標籤語言 JSX。React 還使得管理整個應用程序的數據流變得更容易。",
|
||||||
"在这个课程中，你将学习如何创建不同的 React 组件，以 state props 管理数据，以及使用不同的生命周期方法（例如 <code>componentDidMount</code>）和更多内容。"
|
"在這個課程中，你將學習如何創建不同的 React 組件，以 state props 管理數據，以及使用不同的生命週期方法（例如 <code>componentDidMount</code>）和更多內容。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"redux": {
|
"redux": {
|
||||||
"title": "Redux",
|
"title": "Redux",
|
||||||
"intro": [
|
"intro": [
|
||||||
"随着应用程序规模和范围的扩大，管理共享数据变得更加困难。 Redux 被定义为 “JavaScript 应用的可预测状态容器”，它有助于确保你的应用能够可预测地运行，并且更容易测试。",
|
"隨着應用程序規模和範圍的擴大，管理共享數據變得更加困難。 Redux 被定義爲 “JavaScript 應用的可預測狀態容器”，它有助於確保你的應用能夠可預測地運行，並且更容易測試。",
|
||||||
"虽然你可以使用任何视图库的 Redux，但我们在这里介绍 Redux，然后在下一组课程中与 React 结合起来。",
|
"雖然你可以使用任何視圖庫的 Redux，但我們在這裏介紹 Redux，然後在下一組課程中與 React 結合起來。",
|
||||||
"在这个课程中，你将学习 Redux stores、actions、reducers 和中间件的基础知识，来管理应用程序的数据。"
|
"在這個課程中，你將學習 Redux stores、actions、reducers 和中間件的基礎知識，來管理應用程序的數據。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"react-and-redux": {
|
"react-and-redux": {
|
||||||
"title": "React 和 Redux",
|
"title": "React 和 Redux",
|
||||||
"intro": [
|
"intro": [
|
||||||
"React 和 Redux 经常一起被提及，这是有充分理由的。创建 Redux 的开发人员是一个 React 开发者，他希望简化不同组件间的数据共享。",
|
"React 和 Redux 經常一起被提及，這是有充分理由的。創建 Redux 的開發人員是一個 React 開發者，他希望簡化不同組件間的數據共享。",
|
||||||
"你已经知道了如何使用 Redux 管理共享数据流，是时候将这些知识与 React 结合起来了。在 React 和 Redux 课程中，你将构建一个 React 组件，并学习如何使用 Redux 在组件级别本地管理状态，以及在整个应用程序中管理状态。"
|
"你已經知道了如何使用 Redux 管理共享數據流，是時候將這些知識與 React 結合起來了。在 React 和 Redux 課程中，你將構建一個 React 組件，並學習如何使用 Redux 在組件級別本地管理狀態，以及在整個應用程序中管理狀態。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"front-end-libraries-projects": {
|
"front-end-libraries-projects": {
|
||||||
"title": "前端开发库项目",
|
"title": "前端開發庫項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"现在是时候应用你的前端开发库技术进行测试。用 Bootstrap、jQuery、Sass、React、和 Redux 构建 5 个项目，测试你到现在所学到的知识。",
|
"現在是時候應用你的前端開發庫技術進行測試。用 Bootstrap、jQuery、Sass、React、和 Redux 構建 5 個項目，測試你到現在所學到的知識。",
|
||||||
"完成全部 5 个项目，然后你会获得前端开发库认证。"
|
"完成全部 5 個項目，然後你會獲得前端開發庫認證。"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"data-visualization": {
|
"data-visualization": {
|
||||||
"title": "数据可视化",
|
"title": "數據可視化",
|
||||||
"intro": [
|
"intro": [
|
||||||
"数据无处不在。但是，如果没有上下文，数据就没有多大意义。",
|
"數據無處不在。但是，如果沒有上下文，數據就沒有多大意義。",
|
||||||
"在数据可视化认证中，你会用 D3.js 库来创建表格、图表和地图，以展示不同的数据。",
|
"在數據可視化認證中，你會用 D3.js 庫來創建表格、圖表和地圖，以展示不同的數據。",
|
||||||
"你还会学习 JSON（JavaScript 对象），以及如何使用 API（应用程序接口）使用在线的数据。"
|
"你還會學習 JSON（JavaScript 對象），以及如何使用 API（應用程序接口）使用在線的數據。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"data-visualization-with-d3": {
|
"data-visualization-with-d3": {
|
||||||
"title": "用 D3 实现数据可视化",
|
"title": "用 D3 實現數據可視化",
|
||||||
"intro": [
|
"intro": [
|
||||||
"D3 或 D3.js 表示数据驱动文档。它是一个用于在浏览器中创建动态和交互式数据视觉化的 JavaScript 库。",
|
"D3 或 D3.js 表示數據驅動文檔。它是一個用於在瀏覽器中創建動態和交互式數據視覺化的 JavaScript 庫。",
|
||||||
"它基于 web 标准，即 HTML、CSS 和 SVG（可缩放矢量图形）技术。",
|
"它基於 web 標準，即 HTML、CSS 和 SVG（可縮放矢量圖形）技術。",
|
||||||
"D3 支持多种不同类型的输入数据格式。 然后，你可以使用它强大的内置方法将这些数据转换成不同的图表、和地图。",
|
"D3 支持多種不同類型的輸入數據格式。 然後，你可以使用它強大的內置方法將這些數據轉換成不同的圖表、和地圖。",
|
||||||
"在用 D3 实现数据可视化课程中，你将学习如何使用数据来创建不同的图表、悬停元素及其他内容，用以创建动态和有吸引力的数据可视化。"
|
"在用 D3 實現數據可視化課程中，你將學習如何使用數據來創建不同的圖表、懸停元素及其他內容，用以創建動態和有吸引力的數據可視化。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"json-apis-and-ajax": {
|
"json-apis-and-ajax": {
|
||||||
"title": "JSON APIs 和 AJAX",
|
"title": "JSON APIs 和 AJAX",
|
||||||
"intro": [
|
"intro": [
|
||||||
"类似于 UI 如何帮助人们使用程序，API（应用程序接口）帮助程序与其他程序互动。API 是计算机用来相互沟通的工具，部分用于发送和接收数据。",
|
"類似於 UI 如何幫助人們使用程序，API（應用程序接口）幫助程序與其他程序互動。API 是計算機用來相互溝通的工具，部分用於發送和接收數據。",
|
||||||
"程序员在使用 API 的时候，通常会使用 AJAX（同步 JavaScript 和 XML）。AJAX 指的是一组技术，这些技术向服务器提出异步请求以传输数据，然后将任何返回的数据加载到页面。而且在浏览器和服务器之间传输的数据常常是一种 JSON（JavaScript 对象）格式。",
|
"程序員在使用 API 的時候，通常會使用 AJAX（同步 JavaScript 和 XML）。AJAX 指的是一組技術，這些技術向服務器提出異步請求以傳輸數據，然後將任何返回的數據加載到頁面。而且在瀏覽器和服務器之間傳輸的數據常常是一種 JSON（JavaScript 對象）格式。",
|
||||||
"此课程将教你如何在浏览器中使用 API 和不同的 AJAX 技术的基础知识。"
|
"此課程將教你如何在瀏覽器中使用 API 和不同的 AJAX 技術的基礎知識。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"data-visualization-projects": {
|
"data-visualization-projects": {
|
||||||
"title": "数据可视化项目",
|
"title": "數據可視化項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"现在你学习了如何使用 D3 、 APIs 和 AJAX 技术，构建这 5 个数据可视化项目来测试你的技术吧。",
|
"現在你學習瞭如何使用 D3 、 APIs 和 AJAX 技術，構建這 5 個數據可視化項目來測試你的技術吧。",
|
||||||
"在这些项目中，你需要获取数据并解析数据集，然后使用 D3 创建不同的数据可视化。完成之后，你可以获得数据可视化认证。"
|
"在這些項目中，你需要獲取數據並解析數據集，然後使用 D3 創建不同的數據可視化。完成之後，你可以獲得數據可視化認證。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"d3-dashboard": {
|
"d3-dashboard": {
|
||||||
@ -293,127 +293,127 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"apis-and-microservices": {
|
"apis-and-microservices": {
|
||||||
"title": "APIs 和 微服务",
|
"title": "APIs 和 微服務",
|
||||||
"intro": [
|
"intro": [
|
||||||
"在这之前，你只是在前端使用 JavaScript 来给页面添加交互、解决算法挑战，或构建一个 SP。但 JavaScript 也可以用于后端或者服务器来构建整个 web 应用程序。",
|
"在這之前，你只是在前端使用 JavaScript 來給頁面添加交互、解決算法挑戰，或構建一個 SP。但 JavaScript 也可以用於後端或者服務器來構建整個 web 應用程序。",
|
||||||
"今天，构建应用软件的广受欢迎的方法之一是微服务，这些微服务是一种小型模块化的应用，能够共同形成一个更大的整体。",
|
"今天，構建應用軟件的廣受歡迎的方法之一是微服務，這些微服務是一種小型模塊化的應用，能夠共同形成一個更大的整體。",
|
||||||
"在 API 和微服务认证中，你将学习如何使用 Node.js 和 npm（Node 包管理工具）来写后端。你还将使用 Express 框架构建 web 应用程序，并使用 MongoDB 和 Mongoose 库构建一个 People Finder 微服务。"
|
"在 API 和微服務認證中，你將學習如何使用 Node.js 和 npm（Node 包管理工具）來寫後端。你還將使用 Express 框架構建 web 應用程序，並使用 MongoDB 和 Mongoose 庫構建一個 People Finder 微服務。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"managing-packages-with-npm": {
|
"managing-packages-with-npm": {
|
||||||
"title": "使用 NPM 管理软件包",
|
"title": "使用 NPM 管理軟件包",
|
||||||
"intro": [
|
"intro": [
|
||||||
"npm（Node 包管理工具）是一个命令行工具，用于安装、创建和分享为 Node.js 编写的 JavaScript 代码包。在 npm 上有许多开放源码软件包，所以在项目启动之前，需要一些时间来探索，这样你就不会最后重新创建轮子来处理像日期或从 API 获取数据这样的事项。",
|
"npm（Node 包管理工具）是一個命令行工具，用於安裝、創建和分享爲 Node.js 編寫的 JavaScript 代碼包。在 npm 上有許多開放源碼軟件包，所以在項目啓動之前，需要一些時間來探索，這樣你就不會最後重新創建輪子來處理像日期或從 API 獲取數據這樣的事項。",
|
||||||
"在这个课程中，你将学习使用 npm 的基本知识，包括如何使用 <code>package.json</code> 和如何管理已安装的依赖项。"
|
"在這個課程中，你將學習使用 npm 的基本知識，包括如何使用 <code>package.json</code> 和如何管理已安裝的依賴項。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"basic-node-and-express": {
|
"basic-node-and-express": {
|
||||||
"title": "Node 和 Express 基础",
|
"title": "Node 和 Express 基礎",
|
||||||
"intro": [
|
"intro": [
|
||||||
"Node.js 是一个 JavaScript 运行时，它允许开发人员在 JavaScript 中写入后端（服务器侧）程序。Node.js 有几个内置的模块——小型、独立的程序——来帮助实现这一点，一些核心模块包括像服务器一样运作的 HTTP 和文件系统，一个读取和修改文件的模块。",
|
"Node.js 是一個 JavaScript 運行時，它允許開發人員在 JavaScript 中寫入後端（服務器側）程序。Node.js 有幾個內置的模塊——小型、獨立的程序——來幫助實現這一點，一些核心模塊包括像服務器一樣運作的 HTTP 和文件系統，一個讀取和修改文件的模塊。",
|
||||||
"在上一组课程中你学到了怎么从 npm下载和管理软件包，这些软件包是较小模块的集合，可以帮助你打造更大更复杂的程序。",
|
"在上一組課程中你學到了怎麼從 npm下載和管理軟件包，這些軟件包是較小模塊的集合，可以幫助你打造更大更復雜的程序。",
|
||||||
"Express 是一个轻量级的网页应用框架，是最受欢迎的 npm 软件包之一。 Express 提供精简的基本 web 应用程序功能，包括应用的路由。路由在用户访问一个端点如 <pre>/blog</pre> 时将用户导向到相应的页面。",
|
"Express 是一個輕量級的網頁應用框架，是最受歡迎的 npm 軟件包之一。 Express 提供精簡的基本 web 應用程序功能，包括應用的路由。路由在用戶訪問一個端點如 <pre>/blog</pre> 時將用戶導向到相應的頁面。",
|
||||||
"在这个课程中，你将学习 Node 和 Express 的基础知识，包括如何创建服务器， 处理不同的文件，及处理不同的浏览器请求。"
|
"在這個課程中，你將學習 Node 和 Express 的基礎知識，包括如何創建服務器， 處理不同的文件，及處理不同的瀏覽器請求。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"mongodb-and-mongoose": {
|
"mongodb-and-mongoose": {
|
||||||
"title": "MongoDB 和 Mongose",
|
"title": "MongoDB 和 Mongose",
|
||||||
"intro": [
|
"intro": [
|
||||||
"MongoDB 是一个存储您可以在应用程序中使用的 JSON 文件(或记录)的数据库应用程序。 不同于SQL，另一种类型的数据库。Mongo是一个不相关的或“NoSQL”的数据库。 这意味着Mongo将所有相关数据存储在一个记录中，而不是像SQL数据库中那样在许多预设表中存储。",
|
"MongoDB 是一個存儲您可以在應用程序中使用的 JSON 文件(或記錄)的數據庫應用程序。 不同於SQL，另一種類型的數據庫。Mongo是一個不相關的或“NoSQL”的數據庫。 這意味着Mongo將所有相關數據存儲在一個記錄中，而不是像SQL數據庫中那樣在許多預設表中存儲。",
|
||||||
"Mongoose 是一个受欢迎的 npm 包，通常和 Mongo 一起安装。通过 Mongoose，你可以使用 JavaScript 对象而不是 JSON ，这样就更容易与 Mongo 配合使用。 此外，它允许你为 schema 文件创建蓝图，所以你不会意外地保存错误的数据类型并出现错误。",
|
"Mongoose 是一個受歡迎的 npm 包，通常和 Mongo 一起安裝。通過 Mongoose，你可以使用 JavaScript 對象而不是 JSON ，這樣就更容易與 Mongo 配合使用。 此外，它允許你爲 schema 文件創建藍圖，所以你不會意外地保存錯誤的數據類型並出現錯誤。",
|
||||||
"在 MongoDB 和 Mongoose 课程中，你将学习使用的基本知识，包括如何建立模型，保存、删除并在数据库中查找文档。"
|
"在 MongoDB 和 Mongoose 課程中，你將學習使用的基本知識，包括如何建立模型，保存、刪除並在數據庫中查找文檔。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"apis-and-microservices-projects": {
|
"apis-and-microservices-projects": {
|
||||||
"title": "API 和微服务项目",
|
"title": "API 和微服務項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"你之前用过 API，但是现在你知道 npm、Node、Express、MongoDB 和 Mongoose，是时候创建应用 了。用你到现在所学的所有知识来创建 5 个不同的微服务，这些微服务是使用范围有限的小应用。",
|
"你之前用過 API，但是現在你知道 npm、Node、Express、MongoDB 和 Mongoose，是時候創建應用 了。用你到現在所學的所有知識來創建 5 個不同的微服務，這些微服務是使用範圍有限的小應用。",
|
||||||
"在创建这些微服务后，你会有 5 个很酷的微服务 API，你可以向朋友、家人和潜在的雇主展示。同时，你也会获得 API 和微服务认证。"
|
"在創建這些微服務後，你會有 5 個很酷的微服務 API，你可以向朋友、家人和潛在的僱主展示。同時，你也會獲得 API 和微服務認證。"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"quality-assurance": {
|
"quality-assurance": {
|
||||||
"title": "质量保证",
|
"title": "質量保證",
|
||||||
"intro": [
|
"intro": [
|
||||||
"随着你的程序或网页应用程序变得更加复杂，你将想要测试它们，以确保新的更改不会破坏它们的原有功能。",
|
"隨着你的程序或網頁應用程序變得更加複雜，你將想要測試它們，以確保新的更改不會破壞它們的原有功能。",
|
||||||
"在质量保证认证中， 你将学习如何通过 Chai 测试，以确保你的应用程序能够按照你的期望运行。",
|
"In the Quality Assurance Certification, you'll learn how to write tests with Chai to ensure your applications work the way you expect them to.",
|
||||||
"然后你将创建一个聊天应用程序来学习高级 Node 和 Express 概念。你还将使用 Pug 作为模板引擎，用于身份验证的 Passport 和 用于服务器和客户端之间实时通信的 Socket.io。"
|
"然後你將創建一個聊天應用程序來學習高級 Node 和 Express 概念。你還將使用 Pug 作爲模板引擎，用於身份驗證的 Passport 和 用於服務器和客戶端之間實時通信的 Socket.io。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"quality-assurance-and-testing-with-chai": {
|
"quality-assurance-and-testing-with-chai": {
|
||||||
"title": "使用 Chai 进行质量保证和测试",
|
"title": "使用 Chai 進行質量保證和測試",
|
||||||
"intro": [
|
"intro": [
|
||||||
"Chai 是一个JavaScript测试库，帮助你确保程序能够在你更改代码后按照你的期望运行。",
|
"Chai 是一個JavaScript測試庫，幫助你確保程序能夠在你更改代碼後按照你的期望運行。",
|
||||||
"使用 Chai，你可以写测试描述你的程序的要求，并查看你的程序是否符合这些要求。",
|
"使用 Chai，你可以寫測試描述你的程序的要求，並查看你的程序是否符合這些要求。",
|
||||||
"在这个课程中，你会了解测试 JavaScript 应用程序的断言、测试 API 和其他测试 JavaScript 应用的基础知识。"
|
"在這個課程中，你會了解測試 JavaScript 應用程序的斷言、測試 API 和其他測試 JavaScript 應用的基礎知識。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"advanced-node-and-express": {
|
"advanced-node-and-express": {
|
||||||
"title": "高级 Node 和 Express",
|
"title": "高級 Node 和 Express",
|
||||||
"intro": [
|
"intro": [
|
||||||
"现在是时候来使用高级 Node.js 和 Express.js 创建一个具有登录系统的聊天应用了。",
|
"現在是時候來使用高級 Node.js 和 Express.js 創建一個具有登錄系統的聊天應用了。",
|
||||||
"为了创建一个安全的登录系统，你需要学习验证，这是一个验证个人身份或者过程的的操作。",
|
"爲了創建一個安全的登錄系統，你需要學習驗證，這是一個驗證個人身份或者過程的的操作。",
|
||||||
"在这个课程中，你将学习如何使用 Passport 管理身份验证，如何使用 Pug 创建可重用的模板以快速构建前端，以及如何使用 web sockets 在客户端和服务器之间进行实时通信。"
|
"在這個課程中，你將學習如何使用 Passport 管理身份驗證，如何使用 Pug 創建可重用的模板以快速構建前端，以及如何使用 web sockets 在客戶端和服務器之間進行實時通信。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"quality-assurance-projects": {
|
"quality-assurance-projects": {
|
||||||
"title": "质量保证项目",
|
"title": "質量保證項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"现在你对前端和后端都非常精通，是时候应用你所学到的所有技能和概念了。你将构建 5 个不同的 web 应用程序，并为每个应用程序编写测试，以确保它们正常工作并可以处理不同的情况。",
|
"現在你對前端和後端都非常精通，是時候應用你所學到的所有技能和概念了。你將構建 5 個不同的 web 應用程序，併爲每個應用程序編寫測試，以確保它們正常工作並可以處理不同的情況。",
|
||||||
"完成这 5 个质量保证项目后，你将获得一个新的认证，你可以在自己的作品集中展示这 5 个项目和认证。"
|
"完成這 5 個質量保證項目後，你將獲得一個新的認證，你可以在自己的作品集中展示這 5 個項目和認證。"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"scientific-computing-with-python": {
|
"scientific-computing-with-python": {
|
||||||
"title": "Python 和科学计算",
|
"title": "Python 和科學計算",
|
||||||
"intro": [
|
"intro": [
|
||||||
"Python 是目前最火、最灵活的编程语言之一。你可以用它来做很多事，包括从基础算法到机器学习。",
|
"Python 是目前最火、最靈活的編程語言之一。你可以用它來做很多事，包括從基礎算法到機器學習。",
|
||||||
"在这个认证中，你会学习 Python 基础知识，例如变量、循环、条件和函数。然后你会马上很快学习到复杂数据结构、网络，关系数据库和数据可视化。"
|
"在這個認證中，你會學習 Python 基礎知識，例如變量、循環、條件和函數。然後你會馬上很快學習到複雜數據結構、網絡，關係數據庫和數據可視化。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"python-for-everybody": {
|
"python-for-everybody": {
|
||||||
"title": "通用 Python 课程",
|
"title": "通用 Python 課程",
|
||||||
"intro": [
|
"intro": [
|
||||||
"通用 Python 课程是一个讲解 Python 3 基础的系列免费视频课程。",
|
"通用 Python 課程是一個講解 Python 3 基礎的系列免費視頻課程。",
|
||||||
"这些课程是 Dr. Charles Severance（Dr. Chuck）创建的。他是密歇根信息大学的实践教授，他教授各种技术课程，包括编程、数据库设计和 web 开发。"
|
"這些課程是 Dr. Charles Severance（Dr. Chuck）創建的。他是密歇根信息大學的實踐教授，他教授各種技術課程，包括編程、數據庫設計和 web 開發。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"scientific-computing-with-python-projects": {
|
"scientific-computing-with-python-projects": {
|
||||||
"title": "Python 与科学计算项目",
|
"title": "Python 與科學計算項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"是时候测试一下你的 Python 技术了。通过完成这些项目，你可以证明和展示自己已经掌握了 Python 基础知识，并能获得认证。"
|
"是時候測試一下你的 Python 技術了。通過完成這些項目，你可以證明和展示自己已經掌握了 Python 基礎知識，並能獲得認證。"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"data-analysis-with-python": {
|
"data-analysis-with-python": {
|
||||||
"title": "Python 和数据分析",
|
"title": "Python 和數據分析",
|
||||||
"intro": [
|
"intro": [
|
||||||
"数据分析已经存在很长时间了。但是直到几年前，开发人员还是使用昂贵的闭源工具（如 Tableau）来做数据分析。如今，Python、SQL 和其他开放的库永远改变了数据分析领域。",
|
"數據分析已經存在很長時間了。但是直到幾年前，開發人員還是使用昂貴的閉源工具（如 Tableau）來做數據分析。如今，Python、SQL 和其他開放的庫永遠改變了數據分析領域。",
|
||||||
"在这个认证中，你会学习使用 Python 做数据分析的基础知识。然后，你会学习怎么从 CSV、SQL 等数据源读取数据，并且怎么使用 Numpy、Pandas、Matplotlib 和 Seaborn 等库来处理和可视化数据。"
|
"在這個認證中，你會學習使用 Python 做數據分析的基礎知識。然後，你會學習怎麼從 CSV、SQL 等數據源讀取數據，並且怎麼使用 Numpy、Pandas、Matplotlib 和 Seaborn 等庫來處理和可視化數據。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"data-analysis-with-python-course": {
|
"data-analysis-with-python-course": {
|
||||||
"title": "Python 和数据分析",
|
"title": "Python 和數據分析",
|
||||||
"intro": [
|
"intro": [
|
||||||
"在 Santiago Basulto 创建的这些综合视频课程中，你会学习整个数据分析的过程。你会从 CSV、SQL、Excel 读取数据，用 Numpy和 Pandas 来处理这些数据，以及使用 Matplotlib 和 Seaborn 来可视化数据。",
|
"在 Santiago Basulto 創建的這些綜合視頻課程中，你會學習整個數據分析的過程。你會從 CSV、SQL、Excel 讀取數據，用 Numpy和 Pandas 來處理這些數據，以及使用 Matplotlib 和 Seaborn 來可視化數據。",
|
||||||
"此外，你还可以通过完整的 Jupyter Notebook 课程和 Python 资料来刷新自己的编程技能。"
|
"此外，你還可以通過完整的 Jupyter Notebook 課程和 Python 資料來刷新自己的編程技能。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"numpy": {
|
"numpy": {
|
||||||
"title": "Numpy",
|
"title": "Numpy",
|
||||||
"intro": [
|
"intro": [
|
||||||
"通过下方 Keith Galli 创建的视频课程学习 NumPy 库基础知识。",
|
"通過下方 Keith Galli 創建的視頻課程學習 NumPy 庫基礎知識。",
|
||||||
"在这个课程中，你将学习如何使用 NumPy 以及它与 Python 内置列表的区别。你还将学习如何使用 NumPy 编程，以及索引、调整形状、应用统计信息等等知识。"
|
"在這個課程中，你將學習如何使用 NumPy 以及它與 Python 內置列表的區別。你還將學習如何使用 NumPy 編程，以及索引、調整形狀、應用統計信息等等知識。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"data-analysis-with-python-projects": {
|
"data-analysis-with-python-projects": {
|
||||||
"title": "Python 与数据分析",
|
"title": "Python 與數據分析",
|
||||||
"intro": [
|
"intro": [
|
||||||
"使用 Python 分析数据的方法很多。通过完成这些项目，你可以证明自己掌握了使用 Python 进行数据分析的基础知识。",
|
"使用 Python 分析數據的方法很多。通過完成這些項目，你可以證明自己掌握了使用 Python 進行數據分析的基礎知識。",
|
||||||
"完成所有项目，即可获得 Python 与数据分析认证。"
|
"完成所有項目，即可獲得 Python 與數據分析認證。"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -421,113 +421,113 @@
|
|||||||
"information-security": {
|
"information-security": {
|
||||||
"title": "信息安全",
|
"title": "信息安全",
|
||||||
"intro": [
|
"intro": [
|
||||||
"通过我们在线上的一切行为，我们的电子邮件地址、密码、电话号码等等大量敏感信息处于风险之中。",
|
"通過我們在線上的一切行爲，我們的電子郵件地址、密碼、電話號碼等等大量敏感信息處於風險之中。",
|
||||||
"通过信息安全认证，你将使用 HelmetJS 构建安全的 Web 应用程序，以学习信息安全的基础知识。",
|
"通過信息安全認證，你將使用 HelmetJS 構建安全的 Web 應用程序，以學習信息安全的基礎知識。",
|
||||||
"你还将使用 Python 构建一个 TCP 客户端以及一个 Nmap 和端口扫描程序，从而学习渗透测试的基础知识。渗透测试是良好信息安全的重要组成部分。"
|
"你還將使用 Python 構建一個 TCP 客戶端以及一個 Nmap 和端口掃描程序，從而學習滲透測試的基礎知識。滲透測試是良好信息安全的重要組成部分。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"information-security-with-helmetjs": {
|
"information-security-with-helmetjs": {
|
||||||
"title": "HelmetJS 与信息安全",
|
"title": "HelmetJS 與信息安全",
|
||||||
"intro": [
|
"intro": [
|
||||||
"这个课程的重点是 HelmetJS。HelmetJS 是一种用于基于 Express 的应用程序的中间件，可以自动设置 HTTP 标头。这样，它可以防止敏感信息被无意间在服务器和客户端之间传递。",
|
"這個課程的重點是 HelmetJS。HelmetJS 是一種用於基於 Express 的應用程序的中間件，可以自動設置 HTTP 標頭。這樣，它可以防止敏感信息被無意間在服務器和客戶端之間傳遞。",
|
||||||
"以下课程将帮助你了解如何保护你的网站免遭恶意攻击。"
|
"以下課程將幫助你瞭解如何保護你的網站免遭惡意攻擊。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"python-for-penetration-testing": {
|
"python-for-penetration-testing": {
|
||||||
"title": "Python 与渗透测试",
|
"title": "Python 與滲透測試",
|
||||||
"intro": [
|
"intro": [
|
||||||
"这些视频课程教你使用 Python 进行渗透测试。渗透测试（penetration testing）也叫作 “pen test”，它是对系统的模拟攻击，以检查漏洞。",
|
"這些視頻課程教你使用 Python 進行滲透測試。滲透測試（penetration testing）也叫作 “pen test”，它是對系統的模擬攻擊，以檢查漏洞。",
|
||||||
"在这个课程中，你将学习套接字、创建 TCP 服务器和客户端、构建 Nmap 扫描仪以及渗透测试人员日常使用的其他工具和技术。"
|
"在這個課程中，你將學習套接字、創建 TCP 服務器和客戶端、構建 Nmap 掃描儀以及滲透測試人員日常使用的其他工具和技術。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"information-security-projects": {
|
"information-security-projects": {
|
||||||
"title": "信息安全项目",
|
"title": "信息安全項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"现在是时候运用你的信息安全技能了。通过这些项目，你可以运用所学的信息安全技能、原理和概念。",
|
"現在是時候運用你的信息安全技能了。通過這些項目，你可以運用所學的信息安全技能、原理和概念。",
|
||||||
"完成后，您将拥有大量的信息安全项目，并获得认证，你可以向朋友、家人和雇主炫耀的证书。"
|
"完成後，您將擁有大量的信息安全項目，並獲得認證，你可以向朋友、家人和僱主炫耀的證書。"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"machine-learning-with-python": {
|
"machine-learning-with-python": {
|
||||||
"title": "Python 与机器学习",
|
"title": "Python 與機器學習",
|
||||||
"intro": [
|
"intro": [
|
||||||
"机器学习有许多实际应用程序，你可以在项目中或工作中使用它们。",
|
"機器學習有許多實際應用程序，你可以在項目中或工作中使用它們。",
|
||||||
"在这个认证中，你将使用 TensorFlow 框架构建多个神经网络，同时，你将探索更先进的技术，例如自然语言处理和强化学习。",
|
"在這個認證中，你將使用 TensorFlow 框架構建多個神經網絡，同時，你將探索更先進的技術，例如自然語言處理和強化學習。",
|
||||||
"你还将学习神经网络，并了解深度、递归和卷积神经网络背后的原理。"
|
"你還將學習神經網絡，並瞭解深度、遞歸和卷積神經網絡背後的原理。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"tensorflow": {
|
"tensorflow": {
|
||||||
"title": "Tensorflow",
|
"title": "Tensorflow",
|
||||||
"intro": [
|
"intro": [
|
||||||
"TensorFlow 是一个开源框架，使机器学习和神经网络更易于使用。",
|
"TensorFlow 是一個開源框架，使機器學習和神經網絡更易於使用。",
|
||||||
"以下视频课程是由 Tim Ruscica 创建的，也叫作 “Tech With Tim”。这个课程将帮助你了解 TensorFlow 及它的一些强大功能。"
|
"以下視頻課程是由 Tim Ruscica 創建的，也叫作 “Tech With Tim”。這個課程將幫助你瞭解 TensorFlow 及它的一些強大功能。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"how-neural-networks-work": {
|
"how-neural-networks-work": {
|
||||||
"title": "神经网络如何工作",
|
"title": "神經網絡如何工作",
|
||||||
"intro": [
|
"intro": [
|
||||||
"神经网络是如今我们所谓的人工智能的核心。但是从历史上看，它们一直很难理解，特别是对于机器学习领域的初学者来说。",
|
"神經網絡是如今我們所謂的人工智能的核心。但是從歷史上看，它們一直很難理解，特別是對於機器學習領域的初學者來說。",
|
||||||
"即使你刚开始学习神经网络，Brandon Rohrer 的这些视频课程也可以帮助你熟悉它的概念和它背后的数学知识。"
|
"即使你剛開始學習神經網絡，Brandon Rohrer 的這些視頻課程也可以幫助你熟悉它的概念和它背後的數學知識。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"machine-learning-with-python-projects": {
|
"machine-learning-with-python-projects": {
|
||||||
"title": "Python 与机器学习项目",
|
"title": "Python 與機器學習項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"机器学习有许多实际应用。通过完成这些免费且具有挑战性的编程项目，你可以证明自己掌握了机器学习基础知识，并获得认证。"
|
"機器學習有許多實際應用。通過完成這些免費且具有挑戰性的編程項目，你可以證明自己掌握了機器學習基礎知識，並獲得認證。"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"coding-interview-prep": {
|
"coding-interview-prep": {
|
||||||
"title": "面试攻略",
|
"title": "面試攻略",
|
||||||
"intro": [
|
"intro": [
|
||||||
"如果你正在寻找免费的编程训练来帮你为下一个工作面试做准备，我们已经帮你准备好了。",
|
"如果你正在尋找免費的編程訓練來幫你爲下一個工作面試做準備，我們已經幫你準備好了。",
|
||||||
"这一部分包含了大量编程挑战，可以测试你的算法、数据结构和数学知识。这里还有一些你可以在家慢慢做的项目，用于提升你的技术，或者丰富你的作品集。"
|
"這一部分包含了大量編程挑戰，可以測試你的算法、數據結構和數學知識。這裏還有一些你可以在家慢慢做的項目，用於提升你的技術，或者豐富你的作品集。"
|
||||||
],
|
],
|
||||||
"blocks": {
|
"blocks": {
|
||||||
"algorithms": {
|
"algorithms": {
|
||||||
"title": "算法",
|
"title": "算法",
|
||||||
"intro": [
|
"intro": [
|
||||||
"这些免费的编程练习将教你一些现实生活中可能会遇到的常见算法。它们是提高你的逻辑和编程技能的绝佳机会。",
|
"這些免費的編程練習將教你一些現實生活中可能會遇到的常見算法。它們是提高你的邏輯和編程技能的絕佳機會。",
|
||||||
"这些算法经常在工作面试中被用来测试候选人的技能。我们将为你提供简洁明了的解释，说明不同算法是如何运行的，以便你为每道算法题目编写解决方案。"
|
"這些算法經常在工作面試中被用來測試候選人的技能。我們將爲你提供簡潔明瞭的解釋，說明不同算法是如何運行的，以便你爲每道算法題目編寫解決方案。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"data-structures": {
|
"data-structures": {
|
||||||
"title": "数据结构",
|
"title": "數據結構",
|
||||||
"intro": [
|
"intro": [
|
||||||
"这些免费的编程课程旨在帮助你处理可能你还不太熟悉的大型的、复杂的数据结构。",
|
"這些免費的編程課程旨在幫助你處理可能你還不太熟悉的大型的、複雜的數據結構。",
|
||||||
"通过下面的课程，你将学习不同类型的数据结构，并通过算法来增强你对它们的理解。"
|
"通過下面的課程，你將學習不同類型的數據結構，並通過算法來增強你對它們的理解。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"take-home-projects": {
|
"take-home-projects": {
|
||||||
"title": "私人项目",
|
"title": "私人項目",
|
||||||
"intro": [
|
"intro": [
|
||||||
"人们在编程面试的时候通常都是很紧张的。有时求职者会拿到一个带回家的项目，在面试之外完成它。这种类型的面试通常需要求职者做大量工作，但对于雇主来说，这是查看你在工作中表现如何的好方法。",
|
"人們在編程面試的時候通常都是很緊張的。有時求職者會拿到一個帶回家的項目，在面試之外完成它。這種類型的面試通常需要求職者做大量工作，但對於僱主來說，這是查看你在工作中表現如何的好方法。",
|
||||||
"通过下方的额外的编程项目，进行更多练习。慢慢来，做得好一点，然后将它们放在你的简历或作品集中，以向潜在的雇主展示。"
|
"通過下方的額外的編程項目，進行更多練習。慢慢來，做得好一點，然後將它們放在你的簡歷或作品集中，以向潛在的僱主展示。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"rosetta-code": {
|
"rosetta-code": {
|
||||||
"title": "罗塞塔代码",
|
"title": "羅塞塔代碼",
|
||||||
"intro": [
|
"intro": [
|
||||||
"通过完成经典的罗塞塔代码库中的这些免费编程任务来提升你的创造性问题解决能力。",
|
"通過完成經典的羅塞塔代碼庫中的這些免費編程任務來提升你的創造性問題解決能力。",
|
||||||
"这些挑战可能很困难，但是它们会将进一步提升你的算法逻辑。"
|
"這些挑戰可能很困難，但是它們會將進一步提升你的算法邏輯。"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"project-euler": {
|
"project-euler": {
|
||||||
"title": "欧拉计划",
|
"title": "歐拉計劃",
|
||||||
"intro": [
|
"intro": [
|
||||||
"完成下方来自欧拉计划的编程挑战，这将强化你的算法和数学知识。",
|
"完成下方來自歐拉計劃的編程挑戰，這將強化你的算法和數學知識。",
|
||||||
"这些问题的难度很大，对于许多人来说，这是一个归纳性学习的过程。也就是说，通过解决一个问题，你将接触到一个新概念，然后你可以解决自己以前无法解决的问题。你能完成全部挑战吗？"
|
"這些問題的難度很大，對於許多人來說，這是一個歸納性學習的過程。也就是說，通過解決一個問題，你將接觸到一個新概念，然後你可以解決自己以前無法解決的問題。你能完成全部挑戰嗎？"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"misc-text": {
|
"misc-text": {
|
||||||
"certification": "{{cert}} 认证",
|
"certification": "{{cert}} 認證",
|
||||||
"browse-other": "浏览我们的其他免费认证\n（我们建议你按顺序学习）",
|
"browse-other": "瀏覽我們的其他免費認證\n（我們建議你按順序學習）",
|
||||||
"courses": "课程",
|
"courses": "課程",
|
||||||
"expand": "展开",
|
"expand": "展開",
|
||||||
"collapse": "折叠"
|
"collapse": "摺疊"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
{
|
{
|
||||||
"title": "免费学习编程 - Python、JavaScript、Java、Git 等",
|
"title": "免費學習編程 - Python、JavaScript、Java、Git 等",
|
||||||
"description": "freeCodeCamp 是一个免费学习编程的开发者社区，涵盖 Python、HTML、CSS、React、Vue、BootStrap、JSON 教程等，还有活跃的技术论坛和丰富的社区活动，在你学习编程和找工作时为你提供建议和帮助。",
|
"description": "freeCodeCamp 是一個免費學習編程的開發者社區，涵蓋 Python、HTML、CSS、React、Vue、BootStrap、JSON 教程等，還有活躍的技術論壇和豐富的社區活動，在你學習編程和找工作時爲你提供建議和幫助。",
|
||||||
"social-description": "免费学习编程",
|
"social-description": "免費學習編程",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"freecodecamp",
|
"freecodecamp",
|
||||||
"编程",
|
"編程",
|
||||||
"前端",
|
"前端",
|
||||||
"后端",
|
"後端",
|
||||||
"程序员",
|
"程序員",
|
||||||
"python",
|
"python",
|
||||||
"javascript",
|
"javascript",
|
||||||
"git",
|
"git",
|
||||||
@ -18,10 +18,10 @@
|
|||||||
"bootstrap",
|
"bootstrap",
|
||||||
"react",
|
"react",
|
||||||
"vue",
|
"vue",
|
||||||
"网站",
|
"網站",
|
||||||
"web",
|
"web",
|
||||||
"开发",
|
"開發",
|
||||||
"课程"
|
"課程"
|
||||||
],
|
],
|
||||||
"youre-unsubscribed": "你已取消订阅"
|
"youre-unsubscribed": "你已取消訂閱"
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,19 +1,19 @@
|
|||||||
{
|
{
|
||||||
"article0title": "Golang Benchmark",
|
"article0title": "Golang Benchmark",
|
||||||
"article0link": "https://chinese.freecodecamp.org/news/golang-benchmark/",
|
"article0link": "https://chinese.freecodecamp.org/news/golang-benchmark/",
|
||||||
"article1title": "树莓派",
|
"article1title": "樹莓派",
|
||||||
"article1link": "https://chinese.freecodecamp.org/news/build-a-personal-dev-server-on-a-5-dollar-raspberry-pi/",
|
"article1link": "https://chinese.freecodecamp.org/news/build-a-personal-dev-server-on-a-5-dollar-raspberry-pi/",
|
||||||
"article2title": "如何发布一个网站",
|
"article2title": "如何發佈一個網站",
|
||||||
"article2link": "https://chinese.freecodecamp.org/news/publish-a-no-code-website-in-10-minutes/",
|
"article2link": "https://chinese.freecodecamp.org/news/publish-a-no-code-website-in-10-minutes/",
|
||||||
"article3title": "PWA 入门与实践",
|
"article3title": "PWA 入門與實踐",
|
||||||
"article3link": "https://chinese.freecodecamp.org/news/a-brief-introduction-to-pwa/",
|
"article3link": "https://chinese.freecodecamp.org/news/a-brief-introduction-to-pwa/",
|
||||||
"article4title": "Git 删除分支",
|
"article4title": "Git 刪除分支",
|
||||||
"article4link": "https://chinese.freecodecamp.org/news/how-to-delete-a-git-branch-both-locally-and-remotely/",
|
"article4link": "https://chinese.freecodecamp.org/news/how-to-delete-a-git-branch-both-locally-and-remotely/",
|
||||||
"article5title": "NPM 教程",
|
"article5title": "NPM 教程",
|
||||||
"article5link": "https://chinese.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/",
|
"article5link": "https://chinese.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/",
|
||||||
"article6title": "前端开发学习路线",
|
"article6title": "前端開發學習路線",
|
||||||
"article6link": "https://chinese.freecodecamp.org/news/map-of-learning-front-end/",
|
"article6link": "https://chinese.freecodecamp.org/news/map-of-learning-front-end/",
|
||||||
"article7title": "谷歌小恐龙",
|
"article7title": "谷歌小恐龍",
|
||||||
"article7link": "https://chinese.freecodecamp.org/news/do-you-know-the-chrome-dino-game-millions-of-people-are-playing/",
|
"article7link": "https://chinese.freecodecamp.org/news/do-you-know-the-chrome-dino-game-millions-of-people-are-playing/",
|
||||||
"article8title": "GraphQL 教程",
|
"article8title": "GraphQL 教程",
|
||||||
"article8link": "https://chinese.freecodecamp.org/news/a-detailed-guide-to-graphql/",
|
"article8link": "https://chinese.freecodecamp.org/news/a-detailed-guide-to-graphql/",
|
||||||
@ -21,9 +21,9 @@
|
|||||||
"article9link": "https://chinese.freecodecamp.org/news/an-introduction-to-webpack-multi-entry-configuration/",
|
"article9link": "https://chinese.freecodecamp.org/news/an-introduction-to-webpack-multi-entry-configuration/",
|
||||||
"article10title": "TypeScript",
|
"article10title": "TypeScript",
|
||||||
"article10link": "https://chinese.freecodecamp.org/news/why-should-you-use-typescript/",
|
"article10link": "https://chinese.freecodecamp.org/news/why-should-you-use-typescript/",
|
||||||
"article11title": "Web 开发工程师",
|
"article11title": "Web 開發工程師",
|
||||||
"article11link": "https://chinese.freecodecamp.org/news/the-practical-guide-to-becoming-a-professional-web-developer/",
|
"article11link": "https://chinese.freecodecamp.org/news/the-practical-guide-to-becoming-a-professional-web-developer/",
|
||||||
"article12title": "提交第一个 PR",
|
"article12title": "提交第一個 PR",
|
||||||
"article12link": "https://chinese.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github/",
|
"article12link": "https://chinese.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github/",
|
||||||
"article13title": "Express ES6 支持",
|
"article13title": "Express ES6 支持",
|
||||||
"article13link": "https://chinese.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express/",
|
"article13link": "https://chinese.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express/",
|
||||||
@ -31,32 +31,32 @@
|
|||||||
"article14link": "https://chinese.freecodecamp.org/news/sorting-in-python/",
|
"article14link": "https://chinese.freecodecamp.org/news/sorting-in-python/",
|
||||||
"article15title": "React 作品集",
|
"article15title": "React 作品集",
|
||||||
"article15link": "https://chinese.freecodecamp.org/news/portfolio-app-using-react/",
|
"article15link": "https://chinese.freecodecamp.org/news/portfolio-app-using-react/",
|
||||||
"article16title": "JS 隐式类型转换",
|
"article16title": "JS 隱式類型轉換",
|
||||||
"article16link": "https://chinese.freecodecamp.org/news/javascript-implicit-type-conversion/",
|
"article16link": "https://chinese.freecodecamp.org/news/javascript-implicit-type-conversion/",
|
||||||
"article17title": "Deno 入门手册",
|
"article17title": "Deno 入門手冊",
|
||||||
"article17link": "https://chinese.freecodecamp.org/news/the-deno-handbook-with-examples/",
|
"article17link": "https://chinese.freecodecamp.org/news/the-deno-handbook-with-examples/",
|
||||||
"article18title": "前端和后端的区别",
|
"article18title": "前端和後端的區別",
|
||||||
"article18link": "https://chinese.freecodecamp.org/news/front-end-developer-vs-back-end-developer-definition-and-meaning-in-practice/",
|
"article18link": "https://chinese.freecodecamp.org/news/front-end-developer-vs-back-end-developer-definition-and-meaning-in-practice/",
|
||||||
"article19title": "JS 函数的 this 指向",
|
"article19title": "JS 函數的 this 指向",
|
||||||
"article19link": "https://chinese.freecodecamp.org/news/javascript-this/",
|
"article19link": "https://chinese.freecodecamp.org/news/javascript-this/",
|
||||||
"article20title": "GitHub Pages 部署网页",
|
"article20title": "GitHub Pages 部署網頁",
|
||||||
"article20link": "https://chinese.freecodecamp.org/news/create-a-free-static-site-with-github-pages-in-10-minutes/",
|
"article20link": "https://chinese.freecodecamp.org/news/create-a-free-static-site-with-github-pages-in-10-minutes/",
|
||||||
"article21title": "第一门编程语言",
|
"article21title": "第一門編程語言",
|
||||||
"article21link": "https://chinese.freecodecamp.org/news/what-programming-language-should-i-learn-first/",
|
"article21link": "https://chinese.freecodecamp.org/news/what-programming-language-should-i-learn-first/",
|
||||||
"article22title": "配置 VS Code",
|
"article22title": "配置 VS Code",
|
||||||
"article22link": "https://chinese.freecodecamp.org/news/how-to-set-up-vscode-to-improve-your-productivity/",
|
"article22link": "https://chinese.freecodecamp.org/news/how-to-set-up-vscode-to-improve-your-productivity/",
|
||||||
"article23title": "前端学习路线",
|
"article23title": "前端學習路線",
|
||||||
"article23link": "https://chinese.freecodecamp.org/news/map-of-learning-front-end/",
|
"article23link": "https://chinese.freecodecamp.org/news/map-of-learning-front-end/",
|
||||||
"article24title": "自学编程",
|
"article24title": "自學編程",
|
||||||
"article24link": "https://chinese.freecodecamp.org/news/first-line-of-code-to-226k-job-offer-in-8-months/",
|
"article24link": "https://chinese.freecodecamp.org/news/first-line-of-code-to-226k-job-offer-in-8-months/",
|
||||||
"article25title": "Java",
|
"article25title": "Java",
|
||||||
"article25link": "https://chinese.freecodecamp.org/news/java-you-have-not-know-about/",
|
"article25link": "https://chinese.freecodecamp.org/news/java-you-have-not-know-about/",
|
||||||
"article26title": "React 学习手册",
|
"article26title": "React 學習手冊",
|
||||||
"article26link": "https://chinese.freecodecamp.org/news/the-react-handbook/",
|
"article26link": "https://chinese.freecodecamp.org/news/the-react-handbook/",
|
||||||
"article27title": "JSON 文件注释",
|
"article27title": "JSON 文件註釋",
|
||||||
"article27link": "https://chinese.freecodecamp.org/news/json-comment/",
|
"article27link": "https://chinese.freecodecamp.org/news/json-comment/",
|
||||||
"article28title": "Canvas 动画",
|
"article28title": "Canvas 動畫",
|
||||||
"article28link": "https://chinese.freecodecamp.org/news/canvas-animation-performance-optimization-practice/",
|
"article28link": "https://chinese.freecodecamp.org/news/canvas-animation-performance-optimization-practice/",
|
||||||
"article29title": "JWT 授权和认证",
|
"article29title": "JWT 授權和認證",
|
||||||
"article29link": "https://chinese.freecodecamp.org/news/java-spring-boot-jwt-authorization-and-authentication/"
|
"article29link": "https://chinese.freecodecamp.org/news/java-spring-boot-jwt-authorization-and-authentication/"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,46 @@
|
|||||||
|
---
|
||||||
|
id: 587d774c367417b2b2512a9c
|
||||||
|
title: 爲視覺障礙用戶添加替代圖像的文本
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||||
|
forumTopicId: 16628
|
||||||
|
dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在其他挑戰裏你應該已經見到過 `img` 標籤的 `alt` 屬性了。 `alt` 屬性中的文本來描述圖片內容，作爲備用文字。 `alt` 屬性可以幫助用戶在圖片加載失敗或者不可見的情況下理解圖片內容， 搜索引擎也通過它來理解圖片內容，並將其加入到搜索結果中。 例如：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="importantLogo.jpeg" alt="Company logo">
|
||||||
|
```
|
||||||
|
|
||||||
|
視覺障礙用戶無法通過視覺獲取信息，而是通過屏幕閱讀器將網頁內容轉換爲音頻以獲取信息。 他們無法通過直觀的呈現理解信息。 屏幕閱讀器可以識別 `alt` 屬性，朗讀其中的內容，來告知用戶圖片包含的關鍵信息。
|
||||||
|
|
||||||
|
`alt` 文本可以爲屏幕閱讀器提供圖片的描述信息， 所以你應始終爲圖片添加 `alt` 屬性。 另外，根據最新的 HTML5 標準，爲圖片添加這個屬性是必須的。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
碰巧，Camper Cat 是忍者中寫代碼最厲害的，他正在建立一個可以分享忍者知識的網站。 他打算使用的個人資料圖片可以展示他的技能，且應得到所有網站訪問者的讚賞。 請給 `img` 標籤添加一個 `alt` 屬性，說明 Camper Cat 正在學習空手道 （圖片的 `src` 屬性指向的是一個不存在的文件，因此你會看到 `alt` 屬性中的文本出現在頁面上）
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`img` 標籤應該包含一個非空的 `alt` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').attr('alt'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="doingKarateWow.jpeg">
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
|
||||||
|
```
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
---
|
||||||
|
id: 587d778b367417b2b2512aa8
|
||||||
|
title: 添加可訪問的日期選擇器
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
|
||||||
|
forumTopicId: 301008
|
||||||
|
dashedName: add-an-accessible-date-picker
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
表單中經常出現 `input` 標籤，它可以用來創建多種表單控件。 它的 `type` 屬性指定了所要創建的 `input` 標籤類型。
|
||||||
|
|
||||||
|
在以前的挑戰中，我們已經見過 `text` 與 `submit` 類型的 input 標籤。 HTML5 規範添加了 `date` 類型來創建日期選擇器。 如果瀏覽器支持，在點擊 `input` 標籤時，日期選擇器會顯示出來，這讓用戶填寫表單變得更加容易。
|
||||||
|
|
||||||
|
對於較老的瀏覽器，類型將默認爲 `text`， 這樣它可以通過 `label` 或 `placeholder` 文本向用戶顯示預期的日期格式。
|
||||||
|
|
||||||
|
舉個例子：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<label for="input1">Enter a date:</label>
|
||||||
|
<input type="date" id="input1" name="input1">
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 想舉辦一場比武大會，他想收集參賽者的最佳參賽時間。 請爲 Camper Cat 的頁面添加一個`input` 標籤，起 `type` 屬性值爲 `date`，`id` 屬性爲 `pickdate`，`name` 屬性爲 `date`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
日期選擇器應有一個 `input` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('input').length == 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
`input` 標籤應有一個值爲 `date` 的 `type` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('input').attr('type') == 'date');
|
||||||
|
```
|
||||||
|
|
||||||
|
`input` 標籤應有一個值爲 `pickdate` 的 `id` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('input').attr('id') == 'pickdate');
|
||||||
|
```
|
||||||
|
|
||||||
|
`input` 標籤應有一個值爲 `date` 的 `name` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('input').attr('name') == 'date');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2>Mortal Kombat Tournament Survey</h2>
|
||||||
|
<form>
|
||||||
|
<p>Tell us the best date for the competition</p>
|
||||||
|
<label for="pickdate">Preferred Date:</label>
|
||||||
|
|
||||||
|
<!-- Only change code below this line -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Only change code above this line -->
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2>Mortal Kombat Tournament Survey</h2>
|
||||||
|
<form>
|
||||||
|
<p>Tell us the best date for the competition</p>
|
||||||
|
<label for="pickdate">Preferred Date:</label>
|
||||||
|
<input type="date" id="pickdate" name="date">
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
---
|
||||||
|
id: 587d778f367417b2b2512aad
|
||||||
|
title: >-
|
||||||
|
考慮色盲用戶的需求仔細選擇傳達信息的顏色
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c437as3'
|
||||||
|
forumTopicId: 301011
|
||||||
|
dashedName: >-
|
||||||
|
avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
色盲的形式有很多種， 它的表現可以從對特定波長光波的感知度較低，到完全無法看到顏色。 最常見的形式是對綠色的低感知度。
|
||||||
|
|
||||||
|
例如，如果內容的前景色與背景色是兩種相近的綠色，那麼色盲用戶可能會無法區分它們。 色輪上距離較近的顏色，特別是相鄰的顏色，看起來都會很難區分。 在表示重要信息的時候應避免使用這類相近顏色的組合。
|
||||||
|
|
||||||
|
**注意：**一些在線顏色選擇器有色盲模擬功能，可以模擬顏色在不同形式的色盲中所呈現的效果。 它們和在線對比度檢查器一樣，都是很好的工具。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 正在測試一個重要按鈕的不同樣式。 在色輪上，用於 `background-color` 的黃色（`#FFFF33`）和用於 `color` 的綠色（`#33FF33`）是相鄰的色調，一些色盲用戶幾乎無法區分它們 （而且這兩個顏色的亮度相近，對比度太小。） 爲了解決這兩個問題，請將文本的 `color` 修改爲深藍色（`#003366`）。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`button` 內容文本的 `color` 屬性值應爲深藍色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
color: #33FF33;
|
||||||
|
background-color: #FFFF33;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Danger!</h1>
|
||||||
|
</header>
|
||||||
|
<button>Delete Internet</button>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
color: #003366;
|
||||||
|
background-color: #FFFF33;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Danger!</h1>
|
||||||
|
</header>
|
||||||
|
<button>Delete Internet</button>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
---
|
||||||
|
id: 587d778f367417b2b2512aac
|
||||||
|
title: 考慮色盲用戶的需求設置合適的對比度
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cmzMEUw'
|
||||||
|
forumTopicId: 301012
|
||||||
|
dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
顏色是可視化設計的重要組成部分，但是使用顏色也引入了兩個可訪問性問題。 首先，不能僅僅使用顏色作爲傳達重要信息的唯一方式，因爲屏幕閱讀器無法獲取這些信息。 其次，前景色與背景色需要有足夠的對比度，這樣色盲用戶纔可以區分它們。
|
||||||
|
|
||||||
|
在之前的挑戰中，我們用文本備用方案解決了第一個問題。 在上一個挑戰中，我們使用對比度檢測工具解決了第二個問題。 WCAG 建議爲顏色及灰度組合使用 4.5:1 的對比度。
|
||||||
|
|
||||||
|
色盲用戶無法將一些顏色與另一些顏色區分出來，這通常是因爲色調，有時候是因爲亮度。 你可能還記得，對比度是用前景色與背景色的相對亮度計算的。
|
||||||
|
|
||||||
|
實踐中，在對比度檢測工具的幫助下，我們可以通過將較暗的顏色變暗、將較淡的顏色變淡的方法來使對比度達到 4.5:1。 在色輪中，較暗的顏色通常是藍色、紫色、洋紅和紅色，而較淡的顏色通常是橙色、黃色、綠色和藍綠色。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 正在嘗試爲他的博客文本與背景配置顏色。 他目前使用的組合是綠色的 `background-color` 與栗色的 `color`，它們的對比度爲 2.5:1。 這樣，通過修改 `hsl()` 屬性的第三個參數，我們可以很輕鬆地調整顏色的亮度。 請將 `background-color` 的亮度從 35% 增加到 55%，將 `color` 的亮度從 20% 減少到 15%， 這樣可以使對比度達到 5.9:1。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應將 `color` 屬性的亮度值設置爲 15%。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
應將 `background-color` 屬性的亮度值設置爲 55%。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: hsl(0, 55%, 20%);
|
||||||
|
background-color: hsl(120, 25%, 35%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: hsl(0, 55%, 15%);
|
||||||
|
background-color: hsl(120, 25%, 55%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
---
|
||||||
|
id: 587d778f367417b2b2512aae
|
||||||
|
title: 爲鏈接添加描述性的文本
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c437DcV'
|
||||||
|
forumTopicId: 301013
|
||||||
|
dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
屏幕閱讀器用戶可以選擇其設備讀取的內容的類型， 包括表示“跳轉到”（或“跳過”）的元素，跳轉到主要內容，或者從標題中獲取頁面摘要。 用戶還可以選擇只聽取頁面中的超鏈接內容。
|
||||||
|
|
||||||
|
屏幕閱讀器通過閱讀鏈接文本（即 `a` 標籤的內容文本）來完成這個操作。 如果我們只在鏈接中寫上 "click here"（點擊這裏）或者 "read more"（閱讀更多），顯然幫助有限。 相反地，應該在 `a` 標籤中使用簡潔的描述性語言來爲用戶提供更多的信息。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 在鏈接中使用的文本在脫離上下文的情況下，描述性不是很好。 請修改錨點標籤（`a`），將其包含的文本從 `Click here` 改爲 `information about batteries`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應修改 `a` 標籤，將其包含的文本從 `Click here` 改爲 `information about batteries`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('a')
|
||||||
|
.text()
|
||||||
|
.match(/^(information about batteries)$/g)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`a` 元素應該有一個 `href` 屬性，且其屬性值爲空字符串 `""`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('a').attr('href') === '');
|
||||||
|
```
|
||||||
|
|
||||||
|
`a` 元素應該有一個結束標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/a>/g) &&
|
||||||
|
code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
---
|
||||||
|
id: 587d7789367417b2b2512aa4
|
||||||
|
title: 使用 audio 元素提高音頻內容的可訪問性
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
|
||||||
|
forumTopicId: 301014
|
||||||
|
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
HTML5 的 `audio` 標籤用於呈現音頻內容或音頻流，它也具有語義化特性。 音頻內容也需要備用文本，供聾啞人或聽力困難的人使用。 這可以通過頁面上的文本或與字幕鏈接來實現。
|
||||||
|
|
||||||
|
`audio` 標籤支持 `controls` 屬性， 用於顯示瀏覽器默認播放、停止和其他控制，以及支持鍵盤功能。 這是一個布爾值屬性，意味着它不需要一個值，它在標籤上存在即開啓設置。
|
||||||
|
|
||||||
|
舉個例子：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<audio id="meowClip" controls>
|
||||||
|
<source src="audio/meow.mp3" type="audio/mpeg">
|
||||||
|
<source src="audio/meow.ogg" type="audio/ogg">
|
||||||
|
</audio>
|
||||||
|
```
|
||||||
|
|
||||||
|
**注意：**多媒體內容通常同時包含音頻與視頻部分， 它需要同步的字幕，使視覺或聽覺障礙用戶可以獲取它的內容。 一般情況下，網頁開發者不負責創建字幕或逐字稿，但是需要將它們添加到多媒體中。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
是時候讓 Camper Cat 休息一下，並與朋友 Zersiax (@zersiax) 會面了。 Zersiax 是一位屏幕閱讀器用戶，同時也是無障礙設計的高手。 爲了體驗屏幕閱讀器的朗讀效果，請在 `p` 標籤之後添加一個 `audio` 標籤， 具有 `controls` 屬性。 然後在 `audio` 標籤裏面放一個帶有 `src` 屬性的 `source` 標籤，屬性值爲 `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`。將 `type` 屬性設置爲 `"audio/mpeg"`.
|
||||||
|
|
||||||
|
**注意：**音頻片段的播放速度可能會快到令我們難以理解，但是對於屏幕閱讀器用戶來說這是正常速度。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應該包含一個 `audio` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('audio').length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
確保 `audio` 元素有結束標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/audio>/g).length === 1 &&
|
||||||
|
code.match(/<audio.*>[\s\S]*<\/audio>/g)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`audio` 標籤應存在 `controls` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('audio').attr('controls'));
|
||||||
|
```
|
||||||
|
|
||||||
|
代碼中應存在 `source` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('source').length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`source` 標籤應位於 `audio` 標籤中。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('audio').children('source').length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`source` 標籤中 `src` 的屬性值應該與教程中的鏈接一致。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('source').attr('src') ===
|
||||||
|
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`source` 標籤中應具有 `type` 屬性，其屬性值應爲 audio/mpeg。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('source').attr('type') === 'audio/mpeg');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Real Coding Ninjas</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Real Coding Ninjas</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||||
|
<audio controls>
|
||||||
|
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
|
||||||
|
</audio>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
---
|
||||||
|
id: 587d778a367417b2b2512aa5
|
||||||
|
title: 使用 figure 元素提高圖表的可訪問性
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
||||||
|
forumTopicId: 301015
|
||||||
|
dashedName: improve-chart-accessibility-with-the-figure-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
HTML5 引入了 `figure` 標籤以及與之相關的 `figcaption` 標籤。 它們一起用於展示可視化信息（如：圖片、圖表）及其標題。 這樣通過語義化對內容進行分組並配以用於解釋 `figure` 的文字，可以極大地提升內容的可訪問性。
|
||||||
|
|
||||||
|
對於圖表之類的可視化數據，標題可以爲屏幕閱讀器用戶提供簡要的說明。 但是這裏有一個難點，如何爲屏幕閱讀器用戶展示那些超出屏幕可視範圍（使用 CSS）的表格所表現的圖表數據。
|
||||||
|
|
||||||
|
舉個例子，注意 `figcaption` 包含在 `figure` 標籤中，並且可以與其他標籤組合使用：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<figure>
|
||||||
|
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
|
||||||
|
<br>
|
||||||
|
<figcaption>
|
||||||
|
Master Camper Cat demonstrates proper form of a roundhouse kick.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 正在努力創建一張條形圖，用來顯示每週用於隱形、戰鬥、武器訓練的時間。 請幫助完善他的頁面，將他用於呈現圖表的 `div` 標籤修改爲 `figure` 標籤；將用於呈現圖表標題的 `p` 標籤改爲 `figcaption` 標籤。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應存在一個 `figure` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('figure').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
應存在一個 `figcaption` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('figcaption').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應存在 `div` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應存在 `p` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
`figcaption` 應爲 `figure` 的子標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('figure').children('figcaption').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
確保 `figure` 元素有結束標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/figure>/g) &&
|
||||||
|
code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<!-- Only change code below this line -->
|
||||||
|
<div>
|
||||||
|
<!-- Stacked bar chart will go here -->
|
||||||
|
<br>
|
||||||
|
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Only change code above this line -->
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<figure>
|
||||||
|
<!-- Stacked bar chart will go here -->
|
||||||
|
<br>
|
||||||
|
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
id: 587d778a367417b2b2512aa6
|
||||||
|
title: 使用 label 元素提高表單的可訪問性
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cGJMMAN'
|
||||||
|
forumTopicId: 301016
|
||||||
|
dashedName: improve-form-field-accessibility-with-the-label-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
合理地使用語義化的 HTML 標籤和屬性可以提升頁面可訪問性。 在接下來的挑戰中，你將會看到在表單中使用屬性的場景。
|
||||||
|
|
||||||
|
`label` 標籤的文本內容通常會是表單組件的名稱或標籤。 這些文本表明了組件的意義，也提升了表單的可訪問性。 `label` 標籤的 `for` 屬性將標籤與表單組件綁定；同時，屏幕閱讀器也會讀取 `for` 屬性的屬性值。
|
||||||
|
|
||||||
|
在 HTML 基礎章節中，我們已經學習使用了單選按鈕標籤。 在那個挑戰中，爲了讓標籤可以在點擊的時候也選中輸入框，我們將單選按鈕 input 標籤嵌套在了 `label` 標籤裏面。 在本節課程中，我們介紹了另外一種實現這個功能的方法，那就是使用 `for` 屬性。
|
||||||
|
|
||||||
|
`for` 的屬性值必須與表單組件的 `id` 屬性值相同。 舉個例子：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form>
|
||||||
|
<label for="name">Name:</label>
|
||||||
|
<input type="text" id="name" name="name">
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 覺得他的博客文章會有很多人訂閱，因此他想添加一個電子郵件註冊表單。 請爲表示電子郵件的 `label` 標籤添加 `for` 屬性，並將其屬性值設置爲與 `input` 標籤的 `id` 屬性值相同。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`label`標籤應該有一個非空的 `for` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('label').attr('for'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`for` 的屬性值應與用於輸入郵箱的 `input` 標籤 `id` 屬性值相同。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('label').attr('for') == 'email');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
|
||||||
|
|
||||||
|
<label>Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
|
||||||
|
|
||||||
|
<label for="email">Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
---
|
||||||
|
id: 587d778e367417b2b2512aab
|
||||||
|
title: 使用高對比度文本提高可讀性
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cKb3nCq'
|
||||||
|
forumTopicId: 301017
|
||||||
|
dashedName: improve-readability-with-high-contrast-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
低對比度的前景色與背景色會使文本難以閱讀。 足夠的對比度可以提高內容的可讀性，但是怎樣的對比度纔算是“足夠”的？
|
||||||
|
|
||||||
|
Web 內容無障礙指南（WCAG）建議正常文本的對比度至少爲 4.5 : 1。 對比度是通過比較兩種顏色的相對亮度值來計算的。 對比度的範圍是從相同顏色的 1:1（無對比度）到白色與黑色的最高對比度 21:1。 在線可用的對比檢查工具很多，可以計算這個比率。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 爲他的博客選擇了白色背景和淺灰色文字，對比度爲 1.5:1，這使博客文章難以閱讀。 請將文字的 `color` 從當前的淺灰色（`#D3D3D3`）修改爲深灰色（`#636363`），以使對比度提升到 6:1。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應該將 `body` 的 `color` 修改爲深灰色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||||
|
```
|
||||||
|
|
||||||
|
不應修改 `body` 的 `background-color`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #D3D3D3;
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: #636363;
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||||
|
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||||
|
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
id: 587d774e367417b2b2512a9f
|
||||||
|
title: 使用 main 元素包裹主題內容
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
||||||
|
forumTopicId: 301018
|
||||||
|
dashedName: jump-straight-to-the-content-using-the-main-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
HTML5 引入了一些新元素，給予開發者更多的選擇，也包含輔助功能。 HTML5 引入了諸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新標籤。
|
||||||
|
|
||||||
|
默認情況下，瀏覽器呈現這些元素的方式類似於普通的 `div`。 但是，在適當的地方使用它們會讓標記文本具有更多的含義。 僅標籤名稱就可以表示它所包含的信息類型，這給內容增加了語義含義。 輔助技術可以獲取這種信息，爲用戶提供更好的頁面摘要或導航選項。
|
||||||
|
|
||||||
|
`main` 標籤用於呈現網頁的主體內容，且每個頁面應只有一個。 這是爲了圍繞與頁面中心主題相關的信息， 而不應包含如導航連接、網頁橫幅等需要在多個頁面中重複出現的內容。
|
||||||
|
|
||||||
|
`main` 標籤也有一個內嵌的特性，以便輔助技術快速定位到頁面的主體。 如果你在頁面頂部看到過“跳轉到主要內容”鏈接，那麼使用 `main` 標籤會自動讓輔助設備具有這個跳轉的功能。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 對他的忍者武器頁面有一些新的想法。 請幫他在 `header` 標籤和 `footer` 標籤（在接下來的挑戰中會詳細介紹）之間添加一個有開始和結束標記的 `main` 標籤。 現在保持 `main` 標籤爲空。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應存在一個 `main` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('main').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`main` 標籤應位於 `header` 標籤與 `footer` 標籤之間。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<header>
|
||||||
|
<h1>Weapons of the Ninja</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<footer></footer>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<header>
|
||||||
|
<h1>Weapons of the Ninja</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer></footer>
|
||||||
|
```
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
---
|
||||||
|
id: 587d774c367417b2b2512a9d
|
||||||
|
title: 瞭解 Alt 文本留空的情景
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
||||||
|
forumTopicId: 301019
|
||||||
|
dashedName: know-when-alt-text-should-be-left-blank
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在上一個挑戰中，我們瞭解到 `img` 標籤必須有一個 `alt` 屬性。 但是，有時圖像通過它們的描述文本被歸類，或者只用於裝飾。 在這些情況下， `alt` 文本可能是多餘的或沒有必要的。
|
||||||
|
|
||||||
|
在圖片已經有了文字說明，或者僅僅爲了美化頁面的情況下，`img` 仍然需要一個 `alt` 屬性，但可以設置爲空字符串。 例如：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="visualDecoration.jpeg" alt="">
|
||||||
|
```
|
||||||
|
|
||||||
|
比如，背景圖片通常起裝飾作用。 但這些圖片通常都是通過 CSS 規則而非 HTML 引入的，因此屏幕閱讀器毋需讀取。
|
||||||
|
|
||||||
|
**注意：**對於有標題的圖片，依然需要添加 `alt` 文本，因爲這樣有助於搜索引擎記錄圖片內容。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 已經大體寫好了博客頁面。 他打算在他的兩篇文章之間添加一個武士劍裝飾圖片，作爲兩篇文章之間的分割線。 爲 `img` 標籤添加 `alt` 屬性，把它的屬性值設爲空 （注意：這裏圖片的 `src` 屬性提供的鏈接是無效的，因此頁面上不會顯示任何武士刀的圖片，不用擔心）。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`img` 標籤應具有 `alt` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!($('img').attr('alt') == undefined));
|
||||||
|
```
|
||||||
|
|
||||||
|
`alt` 的屬性值應爲空。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').attr('alt') == '');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>To Come...</p>
|
||||||
|
</article>
|
||||||
|
```
|
||||||
@ -0,0 +1,244 @@
|
|||||||
|
---
|
||||||
|
id: 587d778d367417b2b2512aaa
|
||||||
|
title: 使用自定義 CSS 讓元素僅對屏幕閱讀器可見
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
|
||||||
|
forumTopicId: 301020
|
||||||
|
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
到目前爲止，所有關於可訪問性的挑戰都沒有使用 CSS。 這是爲了在介紹視覺設計方面之前強調使用邏輯結構和有語義意義的標籤的重要性。
|
||||||
|
|
||||||
|
但如果我們想在頁面中添加一些只對屏幕閱讀器可見的內容，可以用 CSS 來實現。 當信息爲視覺格式（例如圖表）時，但屏幕閱讀器用戶需要備用文稿（例如表格）來訪問數據，在這種情況下， 使用 CSS 將屏幕的只讀元素放到瀏覽器窗口可視區域之外。
|
||||||
|
|
||||||
|
舉個例子：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
left: -10000px;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
top: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**注意：**以下的 CSS 解決方案與上面的結果不同：
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><code>display: none;</code> 或 <code>visibility: hidden;</code> 會把內容徹底隱藏起來，屏幕閱讀器也無法獲取這些內容。</li>
|
||||||
|
<li>如果把值設置爲 0px，如 <code>width: 0px; height: 0px;</code>，意味着讓元素脫離文檔流，這樣做同樣也會讓屏幕閱讀器忽略此元素。</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 爲他的訓練頁面創建了一個十分酷炫的條形圖。 考慮到可訪問性，他還將數據放入到了一個表格中，供屏幕閱讀器用戶使用。 表格已有一個 `sr-only` class，但是還沒有添加 CSS 規則。 設置 `position` 的值爲 `absolute`，`left` 的值爲 `-10000px`，`width` 和 `height` 的值均爲 `1px`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
設置 `sr-only` class 的 `position` 屬性值爲 `absolute`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.sr-only').css('position') == 'absolute');
|
||||||
|
```
|
||||||
|
|
||||||
|
設置 `sr-only` class 的 `left` 屬性值爲`-10000px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.sr-only').css('left') == '-10000px');
|
||||||
|
```
|
||||||
|
|
||||||
|
設置 `sr-only` class 的 `width` 屬性值爲 `1` 像素。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/width:\s*?1px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
設置 `sr-only` class 的 `height` 屬性值爲 `1` 像素。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/height:\s*?1px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.sr-only {
|
||||||
|
position: ;
|
||||||
|
left: ;
|
||||||
|
width: ;
|
||||||
|
height: ;
|
||||||
|
top: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||||
|
<figure>
|
||||||
|
<!-- Stacked bar chart of weekly training -->
|
||||||
|
<p>[Stacked bar chart]</p>
|
||||||
|
<br />
|
||||||
|
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||||
|
</figure>
|
||||||
|
<table class="sr-only">
|
||||||
|
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th scope="col">Stealth & Agility</th>
|
||||||
|
<th scope="col">Combat</th>
|
||||||
|
<th scope="col">Weapons</th>
|
||||||
|
<th scope="col">Total</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week One</th>
|
||||||
|
<td>3</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Two</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Three</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>6</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>13</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
left: -10000px;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
top: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||||
|
<figure>
|
||||||
|
<!-- Stacked bar chart of weekly training -->
|
||||||
|
<p>[Stacked bar chart]</p>
|
||||||
|
<br />
|
||||||
|
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||||
|
</figure>
|
||||||
|
<table class="sr-only">
|
||||||
|
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th scope="col">Stealth & Agility</th>
|
||||||
|
<th scope="col">Combat</th>
|
||||||
|
<th scope="col">Weapons</th>
|
||||||
|
<th scope="col">Total</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week One</th>
|
||||||
|
<td>3</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>2</td>
|
||||||
|
<td>10</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Two</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>5</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Week Three</th>
|
||||||
|
<td>4</td>
|
||||||
|
<td>6</td>
|
||||||
|
<td>3</td>
|
||||||
|
<td>13</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
---
|
||||||
|
id: 587d7790367417b2b2512aaf
|
||||||
|
title: 通過給元素添加 accesskey 屬性來讓用戶可以在鏈接之間快速導航
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cQvmaTp'
|
||||||
|
forumTopicId: 301021
|
||||||
|
dashedName: make-links-navigable-with-html-access-keys
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
HTML 提供 `accesskey` 屬性，用於指定激活元素或者使元素獲得焦點的快捷鍵。 添加 `accesskey` 屬性可以讓使用鍵盤的用戶更高效率地導航。
|
||||||
|
|
||||||
|
HTML5 允許在任何標籤上使用這個屬性。 該屬性尤其適用於鏈接、按鈕、表單組件等元素。
|
||||||
|
|
||||||
|
舉個例子：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button accesskey="b">Important Button</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 希望爲他兩篇博客的標題鏈接設置快捷鍵，以使用戶可以快速導航到文章的全文。 爲兩個鏈接添加一個 `accesskey` 屬性，設置第一個的值爲 `g`（代表 Garfield），設置第二的值爲 `c`（代表 Chuck Norris）。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`id` 爲 `first` 的 `a` 標籤應具有 `accesskey` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#first').attr('accesskey'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`id` 爲 `second` 的 `a` 標籤應具有 `accesskey` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#second').attr('accesskey'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`id` 爲 `first` 的 `a` 標籤的 `accesskey` 屬性值應爲 `g`。 注意要使用小寫。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#first').attr('accesskey') == 'g');
|
||||||
|
```
|
||||||
|
|
||||||
|
`id` 爲 `second` 的 `a` 標籤的 `accesskey` 屬性值應爲 `c`。 注意使用小寫。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#second').attr('accesskey') == 'c');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
|
||||||
|
<h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
---
|
||||||
|
id: 587d7788367417b2b2512aa3
|
||||||
|
title: 使用 footer 元素來讓屏幕閱讀器更容易進行導航
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/crVrDh8'
|
||||||
|
forumTopicId: 301022
|
||||||
|
dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
與 `header` 和 `nav` 類似，`footer` 元素也具有語義化的特性，可以讓輔助工具快速定位到它。 它位於頁面底部，用於呈現版權信息或者相關文檔鏈接。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 的忍者訓練頁面進展順利。 請將他在頁面底部呈現版權信息的 `div` 元素更改爲 `footer` 元素。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應存在一個 `footer` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('footer').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應存在 `div` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
確保 `footer` 元素有結束標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<div>© 2018 Camper Cat</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
---
|
||||||
|
id: 587d7787367417b2b2512aa1
|
||||||
|
title: 使用 header 元素來讓屏幕閱讀器更容易進行導航
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cB76vtv'
|
||||||
|
forumTopicId: 301023
|
||||||
|
dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`header` 也是一個具有語義化的、可以提升頁面可訪問性的 HTML5 標籤。 它可以爲父級標籤呈現簡介信息或者導航鏈接，適用於那些在多個頁面頂部重複出現的內容。
|
||||||
|
|
||||||
|
與 `main` 類似，`header` 的語義化特性也可以讓輔助工具快速定位到它的內容。
|
||||||
|
|
||||||
|
**注意：**`header` 應當在 HTML 文檔的 `body` 標籤內使用。 它與包含頁面標題、元信息的 `head` 標籤不同。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 正在創作一些訓練忍者的精彩文章，並打算爲這些文章創建一個新的頁面。 請把包含 `h1` 的 `div` 標籤替換爲 `header` 標籤。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應該存在一個 `header` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('header').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`header` 標籤中應包含 `h1`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('header').children('h1').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應存在 `div` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
確保 `header` 標籤是閉合的。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/header>/g) &&
|
||||||
|
code.match(/<\/header>/g).length === code.match(/<header>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,121 @@
|
|||||||
|
---
|
||||||
|
id: 587d7788367417b2b2512aa2
|
||||||
|
title: 使用 nav 元素使屏幕閱讀器更容易導航
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/czVwWSv'
|
||||||
|
forumTopicId: 301024
|
||||||
|
dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`nav` 也是一個具有語義化特性的 HTML5 標籤，它可以使屏幕閱讀器快速識別出頁面中的導航信息。 它用於呈現頁面中的主導航鏈接。
|
||||||
|
|
||||||
|
對於在多個頁面底部出現的站點鏈接，我們不需要使用 `nav` 標籤。 我們將會在下個挑戰中學習 `footer` 標籤的使用。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 在他的忍者訓練頁面頂端放置了多個導航鏈接，但這些鏈接都寫在了 `div` 中。 請將 `div` 標籤更改爲 `nav` 標籤，以提升頁面的可訪問性。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應存在一個 `nav` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('nav').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`nav` 標籤應包含 `ul` 標籤及其列表項。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('nav').children('ul').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應存在 `div` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
確保 `nav` 標籤是閉合的。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/nav>/g) &&
|
||||||
|
code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Training with Camper Cat</h1>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||||
|
<li><a href="#combat">Combat</a></li>
|
||||||
|
<li><a href="#weapons">Weapons</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section id="stealth">
|
||||||
|
<h2>Stealth & Agility Training</h2>
|
||||||
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||||
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="combat">
|
||||||
|
<h2>Combat Training</h2>
|
||||||
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||||
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||||
|
</section>
|
||||||
|
<section id="weapons">
|
||||||
|
<h2>Weapons Training</h2>
|
||||||
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||||
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
---
|
||||||
|
id: 587d778c367417b2b2512aa9
|
||||||
|
title: 使用 HTML5 的 datetime 屬性標準化時間
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||||
|
forumTopicId: 301025
|
||||||
|
dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
繼續日期主題。 HTML5 還引入了 `time` 標籤與 `datetime` 屬性來標準化時間。 `time` 元素是一個行內元素，用於在一個頁面上顯示日期或時間。 `datetime` 屬性包含的有效格式。 輔助設備可以獲取這個值。 這個屬性也有助於避免混亂，因爲它規定了時間的標準化版本，甚至可以在文本中以非正式的方式或學術方式使用它。
|
||||||
|
|
||||||
|
舉個例子：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 格鬥的調查結果出來了！ 用 `time` 標籤包裹文本 `Thursday, September 15<sup>th</sup>`，添加一個 `datetime` 屬性，將屬性值設置爲 `2016-09-15`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應存在一個 `time` 元素和一個內容文本爲 `Thank you to everyone for responding to Master Camper Cat's survey.` 的 `p` 元素。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(timeElement.length);
|
||||||
|
```
|
||||||
|
|
||||||
|
`time` 元素的內容文本應爲 `Thursday, September 15<sup>th</sup>`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
timeElement.length &&
|
||||||
|
$(timeElement).html().trim() === 'Thursday, September 15<sup>th</sup>'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`time` 元素應包含非空的 `datetime` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(datetimeAttr && datetimeAttr.length);
|
||||||
|
```
|
||||||
|
|
||||||
|
`datetime` 的屬性值應爲 `2016-09-15`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(datetimeAttr === '2016-09-15');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --after-user-code--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
const pElement = $("article > p")
|
||||||
|
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
|
||||||
|
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
|
||||||
|
const datetimeAttr = $(timeElement).attr("datetime");
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||||
|
|
||||||
|
<!-- Only change code below this line -->
|
||||||
|
|
||||||
|
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
|
||||||
|
|
||||||
|
<!-- Only change code above this line -->
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Comments:</h3>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||||
|
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||||
|
<p>Wow, much combat, so mortal.</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||||
|
<p>Looks like I'll be busy that day.</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Tournaments</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||||
|
|
||||||
|
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h3>Comments:</h3>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||||
|
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||||
|
<p>Wow, much combat, so mortal.</p>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||||
|
<p>Looks like I'll be busy that day.</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
id: 587d774d367417b2b2512a9e
|
||||||
|
title: 使用標題顯示內容的層次關係
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
||||||
|
forumTopicId: 301026
|
||||||
|
dashedName: use-headings-to-show-hierarchical-relationships-of-content
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
標題標籤（包括 `h1` 到 `h6`）有很高的使用率，它們用於描述內容的主題。 在屏幕閱讀器中，用戶爲了快速瞭解頁面綱要，可以設置讓閱讀器只朗讀頁面標題。 這意味着我們不應僅僅爲了設置不同字號而使用標題，而應讓標籤本身具有語義化和實質性的含義，同時不同標題之間也應關聯（具有層級關係）。
|
||||||
|
|
||||||
|
*語義化*的意思是，標籤名能準確地表達它所含內容的信息類型。
|
||||||
|
|
||||||
|
如果你正在撰寫帶有導言、主體和結論的論文，在你的概要中把結論作爲主體的一部分是沒有意義的。 結論應該是單獨的一個部分。 類似地，頁面中的標題標籤也應該是有序的，並且能表明內容的層次關係。
|
||||||
|
|
||||||
|
在使用中，相同級別（或者更高級別）的標題標籤用於開啓新的章節，低一級別的標題標籤用於開啓上一級標題標籤的子小節。
|
||||||
|
|
||||||
|
比如說，如果我們在一個 `h2` 標籤後加上若干由 `h4` 標籤引導的頁面。 此時發生了層級的錯位，這會讓使用屏幕閱讀器的用戶感到困惑。 儘管在瀏覽器所顯示的頁面中，錯誤地使用這六個標題標籤依然可以讓它們在視覺效果上看起來很合理。 但此時，我們應該按照層級正確地使用標籤，然後用 CSS 來調整樣式。
|
||||||
|
|
||||||
|
最後一點，每個頁面應只有一個 `h1` 標籤，用來概括說明頁面的主題。 另外，這六個標題標籤可以讓搜索引擎獲取頁面的大綱。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 希望他的網站有一個介紹如何成爲忍者的頁面。 幫助他修改好標題，以便他的標記使內容具有語義意義，並顯示其章節的父級與子級的關係。 你需要將所有的 `h5` 標題標籤調整爲恰當的級別，來說明它們是 `h2` 標題標籤的子級。 調整爲 `h3` 標籤即可。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應存在 6 個 `h3` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h3').length === 6);
|
||||||
|
```
|
||||||
|
|
||||||
|
確保 `h3` 有結束標籤
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert((code.match(/\/h3/g) || []).length === 6);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應該存在 `h5` 標籤.
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h5').length === 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應該存在 `h5` 的結束標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(/\/h5/.test(code) === false);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>How to Become a Ninja</h1>
|
||||||
|
<main>
|
||||||
|
<h2>Learn the Art of Moving Stealthily</h2>
|
||||||
|
<h5>How to Hide in Plain Sight</h5>
|
||||||
|
<h5>How to Climb a Wall</h5>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Battle</h2>
|
||||||
|
<h5>How to Strengthen your Body</h5>
|
||||||
|
<h5>How to Fight like a Ninja</h5>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Living with Honor</h2>
|
||||||
|
<h5>How to Breathe Properly</h5>
|
||||||
|
<h5>How to Simplify your Life</h5>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>How to Become a Ninja</h1>
|
||||||
|
<main>
|
||||||
|
<h2>Learn the Art of Moving Stealthily</h2>
|
||||||
|
<h3>How to Hide in Plain Sight</h3>
|
||||||
|
<h3>How to Climb a Wall</h3>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Battle</h2>
|
||||||
|
<h3>How to Strengthen your Body</h3>
|
||||||
|
<h3>How to Fight like a Ninja</h3>
|
||||||
|
|
||||||
|
<h2>Learn the Art of Living with Honor</h2>
|
||||||
|
<h3>How to Breathe Properly</h3>
|
||||||
|
<h3>How to Simplify your Life</h3>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,144 @@
|
|||||||
|
---
|
||||||
|
id: 587d7790367417b2b2512ab0
|
||||||
|
title: 使用 tabindex 將鍵盤焦點添加到元素中
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||||
|
forumTopicId: 301027
|
||||||
|
dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
HTML 的 `tabindex` 屬性有三種與標籤焦點相關的功能。 當它在一個元素上時，表示該元素可以獲得焦點。 tabindex 的值（可以是零、負整數或正整數）定義了行爲。
|
||||||
|
|
||||||
|
當用戶使用鍵盤瀏覽頁面時，諸如鏈接、表單控件等元素可以自動獲得焦點。 它們獲得焦點的順序與它們出現在 HTML 文檔流中的順序一致。 我們可以通過將其他標籤（如 `div`、`span`、`p` 等）的 `tabindex` 屬性值設爲 0 來讓它們實現類似的效果。 比如：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div tabindex="0">I need keyboard focus!</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**注意：** `tabindex` 屬性值爲負整數（通常爲 -1）的標籤也是可以獲得焦點的，只是不可以通過鍵盤操作（如 tab 鍵）來獲得焦點。 這種方法通常用於以編程的方式使內容獲得焦點（如：將焦點設置到用 `div` 實現的彈出框上）的場景。 只是這部分內容已經超出了當前挑戰的範圍。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 新建了一個用來收集他的用戶信息的調查。 他知道輸入框可以自動獲得鍵盤焦點，但他希望用戶使用鍵盤切換標籤時，焦點可以停留在指示文字（Instructions）上。 請給 `p` 標籤添加一個 `tabindex` 屬性，將屬性值設置爲 `0`。 注意：使用 `tabindex` 屬性還可以讓 CSS 僞類 `:focus` 在 `p` 標籤上生效。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
表單中，作爲指示文字（Instructions）的 `p` 標籤應具有 `tabindex` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').attr('tabindex'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`p` 標籤的 `tabindex` 屬性值應設置爲 0。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').attr('tabindex') == '0');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
p:focus {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Ninja Survey</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||||
|
|
||||||
|
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" name="username"><br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What level ninja are you?</legend>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">9th Life Master</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Select your favorite weapons:</legend>
|
||||||
|
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||||
|
<label for="stars">Throwing Stars</label><br>
|
||||||
|
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||||
|
<label for="nunchucks">Nunchucks</label><br>
|
||||||
|
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||||
|
<label for="sai">Sai Set</label><br>
|
||||||
|
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||||
|
<label for="sword">Sword</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form><br>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
p:focus {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Ninja Survey</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
|
||||||
|
|
||||||
|
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||||
|
|
||||||
|
|
||||||
|
<label for="username">Username:</label>
|
||||||
|
<input type="text" id="username" name="username"><br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What level ninja are you?</legend>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">9th Life Master</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Select your favorite weapons:</legend>
|
||||||
|
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||||
|
<label for="stars">Throwing Stars</label><br>
|
||||||
|
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||||
|
<label for="nunchucks">Nunchucks</label><br>
|
||||||
|
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||||
|
<label for="sai">Sai Set</label><br>
|
||||||
|
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||||
|
<label for="sword">Sword</label>
|
||||||
|
</fieldset>
|
||||||
|
<br>
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form><br>
|
||||||
|
</section>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,160 @@
|
|||||||
|
---
|
||||||
|
id: 587d7790367417b2b2512ab1
|
||||||
|
title: 使用 tabindex 指定多個元素的鍵盤焦點順序
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||||
|
forumTopicId: 301028
|
||||||
|
dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`tabindex` 屬性還可以指定元素的 tab 鍵焦點順序， 將它的值設置爲大於等於 1 的整數，就可以實現這個功能。
|
||||||
|
|
||||||
|
給元素設置 `tabindex="1"`，鍵盤將首先把焦點放在這個元素上。 然後它按照指定的 `tabindex` 值（2、3 等等）順序循環，再移動到默認值和 `tabindex="0"` 項目。
|
||||||
|
|
||||||
|
需要注意的是，使用這種方式設置 tab 鍵焦點順序會覆蓋默認順序，其中默認順序爲標籤在文檔流中出現的順序。 這可能會讓那些希望從頁面頂部開始導航的用戶感到困惑。 使用 tabindex 在某些情況下是必要的，但在使用時要充分考慮到頁面的可訪問性。
|
||||||
|
|
||||||
|
舉個例子：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div tabindex="1">I get keyboard focus, and I get it first!</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div tabindex="2">I get keyboard focus, and I get it second!</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 在他的勵志名言頁面中有一個搜索區域，他打算使用 CSS 把這個區域定位在頁面的右上角。 Camper Cat 希望他的搜索（search）`input` 與提交（submit）`input` 表單控件是 tab 鍵焦點順序的前兩項。 請給 `search` `input` 添加 `tabindex` 屬性，將屬性值設置爲 `1`；給 `submit` `input` 添加一個 `tabindex` 屬性，將屬性值設置爲 `2`。
|
||||||
|
|
||||||
|
另一件需要注意的事情是，單擊元素時，某些瀏覽器可能會將你置於 tab 鍵焦點順序的中間位置。 頁面上已添加一個元素，以確保你始終從 tab 鍵焦點順序的開頭開始。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應給 `search` `input` 標籤添加一個 `tabindex` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#search').attr('tabindex'));
|
||||||
|
```
|
||||||
|
|
||||||
|
應給 `submit` `input` 標籤添加一個 `tabindex` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#submit').attr('tabindex'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`search` `input` 標籤的 `tabindex` 屬性值應爲 1。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#search').attr('tabindex') == '1');
|
||||||
|
```
|
||||||
|
|
||||||
|
`submit` `input` 標籤的 `tabindex` 屬性值應爲 2。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#submit').attr('tabindex') == '2');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<div tabindex="1" class="overlay"></div>
|
||||||
|
<header>
|
||||||
|
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Blog</a></li>
|
||||||
|
<li><a href="">Training</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<form>
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
|
||||||
|
|
||||||
|
<input type="search" name="search" id="search">
|
||||||
|
<input type="submit" name="submit" value="Submit" id="submit">
|
||||||
|
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<h2>Inspirational Quotes</h2>
|
||||||
|
<blockquote>
|
||||||
|
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||||
|
- Chuck Norris</p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||||
|
- TMNT</p>
|
||||||
|
</blockquote>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
margin: -8px;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<div tabindex="1" class="overlay"></div>
|
||||||
|
<header>
|
||||||
|
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Blog</a></li>
|
||||||
|
<li><a href="">Training</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<form>
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
|
||||||
|
|
||||||
|
<input tabindex="1" type="search" name="search" id="search">
|
||||||
|
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
|
||||||
|
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<h2>Inspirational Quotes</h2>
|
||||||
|
<blockquote>
|
||||||
|
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||||
|
- Chuck Norris</p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||||
|
- TMNT</p>
|
||||||
|
</blockquote>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
margin: -8px;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
id: 587d774e367417b2b2512aa0
|
||||||
|
title: 使用 article 元素包裹文章內容
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||||
|
forumTopicId: 301029
|
||||||
|
dashedName: wrap-content-in-the-article-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`article` 是另一個具有語義化特性的 HTML5 新標籤。 `article` 是一個分段標籤，用於呈現獨立及完整的內容。 這個標籤適用於博客、論壇帖子或者新聞文章。
|
||||||
|
|
||||||
|
確定內容是否可以單獨作爲一部分，通常是個人的判斷，但你可以使用幾個簡單的測試。 如果刪除了所有周圍的上下文，這個內容是否仍然有意義？ 類似地，對於文本內容，可否把這些內容放到一個 RSS 推送裏？
|
||||||
|
|
||||||
|
請牢記，輔助設備依賴組織良好、語義化的標籤來獲取頁面中的信息。
|
||||||
|
|
||||||
|
**注意：**`section` 元素也是 HTML5 引入的新元素，其語義與 `article` 略有不同。 `article` 用於獨立且完整的內容，而 `section` 用於對與主題相關的內容進行分組。 它們可以根據需要來嵌套使用。 舉個例子：如果一本書是一個 `article` 的話，那麼每個章節就是 `section`。 當內容組之間沒有聯繫時，我們可以使用 `div`。
|
||||||
|
|
||||||
|
`<div>` - 一組內容 `<section>` - 幾組相關的內容 `<article>` - 幾組獨立的內容
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
Camper Cat 打算使用 `article` 標籤來呈現他的博客頁面裏的帖子，但是他忘記在頂部的帖子上使用這個標籤。 將 `div` 標籤改爲 `article` 標籤。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應有三個 `article` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('article').length == 3);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應有 `div` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,165 @@
|
|||||||
|
---
|
||||||
|
id: 587d778b367417b2b2512aa7
|
||||||
|
title: 將單選按鈕包裹在 fieldset 元素中以獲得更好的可訪問性
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
||||||
|
forumTopicId: 301030
|
||||||
|
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
接下來的表單主題是關於單選按鈕的可訪問性。 在上一個挑戰中，每個單選按鈕都有一個包含 `for` 屬性的 `label` 標籤，這些屬性值指向相關選項的 `id`。 然而單選按鈕通常成組出現，而且用戶必須選擇其中一項。
|
||||||
|
|
||||||
|
`fieldset` 標籤包裹整組單選按鈕，實現這個功能。 它經常使用 `legend` 標籤來提供分組的描述，以便屏幕閱讀器用戶會閱讀 `fieldset` 元素中的每個選項。
|
||||||
|
|
||||||
|
當選項的含義很明確時，如“性別選擇”，`fieldset` 與 `legend` 標籤可以省略。 這時，使用包含 `for` 屬性的 `label` 標籤就足夠了。
|
||||||
|
|
||||||
|
舉個例子：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Choose one of these three items:</legend>
|
||||||
|
<input id="one" type="radio" name="items" value="one">
|
||||||
|
<label for="one">Choice One</label><br>
|
||||||
|
<input id="two" type="radio" name="items" value="two">
|
||||||
|
<label for="two">Choice Two</label><br>
|
||||||
|
<input id="three" type="radio" name="items" value="three">
|
||||||
|
<label for="three">Choice Three</label>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
當用戶使用郵件註冊時，Camper Cat 想知道他們的忍者等級。 他添加了一組單選按鈕，並從我們之前的課程中吸取了教訓，爲每個選項使用帶有 `for` 屬性的 `label` 標籤。 Camper Cat 加油！ 然而，他仍然需要一些幫助。 請將包含單選按鈕組的 `div` 標籤替換爲 `fieldset` 標籤；將 `p` 標籤替換爲 `legend` 標籤。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應存在 1 個 `fieldset` 標籤包含單選按鈕組。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('fieldset').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
確保 `fieldset` 標籤是閉合的。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/fieldset>/g) &&
|
||||||
|
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
應存在 1 個包含詢問用戶忍者等級內容文字的 `legend` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('legend').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應存在 `div` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').length == 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
不應存在包含詢問用戶忍者等級內容文字的 `p` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').length == 4);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
<label for="email">Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Only change code below this line -->
|
||||||
|
<div>
|
||||||
|
<p>What level ninja are you?</p>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">Master</label>
|
||||||
|
</div>
|
||||||
|
<!-- Only change code above this line -->
|
||||||
|
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<form>
|
||||||
|
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||||
|
<label for="email">Email:</label>
|
||||||
|
<input type="text" id="email" name="email">
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>What level ninja are you?</legend>
|
||||||
|
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||||
|
<label for="newbie">Newbie Kitten</label><br>
|
||||||
|
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||||
|
<label for="intermediate">Developing Student</label><br>
|
||||||
|
<input id="master" type="radio" name="levels" value="master">
|
||||||
|
<label for="master">Master</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Submit">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<article>
|
||||||
|
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||||
|
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||||
|
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||||
|
</article>
|
||||||
|
<img src="samuraiSwords.jpeg" alt="">
|
||||||
|
<article>
|
||||||
|
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||||
|
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||||
|
</article>
|
||||||
|
<footer>© 2018 Camper Cat</footer>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,154 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abe
|
||||||
|
title: 給卡片元素添加 box-shadow
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cvVZdUd'
|
||||||
|
forumTopicId: 301031
|
||||||
|
dashedName: add-a-box-shadow-to-a-card-like-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`box-shadow` 屬性用來給元素添加陰影，該屬性值是由逗號分隔的一個或多個陰影列表。
|
||||||
|
|
||||||
|
`box-shadow` 屬性的陰影依次由下面這些值描述：
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><code>offset-x</code> 陰影的水平偏移量；</li>
|
||||||
|
<li><code>offset-y</code> 陰影的垂直偏移量；</li>
|
||||||
|
<li><code>blur-radius</code> 模糊半徑；</li>
|
||||||
|
<li><code>spread-radius</code> 陰影擴展半徑；</li>
|
||||||
|
<li><code>color</code></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
其中 `blur-radius` 和 `spread-radius` 是可選的。
|
||||||
|
|
||||||
|
可以通過逗號分隔每個 `box-shadow` 元素的屬性來添加多個 box-shadow。
|
||||||
|
|
||||||
|
如下爲添加了模糊效果的例子，它使用了透明度較高的黑色作爲陰影：
|
||||||
|
|
||||||
|
```css
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
元素現在有一個 `thumbnail` id。 在這個選擇器中，使用上面的示例 CSS 值在卡片上加一個 `box-shadow`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應該給 id 爲 `thumbnail` 的元素添加 `box-shadow` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
`box-shadow` 屬性值應該是題目說明中指定的 CSS 值。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abc
|
||||||
|
title: 調整文本的背景色
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||||
|
forumTopicId: 301032
|
||||||
|
dashedName: adjust-the-background-color-property-of-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
爲了讓頁面更美觀，除了設置整個頁面的背景色以及文字顏色外，你還可以單獨設置文字的背景色，即在文字的父元素上添加 `background-color` 屬性。 在本挑戰裏我們將使用 `rgba()` 顏色，而不是之前學到的 `hex` 編碼或者 `rgb()` 顏色。
|
||||||
|
|
||||||
|
<blockquote>rgba 代表：<br> r = red 紅色<br> g = green 綠色<br> b = blue 藍色<br> a = alpha 透明度</blockquote>
|
||||||
|
|
||||||
|
RGB 值可以取在 0 到 255 之間。 alpha 值可取在 0 到 1 之間，其中 0 代表完全透明，1 代表完全不透明。 `rgba()` 在需要設置顏色透明度時十分有用， 這意味着你可以做出一些很漂亮的半透明效果。
|
||||||
|
|
||||||
|
在本挑戰裏你將會用到這個代碼 `background-color: rgba(45, 45, 45, 0.1)`。 它表示背景是黑灰色，因爲設置了透明度爲 0.1，所以幾乎是透明的。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
爲了讓文字更醒目，設置 `h4` 元素的 `background-color` 屬性值爲上面指定的 `rgba()`。
|
||||||
|
|
||||||
|
同時移除 `h4` 的 `height` 屬性，並添加 `padding` 屬性，值爲 10px。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
你應該給 `h4` 元素添加一個 `background-color` 屬性並且賦值 `rgba(45, 45, 45, 0.1)`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
/(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
|
||||||
|
code.replace(/\s/g, '')
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`h4` 元素的 `padding` 屬性值應爲 10px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('h4').css('padding-top') == '10px' &&
|
||||||
|
$('h4').css('padding-right') == '10px' &&
|
||||||
|
$('h4').css('padding-bottom') == '10px' &&
|
||||||
|
$('h4').css('padding-left') == '10px'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`h4` 元素不應有 `height` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!($('h4').css('height') == '25px'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,130 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad3
|
||||||
|
title: 將各種元素的顏色調整爲互補色
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||||
|
forumTopicId: 301033
|
||||||
|
dashedName: adjust-the-color-of-various-elements-to-complementary-colors
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
通過前面關卡的學習，我們知道了補色搭配能形成強列的對比效果，讓內容更富生機。 但是如果使用不當效果會適得其反：比如將文字背景色和文字顏色設置爲互補色，這樣文字會很難看清。 通常的做法是，一種顏色做爲主要顏色，然後使用其補色用來裝點那些需要用戶特別注意的部分。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
使用深青色（`#09A7A1`）做爲頁面主色，用其補色橙色（`#FF790E`）來裝飾登錄按鈕。 把 `header` 和 `footer` 的 `background-color` 從黑色改成深青色。 然後把 `h2` 的文字 `color` 也改成深青色。 最後，把 `button` 的 `background-color` 改成橙色。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`header` 元素的 `background-color` 屬性值應爲 #09A7A1。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||||
|
```
|
||||||
|
|
||||||
|
`footer` 元素的 `background-color` 屬性值應爲 #09A7A1。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h2` 元素的 `color` 屬性值應爲 #09A7A1。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||||
|
```
|
||||||
|
|
||||||
|
`button` 元素的 `background-color` 屬性值應爲 #FF790E。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<h2>Machine Learning in the Kitchen</h2>
|
||||||
|
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h2>Bisection Vegetable Chopping</h2>
|
||||||
|
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<br>
|
||||||
|
<footer>© 2018 FCC Kitchen</footer>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background-color: #09A7A1;
|
||||||
|
color: white;
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: #09A7A1;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #FF790E;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
background-color: #09A7A1;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<h2>Machine Learning in the Kitchen</h2>
|
||||||
|
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h2>Bisection Vegetable Chopping</h2>
|
||||||
|
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||||
|
<button>Sign Up</button>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
<br>
|
||||||
|
<footer>© 2018 FCC Kitchen</footer>
|
||||||
|
```
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
id: 587d7791367417b2b2512ab5
|
||||||
|
title: 使用 height 屬性調整元素的寬度
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||||
|
forumTopicId: 301034
|
||||||
|
dashedName: adjust-the-height-of-an-element-using-the-height-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
和 `width` 屬性類似，你可以使用 CSS 裏面的 `height` 屬性來指定元素的高度。 下面這段代碼可以把圖片的高度設置爲 20px：
|
||||||
|
|
||||||
|
```css
|
||||||
|
img {
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給 `h4` 標籤添加 `height` 屬性並將屬性值設置爲 25px。
|
||||||
|
|
||||||
|
**注意：**可能需要將瀏覽器的縮放比調整爲 100% 才能通過這一挑戰。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h4` 的 `height` 屬性值應爲 25px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
|
||||||
|
25 &&
|
||||||
|
/h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
id: 587d781d367417b2b2512ac8
|
||||||
|
title: 調整錨點的懸停狀態
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||||
|
forumTopicId: 301035
|
||||||
|
dashedName: adjust-the-hover-state-of-an-anchor-tag
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
本挑戰將要涉及到僞類。 僞類是可以添加到選擇器上的關鍵字，用來選擇特定狀態的元素。
|
||||||
|
|
||||||
|
比如，可以使用 `:hover` 僞類選擇器來選取超鏈接的懸停狀態。 下面的代碼可以在鼠標懸停在超鏈接上時將其 `color` 變成紅色：
|
||||||
|
|
||||||
|
```css
|
||||||
|
a:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
代碼編輯器裏面已經有了一個 CSS 規則把所有的 `a` 標籤定義成了黑色。 請添加一個規則，使得用戶懸停在 `a` 標籤時，標籤的 `color` 變成藍色。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
超鏈接的 `color` 應該保持黑色，應只添加 `:hover` CSS 規則。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
懸停超鏈接時超鏈接的 `color` 應該變成藍色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: rgba(0,0,255,1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||||
|
```
|
||||||
@ -0,0 +1,129 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad4
|
||||||
|
title: 調整顏色的色相
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||||
|
forumTopicId: 301036
|
||||||
|
dashedName: adjust-the-hue-of-a-color
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
顏色具有多種特性，包括色相、飽和度和亮度。 CSS3 引入了 `hsl()` 做爲顏色的描述方式。
|
||||||
|
|
||||||
|
**色相**是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。 以顏色光譜爲例，光譜左邊從紅色開始，移動到中間的綠色，一直到右邊的藍色，色相值就是沿着這條線的取值。 在 `hsl()` 裏面，色相用色環來代替光譜，色相值就是色環裏面的顏色對應的從 0 到 360 度的角度值。
|
||||||
|
|
||||||
|
**飽和度**是指色彩的純度，也就是顏色裏灰色的佔比。 飽和度越高則灰色佔比越少，色彩也就越純；反之則完全是灰色。 飽和度的取值範圍是表示灰色所佔百分比的 0 至 100。
|
||||||
|
|
||||||
|
**亮度**決定顏色的明暗程度，也就是顏色裏白色或者黑色的佔比。 其中，100% 的亮度表示純白色， 0% 的亮度則表示純黑色；而 50% 的亮度就表示在色相中選取的顏色。
|
||||||
|
|
||||||
|
下面是一些使用 `hsl()` 描述顏色的例子，顏色都爲滿飽和度，中等亮度:
|
||||||
|
|
||||||
|
<table class='table table-striped'><thead><tr><th>顏色</th><th>HSL</th></tr></thead><tbody><tr><td>紅</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>黃</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>綠</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>藍綠</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>藍</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>品紅</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
將 class 爲 `green`、`cyan` 和 `blue` 的 `div` 的 `background-color` 屬性值設置爲使用 `hsl()` 表示的顏色。 顏色都爲滿飽和度，亮度中等。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應使用 `hsl()` 屬性來設置顏色爲 `green`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
應使用 `hsl()` 屬性來設置顏色爲 `cyan`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
應使用 `hsl()` 屬性來設置顏色爲 `blue`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `green` 的 `div` 元素的 `background-color` 屬性值應爲綠色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `cyan` 的 `div` 元素的 `background-color` 屬性值應爲藍綠色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `blue` 的 `div` 元素的 `background-color` 屬性值應爲藍色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="blue"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background-color: hsl(120, 100%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: hsl(180, 100%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background-color: hsl(240, 100%, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="green"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="blue"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abd
|
||||||
|
title: 調整標題與段落的大小
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||||
|
forumTopicId: 301037
|
||||||
|
dashedName: adjust-the-size-of-a-header-versus-a-paragraph-tag
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
標題標籤的字體大小（從 `h1` 到 `h6`）一般應該大於段落標籤的字體大小。 這使用戶更容易在視覺上了解頁面上所有內容的佈局和重要程度。 你可以使用 `font-size` 屬性來設置元素內文字的大小。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把 `h4` 標籤的 `font-size` 的屬性值改成 27px，讓標題更醒目。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應給 `h4` 元素添加一個 `font-size` 屬性並將屬性值設置爲 27px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').css('font-size') == '27px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad5
|
||||||
|
title: 調整顏色的色調
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||||
|
forumTopicId: 301038
|
||||||
|
dashedName: adjust-the-tone-of-a-color
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`hsl()` 使 CSS 更改顏色色調更加方便。 比如，給一個純色添加白色可以調出更淺的色調；添加黑色可以創造更深的色調。 另外，還可以通過給純色添加灰色來同時改變顏色的深淺和明暗。 回憶下 `hsl()` 裏面的 ‘s’ 和 ‘l’ 分辨代表飽和度和亮度。 飽和度代表灰色的佔比，亮度代表白色和黑色的佔比。 這在你想獲取一個基準色的變種的情景下會十分有用。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
所有元素的默認 `background-color` 都是 `transparent`。 當前頁面的導航欄 `nav` 背景色之所以看起來是藍綠色，是因爲它背後的 `header` 的 `background-color` 屬性值爲 `cyan`。 給 `nav` 元素增加一個 `background-color`，使它的顏色也爲 `cyan`，飽和度爲 `80%`，亮度爲 `25%`，以修改它的色調和陰影。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`nav` 元素應該有一個使用 `hsl()` 屬性調節藍綠色調的 `background-color` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
background-color: hsl(180, 90%, 35%);
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-indent: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Classes</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
background-color: hsl(180, 90%, 35%);
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background-color: hsl(180, 80%, 25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-indent: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<header>
|
||||||
|
<h1>Cooking with FCC!</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Classes</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
```
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
---
|
||||||
|
id: 587d7791367417b2b2512ab4
|
||||||
|
title: 使用 width 屬性調整元素的寬度
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||||
|
forumTopicId: 301039
|
||||||
|
dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
你可以使用 CSS 裏的 `width` 屬性來指定元素的寬度。 屬性值可以是相對單位（比如 `em`），絕對單位（比如 `px`），或者包含塊（父元素）寬度的百分比。 下面這段代碼可以把圖片的寬度設置爲 220px：
|
||||||
|
|
||||||
|
```css
|
||||||
|
img {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
爲卡片元素添加 `width` 屬性，並將它的寬度設置爲 245px。 使用 `fullCard` class 來選擇卡片元素。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應使用 `fullCard` class 選擇器將卡片的 `width` 屬性值設置爲 `245px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||||
|
assert(
|
||||||
|
fullCard &&
|
||||||
|
/width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
|
||||||
|
$('.fullCard').css('maxWidth') === 'none'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae5
|
||||||
|
title: 以可變速率來給元素添加動畫
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||||
|
forumTopicId: 301040
|
||||||
|
dashedName: animate-elements-at-variable-rates
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
改變相似元素的動畫頻率的方法有很多。 目前我們接觸到的就有 `animation-iteration-count` 和 `@keyframes`。
|
||||||
|
|
||||||
|
舉例說明，右邊的動畫包含了兩個小星星，每個小星星都在 `@keyframes` 爲 20% 處變小並且透明度變低，也就是一閃一閃的動畫效果。 你可以通過改變其中一個元素的 `@keyframes` 規則以使兩個小星星以不同的頻率閃爍。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
請將 class 爲 `star-1` 的元素的 `@keyframes` 爲設置爲 50%，以此改變其動畫頻率。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `star-1` 的元素的 `@keyframes` 規則應爲 50%。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-name: twinkle-1;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-name: twinkle-2;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-1 {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-2 {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-name: twinkle-1;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-name: twinkle-2;
|
||||||
|
animation-duration: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-1 {
|
||||||
|
50% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle-2 {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae3
|
||||||
|
title: 使用無限的動畫計數製作永不停止的動畫
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||||
|
forumTopicId: 301041
|
||||||
|
dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
之前的關卡里介紹了一些動畫屬性以及 `@keyframes` 規則的用法。 還有一個常用的動畫屬性是 `animation-iteration-count`，這個屬性允許你控制動畫循環的次數。 下面是一個例子：
|
||||||
|
|
||||||
|
```css
|
||||||
|
animation-iteration-count: 3;
|
||||||
|
```
|
||||||
|
|
||||||
|
在這裏動畫會在運行 3 次後停止，如果想讓動畫一直運行，可以把值設置成 `infinite`。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把 `animation-iteration-count` 屬性改成 `infinite`，使右邊的球一直跳躍。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`animation-iteration-count` 屬性的值應爲 `infinite`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#ball {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce{
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 249px;
|
||||||
|
width: 130px;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="ball"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#ball {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce{
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
top: 249px;
|
||||||
|
width: 130px;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="ball"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae6
|
||||||
|
title: 以可變速率來給多個元素添加動畫
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||||
|
forumTopicId: 301042
|
||||||
|
dashedName: animate-multiple-elements-at-variable-rates
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在前面的關卡里，我們通過修改 `@keyframes` 改變了兩個相似動畫元素的頻率。 你也可以通過改變多個元素的 `animation-duration` 來達到同樣的效果。
|
||||||
|
|
||||||
|
在代碼編輯器裏運行的動畫中，天空中有三顆以同樣頻率不停閃爍的星星。 你可以設置每一個星星的 `animation-duration` 屬性爲不同的值，以使其具有不同的閃爍頻率。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
依次設置 class 爲 `star-1`、`star-2`、`star-3` 的元素的 `animation-duration` 爲 1s、0.9s、1.1s。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `star-1` 的 `animation-duration` 屬性值應該 1s。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.star-1').css('animation-duration') == '1s');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `star-2` 的 `animation-duration` 屬性值應該 0.9s。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.star-2').css('animation-duration') == '0.9s');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `star-3` 的 `animation-duration` 屬性值應該 1.1s。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.star-3').css('animation-duration') == '1.1s');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-3 {
|
||||||
|
margin-top: 10%;
|
||||||
|
margin-left: 50%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
<div class="star-3 stars"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.stars {
|
||||||
|
background-color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-1 {
|
||||||
|
margin-top: 15%;
|
||||||
|
margin-left: 60%;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-2 {
|
||||||
|
margin-top: 25%;
|
||||||
|
margin-left: 25%;
|
||||||
|
animation-duration: 0.9s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-3 {
|
||||||
|
margin-top: 10%;
|
||||||
|
margin-left: 50%;
|
||||||
|
animation-duration: 1.1s;
|
||||||
|
animation-name: twinkle;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes twinkle {
|
||||||
|
20% {
|
||||||
|
transform: scale(0.5);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="back"></div>
|
||||||
|
<div class="star-1 stars"></div>
|
||||||
|
<div class="star-2 stars"></div>
|
||||||
|
<div class="star-3 stars"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512ad0
|
||||||
|
title: 使用 margin 屬性將元素水平居中
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||||
|
forumTopicId: 301043
|
||||||
|
dashedName: center-an-element-horizontally-using-the-margin-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在應用設計中經常需要把一個塊級元素水平居中顯示。 一種常見的實現方式是把塊級元素的 `margin` 值設置爲 auto。
|
||||||
|
|
||||||
|
同樣的，這個方法也對圖片奏效。 圖片默認是內聯元素，但是可以通過設置其 `display` 屬性爲 `block`來把它變成塊級元素。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
通過添加一個值爲 `auto` 的 `margin` 屬性，將 `div` 在頁面居中。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`div` 應有一個 `margin`，設置爲 `auto`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/margin:\s*?auto;/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
background-color: blue;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512ac9
|
||||||
|
title: 更改元素的相對位置
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/czVmMtZ'
|
||||||
|
forumTopicId: 301044
|
||||||
|
dashedName: change-an-elements-relative-position
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在 CSS 裏一切 HTML 元素皆爲盒子，也就是通常所說的<dfn>盒模型</dfn>。 塊級元素自動從新的一行開始（比如標題、段落以及 div），行內元素排列在上一個元素後（比如圖片以及 span）。 元素默認按照這種方式佈局稱爲文檔的<dfn>普通流</dfn>，同時 CSS 提供了 position 屬性來覆蓋它。
|
||||||
|
|
||||||
|
當元素的定位設置爲 `relative` 時，它允許你通過 CSS 指定該元素在當前文檔流頁面下的*相對*偏移量。 CSS 裏控制各個方向偏移量的屬性是 `left`、`right`、`top` 和 `bottom`。 它們代表從原來位置向遠離該方向*偏移*指定的像素、百分比或者 em。 下面的例子展示了段落向上偏移 10px：
|
||||||
|
|
||||||
|
```css
|
||||||
|
p {
|
||||||
|
position: relative;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
把元素的位置設置成相對，並不會改變該元素在佈局中所佔的位置，也不會對其它元素的位置產生影響。
|
||||||
|
|
||||||
|
**注意：**定位可以使頁面佈局更靈活、高效。 不管元素的定位是怎樣的，HTML 標記在從上到下閱讀起來時應該是整潔的、有意義的。 這樣可以讓視障人士（重度依賴輔助設備比如屏幕閱讀軟件的人們）也能夠無障礙地瀏覽你的網頁。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把 `h2` 的 `position` 設置成 `relative`，使用相應的 CSS 屬性調整它的位置，使其相對 `top` 偏移 15px，同時還在文檔流中處於原來的位置。 這不會對 h1 和 p 元素的位置產生影響。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h2` 元素應有一個值爲 `relative` 的 `position` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('position') == 'relative');
|
||||||
|
```
|
||||||
|
|
||||||
|
你應該使用 CSS 屬性調整 `h2` 的位置，使其從原來的位置相對 `top` 偏移 15px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('top') == '15px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae7
|
||||||
|
title: 使用關鍵字更改動畫定時器
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cJKvwCM'
|
||||||
|
forumTopicId: 301045
|
||||||
|
dashedName: change-animation-timing-with-keywords
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在 CSS 動畫裏，`animation-timing-function` 用來定義動畫的速度曲線。 速度曲線決定了動畫從一套 CSS 樣式變爲另一套所用的時間。 如果要描述的動畫是一輛車在指定時間內（`animation-duration`）從 A 運動到 B，那麼 `animation-timing-function` 表述的就是車在運動中的加速和減速等過程。
|
||||||
|
|
||||||
|
有一些預定義的關鍵字可用於常見的選項。 比如，默認值是 `ease`，動畫以低速開始，然後加快，在結束前變慢。 其它常用的值包括 `ease-out`：動畫以高速開始，以低速結束；`ease-in`，動畫以低速開始，以高速結束；`linear`：動畫從頭到尾的速度是相同的。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給 id 爲 `ball1` 和 `ball2` 的元素添加 `animation-timing-function`，`ball1` 的屬性值爲 `linear`，`ball2` 的屬性值爲 `ease-out`。 它們的 `animation-duration` 都爲 2 秒，注意觀察它們在開始和結束時的不同。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
id 爲 `ball1` 的元素的 `animation-timing-function` 屬性值應爲 `linear`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
const ball1Animation = __helpers.removeWhiteSpace(
|
||||||
|
$('#ball1').css('animation-timing-function')
|
||||||
|
);
|
||||||
|
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||||
|
```
|
||||||
|
|
||||||
|
id 爲 `ball2` 的元素的 `animation-timing-function` 屬性值爲 `ease-out`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
const ball2Animation = __helpers.removeWhiteSpace(
|
||||||
|
$('#ball2').css('animation-timing-function')
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left:27%;
|
||||||
|
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left:56%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left:27%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left:56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512acf
|
||||||
|
title: 使用 z-index 屬性更改重疊元素的位置
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cM94aHk'
|
||||||
|
forumTopicId: 301046
|
||||||
|
dashedName: change-the-position-of-overlapping-elements-with-the-z-index-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
當一些元素在位置上重疊時（例如，使用 `position: absolute | relative | fixed | sticky` 時），在 HTML 裏後出現的元素會默認顯示在更早出現的元素的上面。 你可以使用 `z-index` 屬性指定元素的堆疊次序。 `z-index` 的取值是整數，數值大的元素會疊放到數值小的元素上面。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給 class 爲 `first` 的元素（紅色的方塊）添加 `z-index` 屬性並將屬性值設置爲 2，使它顯示在藍色方塊的上方。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `first` 的元素的 `z-index` 屬性值應爲 2。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.first').css('z-index') == '2');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 60%;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first {
|
||||||
|
background-color: red;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
.second {
|
||||||
|
background-color: blue;
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
top: 50px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="first"></div>
|
||||||
|
<div class="second"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 60%;
|
||||||
|
height: 200px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first {
|
||||||
|
background-color: red;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.second {
|
||||||
|
background-color: blue;
|
||||||
|
position: absolute;
|
||||||
|
left: 40px;
|
||||||
|
top: 50px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="first"></div>
|
||||||
|
<div class="second"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad6
|
||||||
|
title: 創建一個 CSS 線性漸變
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cg4dpt9'
|
||||||
|
forumTopicId: 301047
|
||||||
|
dashedName: create-a-gradual-css-linear-gradient
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
HTML 元素的背景色並不侷限於單色。 CSS 還爲我們提供了顏色漸變。 可通過 `background` 裏的 `linear-gradient()` 實現線性漸變， 以下是它的語法：
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||||
|
```
|
||||||
|
|
||||||
|
第一個參數指定了顏色過渡的方向——它的值是角度，`90deg` 表示垂直漸變（從左到右），`45deg` 表示沿對角線漸變（從左下方到右上方）。 其他參數指定了漸變顏色的順序：
|
||||||
|
|
||||||
|
例如：
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
使用 `linear-gradient()` 給 `div` 元素添加 `background` 漸變色，漸變角度爲 35 度，從 `#CCFFFF` 過渡到 `#FFCCCC`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`div` 元素應有一個指定方向和顏色的 `linear-gradient` `background`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('div')
|
||||||
|
.css('background-image')
|
||||||
|
.match(
|
||||||
|
/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50px auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50px auto;
|
||||||
|
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512add
|
||||||
|
title: 使用 CSS 創建一個圖形
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cEDWPs6'
|
||||||
|
forumTopicId: 301048
|
||||||
|
dashedName: create-a-graphic-using-css
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
通過使用不同的選擇器和屬性，你可以做出有趣的形狀， 一個簡單的例子是新月形狀。 在這個挑戰中，我們會學習如何使用 `box-shadow` 屬性來設置元素的陰影，以及使用 `border-radius` 屬性控制元素的圓角邊框。
|
||||||
|
|
||||||
|
首先我們來創建一個圓的、透明的圖形，它具有模糊陰影並略微向兩邊遞減。 如你所見，這個陰影其實就是新月形狀。
|
||||||
|
|
||||||
|
爲了創建一個圓形的對象，`border-radius` 應該被設置成 50%。
|
||||||
|
|
||||||
|
你應該還記得之前關卡的 `box-shadow` 屬性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和顏色值。 其中 `blur-radius` 和 `spread-radius` 是可選的。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把編輯器裏的正方形元素變成新月形狀。 首先，把 `background-color` 改爲 `transparent`，接着把 `border-radius` 屬性設置成 50%，以創建一個圓形。 最後，更改 `box-shadow` 屬性，使其 `offset-x` 爲 25px，`offset-y` 爲 10px，`blur-radius` 爲 0，`spread-radius` 爲 0，顏色爲 `blue`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`background-color` 屬性值應爲 `transparent`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/background-color:\s*?transparent;/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
`border-radius` 屬性的值應該設置爲 `50%`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
更改 `box-shadow` 屬性，使其 `offset-x` 爲 25px，`offset-y` 爲 10px，`blur-radius` 爲 0，`spread-radius` 爲 0，顏色爲 `blue`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: blue;
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: 25px 10px 10px 10px green;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div class="center"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.center {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 25px 10px 0 0 blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="center"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512abb
|
||||||
|
title: 使用 hr 標籤創建水平線
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c3bR8t7'
|
||||||
|
forumTopicId: 301049
|
||||||
|
dashedName: create-a-horizontal-line-using-the-hr-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
你可以用 `hr` 標籤來創建一條寬度撐滿父元素的水平線。 這種水平分割線一般用來表示內容主題的改變，或在視覺上將文檔分隔成幾個部分。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
在卡片標題元素 `h4` 下方添加一個 `hr` 標籤。
|
||||||
|
|
||||||
|
**注意：**HTML 中的 `hr` 是自閉合標籤，所以我們不需要爲它添加結束標籤。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應存在一個 `hr` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('hr').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`hr` 應在標題和段落之間。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4><s>Google</s>Alphabet</h4>
|
||||||
|
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4><s>Google</s>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512ade
|
||||||
|
title: 使用 CSS 和 HTML 創建更復雜的形狀
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPpz4fr'
|
||||||
|
forumTopicId: 301050
|
||||||
|
dashedName: create-a-more-complex-shape-using-css-and-html
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
世界上最流行的形狀非心形莫屬了，在本挑戰中我們將用純 CSS 創建一個心形。 但是首先你需要了解僞元素 `::before` 和 `::after`。 僞元素可以在所選元素之前或之後添加一些內容。 在下面的代碼中，`::before` 僞元素用來給 class 爲 `heart` 的元素添加一個正方形：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.heart::before {
|
||||||
|
content: "";
|
||||||
|
background-color: yellow;
|
||||||
|
border-radius: 25%;
|
||||||
|
position: absolute;
|
||||||
|
height: 50px;
|
||||||
|
width: 70px;
|
||||||
|
top: -50px;
|
||||||
|
left: 5px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`::before` 和 `::after` 必須配合 `content` 來使用。 這個屬性通常用來給元素添加內容諸如圖片或者文字。 儘管有時 `::before` 和 `::after` 是用來實現形狀而非文字，但 `content` 屬性仍然是必需的，此時它的值可以是空字符串。 在上面的例子裏，class 爲 `heart` 元素的 `::before` 僞類添加了一個黃色的長方形，長方形的高和寬分別爲 `50px` 和 `70px`。 這個矩形有圓角，因爲它的 `border-radius` 爲 25%，它的位置是絕對位置，位於離元素左邊和頂部分別是 `5px`、`50px` 的位置。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把屏幕裏的元素變成心形。 在 `heart::after` 選擇器裏，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。
|
||||||
|
|
||||||
|
接下來，用類選擇器選取 class 爲 `heart`（只是 `heart`）的元素，爲它添加 `transform` 屬性。 使用 `rotate()` 函數並設置角度爲 -45 度。
|
||||||
|
|
||||||
|
最後，在 `heart::before` 選擇器裏面，設置 `content` 屬性值爲空字符串。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`heart::after` 選擇器的 `background-color` 屬性值應爲 `pink`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||||
|
assert(
|
||||||
|
/({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`heart::after` 僞元素的 `border-radius` 屬性值應爲 50%。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `heart` 的元素的 `transform` 屬性應使用 `rotate()` 函數並傳入參數 -45 度。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
`heart::before` 僞元素的 `content` 應爲空字符串。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.heart {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: pink;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
transform: ;
|
||||||
|
}
|
||||||
|
.heart::after {
|
||||||
|
background-color: blue;
|
||||||
|
content: "";
|
||||||
|
border-radius: 25%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 0px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
.heart::before {
|
||||||
|
content: ;
|
||||||
|
background-color: pink;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: -25px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="heart"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.heart {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: pink;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
.heart::after {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 0px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
.heart::before {
|
||||||
|
content: "";
|
||||||
|
background-color: pink;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: -25px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="heart"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512ae1
|
||||||
|
title: 使用 CSS 動畫創建動畫
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||||
|
forumTopicId: 301051
|
||||||
|
dashedName: create-movement-using-css-animation
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在元素的 `position` 已有指定值（如 `fixed` 或者 `relative`）時，CSS 偏移屬性 `right`、`left`、`top`、`bottom` 可以用在動畫規則裏創建動作。
|
||||||
|
|
||||||
|
就像下面的例子展示的那樣，你可以在 `50%` keyframe 處設置 `top` 屬性爲 50px，在開始（`0%`）和結束（`100%`）keyframe 處設置爲 0px，以實現元素先向下運動，然後返回的動作效果。
|
||||||
|
|
||||||
|
```css
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: green;
|
||||||
|
top: 50px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
請實現讓 `div` 水平運動的效果。 使用 `left` 偏移屬性，添加 `@keyframes` 規則，讓 rainbow 在 `0%` 處偏移 0px，在 `50%` 處偏移 25px，在 `100%` 處偏移 -25px。 不要修改編輯器裏的 `top` 屬性，元素應該同時在水平和豎直方向運動。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`0%` 的 `@keyframes` 規則應爲向 `left` 偏移 0px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
`50%` 的 `@keyframes` 規則應爲向 `left` 偏移 25px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
`100%` 的 `@keyframes` 規則應爲向 `left` 偏移 -25px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
animation-name: rainbow;
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: green;
|
||||||
|
top: 50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
top: 0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="rect"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
animation-name: rainbow;
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: green;
|
||||||
|
top: 50px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
top: 0px;
|
||||||
|
left: -25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="rect"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad8
|
||||||
|
title: 通過添加細微圖案作爲背景圖像來創建紋理
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cQdwJC8'
|
||||||
|
forumTopicId: 301052
|
||||||
|
dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
爲了增加背景圖的質感，我們可以爲它添加一個不那麼明顯的紋理圖案，這樣可以讓頁面更討喜。 但關鍵在於，我們需要找到一個平衡點，因爲我們不希望背景圖搶佔了內容的風頭，造成喧賓奪主的結果。 `background` 屬性支持使用 `url()` 函數作爲屬性值，這讓我們可以通過鏈接的方式引入紋理或樣式的圖片。 圖片鏈接的地址應寫在括號內，一般會用引號包起來。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
選取 `body` 元素，並設置整個頁面的 `background` 爲 url `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png` 的圖片。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`body` 元素選擇器應包含 `background` 屬性，且屬性值應爲給定的 `url`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
id: 587d7791367417b2b2512ab3
|
||||||
|
title: 使用 text-align 屬性創建視覺平衡
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c3b4EAp'
|
||||||
|
forumTopicId: 301053
|
||||||
|
dashedName: create-visual-balance-using-the-text-align-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
這部分課程的主題是應用視覺設計。 開始的挑戰基於美化一個卡片組件的外觀，藉此展示了若干核心原則。
|
||||||
|
|
||||||
|
web 內容大部分都是文本。 CSS 裏面的 `text-align` 屬性可以控制文本的對齊方式。
|
||||||
|
|
||||||
|
`text-align: justify;` 可以讓除最後一行之外的文字兩端對齊，即每行的左右兩端都緊貼行的邊緣。
|
||||||
|
|
||||||
|
`text-align: center;` 可以讓文本居中對齊。
|
||||||
|
|
||||||
|
`text-align: right;` 可以讓文本右對齊。
|
||||||
|
|
||||||
|
`text-align: left;` 是默認值，它可以讓文本左對齊。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
請讓內容文本爲 “Google” 的 `h4` 標籤居中對齊， 然後將介紹 Google 創立歷程的段落文本兩端對齊。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h4` 標籤應有值爲 `center` 的 text-align 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').css('text-align') == 'center');
|
||||||
|
```
|
||||||
|
|
||||||
|
`p` 標籤應有值爲 `justify` 的 text-align 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').css('text-align') == 'justify');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512ae2
|
||||||
|
title: 通過從左到右淡化元素來創建視覺方向
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cGJqqAE'
|
||||||
|
forumTopicId: 301054
|
||||||
|
dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在本挑戰中，我們需要改變動畫元素的 `opacity` 屬性值，使其在到達屏幕右側時漸隱。
|
||||||
|
|
||||||
|
在示例動畫中，具有漸變背景的圓形元素在 `@keyframes` 爲 50% 的節點向右移動。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
使用 id 選擇器選擇 id 爲 `ball` 的元素，在 @keyframes 爲 `50%` 的節點裏添加 `opacity` 屬性並設置屬性值爲 0.1，使其在向右移動時漸隱。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`keyframes` 爲 50% 的節點處應設置 `opacity` 屬性值爲 0.1，以使其漸隱。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#ball {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: fixed;
|
||||||
|
left: 20%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
50% {
|
||||||
|
left: 60%;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="ball"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#ball {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: fixed;
|
||||||
|
left: 20%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
50% {
|
||||||
|
left: 60%;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="ball"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512abf
|
||||||
|
title: 降低元素的透明度
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||||
|
forumTopicId: 301055
|
||||||
|
dashedName: decrease-the-opacity-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
CSS 裏的 `opacity` 屬性用來設置元素的透明度。
|
||||||
|
|
||||||
|
<blockquote>屬性值爲 1 代表完全不透明。 <br>屬性值爲 0.5 代表半透明。 <br>屬性值爲 0 代表完全透明。</blockquote>
|
||||||
|
|
||||||
|
透明度會應用到元素內的所有內容，不論是圖片，還是文本，或是背景色。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
將 class 爲 `links` 的所有超鏈接的 `opacity` 屬性值設置 0.7。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應使用 `links` class 選擇所有的超鏈接，並設置其 `opacity` 屬性值爲 0.7。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
|
||||||
|
$('style').text()
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512ad1
|
||||||
|
title: 瞭解互補色
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MD3Tr'
|
||||||
|
forumTopicId: 301056
|
||||||
|
dashedName: learn-about-complementary-colors
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
色彩理論以及設計色彩學很複雜，這裏將只涉及基礎部分。 在網站設計裏，顏色能讓內容更醒目，能調動情緒，從而創造舒適的視覺體驗。 不同的顏色組合對網站的視覺效果影響很大，精妙的設計都需要適宜的顏色來美化頁面內容。
|
||||||
|
|
||||||
|
色環是我們認識顏色關係的好工具。它是一個近色相鄰、異色相離的圓環。 當兩個顏色恰好在色環的兩端時，這兩個顏色就互爲補色。 兩個互爲補色的顏色會在混合後變成灰色。 然而，補色搭配能形成強烈的視覺對比效果。
|
||||||
|
|
||||||
|
下面是一些以 hex 形式表示的補色例子：
|
||||||
|
|
||||||
|
<blockquote>紅色（#FF0000）和藍綠色 (#00FFFF)<br>綠色（#00FF00）和品紅色（#FF00FF）<br>藍色（#0000FF）和黃色（#FFFF00）</blockquote>
|
||||||
|
|
||||||
|
這與我們許多人在學校學的過時的 RYB 色彩模式不同，RYB 有不同的原色和補色。 現代色彩理論使用 RGB 模型（如在計算機屏幕上）和 CMY（K）模型（如在印刷中）。 在[這裏](https://en.wikipedia.org/wiki/Color_model)閱讀了解更多有關這個複雜主題的信息。
|
||||||
|
|
||||||
|
現在，很多在線選色工具也爲我們提供了尋找補色的功能。
|
||||||
|
|
||||||
|
**注意：**對於顏色相關的挑戰：顏色搭配是提起用戶興趣或吸引用戶注意的重要方式之一。 但我們不應讓顏色作爲傳達重要信息的唯一方式，因爲視覺障礙用戶可能無法像其他人一樣看出其中的含義。 我們將會在應用無障礙章節進行詳細介紹。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把 class 爲 `blue` 和 `yellow` 的元素的 `background-color` 屬性改成相應的顏色。 注意觀察這兩個顏色的搭配效果，以及對比白色背景的視覺效果。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `blue` 的 `div` 元素應有一個 `background-color`，顏色爲藍色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `yellow` 的 `div` 元素的 `background-color` 屬性，顏色爲黃色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="blue"></div>
|
||||||
|
<div class="yellow"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="blue"></div>
|
||||||
|
<div class="yellow"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a4367417b2b2512ad2
|
||||||
|
title: 瞭解三次色
|
||||||
|
challengeType: 0
|
||||||
|
forumTopicId: 301057
|
||||||
|
dashedName: learn-about-tertiary-colors
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
電腦顯示器和各類屏幕都是基於顏色疊加的模型：將紅（R）、綠（G）、藍（B）三原色的色光以不同的比例相加，就可以產生各種色彩光。 這在現代色彩理論中叫作三原色光模式（RGB Color Model）。 紅色（R）、綠色（G）和藍色（B）叫作三原色。 如果把兩種原色相加，就可以產生二次色：藍綠（G+B）、品紅（R+B）和黃色（R+G）， 我們在上一個挑戰裏已經見過這些顏色了。 這些二次色恰好是在合成它們時未使用的原色的補色，即在色環中位於兩端。 例如，品紅色是紅色和藍色相加產生，它是綠色的補色。
|
||||||
|
|
||||||
|
三次色是由原色和二次色相加產生的顏色， 例如，在 RGB 顏色模型中，紅色（原色）和黃色（二次色）相加產生橙色（三次色）。 將這六種顏色中相鄰的顏色相加，便產生了十二色色環。
|
||||||
|
|
||||||
|
設計裏面有很多種顏色搭配方法。 涉及到三次色的一種配色方法是分裂補色搭配法。 選定主色之後，在色環上選擇與它的補色相鄰的兩種顏色與之搭配。 此種搭配既有對比，又不失和諧。
|
||||||
|
|
||||||
|
下面是使用分裂補色搭配法創建的三個顏色：
|
||||||
|
|
||||||
|
<table class='table table-striped'><thead><tr><th>顏色</th><th>HEX 顏色碼</th></tr></thead><thead></thead><tbody><tr><td>橙色</td><td>#FF7F00</td></tr><tr><td>藍綠色</td><td>#00FFFF</td></tr><tr><td>樹莓紅</td><td>#FF007F</td></tr></tbody></table>
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把 class 爲 `orange`、`cyan` 和 `raspberry` 的 `background-color` 改成其對應的顏色。 在這個挑戰中，請使用顏色的十六進制符號（即 hex code）來表示。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `orange` 的 `div` 的 `background-color` 屬性值應爲橙色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `cyan` 的 `div` 的 `background-color` 屬性值應爲藍綠色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `raspberry` 的 `div` 的 `background-color` 屬性值應爲樹莓紅色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||||
|
```
|
||||||
|
|
||||||
|
所有的 `background-color` 應使用十六進制顏色碼，而不應使用顏色名稱。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raspberry {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="orange"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="raspberry"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange {
|
||||||
|
background-color: #FF7F00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyan {
|
||||||
|
background-color: #00FFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.raspberry {
|
||||||
|
background-color: #FF007F;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="orange"></div>
|
||||||
|
<div class="cyan"></div>
|
||||||
|
<div class="raspberry"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a9367417b2b2512ae8
|
||||||
|
title: 學習貝塞爾曲線的原理
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
||||||
|
forumTopicId: 301058
|
||||||
|
dashedName: learn-how-bezier-curves-work
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
上一個挑戰中，我們介紹了 `animation-timing-function` 以及它的一些預設值，這些值定義了不同時間內的動畫速度。 除了預定義值之外，CSS 還提供了貝塞爾曲線（Bezier curves）來更細緻地控制動畫的速度曲線。
|
||||||
|
|
||||||
|
在 CSS 動畫裏，我們可以用 `cubic-bezier` 來定義貝塞爾曲線。 曲線的形狀代表了動畫的速度。 曲線在 1 * 1 的座標系統內， 其中 X 軸代表動畫的時間間隔（類似於時間比例尺），Y 軸代表動畫的改變。
|
||||||
|
|
||||||
|
`cubic-bezier` 函數包含了 1 * 1 網格里的4個點：`p0`、`p1`、`p2`、`p3`。 其中 `p0` 和 `p3` 是固定值，代表曲線的起始點和結束點，座標值依次爲 (0, 0) 和 (1, 1)。 你只需設置另外兩點的 x 值和 y 值，設置的這兩點確定了曲線的形狀從而確定了動畫的速度曲線。 在 CSS 裏面通過 `(x1, y1, x2, y2)` 來確定 `p1` 和 `p2`。 以下就是 CSS 貝塞爾曲線的例子：
|
||||||
|
|
||||||
|
```css
|
||||||
|
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||||
|
```
|
||||||
|
|
||||||
|
在上面的例子裏，兩個點的 x 和 y 值相等（x1 = 0.25 = y1 和 x2 = 0.75 = y2）。如果你還記得幾何課的知識，結果是從原點到點 (1, 1) 的一條直線。 元素在動畫中的速度呈線性，效果和使用 `linear` 關鍵詞的效果一致。 換言之，元素勻速運動。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
對於 id 爲 `ball1` 的元素，把 `animation-timing-function` 屬性的值從 `linear` 改爲等價的 `cubic-bezier` 函數值。 也就是說使用上面例子給的值。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
id 爲 `ball1` 的元素的 `animation-timing-function` 屬性值應該爲和 linear 預定值等價的 `cubic-bezier` 函數值。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('#ball1').css('animation-timing-function') ==
|
||||||
|
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
id 爲 `ball2` 的元素的 `animation-timing-function` 屬性值不應改變。
|
||||||
|
|
||||||
|
```js
|
||||||
|
const ball2Animation = __helpers.removeWhiteSpace(
|
||||||
|
$('#ball2').css('animation-timing-function')
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id="ball1"></div>
|
||||||
|
<div class="balls" id="ball2"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512adf
|
||||||
|
title: 瞭解 CSS 的關鍵幀和動畫是如何工作的
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||||||
|
forumTopicId: 301059
|
||||||
|
dashedName: learn-how-the-css-keyframes-and-animation-properties-work
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
如果要給元素添加動畫，你需要了解 animation 屬性以及 `@keyframes` 規則。 animation 屬性控制動畫的外觀，`@keyframes` 規則控制動畫中各階段的變化。 總共有 8 個 animation 屬性。 爲了便於理解，本挑戰中我們只會暫時涉及到兩個最常用的屬性。
|
||||||
|
|
||||||
|
`animation-name` 用來設置動畫的名稱，也就是我們稍後要在 `@keyframes` 裏用到的名稱。
|
||||||
|
|
||||||
|
`animation-duration` 設置動畫所花費的時間。
|
||||||
|
|
||||||
|
`@keyframes` 可以通過設置特定時間點的行爲來創建動畫。 爲此，我們只需要給持續時間內的特定幀（從 0% 到 100%）加上 CSS 規則。 如果用一部電影來做類比，那麼 CSS 裏面的 0% 關鍵幀就像是電影裏面的開場鏡頭；100% 關鍵幀就像是電影裏的片尾，就是那個之後會出現演職人員列表的片尾。 在動畫設定的時間內，CSS 會根據關鍵幀的規則來給元素添加動畫效果。 100% 位置的 CSS 屬性就是元素最後的樣子，相當於電影裏的演職員表或者鳴謝鏡頭。 然後CSS 應用魔法來在給定的時間內轉換元素以使其脫離場景。 下面舉例說明 `@keyframes` 和動畫屬性的用法：
|
||||||
|
|
||||||
|
```css
|
||||||
|
#anim {
|
||||||
|
animation-name: colorful;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes colorful {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
id 爲 `anim` 的元素，我們在代碼中將它的 `animation-name` 設置爲 `colorful`，同時設置 `animation-duration` 爲 3 秒。 然後我們把 `@keyframes` 規則添加到名爲 `colorful` 的動畫屬性上。 在動畫開始時（0%）的背景顏色爲藍色，在動畫結束時（100%）的背景顏色爲黃色。 注意我們不只可以設置開始和結束，而是從 0% 到 100% 間的任意位置都可以設置。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給 id 爲 `rect` 的元素添加動畫，設置其 `animation-name` 爲 `rainbow`，設置其 `animation-duration` 爲 4 秒。 然後聲明 `@keyframes` 規則，設置動畫開始時（`0%`）的 `background-color` 爲藍色，動畫中間時（`50%`）爲綠色，動畫結束時（`100%`）爲爲黃色。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
id 爲 `rect` 的元素應該有一個值爲 `rainbow` 的 `animation-name` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#rect').css('animation-name') == 'rainbow');
|
||||||
|
```
|
||||||
|
|
||||||
|
id 爲 `rect` 的元素應該有一個值爲 4s 的 `animation-duration` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#rect').css('animation-duration') == '4s');
|
||||||
|
```
|
||||||
|
|
||||||
|
`@keyframes` 規則的 `animation-name` 應爲 `rainbow`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
`@keyframes` 規則的 `rainbow` 在 0% 時的 `background-color` 應爲 `blue`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
`@keyframes` 規則的 `rainbow` 在 50% 時的 `background-color` 應爲 `green`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
`@keyframes` 規則的 rainbow 在 100% 時的 `background-color` 應爲 `yellow`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div id="rect"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
height: 40px;
|
||||||
|
width: 70%;
|
||||||
|
background: black;
|
||||||
|
margin: 50px auto;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect {
|
||||||
|
animation-name: rainbow;
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% {
|
||||||
|
background-color: blue;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="rect"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512acb
|
||||||
|
title: 絕對定位的參照物是元素的父元素
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
||||||
|
forumTopicId: 301060
|
||||||
|
dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
接下來要介紹 CSS `position` 屬性的取值選項 `absolute`，它的含義是相對於其包含塊定位。 和 `relative` 定位不一樣，絕對定位會將元素從當前的文檔流裏面移除，周圍的元素會忽略它。 這樣我們就可以用 CSS 的 top、bottom、left、right 屬性來調整元素的位置。
|
||||||
|
|
||||||
|
絕對定位比較特殊的一點是元素的定位參照於最近的 *positioned* 祖先元素。 如果它的父元素沒有添加定位規則（默認是 `position: relative;`），瀏覽器會繼續尋找直到默認的 `body` 標籤。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
通過設置 `position` 屬性值爲 `absolute`，將 `#searchbar` 元素固定到它的父元素 `section` 的右上角。 即設定其 `top` 和 `right` 爲 50 像素。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`#searchbar` 元素的 `position` 屬性值應爲 `absolute`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#searchbar').css('position') == 'absolute');
|
||||||
|
```
|
||||||
|
|
||||||
|
`#searchbar` 元素的 `top` 屬性值應爲 50px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#searchbar').css('top') == '50px');
|
||||||
|
```
|
||||||
|
|
||||||
|
`#searchbar` 元素的 `right` 屬性值應爲 50px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#searchbar').css('right') == '50px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#searchbar {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<section>
|
||||||
|
<form id="searchbar">
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
<input type="search" id="search" name="search">
|
||||||
|
<input type="submit" name="submit" value="Go!">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#searchbar {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
section {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<section>
|
||||||
|
<form id="searchbar">
|
||||||
|
<label for="search">Search:</label>
|
||||||
|
<input type="search" id="search" name="search">
|
||||||
|
<input type="submit" name="submit" value="Go!">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,120 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512acc
|
||||||
|
title: 固定定位的參照物是瀏覽器的窗口
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MDNUR'
|
||||||
|
forumTopicId: 301061
|
||||||
|
dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
接下來要介紹的是 `fixed` 定位，它是一種特殊的絕對（absolute）定位，將元素相對於瀏覽器窗口定位。 類似於絕對位置，它與 CSS 偏移屬性一起使用，並且也會將元素從當前的文檔流裏面移除。 其它元素會忽略它的存在，這樣也許需要調整其他位置的佈局。
|
||||||
|
|
||||||
|
但 `fixed` 和 `absolute` 的最明顯的區別在於，前者定位的元素不會隨着屏幕滾動而移動。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
我們已經將代碼裏導航欄的 id 設置爲了 `navbar`。 請把它的 `position` 設置成 `fixed`，同時分別設定其 `top` 和 `left` 屬性值爲 0 像素。 修改後，你可以滑動預覽窗口，觀察導航欄的位置。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`#navbar` 元素的 `position` 屬性值應爲 `fixed`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#navbar').css('position') == 'fixed');
|
||||||
|
```
|
||||||
|
|
||||||
|
`#navbar` 元素的 `top` 屬性值應爲 0px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#navbar').css('top') == '0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
`#navbar` 元素的 `left` 屬性值應爲 0px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#navbar').css('left') == '0px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: 150vh;
|
||||||
|
}
|
||||||
|
#navbar {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
background-color: #767676;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<nav id="navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
min-height: 150vh;
|
||||||
|
}
|
||||||
|
#navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #767676;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 5px 0px 5px 30px;
|
||||||
|
}
|
||||||
|
nav li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<nav id="navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a8367417b2b2512ae4
|
||||||
|
title: 使用無限的動畫計數製作 CSS 心跳
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cDZpDUr'
|
||||||
|
forumTopicId: 301062
|
||||||
|
dashedName: make-a-css-heartbeat-using-an-infinite-animation-count
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
這也是一個用 `animation-iteration-count` 屬性創造持續動畫的例子，它基於我們在前面挑戰中創建的心形。
|
||||||
|
|
||||||
|
心跳動畫的每一秒包含兩個部分。 `heart` 元素（包括 `:before` 和 `:after`）使用 `transform` 屬性改變其大小，背景 `div` 使用 `background` 屬性改變其顏色。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給 `back` class 和 the `heart` class 添加 `animation-iteration-count` 屬性，將屬性值設置爲 `infinite`，使心保持跳動。 `heart:before` 和 `heart:after` 所選擇的元素則不需要添加動畫屬性。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`heart` class 的 `animation-iteration-count` 的屬性值應爲 `infinite`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||||
|
```
|
||||||
|
|
||||||
|
`back` class 的 `animation-iteration-count` 的屬性值應爲 `infinite`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: white;
|
||||||
|
animation-name: backdiv;
|
||||||
|
animation-duration: 1s;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: pink;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
animation-name: beat;
|
||||||
|
animation-duration: 1s;
|
||||||
|
|
||||||
|
}
|
||||||
|
.heart:after {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 0px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
.heart:before {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: -25px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backdiv {
|
||||||
|
50% {
|
||||||
|
background: #ffe6f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes beat {
|
||||||
|
0% {
|
||||||
|
transform: scale(1) rotate(-45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.6) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div class="back"></div>
|
||||||
|
<div class="heart"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.back {
|
||||||
|
position: fixed;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: white;
|
||||||
|
animation-name: backdiv;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: pink;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
animation-name: beat;
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
.heart:after {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 0px;
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
.heart:before {
|
||||||
|
background-color: pink;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: -25px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes backdiv {
|
||||||
|
50% {
|
||||||
|
background: #ffe6f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes beat {
|
||||||
|
0% {
|
||||||
|
transform: scale(1) rotate(-45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(0.6) rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="back"></div>
|
||||||
|
<div class="heart"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,121 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a9367417b2b2512aea
|
||||||
|
title: 使用貝塞爾曲線讓運動更加自然
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c7akWUv'
|
||||||
|
forumTopicId: 301063
|
||||||
|
dashedName: make-motion-more-natural-using-a-bezier-curve
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在這個挑戰中，我們需要給元素添加動畫來模擬雜耍中被拋接的球。 之前的挑戰中，我們學習了 `linear` 和 `ease-out` 的貝塞爾曲線描述，但這兩個都無法完美地描述雜耍球的運動。 在本關裏你需要定製貝塞爾曲線。
|
||||||
|
|
||||||
|
當 `animation-iteration-count` 值爲 infinite 時，`animation-timing-function` 會自動循環 keyframe。 由於我們是在動畫週期的中間點（`50%` 處）設置的 keyframe 規則，最終的結果是球向上和球向下是兩個同樣的動畫過程。
|
||||||
|
|
||||||
|
下面的例子模擬了雜耍球運動：
|
||||||
|
|
||||||
|
```css
|
||||||
|
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||||
|
```
|
||||||
|
|
||||||
|
注意 y2 的值是大於 1 的。 雖然貝塞爾曲線是在 1*1 的座標系統內，x 值只能在 0 到 1，但是 y 值是可以大於 1 的。 這樣才能模擬雜耍球運動。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把 id 爲 `green` 的元素的 `animation-timing-function` 值改成 `cubic-bezier` 函數，函數的參數 x1，y1，x2，y2 值依次爲 0.311、0.441、0.444、1.649。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
id 爲 `green` 的元素的 `animation-timing-function` 值應爲 `cubic-bezier` 函數，函數的參數 x1，y1，x2，y2 值應爲指定值。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('#green').css('animation-timing-function') ==
|
||||||
|
'cubic-bezier(0.311, 0.441, 0.444, 1.649)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 60%;
|
||||||
|
animation-name: jump;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 25%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 50%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
#green {
|
||||||
|
background: green;
|
||||||
|
left: 75%;
|
||||||
|
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jump {
|
||||||
|
50% {
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id="red"></div>
|
||||||
|
<div class="balls" id="blue"></div>
|
||||||
|
<div class="balls" id="green"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls {
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
top: 60%;
|
||||||
|
animation-name: jump;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 25%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 50%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
#green {
|
||||||
|
background: green;
|
||||||
|
left: 75%;
|
||||||
|
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jump {
|
||||||
|
50% {
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id="red"></div>
|
||||||
|
<div class="balls" id="blue"></div>
|
||||||
|
<div class="balls" id="green"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
---
|
||||||
|
id: 58a7a6ebf9a6318348e2d5aa
|
||||||
|
title: 修改動畫的填充模式
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJDmcE'
|
||||||
|
forumTopicId: 301064
|
||||||
|
dashedName: modify-fill-mode-of-an-animation
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
太棒了，但是現在還不完美。 注意動畫在 `500ms` 之後重置了，所以按鈕又變成了之前的顏色。 而我們想要的效果是按鈕在懸停時始終高亮。
|
||||||
|
|
||||||
|
爲此，我們可以通過把 `animation-fill-mode` 設置成 `forwards` 來實現。 `animation-fill-mode` 指定了在動畫結束時元素的樣式： 你可以這樣設置：
|
||||||
|
|
||||||
|
```css
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
設置 `button:hover` 的 `animation-fill-mode` 屬性爲 `forwards`，使用戶把鼠標懸停在按鈕上時，按鈕保持高亮。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`button:hover` 應有一個值爲 `forwards` 的 `animation-fill-mode` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi
|
||||||
|
) &&
|
||||||
|
code.match(
|
||||||
|
/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi
|
||||||
|
) &&
|
||||||
|
code.match(
|
||||||
|
/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
/* Only change code below this line */
|
||||||
|
|
||||||
|
/* Only change code above this line */
|
||||||
|
}
|
||||||
|
@keyframes background-color {
|
||||||
|
100% {
|
||||||
|
background-color: #4791d0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<button>Register</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes background-color {
|
||||||
|
100% {
|
||||||
|
background-color: #4791d0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<button>Register</button>
|
||||||
|
```
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
id: 587d781e367417b2b2512aca
|
||||||
|
title: 使用 CSS 偏移移動相對定位的元素
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c9bQEA4'
|
||||||
|
forumTopicId: 301065
|
||||||
|
dashedName: move-a-relatively-positioned-element-with-css-offsets
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
CSS 裏面的 `top`、`bottom`、`left` 和 `right` 定義了元素在相應方位的偏移距離。 元素將從當前位置向屬性相反的方向偏移。 就像你在上一個挑戰看到的，`top` 屬性使 `h2` 向下移動。 同樣，使用 `left` 將項目移動到右邊。
|
||||||
|
|
||||||
|
<img src='https://i.imgur.com/eWWi3gZ.gif' alt='' />
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
請通過 CSS 屬性把 `h2` 向上移動 10 像素，向右移動 15 像素。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應使用 CSS 屬性使 `h2` 相對當前位置向上移動 10px。 也就是說，從當前位置相對於 `bottom` 移動 10px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('bottom') == '10px');
|
||||||
|
```
|
||||||
|
|
||||||
|
應使用 CSS 屬性使 `h2` 相對當前位置向右移動 15px。 也就是說，從當前位置相對於 `left` 移動 15px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('left') == '15px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
left: 15px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>On Being Well-Positioned</h1>
|
||||||
|
<h2>Move me!</h2>
|
||||||
|
<p>I still think the h2 is where it normally sits.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a3367417b2b2512ace
|
||||||
|
title: 使用 float 屬性將元素左浮動或右浮動
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MDqu2'
|
||||||
|
forumTopicId: 301066
|
||||||
|
dashedName: push-elements-left-or-right-with-the-float-property
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
接下來要介紹的定位機制並不是 `position` 屬性的選項，而是通過元素的 `float` 屬性來設置。 浮動元素不在文檔流中，它向 `left` 或 `right` 浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。 通常需要用 `width` 屬性來指定浮動元素佔據的水平空間。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
使這兩個元素按兩列布局，`section` 和 `aside` 左右排列。 設置 `#left` 元素的 `float` 屬性值爲 `left`，設置 `#right` 元素的 `float` 屬性值爲 `right`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
id 爲 `left` 的元素的 `float` 屬性值應爲 `left`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#left').css('float') == 'left');
|
||||||
|
```
|
||||||
|
|
||||||
|
id 爲 `right` 的元素的 `float` 屬性值應爲 `right`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#right').css('float') == 'right');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
#left {
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#right {
|
||||||
|
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
aside, section {
|
||||||
|
padding: 2px;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
</header>
|
||||||
|
<section id="left">
|
||||||
|
<h2>Content</h2>
|
||||||
|
<p>Good stuff</p>
|
||||||
|
</section>
|
||||||
|
<aside id="right">
|
||||||
|
<h2>Sidebar</h2>
|
||||||
|
<p>Links</p>
|
||||||
|
</aside>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
#left {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#right {
|
||||||
|
float: right;
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
aside, section {
|
||||||
|
padding: 2px;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
</header>
|
||||||
|
<section id="left">
|
||||||
|
<h2>Content</h2>
|
||||||
|
<p>Good stuff</p>
|
||||||
|
</section>
|
||||||
|
<aside id="right">
|
||||||
|
<h2>Sidebar</h2>
|
||||||
|
<p>Links</p>
|
||||||
|
</aside>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac2
|
||||||
|
title: 設置多個標題元素的 font-size
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cPpQNT3'
|
||||||
|
forumTopicId: 301067
|
||||||
|
dashedName: set-the-font-size-for-multiple-heading-elements
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`font-size` 屬性用來指定元素內文字的大小。 我們可以爲多個元素添加這個規則，讓頁面內不同元素的文字大小得以統一。 在本挑戰裏，你需要設置從 `h1` 到 `h6` 的文字大小。
|
||||||
|
|
||||||
|
# --instructions-- <p>在 <code>style</code> 標籤中, 對各元素的 <code>font-size</code> 進行如下設置：</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>將 <code>h1</code> 標籤的文字大小設爲 68px。</li>
|
||||||
|
<li>將 <code>h2</code> 標籤的文字大小設爲 52px。</li>
|
||||||
|
<li>將 <code>h3</code> 標籤的文字大小設爲 40px</li>
|
||||||
|
<li>將 <code>h4</code> 標籤的文字大小設爲 32px</li>
|
||||||
|
<li>將 <code>h5</code> 標籤的文字大小設爲 21px</li>
|
||||||
|
<li>將 <code>h6</code> 標籤的文字大小設爲 14px</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h1` 標籤的 `font-size` 屬性值應爲 68px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').css('font-size') == '68px');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h2` 標籤的 `font-size` 屬性值應爲 52px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('font-size') == '52px');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h3` 標籤的 `font-size` 屬性值應爲 40px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h3').css('font-size') == '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h4` 標籤的 `font-size` 屬性值應爲 32px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').css('font-size') == '32px');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h5` 標籤的 `font-size` 屬性值應爲 21px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h5').css('font-size') == '21px');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h6` 標籤的 `font-size` 屬性值應爲 14px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i;
|
||||||
|
assert.strictEqual(true, regex.test(code));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
font-size: 68px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 52px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
```
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac4
|
||||||
|
title: 設置段落文本的 font-size
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJ36Cr'
|
||||||
|
forumTopicId: 301068
|
||||||
|
dashedName: set-the-font-size-of-paragraph-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
CSS 裏面的 `font-size` 屬性不只限於標題，還可以應用於任何包含文字的元素內。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把段落的 `font-size` 屬性值設置爲 16px，讓它看起來更清晰。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`p` 標籤的 `font-size` 屬性值應爲 16px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').css('font-size') == '16px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
```
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac3
|
||||||
|
title: 設置多個標題元素的 font-weight
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/crVWRHq'
|
||||||
|
forumTopicId: 301069
|
||||||
|
dashedName: set-the-font-weight-for-multiple-heading-elements
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在上一個挑戰裏我們已經爲每個標題設置了 `font-size`，接下來我們將要設置 `font-weight`。
|
||||||
|
|
||||||
|
`font-weight` 屬性用於設置文本中字體的粗細。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
<ul><li>設置 <code>h1</code> 標籤的 <code>font-weight</code> 爲 800。</li><li>設置 <code>h2</code> 標籤的 <code>font-weight</code> 爲 600。</li><li>設置 <code>h3</code> 標籤的 <code>font-weight</code> 爲 500。</li><li>設置 <code>h4</code> 標籤的 <code>font-weight</code> 爲 400。</li><li>設置 <code>h5</code> 標籤的 <code>font-weight</code> 爲 300。</li><li>設置 <code>h6</code> 標籤的 <code>font-weight</code> 爲 200。</li></ul>
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h1` 標籤的 `font-weight` 屬性值應爲 800。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').css('font-weight') == '800');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h2` 標籤的 `font-weight` 屬性值應爲 600。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').css('font-weight') == '600');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h3` 標籤的 `font-weight` 屬性值應爲 500。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h3').css('font-weight') == '500');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h4` 標籤的 `font-weight` 屬性值應爲 400。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').css('font-weight') == '400');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h5` 標籤的 `font-weight` 屬性值應爲 300。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h5').css('font-weight') == '300');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h6` 標籤的 `font-weight` 屬性值應爲 200。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h6').css('font-weight') == '200');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
font-size: 68px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 52px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 40px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 32px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 21px;
|
||||||
|
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
font-size: 68px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 52px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1>This is h1 text</h1>
|
||||||
|
<h2>This is h2 text</h2>
|
||||||
|
<h3>This is h3 text</h3>
|
||||||
|
<h4>This is h4 text</h4>
|
||||||
|
<h5>This is h5 text</h5>
|
||||||
|
<h6>This is h6 text</h6>
|
||||||
|
```
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
---
|
||||||
|
id: 587d781d367417b2b2512ac5
|
||||||
|
title: 設置段落的 line-height
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/crVWdcv'
|
||||||
|
forumTopicId: 301070
|
||||||
|
dashedName: set-the-line-height-of-paragraphs
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
CSS 提供 `line-height` 屬性來設置行間的距離。 行高，顧名思義，可以用來設置每行文字所佔據的垂直空間。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給 `p` 標籤添加 `line-height` 屬性並賦值 25px。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`p` 標籤的 `line-height` 屬性值應爲 25px。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').css('line-height') == '25px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
</p>
|
||||||
|
```
|
||||||
@ -0,0 +1,128 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a9367417b2b2512ae9
|
||||||
|
title: 使用貝塞爾曲線移動圖形
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c6bnRCK'
|
||||||
|
forumTopicId: 301071
|
||||||
|
dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
前面的關卡涉及了使用 `ease-out` 預定義值描述了動畫以高速開始低速結束。 右邊的動畫展示了 `ease-out` 效果（藍色的元素）和 `linear` 效果（紅色的元素）的區別。 同樣的，`ease-out` 預定義值也可以用貝塞爾曲線函數實現。
|
||||||
|
|
||||||
|
通俗的講，將一條直線放在範圍只有 1 的座標軸中，並從中間拿 `p1` 和 `p2` 兩個點來拉扯（X 軸的取值區間是 \[0, 1]，Y 軸任意），最後形成的曲線就是動畫的貝塞爾速度曲線。 下面是貝塞爾曲線模仿 ease-out 預定義值的例子：
|
||||||
|
|
||||||
|
```css
|
||||||
|
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
記住所有的 `cubic-bezier` 函數都是從座標爲 (0, 0) 的 `p0` 開始，在座標爲 (1, 1) 的 `p3` 結束。 在這個例子裏，曲線在 y 軸（從 0 開始，運動到 `p1` 的 0，然後運動到 `p2` 的 1）上移動得比在 x 軸（從 0 開始，運動到 `p1` 的 0，到 `p2` 的 0.58）上移動得快。 結果是，在這一段動畫內元素運動得快。 到曲線的結尾，x 和 y 之間的關係反過來了，y 值保持爲 1，沒有變化，x 值從 0.58 變爲 1，元素運動得慢。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
爲了看貝塞爾曲線的運動效果，把 id 爲 `red` 的元素的 `animation-timing-function` 屬性改爲 `cubic-bezier` 函數，其中 x1，y1，x2，y2 值分別爲 0、0、0.58、1。 這會使兩個元素運動過程類似。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
id 爲 `red` 的元素的 `animation-timing-function` 屬性應爲 `cubic-bezier` 函數，其中 x1、y1、x2、y2 值分別爲 0、0、0.58、1。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
id 爲 `red` 的元素不應有值爲 `linear` 的 `animation-timing-function` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||||
|
```
|
||||||
|
|
||||||
|
id 爲 `blue` 的元素的 `animation-timing-function` 屬性值不應該改變。
|
||||||
|
|
||||||
|
```js
|
||||||
|
const blueBallAnimation = __helpers.removeWhiteSpace(
|
||||||
|
$('#blue').css('animation-timing-function')
|
||||||
|
);
|
||||||
|
assert(
|
||||||
|
blueBallAnimation == 'ease-out' ||
|
||||||
|
blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id= "red"></div>
|
||||||
|
<div class="balls" id= "blue"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.balls{
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 50px;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
background: red;
|
||||||
|
left: 27%;
|
||||||
|
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||||
|
}
|
||||||
|
#blue {
|
||||||
|
background: blue;
|
||||||
|
left: 56%;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 249px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="balls" id= "red"></div>
|
||||||
|
<div class="balls" id= "blue"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad7
|
||||||
|
title: 使用 CSS 線性漸變創建條紋元素
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c6bmQh2'
|
||||||
|
forumTopicId: 301072
|
||||||
|
dashedName: use-a-css-linear-gradient-to-create-a-striped-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`repeating-linear-gradient()` 函數和 `linear-gradient()` 很像，主要區別是前者會重複指定的漸變。 `repeating-linear-gradient()` 有很多參數，爲了便於理解，本關只用到角度值和色標。
|
||||||
|
|
||||||
|
角度就是漸變的方向。 色標代表漸變顏色及發生漸變的位置，由百分比或者像素值表示。
|
||||||
|
|
||||||
|
在代碼編輯器的例子裏，漸變開始於 0 像素位置的 `yellow`，然後過渡到距離開始位置 40 像素的 `blue`。 由於下一個漸變顏色的起始位置也是 40 像素，所以顏色直接漸變成第三個顏色值 `green`，然後過渡到距離開始位置 80 像素的 `red`。
|
||||||
|
|
||||||
|
下面的代碼可以幫助理解成對的起止漸變顏色值是如何過渡的。
|
||||||
|
|
||||||
|
```css
|
||||||
|
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
|
||||||
|
```
|
||||||
|
|
||||||
|
如果每對起止漸變顏色值的顏色都是相同的，由於是在兩個相同的顏色間過渡，那麼中間的過渡色也爲同色，接着就是同色的過渡色和下一個起止顏色，最終產生的效果就是條紋。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
使用 `repeating-linear-gradient()` 函數創建一個漸變角度爲 `45deg` 的條紋，然後設置第一對漸變顏色爲 `yellow`，第二對漸變顏色爲 `black`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`repeating-linear-gradient()` 的漸變角度應爲 45deg。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
`repeating-linear-gradient()` 的漸變角度應該不再是 90deg。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!code.match(/90deg/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
0px 處的漸變顏色應該是 `yellow`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
40px 處的一個漸變顏色應該是 `yellow`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/yellow\s+?40px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
40px 處的第二個漸變顏色應該是 `black`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
80px 處的最後一個漸變顏色應該是 `black`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/black\s+?80px/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
|
||||||
|
div{
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50 auto;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
90deg,
|
||||||
|
yellow 0px,
|
||||||
|
blue 40px,
|
||||||
|
green 40px,
|
||||||
|
red 80px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div{
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 70%;
|
||||||
|
height: 400px;
|
||||||
|
margin: 50 auto;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
yellow 0px,
|
||||||
|
yellow 40px,
|
||||||
|
black 40px,
|
||||||
|
black 80px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a7367417b2b2512ae0
|
||||||
|
title: 使用CSS動畫更改按鈕的懸停狀態
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cg4vZAa'
|
||||||
|
forumTopicId: 301073
|
||||||
|
dashedName: use-css-animation-to-change-the-hover-state-of-a-button
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
你可以在按鈕懸停時使用 `@keyframes` 改變按鈕的顏色。
|
||||||
|
|
||||||
|
下面是在圖片懸停時改變圖片寬度的例子：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
img:hover {
|
||||||
|
animation-name: width;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes width {
|
||||||
|
100% {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
注意 `ms` 代表毫秒，1000ms 等於 1s。
|
||||||
|
|
||||||
|
使用 `@keyframes` 來改變 `button` 元素的 `background-color`，使其在懸停時變成 `#4791d0`。 `@keyframes` 規則應該只有一個 `100%` 條目。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
@keyframes 規則的 `animation-name` 應該是 background-color。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
在 `@keyframes` 爲 100% 的位置，應將 `background-color` 改成 `#4791d0`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<button>Register</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
background-color: #0F5897;
|
||||||
|
padding: 5px 10px 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
animation-name: background-color;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes background-color {
|
||||||
|
100% {
|
||||||
|
background-color: #4791d0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<button>Register</button>
|
||||||
|
```
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512adb
|
||||||
|
title: 使用 CSS Transform skex 屬性沿X軸傾斜元素
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cyLP8Sr'
|
||||||
|
forumTopicId: 301074
|
||||||
|
dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
接下來要介紹的 `transform` 屬性是 `skewX()`：它使選擇的元素沿着 X 軸（橫向）翻轉指定的角度。
|
||||||
|
|
||||||
|
下面的代碼沿着 X 軸翻轉段落元素 -32 度。
|
||||||
|
|
||||||
|
```css
|
||||||
|
p {
|
||||||
|
transform: skewX(-32deg);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
使用 `transform` 屬性沿 X 軸翻轉 id 爲 `bottom` 的元素 24 度。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
id 爲 `bottom` 的元素應該沿着 X 軸翻轉 24 度。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
transform: skewX(24deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a6367417b2b2512adc
|
||||||
|
title: 使用 CSS Transform skex 屬性沿Y軸傾斜元素
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
|
||||||
|
forumTopicId: 301075
|
||||||
|
dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`skewX` 函數使指定元素沿 X 軸翻轉指定的角度，想必你已經猜到了，`skewY` 屬性使指定元素沿 Y 軸（垂直方向）翻轉指定角度。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
使用 `transform` 屬性沿 Y 軸翻轉 id 爲 `top` 的元素 -10 度。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
id 爲 `top` 的元素應該沿着 Y 軸翻轉 -10 度。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
transform: skewX(24deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
background-color: red;
|
||||||
|
transform: skewY(-10deg);
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
background-color: blue;
|
||||||
|
transform: skewX(24deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ad9
|
||||||
|
title: 使用 CSS Transform scale 屬性可以更改元素的大小
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MZVSg'
|
||||||
|
forumTopicId: 301076
|
||||||
|
dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
CSS 屬性 `transform` 裏面的 `scale()` 函數可以用來改變元素的顯示比例。 下面的例子把頁面的段落元素放大到了原來的 2 倍：
|
||||||
|
|
||||||
|
```css
|
||||||
|
p {
|
||||||
|
transform: scale(2);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
把 id 爲 `ball2` 的元素放大到原始大小的 1.5 倍。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`#ball2` 的 `transform` 屬性應該爲原始大小的 1.5 倍。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.ball {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 50 auto;
|
||||||
|
position: fixed;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 65%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="ball" id= "ball1"></div>
|
||||||
|
<div class="ball" id= "ball2"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.ball {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 50 auto;
|
||||||
|
position: fixed;
|
||||||
|
background: linear-gradient(
|
||||||
|
35deg,
|
||||||
|
#ccffff,
|
||||||
|
#ffcccc
|
||||||
|
);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
#ball1 {
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
#ball2 {
|
||||||
|
left: 65%;
|
||||||
|
transform: scale(1.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="ball" id= "ball1"></div>
|
||||||
|
<div class="ball" id= "ball2"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
---
|
||||||
|
id: 587d78a5367417b2b2512ada
|
||||||
|
title: 使用CSS Transform scale 屬性在懸停時縮放元素
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cyLPJuM'
|
||||||
|
forumTopicId: 301077
|
||||||
|
dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`transform` 屬性有很多函數可以調用，可以對元素進行調整大小、移動、旋轉、翻轉等操作。 當使用僞類選取元素的指定狀態（如 `:hover`）時，我們可以通過 `transform` 屬性非常方便地給元素添加交互。
|
||||||
|
|
||||||
|
下面是當用戶懸停在段落元素時，段落大小縮放到原始大小 2.1 倍的例子：
|
||||||
|
|
||||||
|
```css
|
||||||
|
p:hover {
|
||||||
|
transform: scale(2.1);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**注意：**給 `div` 元素添加 transform 也會影響這個 div 包裹的子元素。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
通過僞類，給 `div` 的 `hover` 狀態添加 `transform` 屬性，使 `div` 當鼠標懸停時大小縮放到原始大小的 1.1 倍。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`div` 元素在懸停時大小應該縮放到原始大小的 1.1 倍。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
background: linear-gradient(
|
||||||
|
53deg,
|
||||||
|
#ccfffc,
|
||||||
|
#ffcccf
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 70%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 50px auto;
|
||||||
|
background: linear-gradient(
|
||||||
|
53deg,
|
||||||
|
#ccfffc,
|
||||||
|
#ffcccf
|
||||||
|
);
|
||||||
|
}
|
||||||
|
div:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
id: 587d781a367417b2b2512ab9
|
||||||
|
title: 使用 em 標籤強調文本
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJRBtp'
|
||||||
|
forumTopicId: 301078
|
||||||
|
dashedName: use-the-em-tag-to-italicize-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
你可以使用 `em` 標籤來強調文本。 由於瀏覽器會自動給元素應用 `font-style: italic;`，所以文本會顯示爲斜體。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
在段落標籤裏面嵌套 `em` 標籤來強調文本。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應添加一個 `em` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('em').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`em` 標籤應包裹 `p` 標籤裏的內容，但不包裹 `p` 標籤本身。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,135 @@
|
|||||||
|
---
|
||||||
|
id: 587d781b367417b2b2512aba
|
||||||
|
title: 使用 s 標籤給文本添加刪除線
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
forumTopicId: 301079
|
||||||
|
dashedName: use-the-s-tag-to-strikethrough-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
你可以用 `s` 標籤來給文字添加刪除線。 刪除線是位於文字水平中央的一條線，它代表着一段文字不再有效。 添加了 `s` 標籤後，瀏覽器會自動給元素添加這段樣式：`text-decoration: line-through;`。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
在 `h4` 標籤裏的 `Google` 文本外添加 `s` 標籤，然後在 s 標籤後面添加單詞 `Alphabet`，單詞不要有刪除線格式。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應添加一個 `s` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('s').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`s` 標籤應該在 `h4` 標籤內的 `Google` 文字外面， 它不應包含單詞 `Alphabet`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('h4 > s')
|
||||||
|
.text()
|
||||||
|
.match(/Google/gi) &&
|
||||||
|
!$('h4 > s')
|
||||||
|
.text()
|
||||||
|
.match(/Alphabet/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`h4` 標籤內應有單詞 `Alphabet`，單詞不應有刪除線樣式。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('h4')
|
||||||
|
.html()
|
||||||
|
.match(/Alphabet/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4><s>Google</s> Alphabet</h4>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,128 @@
|
|||||||
|
---
|
||||||
|
id: 587d781a367417b2b2512ab7
|
||||||
|
title: 使用 strong 標籤加粗文本
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/ceJNBSb'
|
||||||
|
forumTopicId: 301080
|
||||||
|
dashedName: use-the-strong-tag-to-make-text-bold
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
你可以使用 `strong` 標籤來加粗文字。 粗體文字一般用來吸引讀者注意或用來表示強調。 添加了 `strong` 標籤後，瀏覽器會自動給元素添加這段樣式：`font-weight:bold;`。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給 `p` 標籤裏的 `Stanford University` 內容文本添加 `strong` 標籤。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應添加一個 `strong` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('strong').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`strong` 標籤應在 `p` 標籤裏。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('p').children('strong').length == 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`strong` 標籤的文本應爲 `Stanford University`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('strong')
|
||||||
|
.text()
|
||||||
|
.match(/^Stanford University\.?$/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
---
|
||||||
|
id: 587d781c367417b2b2512ac0
|
||||||
|
title: 使用 text-transform 屬性給文本添加大寫效果
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cvVZQSP'
|
||||||
|
forumTopicId: 301081
|
||||||
|
dashedName: use-the-text-transform-property-to-make-text-uppercase
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
CSS 裏的 `text-transform` 屬性可以改變英文字母的大小寫。 使用這個屬性時，我們無需改變 HTML 元素中的文本也可以統一頁面裏英文的顯示。
|
||||||
|
|
||||||
|
下面的表格展示了 `text-transform` 的不同值對文字 “Transform me” 的影響：
|
||||||
|
|
||||||
|
<table class='table table-striped'><thead><tr><th>值</th><th>結果</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>使用默認值</td></tr><tr><td><code>inherit</code></td><td>使用父元素的 <code>text-transform</code> 值。</td></tr><tr><td><code>none</code></td><td><strong>Default:</strong>不改變文字。</td></tr></tbody></table>
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
請使用 `text-transform` 屬性把 `h4` 內容文本中的所有字母變成大寫。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h4` 內容文本中的所有字母均應爲 `uppercase` 大寫 。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').css('text-transform') === 'uppercase');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h4` 內的原文不應改變。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h4').text() !== $('h4').text().toUpperCase());
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(45, 45, 45, 0.1);
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 27px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
#thumbnail {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard" id="thumbnail">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Alphabet</h4>
|
||||||
|
<hr>
|
||||||
|
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,120 @@
|
|||||||
|
---
|
||||||
|
id: 587d781a367417b2b2512ab8
|
||||||
|
title: 使用 u 標籤給文本添加下劃線
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cN6aQCL'
|
||||||
|
forumTopicId: 301082
|
||||||
|
dashedName: use-the-u-tag-to-underline-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
你可以使用 `u` 標籤來給文字添加下劃線。 下劃線通常用來表示重要內容或需要記憶的內容。 添加了 `u` 標籤後，瀏覽器會自動給元素添加這段樣式：`text-decoration: underline;`。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
`u` 標籤包裹的文本內容應爲 `Ph.D. students`。
|
||||||
|
|
||||||
|
**注意：** 如果使用 `u` 標籤添加下劃線，可能混淆文本和鏈接，則應避免使用它。 錨標籤也有默認的下劃線格式。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應添加一個 `u` 標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('u').length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
`u` 標籤的文本內容應爲 `Ph.D. students`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('u').text() === 'Ph.D. students');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h4 {
|
||||||
|
text-align: center;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.fullCard {
|
||||||
|
width: 245px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 10px 5px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.cardContent {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.cardText {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="fullCard">
|
||||||
|
<div class="cardContent">
|
||||||
|
<div class="cardText">
|
||||||
|
<h4>Google</h4>
|
||||||
|
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cardLinks">
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08823
|
||||||
|
title: 給元素添加負外邊距
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||||
|
forumTopicId: 16166
|
||||||
|
dashedName: add-a-negative-margin-to-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
元素的 `margin（外邊距）` 用來控制元素 `border（邊框）` 與其周圍元素之間的距離大小。
|
||||||
|
|
||||||
|
如果你把元素的 `margin` 設置爲負值，元素會變得佔用更多空間。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
請將藍色框的 `margin` 設爲負值，跟紅色框的一樣。
|
||||||
|
|
||||||
|
將藍色框的 `margin` 設置爲 `-15px`，它會讓藍色框填滿整個黃色框。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的 `margin` 應設置爲 `-15px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-top') === '-15px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
margin-top: -15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,190 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9bedf08813
|
||||||
|
title: 在元素周圍添加邊框
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||||
|
forumTopicId: 16630
|
||||||
|
dashedName: add-borders-around-your-elements
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
CSS 邊框具有 `style`、`color`、`width` 屬性。
|
||||||
|
|
||||||
|
假如我們要將一個 HTML 元素邊框設置爲 5px 的紅色實線邊框，我們可以這樣做：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.thin-red-border {
|
||||||
|
border-color: red;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
創建一個名爲 `thick-green-border` 的 class， 該 class 應在 HTML 元素周圍添加一個 10px 的綠色實線邊框。 將這個 class 應用於你的貓圖。
|
||||||
|
|
||||||
|
記得在一個元素上可以同時應用多個 `class`，使用空格來分隔不同 class 即可， 例如：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img class="class1 class2">
|
||||||
|
```
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`img` 元素的 class 應包含 `smaller-image`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').hasClass('smaller-image'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`img` 元素應包含 `thick-green-border` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').hasClass('thick-green-border'));
|
||||||
|
```
|
||||||
|
|
||||||
|
圖片邊框寬度應設置爲 `10px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('img').hasClass('thick-green-border') &&
|
||||||
|
parseInt($('img').css('border-top-width'), 10) >= 8 &&
|
||||||
|
parseInt($('img').css('border-top-width'), 10) <= 12
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
圖片邊框樣式應爲 `solid` 實線。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').css('border-right-style') === 'solid');
|
||||||
|
```
|
||||||
|
|
||||||
|
`img` 元素的邊框顏色應爲綠色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-width: 10px;
|
||||||
|
border-color: green;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1248bd9aedf08824
|
||||||
|
title: 給元素的每一側添加不同的外邊距
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||||
|
forumTopicId: 16633
|
||||||
|
dashedName: add-different-margins-to-each-side-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
有時候，你會想給一個元素每個方向的 `margin` 都設置成一個特定的值。
|
||||||
|
|
||||||
|
CSS 允許你使用 `margin-top`、`margin-right`、`margin-bottom`、`margin-left` 屬性來設置四個不同方向的 `margin` 值。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
請將藍色框的頂部和左側 `margin` 屬性值設置爲 `40px`，將底部和右側的屬性值設置爲 `20px`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的上外邊距屬性值 `margin` 應爲 `40px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-top') === '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的右外邊距屬性值 `margin` 應爲 `20px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-right') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的下外邊距屬性值 `margin` 應爲 `20px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的左外邊距屬性值 `margin` 應爲 `40px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-left') === '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,136 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08824
|
||||||
|
title: 給元素的每一側添加不同的內邊距
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||||
|
forumTopicId: 16634
|
||||||
|
dashedName: add-different-padding-to-each-side-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
有時候，你會想給一個元素每個方向的 `padding` 都設置一個特定的值
|
||||||
|
|
||||||
|
CSS 允許你使用 `padding-top`、`padding-right`、`padding-bottom`、`padding-left` 屬性來設置四個不同方向的 `padding` 值。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
請將藍色框的頂部和左側 `padding` 屬性值設置爲 `40px`；將底部和右側的屬性值設置爲 `20px`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的上內邊距屬性值 `padding` 應爲 `40px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-top') === '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的右內邊距屬性值 `padding` 應爲 `20px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-right') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的下內邊距屬性值 `padding` 應爲 `20px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的左內邊距屬性值 `padding` 應爲 `40px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-left') === '40px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,164 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08814
|
||||||
|
title: 用 border-radius 添加圓角邊框
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||||
|
forumTopicId: 16649
|
||||||
|
dashedName: add-rounded-corners-with-border-radius
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
貓咪圖片的四個角看起來很尖銳， 我們可以使用 `border-radius` 屬性來讓它變得圓潤。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
`border-radius` 的屬性值單位可以是 px（像素）。 請將貓咪圖片 `border-radius` 的屬性值設置爲 `10px`。
|
||||||
|
|
||||||
|
**注意：**這個挑戰有多個解決方法。 例如，添加 `border-radius` 屬性到 `.thick-green-border` 或 `.smaller-image` 都是可行的。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
圖片元素應有 `thick-green-border` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('img').hasClass('thick-green-border'));
|
||||||
|
```
|
||||||
|
|
||||||
|
圖片的邊框半徑應爲 `10px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('img').css('border-top-left-radius') === '10px' &&
|
||||||
|
$('img').css('border-top-right-radius') === '10px' &&
|
||||||
|
$('img').css('border-bottom-left-radius') === '10px' &&
|
||||||
|
$('img').css('border-bottom-right-radius') === '10px'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08822
|
||||||
|
title: 調整元素的外邊距
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||||
|
forumTopicId: 16654
|
||||||
|
dashedName: adjust-the-margin-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
外邊距 `margin` 用來控制元素的邊框與其他元素之間的 `border` 距離。
|
||||||
|
|
||||||
|
在這裏，我們可以看到藍色框和紅色框都在黃色框裏。 請注意，紅色框的 `margin` 值要比藍色框的大，因此紅色框看起來比藍色框要小。
|
||||||
|
|
||||||
|
如果你增加藍色的 `margin` 值，它也會增加元素邊框到其他周圍元素的距離。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
請將藍色框的 `margin` 值設置成和紅色框的一樣。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `blue-box` 的元素的 `margin` 值應爲 `20px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('margin-top') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
---
|
||||||
|
id: bad88fee1348bd9aedf08825
|
||||||
|
title: 調整元素的內邊距
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||||
|
forumTopicId: 301083
|
||||||
|
dashedName: adjust-the-padding-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
我們暫時把要做的貓咪圖片 App 放在一邊，先來多瞭解一下如何給 HTML 添加樣式。
|
||||||
|
|
||||||
|
你可能已經注意到了，所有的 HTML 元素都是以矩形爲基礎。
|
||||||
|
|
||||||
|
每個 HTML 元素所佔有的矩形空間由這三個重要的屬性來控制：內邊距 `padding`、外邊距 `margin` 、邊框 `border`。
|
||||||
|
|
||||||
|
`padding` 用來控制着元素內容與 `border` 之間的空隙大小。
|
||||||
|
|
||||||
|
我們可以看到藍色框和紅色框是嵌套在黃色框裏的。 注意紅色框的 `padding` 比藍色框的更多。
|
||||||
|
|
||||||
|
如果你增加藍色框的 `padding` 值，其中的文本內容與邊框的距離就也會變大。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
將藍色的框的 `padding` 值設置成與紅色框 `padding` 值一樣。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`blue-box` 這一 class 應將元素的 `padding` 值設置爲 `20px`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.blue-box').css('padding-top') === '20px');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.injected-text {
|
||||||
|
margin-bottom: -25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border-style: solid;
|
||||||
|
border-color: black;
|
||||||
|
border-width: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow-box {
|
||||||
|
background-color: yellow;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-box {
|
||||||
|
background-color: crimson;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h5 class="injected-text">margin</h5>
|
||||||
|
|
||||||
|
<div class="box yellow-box">
|
||||||
|
<h5 class="box red-box">padding</h5>
|
||||||
|
<h5 class="box blue-box">padding</h5>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,272 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d7286424fe3d0e10cad13
|
||||||
|
title: 給 CSS 變量設置備用值
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||||
|
forumTopicId: 301084
|
||||||
|
dashedName: attach-a-fallback-value-to-a-css-variable
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
使用變量來作爲 CSS 屬性值的時候，可以設置一個備用值來防止由於某些原因導致變量不生效的情況。
|
||||||
|
|
||||||
|
**注意：**備用值不是用於增強瀏覽器的兼容性，它也不適用於 IE 瀏覽器。 相反，它是用來讓瀏覽器在找不到你的變量時可以顯示一種顏色。
|
||||||
|
|
||||||
|
下面是操作方式：
|
||||||
|
|
||||||
|
```css
|
||||||
|
background: var(--penguin-skin, black);
|
||||||
|
```
|
||||||
|
|
||||||
|
如果你的變量沒有設置，這將會把背景設置爲 `black`。 提示：這對調試代碼也會很有幫助。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
`.penguin-top` 和 `.penguin-bottom` 類的變量看起來似乎有點問題。 請爲 class 爲 `penguin-top` 和 `penguin-bottom` 的元素的 `background` 屬性設置一個 `black` 的備用色。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
class 爲 `penguin-top` 的元素的 `background` 屬性值應有 `black` 作爲備用顏色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
class 爲 `penguin-bottom` 的元素的 `background` 屬性值應有 `black` 作爲備用顏色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(
|
||||||
|
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.penguin {
|
||||||
|
--penguin-skin: black;
|
||||||
|
--penguin-belly: gray;
|
||||||
|
--penguin-beak: yellow;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
|
||||||
|
/* Change code below this line */
|
||||||
|
background: var(--pengiun-skin);
|
||||||
|
/* Change code above this line */
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
|
||||||
|
/* Change code below this line */
|
||||||
|
background: var(--pengiun-skin);
|
||||||
|
/* Change code above this line */
|
||||||
|
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: var(--penguin-skin, black);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: var(--penguin-skin, black);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #c6faf1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.penguin-top {
|
||||||
|
background: var(--pengiun-skin, black);
|
||||||
|
}
|
||||||
|
.penguin-bottom {
|
||||||
|
background: var(--pengiun-skin, black);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,254 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d72a1424fe3d0e10cad15
|
||||||
|
title: 更改特定區域的變量
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||||
|
forumTopicId: 301085
|
||||||
|
dashedName: change-a-variable-for-a-specific-area
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
當你在 `:root` 裏創建變量時，這些變量的作用域是整個頁面。
|
||||||
|
|
||||||
|
如果在元素裏創建相同的變量，會重寫作用於整個頁面的變量的值。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
在 `penguin` class 裏，請設置 `--penguin-belly` 的值爲 `white`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應在 `penguin` class 裏重定義 `--penguin-belly` 的變量值，新的值應爲 `white`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`penguin` class 不應該包含 `background-color` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--penguin-skin: gray;
|
||||||
|
--penguin-belly: pink;
|
||||||
|
--penguin-beak: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--penguin-belly, #c6faf1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin {
|
||||||
|
/* Only change code below this line */
|
||||||
|
|
||||||
|
/* Only change code above this line */
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: var(--penguin-belly, pink);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: var(--penguin-belly, pink);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: var(--penguin-belly, pink);
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.penguin {--penguin-belly: white;}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08803
|
||||||
|
title: 更改文本的顏色
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cRkVmSm'
|
||||||
|
forumTopicId: 16775
|
||||||
|
dashedName: change-the-color-of-text
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
現在讓我們來修改文本的顏色。
|
||||||
|
|
||||||
|
我們通過修改 `h2` 元素的 `style` 屬性來改變文本顏色。
|
||||||
|
|
||||||
|
我們需要修改 `color` 屬性值。
|
||||||
|
|
||||||
|
以下是將 `h2` 元素設置爲藍色的方法：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||||
|
```
|
||||||
|
|
||||||
|
請注意，需要在內聯 `style` 聲明末尾加上 `;`。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
修改 `h2` 的樣式，使它的文本顏色爲紅色。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h2` 元素應有一個 `style` 聲明。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').attr('style'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h2` 元素的顏色應設置爲 `red`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2')[0].style.color === 'red');
|
||||||
|
```
|
||||||
|
|
||||||
|
`style` 聲明應該以 `;` 結尾。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2>CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2 style="color: red;">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08806
|
||||||
|
title: 更改元素的字體大小
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c3bvDc8'
|
||||||
|
forumTopicId: 16777
|
||||||
|
dashedName: change-the-font-size-of-an-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
字體大小由 `font-size` 屬性控制，如下所示：
|
||||||
|
|
||||||
|
```css
|
||||||
|
h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
在包含 `red-text` 的類選擇器的 `<style>` 聲明區域的裏，創建一個 `p` 元素樣式規則，並設置其 `font-size` 爲 `16px`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
在 `style` 樣式聲明區域裏，`p` 元素的 `font-size` 的值應爲 `16px`。 請注意，瀏覽器和文本縮放應設置爲 100％。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,241 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d726c424fe3d0e10cad11
|
||||||
|
title: 創建一個自定義的 CSS 變量
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||||
|
forumTopicId: 301086
|
||||||
|
dashedName: create-a-custom-css-variable
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
爲創建一個 CSS 變量，你只需要在變量名前添加兩個連字符號，併爲其賦值即可，例子如下：
|
||||||
|
|
||||||
|
```css
|
||||||
|
--penguin-skin: gray;
|
||||||
|
```
|
||||||
|
|
||||||
|
這樣就會創建一個 `--penguin-skin` 變量，它的值爲 `gray`。 現在，其他元素可通過該變量來使元素變成灰色。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
在 `penguin` class 裏面，創建一個 `--penguin-skin` 變量，並將其值設置爲 `gray`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應在 `penguin` class 裏聲明 `--penguin-skin` 變量，且賦值爲 `gray`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.penguin {
|
||||||
|
/* Only change code below this line */
|
||||||
|
|
||||||
|
/* Only change code above this line */
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
background: black;
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: black;
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: black;
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: white;
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: white;
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: white;
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: orange;
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: orange;
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: orange;
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: orange;
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background:#c6faf1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>.penguin {--penguin-skin: gray;}</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,176 @@
|
|||||||
|
---
|
||||||
|
id: bad87fed1348bd9aede07836
|
||||||
|
title: 給 div 元素添加背景色
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||||
|
forumTopicId: 18190
|
||||||
|
dashedName: give-a-background-color-to-a-div-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
`background-color` 屬性可以設置元素的背景顏色。
|
||||||
|
|
||||||
|
如果想將一個元素的背景顏色改爲 `green`，可以在 `style` 裏面這樣寫：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.green-background {
|
||||||
|
background-color: green;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
創建一個叫作 `silver-background` 的 class，並設置 `background-color` 爲 `silver`。 之後，將這個 class 添加到 `div` 元素上。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`div` 元素應有 `silver-background` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').hasClass('silver-background'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`div` 元素背景顏色應設置爲銀色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||||
|
```
|
||||||
|
|
||||||
|
class 名 `silver-background` 應該定義在 `style` 元素內；`background-color` 的屬性值應爲 `silver`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.silver-background {
|
||||||
|
background-color: silver;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div class="silver-background">
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08807
|
||||||
|
title: 引入谷歌字體
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||||
|
forumTopicId: 18200
|
||||||
|
dashedName: import-a-google-font
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
在我們的網站上，除了使用系統提供的默認字體以外，我們也可以使用自定義字體。 網絡上有很多字體庫。 在這個例子中，我們將使用 Google 字體庫。
|
||||||
|
|
||||||
|
[Google 字體庫](https://fonts.google.com/)是一個免費的 Web 字體庫，我們只需要在 CSS 裏設置字體的 URL 即可使用。
|
||||||
|
|
||||||
|
接下來，我們就要引入和使用 Google Fonts（注意：如果 Google 在你的地區被限制訪問，你可以選擇跳過這個挑戰）。
|
||||||
|
|
||||||
|
要引入 Google Font，你需要從 Google Fonts 上覆制字體的 URL，並粘貼到你的 HTML 裏面。 在這個挑戰中，我們需要引入 `Lobster` 字體。 因此，請複製以下代碼段，並粘貼到代碼編輯器頂部，即放到 `style` 標籤之前。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
```
|
||||||
|
|
||||||
|
現在可以在 CSS 中使用 `Lobster` 字體，並像下面一樣使用 `Lobster` 作爲 FAMILY_NAME：
|
||||||
|
|
||||||
|
```css
|
||||||
|
font-family: FAMILY_NAME, GENERIC_NAME;
|
||||||
|
```
|
||||||
|
|
||||||
|
GENERIC_NAME 是可選的，它用來指明在其他字體不可用時的後備字體。 我們會在下一個挑戰中詳細說明。
|
||||||
|
|
||||||
|
字體名區分大小寫，並且如果字體名含有空格，則在聲明時需要用引號包起來。 例如，使用 `"Open Sans"` 字體需要添加引號，而 `Lobster` 則不需要。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給你的網頁導入 `Lobster` 字體。 然後使用元素選擇器將 `h2` 元素的 `font-family` 設置爲 `Lobster`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應引入 `Lobster` 字體。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(new RegExp('googleapis', 'gi').test(code));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h2` 元素應使用 `Lobster` 字體。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('h2')
|
||||||
|
.css('font-family')
|
||||||
|
.match(/lobster/i)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
應使用元素選擇器（`h2`）來改變字體樣式。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
/\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
|
||||||
|
code
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`p` 元素應保持使用 `monospace` 字體。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('p')
|
||||||
|
.css('font-family')
|
||||||
|
.match(/monospace/i)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
---
|
||||||
|
id: 5b7d72c338cd7e35b63f3e14
|
||||||
|
title: 通過瀏覽器降級提高兼容性
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: ''
|
||||||
|
forumTopicId: 301087
|
||||||
|
dashedName: improve-compatibility-with-browser-fallbacks
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
使用 CSS 時可能會遇到瀏覽器兼容性問題。 提供瀏覽器降級方案來避免潛在的問題會顯得很重要。
|
||||||
|
|
||||||
|
當瀏覽器解析頁面的 CSS 時，會自動忽視不能識別或者不支持的屬性。 舉個例子，如果使用 CSS 變量來指定站點的背景色，IE 瀏覽器由於不支持 CSS 變量而會忽略背景色。 此時，瀏覽器會嘗試使用其它值。 但如果沒有找到其它值，則會使用默認值，也就是沒有背景色。
|
||||||
|
|
||||||
|
這意味着如果想提供瀏覽器降級方案，在聲明之前提供另一個更寬泛的值即可。 這樣老舊的瀏覽器會降級使用這個方案，新的瀏覽器會在後面的聲明裏覆蓋降級方案。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
我們使用了 CSS 變量來定義 `.red-box` 的背景色。 現在，我們通過在現有的聲明之前添加另一個 `background` 聲明，並將它的值設置爲 `red`，來提升瀏覽器的兼容性。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`.red-box` 規則應在現有的 `background` 聲明之前有一個 `background` 的備用屬性，其值爲 `red`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code
|
||||||
|
.replace(/\s/g, '')
|
||||||
|
.match(
|
||||||
|
/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
|
||||||
|
)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--red-color: red;
|
||||||
|
}
|
||||||
|
.red-box {
|
||||||
|
|
||||||
|
background: var(--red-color);
|
||||||
|
height: 200px;
|
||||||
|
width:200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="red-box"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--red-color: red;
|
||||||
|
}
|
||||||
|
.red-box {
|
||||||
|
background: red;
|
||||||
|
background: var(--red-color);
|
||||||
|
height: 200px;
|
||||||
|
width:200px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="red-box"></div>
|
||||||
|
```
|
||||||
@ -0,0 +1,244 @@
|
|||||||
|
---
|
||||||
|
id: 5a9d7295424fe3d0e10cad14
|
||||||
|
title: 繼承 CSS 變量
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||||
|
forumTopicId: 301088
|
||||||
|
dashedName: inherit-css-variables
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
當創建一個變量時，變量會在創建變量的選擇器裏可用。 同時，在這個選擇器的後代選擇器裏也是可用的。 這是因爲 CSS 變量是可繼承的，和普通的屬性一樣。
|
||||||
|
|
||||||
|
CSS 變量經常會定義在 <dfn>:root</dfn> 元素內，這樣就可被所有選擇器繼承。
|
||||||
|
|
||||||
|
`:root` 是一個<dfn>僞類</dfn>選擇器，它是一個能夠匹配文檔根元素的選擇器，通常指的是 `html` 元素。 我們在 `:root` 裏創建變量在全局都可用，即在任何選擇器裏都生效。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
在 `:root` 選擇器裏定義變量 `--penguin-belly` 並設置它的屬性值爲 `pink`。 此時，你會發現變量被繼承，所有使用該變量的子元素都會有粉色背景。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應在 `:root` 裏聲明 `--penguin-belly` 變量並賦值 `pink`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
/* Only change code below this line */
|
||||||
|
|
||||||
|
/* Only change code above this line */
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--penguin-belly, #c6faf1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin {
|
||||||
|
--penguin-skin: gray;
|
||||||
|
--penguin-beak: orange;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5%;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 35%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-cheek {
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.belly {
|
||||||
|
top: 60%;
|
||||||
|
left: 2.5%;
|
||||||
|
background: var(--penguin-belly, white);
|
||||||
|
width: 95%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 120% 120% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-top {
|
||||||
|
top: 10%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 50%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 60% 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin-bottom {
|
||||||
|
top: 40%;
|
||||||
|
left: 23.5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 53%;
|
||||||
|
height: 45%;
|
||||||
|
border-radius: 70% 70% 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: -5%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 120% 30%;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-hand {
|
||||||
|
top: 0%;
|
||||||
|
left: 75%;
|
||||||
|
background: var(--penguin-skin, gray);
|
||||||
|
width: 30%;
|
||||||
|
height: 60%;
|
||||||
|
border-radius: 30% 30% 30% 120%;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 60%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(-80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-feet {
|
||||||
|
top: 85%;
|
||||||
|
left: 25%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 15%;
|
||||||
|
height: 30%;
|
||||||
|
border-radius: 50% 50% 50% 50%;
|
||||||
|
transform: rotate(80deg);
|
||||||
|
z-index: -2222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 60%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-eye {
|
||||||
|
top: 45%;
|
||||||
|
left: 25%;
|
||||||
|
background: black;
|
||||||
|
width: 15%;
|
||||||
|
height: 17%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sparkle {
|
||||||
|
top: 25%;
|
||||||
|
left: 15%;
|
||||||
|
background: white;
|
||||||
|
width: 35%;
|
||||||
|
height: 35%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-right {
|
||||||
|
top: 65%;
|
||||||
|
left: 15%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blush-left {
|
||||||
|
top: 65%;
|
||||||
|
left: 70%;
|
||||||
|
background: pink;
|
||||||
|
width: 15%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-top {
|
||||||
|
top: 60%;
|
||||||
|
left: 40%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 20%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beak-bottom {
|
||||||
|
top: 65%;
|
||||||
|
left: 42%;
|
||||||
|
background: var(--penguin-beak, orange);
|
||||||
|
width: 16%;
|
||||||
|
height: 10%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.penguin * {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="penguin">
|
||||||
|
<div class="penguin-bottom">
|
||||||
|
<div class="right-hand"></div>
|
||||||
|
<div class="left-hand"></div>
|
||||||
|
<div class="right-feet"></div>
|
||||||
|
<div class="left-feet"></div>
|
||||||
|
</div>
|
||||||
|
<div class="penguin-top">
|
||||||
|
<div class="right-cheek"></div>
|
||||||
|
<div class="left-cheek"></div>
|
||||||
|
<div class="belly"></div>
|
||||||
|
<div class="right-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="left-eye">
|
||||||
|
<div class="sparkle"></div>
|
||||||
|
</div>
|
||||||
|
<div class="blush-right"></div>
|
||||||
|
<div class="blush-left"></div>
|
||||||
|
<div class="beak-top"></div>
|
||||||
|
<div class="beak-bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>:root {--penguin-belly: pink;}</style>
|
||||||
|
```
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08746
|
||||||
|
title: 從 body 元素繼承樣式
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||||
|
forumTopicId: 18204
|
||||||
|
dashedName: inherit-styles-from-the-body-element
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
我們已經證明每一個 HTML 頁面都含有 `body` 元素，我們也可以在 `body` 元素上使用 CSS 樣式。
|
||||||
|
|
||||||
|
設置 `body` 元素樣式的方法跟設置其他 HTML 元素樣式的方式一樣，並且其他元素也會繼承 `body` 中所設置的樣式。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
首先，創建一個內容文本爲 `Hello World` 的 `h1` 元素。
|
||||||
|
|
||||||
|
接着，在 `body` 的 CSS 規則裏面添加 `color: green;`，這會將頁面內所有字體的顏色都設置爲 `green`。
|
||||||
|
|
||||||
|
最後，在 `body` 的 CSS 規則裏面添加 `font-family: monospace;`，這會將 `body` 內所有元素的字體都設置爲 `monospace`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
應創建一個 `h1` 元素。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').length > 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素的內容文本應爲 `Hello World`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('h1').length > 0 &&
|
||||||
|
$('h1')
|
||||||
|
.text()
|
||||||
|
.match(/hello world/i)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
確保 `h1` 元素具有結束標籤。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/<\/h1>/g) &&
|
||||||
|
code.match(/<h1/g) &&
|
||||||
|
code.match(/<\/h1>/g).length === code.match(/<h1/g).length
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`body` 元素的 `color` 屬性值應爲 `green`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('body').css('color') === 'rgb(0, 128, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
`body` 元素的 `font-family` 屬性值應爲 `monospace`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('body')
|
||||||
|
.css('font-family')
|
||||||
|
.match(/monospace/i)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應該繼承 `body` 的 `monospace` 字體屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
$('h1').length > 0 &&
|
||||||
|
$('h1')
|
||||||
|
.css('font-family')
|
||||||
|
.match(/monospace/i)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素的字體顏色應繼承 `body` 元素所設置的綠色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<h1>Hello World!</h1>
|
||||||
|
```
|
||||||
@ -0,0 +1,159 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf08815
|
||||||
|
title: 用 border-radius 製作圓形圖片
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||||
|
forumTopicId: 18229
|
||||||
|
dashedName: make-circular-images-with-a-border-radius
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
除像素外，你也可以使用百分比來指定 `border-radius` 的值。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
將 `border-radius` 的屬性值設置爲 `50%`。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
圖片的邊框圓角應設置爲 `50%`，這樣圖片就會是圓形的。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||||
|
```
|
||||||
|
|
||||||
|
`border-radius` 的值應爲 `50%`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/50%/g));
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
<main>
|
||||||
|
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||||
|
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf07756
|
||||||
|
title: Important 的優先級最高
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||||
|
forumTopicId: 18249
|
||||||
|
dashedName: override-all-other-styles-by-using-important
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
耶！ 我們剛剛又證明了行內樣式會覆蓋 `style` 標籤裏面所有的 CSS 聲明。
|
||||||
|
|
||||||
|
不過， 還有一種方式可以覆蓋重新 CSS 樣式。 這是所有方法裏面最強大的一個。 在此之前，我們要考慮清楚，爲什麼我們要覆蓋 CSS 樣式。
|
||||||
|
|
||||||
|
很多時候，你會使用 CSS 庫， CSS 庫中的樣式會意外覆蓋你的 CSS 樣式。 如果想保證你的 CSS 樣式不受影響，你可以使用 `!important`。
|
||||||
|
|
||||||
|
讓我們回到 `pink-text` 類聲明。 `pink-text` 類的顏色樣式已被之後的 class 聲明、id 聲明以及行內樣式所覆蓋。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給粉紅文本元素的顏色聲明添加關鍵詞 `!important`，以確保 `h1` 元素爲粉紅色。
|
||||||
|
|
||||||
|
如下所示：
|
||||||
|
|
||||||
|
```css
|
||||||
|
color: red !important;
|
||||||
|
```
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h1` 元素應包含 `pink-text` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').hasClass('pink-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應包含 `blue-text` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').hasClass('blue-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應有 `id`， 值爲 `orange-text`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').attr('id') === 'orange-text');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應有一個內聯樣式 `color: white`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
`pink-text` class 應有 `!important` 關鍵詞 ，以覆蓋其他聲明。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(
|
||||||
|
code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應爲粉紅色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
#orange-text {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
#orange-text {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink !important;
|
||||||
|
}
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||||
|
```
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd8aedf06756
|
||||||
|
title: ID 選擇器優先級高於 Class 選擇器
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||||
|
forumTopicId: 18251
|
||||||
|
dashedName: override-class-declarations-by-styling-id-attributes
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
我們剛剛證明了瀏覽器讀取 CSS 是由上到下的。 這就意味着，如果發生衝突，瀏覽器將會應用最後聲明的樣式。 注意，如果我們在 `h1` 元素的類中，將 `blue-text` 放置在 `pink-text` 之前，它仍然會檢查聲明順序，而不是使用順序！
|
||||||
|
|
||||||
|
但我們還沒有完成。 其實還有其他方法可以覆蓋 CSS 樣式。 你還記得 id 屬性嗎？
|
||||||
|
|
||||||
|
我們來通過給 `h1` 元素添加 id 屬性，覆蓋 `pink-text` 和 `blue-text` 類，使 `h1` 元素變成橘色。
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
給 `h1` 元素添加 `id` 屬性，屬性值爲 `orange-text`。 設置方式如下：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1 id="orange-text">
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素需繼續保留 `blue-text` 和 `pink-text` 這兩個 class。
|
||||||
|
|
||||||
|
在 `style` 元素中創建名爲 `orange-text` 的 id 選擇器。 例子如下：
|
||||||
|
|
||||||
|
```css
|
||||||
|
#brown-text {
|
||||||
|
color: brown;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**注意：** 無論在 `pink-text` class 之前或者之後聲明，`id` 選擇器的優先級總是高於 class 選擇器。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h1` 元素的應有一個 class 爲 `pink-text`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').hasClass('pink-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應包含 `blue-text` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').hasClass('blue-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素的 id 應爲 `orange-text`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').attr('id') === 'orange-text');
|
||||||
|
```
|
||||||
|
|
||||||
|
應只有一個 `h1` 元素。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').length === 1);
|
||||||
|
```
|
||||||
|
|
||||||
|
應存在名爲 `orange-text` 的 id 選擇器。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(code.match(/#orange-text\s*{/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
不要在 `h1` 元素裏面使用 `style` 屬性。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(!code.match(/<h1.*style.*>/gi));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素的字體顏色應爲橘色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').css('color') === 'rgb(255, 165, 0)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
#orange-text {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||||
|
```
|
||||||
@ -0,0 +1,102 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf06756
|
||||||
|
title: 內聯樣式的優先級高於 ID 選擇器
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||||
|
forumTopicId: 18252
|
||||||
|
dashedName: override-class-declarations-with-inline-styles
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
我們剛剛證明了，id 選擇器無論在 `style` 標籤的任何位置聲明，都會覆蓋 class 聲明的樣式。
|
||||||
|
|
||||||
|
其實還有其他方法可以覆蓋 CSS 樣式。 你還記得行內樣式嗎？
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
使用行內樣式嘗試讓 `h1` 的字體顏色變白。 記住，內聯樣式看起來是像這樣：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1 style="color: green;">
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應繼續保留 `blue-text` 和 `pink-text` 這兩個 class。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h1` 元素應包含 `pink-text` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').hasClass('pink-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應包含 `blue-text` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').hasClass('blue-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 的 id 屬性值應爲 `orange-text`。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').attr('id') === 'orange-text');
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應含有行內樣式。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert(document.querySelector('h1[style]'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素的字體顏色應該爲白色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').css('color') === 'rgb(255, 255, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
#orange-text {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
#orange-text {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||||
|
```
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
---
|
||||||
|
id: bad87fee1348bd9aedf04756
|
||||||
|
title: Class 選擇器的優先級高於繼承樣式
|
||||||
|
challengeType: 0
|
||||||
|
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||||
|
forumTopicId: 18253
|
||||||
|
dashedName: override-styles-in-subsequent-css
|
||||||
|
---
|
||||||
|
|
||||||
|
# --description--
|
||||||
|
|
||||||
|
我們的 `pink-text` class 覆蓋了 `body` 元素的 CSS 樣式！
|
||||||
|
|
||||||
|
我們剛剛證明了 class 會覆蓋 `body` 的 CSS 樣式。 那麼下一個問題是，要怎麼樣才能覆蓋 `pink-text` class 中所定義的樣式？
|
||||||
|
|
||||||
|
# --instructions--
|
||||||
|
|
||||||
|
創建一個 `blue-text` class，將元素的顏色設置爲藍色。 將它放在 `pink-text` class 下面。
|
||||||
|
|
||||||
|
創建一個字體顏色爲 `blue` 的 `blue-text` class，並確保它在 `pink-text` 下方聲明。
|
||||||
|
|
||||||
|
HTML 同時應用多個 class 屬性需以空格來間隔，例子如下:
|
||||||
|
|
||||||
|
```html
|
||||||
|
class="class1 class2"
|
||||||
|
```
|
||||||
|
|
||||||
|
**注意：**HTML 元素裏應用的 class 的先後順序無關緊要。
|
||||||
|
|
||||||
|
但是，在 `<style>` 標籤裏面聲明的 `class` 順序十分重要，之後的聲明會覆蓋之前的聲明。 第二個聲明的優先級始終高於第一個聲明。 由於 `.blue-text` 是在後面聲明的，所以它的樣式會覆蓋 `.pink-text` 裏的樣式。
|
||||||
|
|
||||||
|
# --hints--
|
||||||
|
|
||||||
|
`h1` 元素應包含 `pink-text` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').hasClass('pink-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素應包含 `blue-text` class。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').hasClass('blue-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`blue-text` 和 `pink-text` 需同時應用於 `h1` 元素上。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('.pink-text').hasClass('blue-text'));
|
||||||
|
```
|
||||||
|
|
||||||
|
`h1` 元素的顏色應爲藍色。
|
||||||
|
|
||||||
|
```js
|
||||||
|
assert($('h1').css('color') === 'rgb(0, 0, 255)');
|
||||||
|
```
|
||||||
|
|
||||||
|
# --seed--
|
||||||
|
|
||||||
|
## --seed-contents--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 class="pink-text">Hello World!</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
# --solutions--
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
font-family: monospace;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.pink-text {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue-text {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||||
|
```
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user