fix: sync english and chinese responsive web design challenges (#38309)
This commit is contained in:
Kristofer Koishigawa
committed by
GitHub
GitHub
parent
b3213fc892
commit
0b1ba11959
@ -15,7 +15,7 @@ localeTitle: 固定定位的参照物是浏览器的窗口
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
代码里的导航栏已经添加了值为 <code>navbar</code> 的 id。把它的 <code>position</code> 设置成<code>fixed</code>，设定其 <code>top</code >和 <code>left</code> 为 0 像素。注意观察对 <code>h1</code> 的影响，<code>h1</code> 并没有被导航栏挤下来，而是遮盖住了，为了显示完全需要单独调整<code>h1</code> 的位置。
|
||||
代码里的导航栏已经添加了值为 <code>navbar</code> 的 id。把它的 <code>position</code> 设置成<code>fixed</code>，设定其 <code>top</code >和 <code>left</code> 为 0 像素。添加代码之后，滑动预览窗口，观察导航栏的位置。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -24,12 +24,10 @@ localeTitle: 使用 u 标签给文本添加下划线
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '你应该有一个 <code>u</code> 标签。'
|
||||
testString: assert($('u').length === 1, '你应该有一个 <code>u</code> 标签。');
|
||||
- text: '<code>u</code> 标签应该包围 “理工博士”。'
|
||||
testString: assert($('u').text() === '理工博士', '<code>u</code> 标签应该包围 “理工博士”。');
|
||||
- text: '<code>u</code> 标签内不应包含额外的 <code>div</code> 标签。'
|
||||
testString: assert($('u').children('div').length === 0, '<code>u</code> 标签内不应包含额外的 <code>div</code> 标签。');
|
||||
- text: 你应该有一个 <code>u</code> 标签。
|
||||
testString: assert($('u').length === 1);
|
||||
- text: <code>u</code> 标签应该包围 “理工博士”。
|
||||
testString: assert($('u').text() === '理工博士');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -26,11 +26,11 @@ localeTitle: 更改文本的颜色
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>h2</code>元素应该为红色。'
|
||||
- text: <code>h2</code> 元素应该有一个<code>style</code>声明。
|
||||
testString: assert($("h2").attr('style'));
|
||||
- text: '<code>h2</code>元素的<code>style</code>属性值应该以<code>;</code>结束。'
|
||||
testString: assert($("h2").css("color") === "rgb(255, 0, 0)");
|
||||
- text: '<code>style</code> 声明应该以 <code>;</code> 结尾'
|
||||
- text: <code>h2</code>元素应该为<code>red</code>。
|
||||
testString: assert($("h2")[0].style.color === "red");
|
||||
- text: <code>style</code> 声明应该以 <code>;</code> 结尾。
|
||||
testString: assert($("h2").attr('style') && $("h2").attr('style').endsWith(';'));
|
||||
|
||||
```
|
||||
|
||||
@ -19,7 +19,7 @@ localeTitle: Class 选择器的优先级高于继承样式
|
||||
在含有<code>pink-text</code>class 的<code>h1</code>元素里面，再添加一个<code>blue-text</code>class，这时候，我们将能看到到底是谁获胜。
|
||||
HTML 同时应用多个 class 属性需以空格来间隔，例子如下:
|
||||
<code>class="class1 class2"</code>
|
||||
注意：HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
<strong>注意：</strong> HTML 元素里应用的 class 的先后顺序无关紧要。
|
||||
但是，在<code><style></code>标签里面声明的<code>class</code>顺序十分重要。第二个声明始终优于第一个声明。因为<code>.blue-text</code>在<code>.pink-text</code>的后面声明，所以<code>.blue-text</code>会覆盖<code>.pink-text</code>的样式。
|
||||
</section>
|
||||
|
||||
|
||||
@ -25,14 +25,16 @@ localeTitle: 使用顺时针方向指定元素的外边距
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>blue-box</code> class 的上外边距应为<code>40px</code>。'
|
||||
- text: <code>blue-box</code> class 的上外边距应为<code>40px</code>。
|
||||
testString: assert($(".blue-box").css("margin-top") === "40px");
|
||||
- text: '<code>blue-box</code> class 的右外边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px", '<code>blue-box</code> class 的右外边距应为<code>20px</code>。');
|
||||
- text: '<code>blue-box</code> class 的下外边距应为<code>20px</code>。'
|
||||
testString: assert($(".blue-box").css("margin-bottom") === "20px", '<code>blue-box</code> class 的下外边距应为<code>20px</code>。');
|
||||
- text: '<code>blue-box</code> class 的左外边距应为<code>40px</code>。'
|
||||
- text: <code>blue-box</code> class 的右外边距应为<code>20px</code>。
|
||||
testString: assert($(".blue-box").css("margin-right") === "20px");
|
||||
- text: <code>blue-box</code> class 的下外边距应为<code>20px</code>。
|
||||
testString: assert($(".blue-box").css("margin-bottom") === "20px");
|
||||
- text: <code>blue-box</code> class 的左外边距应为<code>40px</code>。
|
||||
testString: assert($(".blue-box").css("margin-left") === "40px");
|
||||
- text: 你应该沿顺时针方向设置<code>blue-box</code>的外边距。
|
||||
testString: const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');assert(/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(removeCssComments($('style').text())));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -42,14 +42,16 @@ localeTitle: 使用元素选择器来设置元素的样式
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '删除<code>h2</code>元素的行内样式。'
|
||||
- text: 删除<code>h2</code>元素的行内样式。
|
||||
testString: assert(!$("h2").attr("style"));
|
||||
- text: '创建一个<code>style</code>样式声明区域。'
|
||||
- text: 创建一个<code>style</code>样式声明区域。
|
||||
testString: assert($("style") && $("style").length >= 1);
|
||||
- text: '<code>h2</code>元素颜色应为蓝色。'
|
||||
- text: <code>h2</code>元素颜色应为蓝色。
|
||||
testString: assert($("h2").css("color") === "rgb(0, 0, 255)");
|
||||
- text: '确保<code>h2</code>选择器的内容被花括号所围绕，并且样式规则以分号结束。'
|
||||
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));'
|
||||
- text: 确保<code>h2</code>选择器的内容被花括号所围绕，并且样式规则以分号结束。
|
||||
testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
- text: 所有<code>style</code>应该是有效的且有一个结束标签。
|
||||
testString: assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length);
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 给网站添加图片
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
让我们给网站添加图片：
|
||||
在<code>h2</code>元素前，插入一个<code>img</code>元素
|
||||
在<code>main</code>元素里面，给<code>p</code>前面插入一个<code>img</code>元素
|
||||
现在设置<code>src</code>属性指向这个地址：
|
||||
<code>https://bit.ly/fcc-relaxing-cat</code>
|
||||
最后不要忘记给图片添加一个<code>alt</code>文本。
|
||||
@ -34,11 +34,11 @@ localeTitle: 给网站添加图片
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '网页应该有一张图片。'
|
||||
- text: 网页应该有一张图片。
|
||||
testString: assert($("img").length);
|
||||
- text: '图片 src 属性应该为 https://bit.ly/fcc-relaxing-cat。'
|
||||
- text: <code>img</code> 应该有一个<code>src</code>属性，指向猫咪图片。
|
||||
testString: assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($("img").attr("src")));
|
||||
- text: '图片必须有<code>alt</code>属性。'
|
||||
- text: <code>img</code> 元素的<code>alt</code>属性值不应为空。
|
||||
testString: assert($("img").attr("alt") && $("img").attr("alt").length && /<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(code.replace(/\s/g,'')));
|
||||
|
||||
```
|
||||
|
||||
@ -24,12 +24,14 @@ localeTitle: 给输入框添加占位符文本
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '给现有的<code>input</code>输入框添加一个<code>placeholder</code>属性。'
|
||||
- text: 给现有的<code>input</code>输入框添加一个<code>placeholder</code>属性。
|
||||
testString: assert($("input[placeholder]").length > 0);
|
||||
- text: '设置<code>placeholder</code>属性的值为 ”猫咪图片地址“。'
|
||||
- text: 设置<code>placeholder</code>属性的值为 ”猫咪图片地址“。
|
||||
testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/猫咪图片地址/gi));
|
||||
- text: '<code>input</code>输入框的语法必须正确。'
|
||||
testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|''.*?''|[\^''">\s]+))?)+\s*|\s*)\/?>/gi));'
|
||||
- text: 完整的<code>input</code>元素应有一个结束标签
|
||||
testString: assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
- text: <code>input</code>输入框的语法必须正确。
|
||||
testString: assert($("input[type=text]").length > 0);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -33,14 +33,16 @@ HTML 有一个特定的元素用于创建无序列表<code>unordered lists（缩
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '创建一个<code>ul</code>无序列表。'
|
||||
- text: 创建一个<code>ul</code>无序列表。
|
||||
testString: assert($("ul").length > 0);
|
||||
- text: '你应该在<code>ul</code>无序列表中添加三个<code>li</code>条目。'
|
||||
- text: 你应该在<code>ul</code>无序列表中添加三个<code>li</code>条目。
|
||||
testString: assert($("ul li").length > 2);
|
||||
- text: '确保<code>ul</code>无序列表有结束标记。'
|
||||
- text: 确保<code>ul</code>无序列表有结束标记。
|
||||
testString: assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length);
|
||||
- text: '确保每个<code>li</code>条目都有结束标记。'
|
||||
- text: 确保每个<code>li</code>条目都有结束标记。
|
||||
testString: assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length);
|
||||
- text: 每个<code>li</code>元素都应该有一个空字符串或者空格。
|
||||
testString: assert($("ul li").filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,19 +23,19 @@ localeTitle: 在推文中添加弹性盒子布局
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>header</code>的<code>display</code>属性应为 flex。'
|
||||
- text: <code>header</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('header').css('display') == 'flex');
|
||||
- text: '<code>footer</code>的<code>display</code>属性应为 flex。'
|
||||
- text: <code>footer</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('footer').css('display') == 'flex');
|
||||
- text: '<code>h3</code>的<code>display</code>属性应为 flex。'
|
||||
- text: <code>h3</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('h3').css('display') == 'flex');
|
||||
- text: '<code>h4</code>的<code>display</code>属性应为 flex。'
|
||||
- text: <code>h4</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('h4').css('display') == 'flex');
|
||||
- text: '<code>.profile-name</code>的<code>display</code>属性应为 flex。'
|
||||
- text: <code>.profile-name</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('.profile-name').css('display') == 'flex');
|
||||
- text: '<code>.follow-btn</code>的<code>display</code>属性应为 flex。'
|
||||
- text: <code>.follow-btn</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('.follow-btn').css('display') == 'flex');
|
||||
- text: '<code>.stats</code>的<code>display</code>属性应为 flex。'
|
||||
- text: <code>.stats</code>的<code>display</code>属性应为 <code>flex</code>。
|
||||
testString: assert($('.stats').css('display') == 'flex');
|
||||
|
||||
```
|
||||
|
||||
@ -19,7 +19,7 @@ Flex 容器中，与主轴垂直的叫做 <strong>cross axis（交叉轴）</str
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
这个例子可以帮助你理解这个属性，在<code>#box-container</code>添加 CSS 属性<code>align-items</code>并将值设为 center。
|
||||
<strong>提示：</strong><br>在编辑器里试试<code>align-items</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center。
|
||||
<strong>提示：</strong><br>在编辑器里试试<code>align-items</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 <code>center</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -27,7 +27,7 @@ Flex 容器中，与主轴垂直的叫做 <strong>cross axis（交叉轴）</str
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>元素应有<code>align-items</code>属性，其值应为 center。'
|
||||
- text: <code>#box-container</code>元素应有<code>align-items</code>属性，其值应为 <code>center</code>。
|
||||
testString: assert($('#box-container').css('align-items') == 'center');
|
||||
|
||||
```
|
||||
|
||||
@ -19,8 +19,8 @@ flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
这个例子可以帮助你理解这个属性，在<code>#box-container</code>元素添加 CSS 属性<code>justify-content</code>，其值为 center。
|
||||
<strong>提示：</strong><br>在编辑器里试试<code>justify-content</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 center.
|
||||
这个例子可以帮助你理解这个属性，在<code>#box-container</code>元素添加 CSS 属性<code>justify-content</code>，其值为 <code>center</code>。
|
||||
<strong>提示：</strong><br>在编辑器里试试<code>justify-content</code>的其他可用值，看看它们之间的区别。但要通过挑战，你必须把值设为 <code>center</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -28,7 +28,7 @@ flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>应有<code>justify-content</code>属性，其值应为 center。'
|
||||
- text: <code>#box-container</code>应有<code>justify-content</code>属性，其值应为 <code>center</code>。
|
||||
testString: assert($('#box-container').css('justify-content') == 'center');
|
||||
|
||||
```
|
||||
|
||||
@ -15,7 +15,7 @@ localeTitle: '使用 display: flex 定位两个盒子'
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为<code>#box-container</code>添加<code>display</code>属性，设置其值为 flex。
|
||||
为<code>#box-container</code>添加<code>display</code>属性，设置其值为 <code>flex</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -23,7 +23,7 @@ localeTitle: '使用 display: flex 定位两个盒子'
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>应有<code>display</code>属性，其值应为 flex。'
|
||||
- text: <code>#box-container</code>应有<code>display</code>属性，其值应为 <code>flex</code>。
|
||||
testString: assert($('#box-container').css('display') == 'flex');
|
||||
|
||||
```
|
||||
|
||||
@ -22,7 +22,7 @@ localeTitle: 在推文中使用 align-items 属性
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>.follow-btn</code>应有<code>align-items</code>属性，其值应为 center.'
|
||||
- text: <code>.follow-btn</code>应有<code>align-items</code>属性，其值应为 <code>center</code>.
|
||||
testString: assert($('.follow-btn').css('align-items') == 'center');
|
||||
|
||||
```
|
||||
|
||||
@ -15,7 +15,7 @@ flex 子项目的最后一个属性是<code>align-self</code>。这个属性允
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>align-self</code>。<code>#box-1</code>设为 center，<code>#box-2</code>设为 flex-end。
|
||||
在<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>align-self</code>。<code>#box-1</code>设为 center，<code>#box-2</code>设为 <code>flex-end</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -23,9 +23,9 @@ flex 子项目的最后一个属性是<code>align-self</code>。这个属性允
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应有<code>align-self</code>属性，其值应为 center。'
|
||||
- text: <code>#box-1</code>元素应有<code>align-self</code>属性，其值应为 <code>center</code>。
|
||||
testString: assert($('#box-1').css('align-self') == 'center');
|
||||
- text: '<code>#box-2</code>元素应有<code>align-self</code>属性，其值应为 flex-end。'
|
||||
- text: <code>#box-2</code>元素应有<code>align-self</code>属性，其值应为 <code>flex-end</code>。
|
||||
testString: assert($('#box-2').css('align-self') == 'flex-end');
|
||||
|
||||
```
|
||||
|
||||
@ -14,7 +14,7 @@ localeTitle: 使用 flex-direction 属性创建一列
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给<code>#box-container</code>元素添加 CSS 属性<code>flex-direction</code>，赋值为 column。
|
||||
给<code>#box-container</code>元素添加 CSS 属性<code>flex-direction</code>，赋值为 <code>column</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -22,7 +22,7 @@ localeTitle: 使用 flex-direction 属性创建一列
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 column。'
|
||||
- text: <code>#box-container</code>应有<code>flex-direction</code>属性，其值应为 column。
|
||||
testString: assert($('#box-container').css('flex-direction') == 'column');
|
||||
|
||||
```
|
||||
|
||||
@ -10,12 +10,12 @@ localeTitle: 使用 flex-grow 属性扩展项目
|
||||
## Description
|
||||
<section id='description'>
|
||||
与<code>flex-shrink</code>相对的是<code>flex-grow</code>。你应该还记得，<code>flex-shrink</code>会在容器太小时对元素作出调整。相应地，<code>flex-grow</code>会在容器太大时对元素作出调整。
|
||||
例子与上一个挑战相似，如果一个项目的<code>flex-grow</code>属性值为 1，另一个项目的<code>flex-grow</code>属性值为 3，那么后者会较前者扩大三倍。
|
||||
例子与上一个挑战相似，如果一个项目的<code>flex-grow</code>属性值为 <code>1</code>，另一个项目的<code>flex-grow</code>属性值为 <code>3</code>，那么后者会较前者扩大 3 倍。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-grow</code>，<code>#box-1</code>的值设为 1，<code>#box-2</code>的值设为 2。
|
||||
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-grow</code>，<code>#box-1</code>的值设为 <code>1</code>，<code>#box-2</code>的值设为 <code>2</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -23,9 +23,9 @@ localeTitle: 使用 flex-grow 属性扩展项目
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应有<code>flex-grow</code>属性，其值应为 1。'
|
||||
- text: <code>#box-1</code>元素应有<code>flex-grow</code>属性，其值应为 <code>1</code>。
|
||||
testString: assert($('#box-1').css('flex-grow') == '1');
|
||||
- text: '<code>#box-2</code>元素应有<code>flex-grow</code>属性，其值应为 2。'
|
||||
- text: <code>#box-2</code>元素应有<code>flex-grow</code>属性，其值应为 <code>2</code>。
|
||||
testString: assert($('#box-2').css('flex-grow') == '2');
|
||||
|
||||
```
|
||||
|
||||
@ -16,7 +16,7 @@ localeTitle: 使用 flex 短方法属性
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在<code>#box-1</code>和<code>#box-2</code>添加<code>flex</code>属性。为<code>#box-1</code>设置<code>flex-grow</code>属性值为 2，<code>flex-shrink</code>属性值为 2，<code>flex-basis</code>属性值为 150px。为<code>#box-2</code>设置<code>flex-grow</code>属性值为 1，<code>flex-shrink</code>属性值为 1，<code>flex-basis</code>属性值为 150px。
|
||||
在<code>#box-1</code>和<code>#box-2</code>添加<code>flex</code>属性。为<code>#box-1</code>设置<code>flex-grow</code>属性值为 <code>2</code>，<code>flex-shrink</code>属性值为 <code>2</code>，<code>flex-basis</code>属性值为 <code>150px</code>。为<code>#box-2</code>设置<code>flex-grow</code>属性值为 <code>1</code>，<code>flex-shrink</code>属性值为 <code>1</code>，<code>flex-basis</code>属性值为 <code>150px</code>。
|
||||
通过上面的设置，在容器大于 300px 时，<code>#box-1</code>扩大的空间是<code>#box-2</code>扩大空间的两倍；在容器小于 300px 时，<code>#box-1</code>缩小的空间<code>#box-2</code>缩小空间的两倍。300px 是两个盒子的<code>flex-basis</code>的值之和。
|
||||
</section>
|
||||
|
||||
@ -25,11 +25,11 @@ localeTitle: 使用 flex 短方法属性
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应有<code>flex</code>属性，其值应为 2 2 150px。'
|
||||
- text: <code>#box-1</code>元素应有<code>flex</code>属性，其值应为 <code>2 2 150px</code>。
|
||||
testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px');
|
||||
- text: '<code>#box-2</code>元素应有<code>flex</code>属性，其值应为 1 1 150px。'
|
||||
- text: <code>#box-2</code>元素应有<code>flex</code>属性，其值应为 <code>1 1 150px</code>。
|
||||
testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px');
|
||||
- text: '应对<code>#box-1</code>和<code>#box-2</code>使用<code>flex</code>属性。'
|
||||
- text: <code>#box-1</code>和<code>#box-2</code>应具有<code>flex</code>属性。
|
||||
testString: assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
|
||||
|
||||
```
|
||||
|
||||
@ -11,12 +11,12 @@ localeTitle: 使用 flex-shrink 属性收缩项目
|
||||
<section id='description'>
|
||||
目前为止，挑战里的提到的属性都应用于 flex 容器（flex 子元素的父元素）。除此之外，flex 子元素也有很多实用属性。
|
||||
首先介绍的是<code>flex-shrink</code>属性。使用之后，如果 flex 容器太小，该项目会自动缩小。当容器的宽度小于里面所有项目的宽度，项目就会自动压缩。
|
||||
项目的<code>flex-shrink</code>属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的<code>flex-shrink</code>属性值为 1 ，另一个项目的<code>flex-shrink</code>属性值为 3，那么后者相比前者会受到 3 倍压缩。
|
||||
项目的<code>flex-shrink</code>属性接受 number 类型的值。数值越大，该项目与其他项目相比会被压缩得更厉害。例如，如果一个项目的<code>flex-shrink</code>属性值为 <code>1</code>，另一个项目的<code>flex-shrink</code>属性值为 <code>3</code>，那么后者相比前者会受到 <code>3</code> 倍压缩。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-shrink</code>，<code>#box-1</code>的值设为 1，<code>#box-2</code>的值设为 2。
|
||||
为<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>flex-shrink</code>，<code>#box-1</code>的值设为 <code>1</code>，<code>#box-2</code>的值设为 <code>2</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -24,9 +24,9 @@ localeTitle: 使用 flex-shrink 属性收缩项目
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应有<code>flex-shrink</code>属性，其值应为 1.'
|
||||
- text: <code>#box-1</code>元素应有<code>flex-shrink</code>属性，其值应为 <code>1</code>.
|
||||
testString: assert($('#box-1').css('flex-shrink') == '1');
|
||||
- text: '<code>#box-2</code>元素应有<code>flex-shrink</code>属性，其值应为 2.'
|
||||
- text: <code>#box-2</code>元素应有<code>flex-shrink</code>属性，其值应为 <code>2</code>.
|
||||
testString: assert($('#box-2').css('flex-shrink') == '2');
|
||||
|
||||
```
|
||||
|
||||
@ -17,7 +17,7 @@ CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
现在的布局一行里面元素太多了，在<code>#box-container</code>元素添加 CSS 属性<code>flex-wrap</code>，把值设为 wrap。
|
||||
现在的布局一行里面元素太多了，在<code>#box-container</code>元素添加 CSS 属性<code>flex-wrap</code>，把值设为 <code>wrap</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -25,7 +25,7 @@ CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code>元素应有<code>flex-wrap</code>属性，其值应为 wrap。'
|
||||
- text: <code>#box-container</code>元素应有<code>flex-wrap</code>属性，其值应为 <code>wrap</code>。
|
||||
testString: assert($('#box-container').css('flex-wrap') == 'wrap');
|
||||
|
||||
```
|
||||
|
||||
@ -14,7 +14,7 @@ localeTitle: 使用 order 属性重新排列项目
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>order</code>，<code>#box-1</code>的<code>order</code>属性值设为 2，<code>#box-2</code>的<code>order</code>属性值设为 1。
|
||||
给<code>#box-1</code>和<code>#box-2</code>添加 CSS 属性<code>order</code>，<code>#box-1</code>的<code>order</code>属性值设为 <code>2</code>，<code>#box-2</code>的<code>order</code>属性值设为 <code>1</code>。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -22,9 +22,9 @@ localeTitle: 使用 order 属性重新排列项目
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-1</code>元素应有<code>order</code>属性，其值应为 2。'
|
||||
- text: <code>#box-1</code>元素应有<code>order</code>属性，其值应为 <code>2</code>。
|
||||
testString: assert($('#box-1').css('order') == '2');
|
||||
- text: '<code>#box-2</code>元素应有<code>order</code>属性，其值应为 1。'
|
||||
- text: <code>#box-2</code>元素应有<code>order</code>属性，其值应为 <code>1</code>。
|
||||
testString: assert($('#box-2').css('order') == '1');
|
||||
|
||||
```
|
||||
|
||||
@ -30,10 +30,12 @@ localeTitle: 创建一个媒体查询
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '当设备 <code>height</code> 小于或等于 800px 时，<code>p</code> 元素 <code>font-size</code> 应为 12px。'
|
||||
testString: assert($('p').css('font-size') == '12px', '当设备 <code>height</code> 小于或等于 800px 时，<code>p</code> 元素 <code>font-size</code> 应为 12px。');
|
||||
- text: '使用 <code>@media</code> 为 <code>height</code> 小于或等于 800px 的设备添加一个媒体查询。'
|
||||
testString: 'assert(code.match(/@media\s?\(max-height:\s*?800px\)/g), ''使用 <code>@media</code> 为 <code>height</code> 小于或等于 800px 的设备添加一个媒体查询。'');'
|
||||
- text: 声明一个<code>@media</code>媒体查询，<code>height</code> 小于或等于 800px。
|
||||
testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\)/g));
|
||||
- text: 当设备 <code>height</code> 小于或等于 800px 时，<code>p</code> 元素 <code>font-size</code> 应为 10px。
|
||||
testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\){p{font-size:10px;?}}/g));
|
||||
- text: 当设备的<code>height</code>大于 800px 时，<code>p</code>元素的<code>font-size</code>初始值为 20px。
|
||||
testString: assert($("style").text().replace(/\s/g ,'').replace(/@media.*}/g, '').match(/p{font-size:20px;?}/g));
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -9,18 +9,22 @@ localeTitle: 使图片根据设备尺寸自如响应
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
用 CSS 来让图片自适应其实很简单。不要使用绝对单位：
|
||||
<code>img { width: 720px; }</code>
|
||||
你应该使用：
|
||||
<blockquote>img {<br> max-width: 100%;<br> display: block;<br> height: auto;<br>}</blockquote>
|
||||
<code>max-width</code> 属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。把 <code>display</code> 属性值设置为 block，将 image 标签从内联元素（默认值）更改为块级元素。设置 <code>height</code> 属性为 auto 保持图片的原始宽高比。
|
||||
用 CSS 来让图片自适应其实很简单。你只需要给图片添加这些属性:
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
```
|
||||
|
||||
设置 `max-width` 值为 `100%` 可确保图片不超出父容器的范围。设置 `height `属性为 `auto` 保持图片的原始宽高比。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
|
||||
给 <code>img</code> 标签增加样式规则使它自适应容器尺寸。应声明为块级元素，应适应它容器的宽度，应保持原本的宽高比。
|
||||
给 `responsive-img` 添加样式规则，使其成为响应式。它不应该超出父容器（在本例中，即预览窗口）的范围，并保持宽高比不变。添加代码后，拖动浏览器窗口，看看图片发生什么变化。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -28,11 +32,9 @@ localeTitle: 使图片根据设备尺寸自如响应
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>img</code> 标签应设置 <code>max-width</code> 为 100%。'
|
||||
testString: assert(code.match(/max-width:\s*?100%;/g));
|
||||
- text: '<code>img</code> 标签应设置 <code>display</code> 为 block。'
|
||||
testString: assert($('img').css('display') == 'block');
|
||||
- text: '<code>img</code> 标签应设置 <code>height</code> 为 auto。'
|
||||
- text: <code>responsive-img</code> 类应设置 <code>max-width</code> 为 <code>100%</code>。
|
||||
testString: assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
|
||||
- text: <code>responsive-img</code> 类应设置 <code>height</code> 为 <code>auto</code>。
|
||||
testString: assert(code.match(/height:\s*?auto;/g));
|
||||
|
||||
```
|
||||
@ -46,9 +48,17 @@ tests:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
|
||||
@ -63,8 +73,20 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.responsive-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -25,7 +25,7 @@ localeTitle: 制作一个个人作品集网页
|
||||
<strong>需求 11：</strong>导航栏应保持在视窗的顶部。
|
||||
你可以通过 fork 这个项目 <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>CodePen</a> 来构建你的项目，也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。
|
||||
完成项目并通过所有测试后，输入你的项目在 CodePen 上的链接。
|
||||
当你遇到问题的时候，记得使用 <a href='https://forum.freecodecamp.one/t/topic/157' target='_blank'>Read-Search-Ask</a> 方法。
|
||||
完成之后，将你的 URL 提交到相应的项目，并测试通过。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -23,13 +23,12 @@ localeTitle: 制作一个产品登录页
|
||||
<strong>需求 9：</strong>在<code>#email</code>输入框内应有描述该区域用途的占位符文字。
|
||||
<strong>需求 10：</strong><code>#email</code>输入框应该用 HTML5 验证来确认输入的内容是否为邮箱。
|
||||
<strong>需求 11：</strong>在表单中，有一个对应<code>id="submit"</code>的<code>input</code>提交按钮。
|
||||
<strong>需求 12：</strong>当我点击<code>#submit</code>元素，邮箱会被提交到一个静态页面（使用这个模拟 URL: <a href='https://www.freecodecamp.com/email-submit' target='_blank'>https://www.freecodecamp.com/email-submit</a>），它会确认邮箱输入正确并被成功投递。
|
||||
<strong>需求 12：</strong>当我点击<code>#submit</code>元素，邮箱会被提交到一个静态页面 (使用这个模拟 URL: <a href='https://www.freecodecamp.com/email-submit' target='_blank'>https://www.freecodecamp.com/email-submit</a>)。
|
||||
<strong>需求 13：</strong>导航栏应保持在视窗的顶部。
|
||||
<strong>需求 14：</strong>我的产品主页应至少有一个媒体查询。
|
||||
<strong>需求 15：</strong>至少使用一次 flexbox 布局。
|
||||
你可以通过 fork 这个项目 <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>CodePen</a> 来构建你的项目，也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。
|
||||
完成项目并通过所有测试后，输入你的项目在 CodePen 上的链接。
|
||||
当你遇到问题的时候，记得使用 <a href='https://forum.freecodecamp.one/t/topic/157' target='_blank'>Read-Search-Ask</a> 方法。
|
||||
完成之后，将你的 URL 提交到相应的项目，并测试通过。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -30,7 +30,7 @@ localeTitle: 制作一个调查表格
|
||||
<strong>需求 16：</strong>在表单元素内，我能看见一个<code>id="submit"</code>的按钮，用于提交我所有的输入。
|
||||
你可以通过 fork 这个项目 <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>CodePen</a> 来构建你的项目，也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。
|
||||
完成项目并通过所有测试后，输入你的项目在 CodePen 上的链接。
|
||||
当你遇到问题的时候，记得使用 <a href='https://forum.freecodecamp.one/t/topic/157' target='_blank'>Read-Search-Ask</a> 方法。
|
||||
完成之后，将你的 URL 提交到相应的项目，并测试通过。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -29,7 +29,7 @@ localeTitle: 制作一个技术文档页面
|
||||
<strong>需求 15：</strong>我的技术文档页面应该至少使用一次媒体查询。
|
||||
你可以通过 fork 这个项目 <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>CodePen</a> 来构建你的项目，也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。
|
||||
完成项目并通过所有测试后，输入你的项目在 CodePen 上的链接。
|
||||
当你遇到问题的时候，记得使用 <a href='https://forum.freecodecamp.one/t/topic/157' target='_blank'>Read-Search-Ask</a> 方法。
|
||||
完成之后，将你的 URL 提交到相应的项目，并测试通过。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -23,7 +23,7 @@ localeTitle: 制作一个致敬页
|
||||
<strong>需求 9：</strong><code>img</code>在其父元素内居中。
|
||||
你可以通过 fork 这个项目 <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>CodePen</a> 来构建你的项目，也可以使用此 CDN 链接在任何你喜欢的环境中运行测试：<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。
|
||||
完成项目并通过所有测试后，输入你的项目在 CodePen 上的链接。
|
||||
当你遇到问题的时候，记得使用 <a href='https://forum.freecodecamp.one/t/topic/157' target='_blank'>Read-Search-Ask</a> 方法。
|
||||
完成之后，将你的 URL 提交到相应的项目，并测试通过。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
Reference in New Issue
Block a user