Skip to content

Translate Applied Visual Design 19/52 #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: translate
Choose a base branch
from
Open

Translate Applied Visual Design 19/52 #38

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ee2b84c
translate applied visual design 1-5
ZhichengChen Jul 29, 2018
0736034
translate applied visual design 6-19
Aug 3, 2018
4e2cac0
revise
Aug 6, 2018
0782925
revise
Aug 6, 2018
f6b7a3f
revise
Aug 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
translate applied visual design 1-5
  • Loading branch information
@ZhichengChen
ZhichengChen committed Jul 29, 2018
commit ee2b84c6d7956b375267df942a60334648ada7e1
102 changes: 51 additions & 51 deletions 01-responsive-web-design/applied-visual-design.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,23 @@
"id": "587d7791367417b2b2512ab3",
"title": "Create Visual Balance Using the text-align Property",
"description": [
"This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.",
"Text is often a large part of web content. CSS has several options for how to align it with the <code>text-align</code> property.",
"<code>text-align: justify;</code> causes all lines of text except the last line to meet the left and right edges of the line box.",
"<code>text-align: center;</code> centers the text",
"<code>text-align: right;</code> right-aligns the text",
"And <code>text-align: left;</code> (the default) left-aligns the text.",
"这部分课程主要关于应用视觉设计。开始的挑战展示了一些核心的原则，代码基于一个指定的卡片布局。",
"web 内容大部分都是文本。CSS 里面的<code>text-align</code>属性可以控制文本的对齐方式。",
"<code>text-align: justify;</code>文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<code>text-align: justify;</code>文本两端对齐，忽略最后一行，其它行文字左右两端都靠近行边缘。 建议 =>
<code>text-align: justify;</code>可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

"<code>text-align: center;</code>文本居中对齐。",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<code>text-align: center;</code>文本居中对齐。 =>
<code>text-align: center;</code>可以让文本居中对齐。

"<code>text-align: right;</code>文本右对齐。",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<code>text-align: right;</code>文本右对齐。 =>
<code>text-align: right;</code>可以让文本右对齐。

"<code>text-align: left;</code>（默认）文本左对齐。",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<code>text-align: left;</code>是<code>text-align</code>的默认值，它可以让文本左对齐。

"<hr>",
"Align the <code>h4</code> tag's text, which says \"Google\", to the center. Then justify the paragraph tag which contains information about how Google was founded."
"居中对齐<code>h4</code>标签文字，文字内容为“Google”。两端对齐段落标签文字，文字介绍了 Google 的创立。"
],
"tests": [
{
"text": "Your code should use the text-align property on the <code>h4</code> tag to set it to center.",
"testString": "assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the <code>h4</code> tag to set it to center.');"
"text": "你的代码应该在<code>h4</code>标签上使用 text-align 属性设置文本居中对齐。",
"testString": "assert($('h4').css('text-align') == 'center', '你的代码应该在<code>h4</code>标签上使用 text-align 属性设置文本居中对齐。');"
},
{
"text": "Your code should use the text-align property on the <code>p</code> tag to set it to justify.",
"testString": "assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the <code>p</code> tag to set it to justify.');"
"text": "你的代码应该在<code>p</code>标签上使用 text-align 属性设置文本两端对齐。",
"testString": "assert($('p').css('text-align') == 'justify', '你的代码应该在<code>p</code>标签上使用 text-align 属性设置文本两端对齐。');"
}
],
"solutions": [],
Expand Down Expand Up @@ -62,11 +62,11 @@
" <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>",
" <p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</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>",
" <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">拉里·佩奇</a>",
" <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">谢尔盖·布林</a>",
" </div>",
" </div>",
"</div>"
Expand All @@ -80,15 +80,15 @@
"id": "587d7791367417b2b2512ab4",
"title": "Adjust the Width of an Element Using the width Property",
"description": [
"You can specify the width of an element using the <code>width</code> property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:",
"你可以使用 CSS 里面的<code>width</code>属性来指定元素的宽度。属性值可以是相对单位（比如 em），绝对单位（比如 px），或者包含块（父元素）宽度的百分比宽度。下面这个例子把图片的宽度设置为 220px：",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

或者包含块（父元素）宽度的百分比宽度 => 或者包含块（父元素）宽度的百分比

"<blockquote>img {<br>&nbsp;&nbsp;width: 220px;<br>}</blockquote>",
"<hr>",
"Add a <code>width</code> property to the entire card and set it to an absolute value of 245px. Use the <code>fullCard</code> class to select the element."
"给卡片添加<code>width</code>属性，设置它的值为绝对单位 245px。使用<code>fullCark</code> class 来选择元素。"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

设置它的值为绝对单位 245px =>

使用绝对单位 px 把它的宽度设置为 245px

或者直接：

设置它的宽度为 245px

你来决定吧

],
"tests": [
{
"text": "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.",
"testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.');"
"text": "你的代码应该通过<code>fullCard</code> class 选择器改变卡片的<code>width</code>属性使其值为 245 像素。",
"testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), '你的代码应该通过<code>fullCard</code> class 选择器改变卡片的<code>width</code>属性使其值为 245 像素。');"
}
],
"solutions": [],
Expand Down Expand Up @@ -127,11 +127,11 @@
" <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>",
" <p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</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>",
" <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">拉里·佩奇</a>",
" <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">谢尔盖·布林</a>",
" </div>",
" </div>",
"</div>"
Expand All @@ -145,15 +145,15 @@
"id": "587d7791367417b2b2512ab5",
"title": "Adjust the Height of an Element Using the height Property",
"description": [
"You can specify the height of an element using the <code>height</code> property in CSS, similar to the <code>width</code> property. Here's an example that changes the height of an image to 20px:",
"和<code>width</code>属性类似，你可以使用 CSS 里面的<code>height</code>属性来指定元素的高度。下面这个例子把图片的高度设置为 20px：",
"<blockquote>img {<br>&nbsp;&nbsp;height: 20px;<br>}</blockquote>",
"<hr>",
"Add a <code>height</code> property to the <code>h4</code> tag and set it to 25px."
"给<code>h4</code>标签添加<code>height</code>属性并设置值为 25px。"
],
"tests": [
{
"text": "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.",
"testString": "assert($('h4').css('height') == '25px', 'Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.');"
"text": "你的代码应该设置<code>h4</code>的<code>height</code>属性，使其值为 25 像素。",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

使其值为 25 像素。 => 使其值为<code>25px</code>。

你觉得如何？如果要改，记得下一行也要同步更新

"testString": "assert($('h4').css('height') == '25px', '你的代码应该设置<code>h4</code>的<code>height</code>属性，使其值为 25 像素。');"
}
],
"solutions": [],
Expand Down Expand Up @@ -193,11 +193,11 @@
" <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>",
" <p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</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>",
" <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">拉里·佩奇</a>",
" <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">谢尔盖·布林</a>",
" </div>",
" </div>",
"</div>"
Expand All @@ -211,22 +211,22 @@
"id": "587d781a367417b2b2512ab7",
"title": "Use the strong Tag to Make Text Bold",
"description": [
"To make text bold, you can use the <code>strong</code> tag. This is often used to draw attention to text and symbolize that it is important. With the <code>strong</code> tag, the browser applies the CSS of <code>font-weight: bold;</code> to the element.",
"你可以使用<code>strong</code>标签来加粗文字。这通常用来强调文字，表示它很重要。添加了<code>strong</code>标签后，浏览器会给元素应用<code>font-weight:bold;</code>的 CSS 属性。",
"<hr>",
"Wrap a <code>strong</code> tag around \"Stanford University\" inside the <code>p</code> tag."
"在<code>p</code>标签里的“斯坦福大学”外面添加<code>strong</code>标签。"
],
"tests": [
{
"text": "Your code should add one <code>strong</code> tag to the markup.",
"testString": "assert($('strong').length == 1, 'Your code should add one <code>strong</code> tag to the markup.');"
"text": "你的代码里应该有一个<code>strong</code>标签。",
"testString": "assert($('strong').length == 1, '你的代码里应该有一个<code>strong</code>标签。');"
},
{
"text": "The <code>strong</code> tag should be inside the <code>p</code> tag.",
"testString": "assert($('p').children('strong').length == 1, 'The <code>strong</code> tag should be inside the <code>p</code> tag.');"
"text": "<code>strong</code>标签应该在<code>p</code>标签里。",
"testString": "assert($('p').children('strong').length == 1, '<code>strong</code>标签应该在<code>p</code>标签里。');"
},
{
"text": "The <code>strong</code> tag should wrap around the words \"Stanford University\".",
"testString": "assert($('strong').text().match(/^Stanford University$/gi), 'The <code>strong</code> tag should wrap around the words \"Stanford University\".');"
"text": "<code>strong</code>标签应该包围“斯坦福大学”。",
"testString": "assert($('strong').text().match(/^斯坦福大学$/gi), '<code>strong</code>标签应该包围“斯坦福大学”。');"
}
],
"solutions": [],
Expand Down Expand Up @@ -269,11 +269,11 @@
" <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>",
" <p>Google 由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。</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>",
" <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">拉里·佩奇</a><br><br>",
" <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">谢尔盖·布林</a>",
" </div>",
" </div>",
"</div>"
Expand All @@ -287,23 +287,23 @@
"id": "587d781a367417b2b2512ab8",
"title": "Use the u Tag to Underline Text",
"description": [
"To underline text, you can use the <code>u</code> tag. This is often used to signify that a section of text is important, or something to remember. With the <code>u</code> tag, the browser applies the CSS of <code>text-decoration: underline;</code> to the element.",
"你可以使用<code>u</code>标签来给文字添加下划线。这通常用来表示这部分文字很重要，或者是一些需要被记住的内容。添加了<code>u</code>标签后，浏览器会给元素应用<code>text-decoration: underline;</code>的 CSS 属性。",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

或者是一些需要被记住的内容。 => 或者是一些值得注意的内容。

如何？

"<hr>",
"Wrap the <code>u</code> tag around the text \"Ph.D. students\". It should not include the parent <code>div</code> that has the class of <code>cardText</code>.",
"<strong>Note</strong><br>Try to avoid using the <code>u</code> tag when it could be confused for a link. Anchor tags also have a default underlined formatting."
"在“理工博士”外面添加<code>u</code>标签。不要给整个 class 为<code>cardText</code>的父<code>div</code>添加。",
"<strong>注意</strong>超链接标签默认给文本添加下划线，如果<code>u<code>标签的下滑线和页面的链接混淆，请避免使用它。"
],
"tests": [
{
"text": "Your code should add a <code>u</code> tag to the markup.",
"testString": "assert($('u').length === 1, 'Your code should add a <code>u</code> tag to the markup.');"
"text": "你的代码里应该有一个<code>u</code>标签。",
"testString": "assert($('u').length === 1, '你的代码里应该有一个<code>u</code>标签。');"
},
{
"text": "The <code>u</code> tag should wrap around the text \"Ph.D. students\".",
"testString": "assert($('u').text() === 'Ph.D. students', 'The <code>u</code> tag should wrap around the text \"Ph.D. students\".');"
"text": "<code>u</code>标签应该包围“理工博士”。",
"testString": "assert($('u').text() === '理工博士', '<code>u</code>标签应该包围“理工博士”。');"
},
{
"text": "The <code>u</code> tag should not wrap around the parent <code>div</code> tag.",
"testString": "assert($('u').children('div').length === 0, 'The <code>u</code> tag should not wrap around the parent <code>div</code> tag.');"
"text": "<code>u</code>标签不应该嵌套父<code>div</code>。",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<code>u</code>标签不应该嵌套父<code>div</code>。 =>
<code>u</code>标签内不应包含额外的<code>div</code>标签。

下同

"testString": "assert($('u').children('div').length === 0, '<code>u</code>标签不应该嵌套父<code>div</code>。');"
}
],
"solutions": [],
Expand Down Expand Up @@ -346,11 +346,11 @@
" <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>",
" <p>Google 由在<strong>斯坦福大学</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>",
" <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" target=\"_blank\" class=\"links\">拉里·佩奇</a><br><br>",
" <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" target=\"_blank\" class=\"links\">谢尔盖·布林</a>",
" </div>",
" </div>",
"</div>"
Expand Down