mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-19 21:09:51 +08:00
chore(i18n,learn): processed translations (#48625)
This commit is contained in:
camperbot
GitHub
parent
214f87fb6c
commit
f1d4deedbb
@ -95,7 +95,7 @@ function fun1() {
|
||||
// Only change code above this line
|
||||
|
||||
function fun2() {
|
||||
var output = "";
|
||||
let output = "";
|
||||
if (typeof myGlobal != "undefined") {
|
||||
output += "myGlobal: " + myGlobal;
|
||||
}
|
||||
@ -116,7 +116,7 @@ function fun1() {
|
||||
}
|
||||
|
||||
function fun2() {
|
||||
var output = "";
|
||||
let output = "";
|
||||
if(typeof myGlobal != "undefined") {
|
||||
output += "myGlobal: " + myGlobal;
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: step-28
|
||||
|
||||
سيتألف البِطْرِيق الخاص بك من قسمين رئيسين: الرأس والجسد.
|
||||
|
||||
داخل `.penguin`، أضف عنصرين جديدين `div`. الأول عنصر به `class` من `penguin-head`, والثاني عنصر به `class` من `penguin-body`.
|
||||
ضمن `.penguin`، أضف عنصرين `div` جديدين. الأول عنصر به `class` من `penguin-head`, والثاني عنصر به `class` من `penguin-body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-20
|
||||
|
||||
# --description--
|
||||
|
||||
وهؤلاء المباني مرتبة حاليا بعضَها فوق بعض. Align the buildings by turning the `.background-buildings` element into a flexbox parent. استخدم خصائص `align-items` و `justify-content` لتساويه مساحة المباني في قاع العنصر.
|
||||
وهؤلاء المباني مرتبة حاليا بعضَها فوق بعض. محاذاة (align) المباني عن طريق تحويل تخطيط عنصر `.background-buildings` إلى تخطيط flexbox حاوي (parent). استخدم خصائص `align-items` و `justify-content` لتساويه مساحة المباني في قاع العنصر.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -62,6 +62,7 @@ assert(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
--fcc-editable-region--
|
||||
|
||||
<p>Click here to view more cat photos.</p>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-8
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#back-wall` element a `width` of `100%` and a `height` of `60%`.
|
||||
اعطي عنصر `#back-wall` خاصية `width` بقيمة `100%` و `height` بقيمة `60%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: step-9
|
||||
|
||||
عادةً، يتم تقديم HTML بترتيب من أعلى إلى أسفل. العناصر في الجزء العلوي من التعليمات البرمجية موضوعة في الجزء العلوي من الصفحة. ومع ذلك، قد ترغب مرات عدّة في نقل العناصر إلى مواقف مختلفة. يمكنك الفعل ذلك باستخدام سمة `position`.
|
||||
|
||||
Set the `position` property for the `#back-wall` element to `absolute`. يخرج موضع `absolute` العنصر من ذلك التدفق المستند من أعلى إلى أسفل ويسمح لك بتعديله بالنسبة (relative) إلى الحاوية.
|
||||
عيّن خاصية `position` لعنصر `#back-wall` بقيمة `absolute`. يخرج موضع `absolute` العنصر من ذلك التدفق المستند من أعلى إلى أسفل ويسمح لك بتعديله بالنسبة (relative) إلى الحاوية.
|
||||
|
||||
عندما يتم وضع عنصر يدوياً، يمكنك نقل تخطيطه باستخدام `top`, و`left`، و`right`، و`bottom`. Set the `#back-wall` element to have a `top` value of `0`, and a `left` value of `0`.
|
||||
عندما يتم وضع عنصر يدوياً، يمكنك نقل تخطيطه باستخدام `top`, و`left`، و`right`، و`bottom`. يجب أن يحتوي `#back-wall` على `top` بقيمة `0`، و `left` بقيمة `0`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-11
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `#back-wall` element, create a `div` with a `class` of `characters`. هذا هو المكان الذي ستنشئ فيه شخصيات لوحتك.
|
||||
أسفل عنصرك `#back-wall`، أنشئ `div` مع `class` بقيمة `characters`. هذا هو المكان الذي ستنشئ فيه شخصيات لوحتك.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
Inside that `.characters` element, create another `div` with an `id` of `offwhite-character`.
|
||||
داخل عنصر `.characters`، أنشئ `div` آخر مع `id` بقيمة `offwhite-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-14
|
||||
|
||||
# --description--
|
||||
|
||||
هذه الشخصية تحتاج إلى عينين. Create two `div` elements in the `#black-mask` element. اعطيهم الـ classes الآتية `eyes left` و `eyes right`، بذلك الترتيب.
|
||||
هذه الشخصية تحتاج إلى عينين. أنشئ عنصرين `div` في عنصر `#black-mask`. اعطيهم الـ classes الآتية `eyes left` و `eyes right`، بذلك الترتيب.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-15
|
||||
|
||||
# --description--
|
||||
|
||||
قم بإنشاء بعض "النقاط" للجهاز (instrument). Add five `div` elements within your `#gray-instrument` element. قم بتعيين `class` كل منهما إلى `black-dot`.
|
||||
قم بإنشاء بعض "النقاط" للجهاز (instrument). أضف خمس عناصر `div` داخل عنصرك `#gray-instrument`. قم بتعيين `class` كل منهما إلى `black-dot`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-16
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, create a rule for the element with the id `offwhite-character`. أعطيه `width` بقيمة `300px`،و `height` بقيمة `550px`، و `background-color` بقيمة `GhostWhite`.
|
||||
استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `offwhite-character`. أعطيه `width` بقيمة `300px`،و `height` بقيمة `550px`، و `background-color` بقيمة `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `#offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`.
|
||||
أنقل `#offwhite-character` إلى مكانه بواسطة إعطائه `position` بقيمة `absolute` و `top` بقيمة `20%` و `left` بقيمة `17.5%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-18
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, style the element with the id `white-hat`. أعطيه `width` و `height` بقيمة `0`، و `border-style` بقيمة `solid`.
|
||||
باستخدام منتقي معرف (id selector)، صمم العنصر مع معرف (id) يسمى `white-hat`. أعطيه `width` و `height` بقيمة `0`، و `border-style` بقيمة `solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, create a rule for the element with the id `black-mask`. أعطيه `width` بقيمة `100%`، و `height` بقيمة `50px`، و `background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-mask`. أعطيه `width` بقيمة `100%`، و `height` بقيمة `50px`، و `background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-28
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to create a rule for the elements with `black-dot` class. عيّن `width` بقيمة `10px`, و`height` بقيمة `10px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
استخدم منتقي الفئة (class selector) لإنشاء قاعدة لعناصر يحتوي على فئة (class) تسمى `black-dot`. عيّن `width` بقيمة `10px`, و`height` بقيمة `10px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-31
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to style the element with the id `tan-table`. أعطيه `width` بقيمة `450px`، و`height` بقيمة `140px`، و`background-color` بقيمة `#D2691E`.
|
||||
استخدام منتقي معرف (id selector) لتصميم عنصر مع معرف (id) يسمى `tan-table`. أعطيه `width` بقيمة `450px`، و`height` بقيمة `140px`، و`background-color` بقيمة `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-35
|
||||
|
||||
# --description--
|
||||
|
||||
Within your new `#black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`.
|
||||
ضمن عنصر `#black-character`، أضف ثلاث عناصر `div` مع قيم `id` التالية، بالترتيب: `black-hat`، و`gray-mask`، و`white-paper`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
إن القناع يحتاج إلى عيون. Within your `#gray-mask` element, add two `div` elements. يجب أن يكون الأول `class` يسمى `eyes left`, وينبغي أن يكون الثاني `class` يسمى `eyes right`.
|
||||
إن القناع يحتاج إلى عيون. ضمن عنصر `#gray-mask`، أضف عنصرين `div`. يجب أن يكون الأول `class` يسمى `eyes left`, وينبغي أن يكون الثاني `class` يسمى `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: step-37
|
||||
|
||||
يتم استخدام عنصر `i` للنص الاصطلاحي (idiomatic)، أو النص المنفصل عن محتوى النص "العادي". يمكن أن يكون هذا للنص _italic_، مثل المصطلحات العلمية، أو للرموز مثل تلك المقدمة من FontAwesome.
|
||||
|
||||
Within your `#white-paper` element, add four `i` elements. أعطيهم جميع `class` بقيمة `fas fa-music`.
|
||||
ضمن عنصر `#white-paper`، أضف أربع عناصر `i`. أعطيهم جميع `class` بقيمة `fas fa-music`.
|
||||
|
||||
تحدد هذه الفئة المميزة كيفية تحميل رمز FontAwesome. يشير `fas` إلى فئة الأيقونات (FontAwesome Solid، هنا)، بينما يختار `fa-music` الرمز المحدد.
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to create a rule for the element with the id `black-character`. عيّن `width` بقيمة `300px`, و`height` بقيمة `500px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-character`. عيّن `width` بقيمة `300px`, و`height` بقيمة `500px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-39
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `#black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`.
|
||||
أنقل عنصر `#black-character` إلى المكان عن طريق تعيين `position` بقيمة `absolute`, و`top` بقيمة `30%`, و`left` بقيمة `59%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to create a rule for the element with the id `black-hat`. أعطيه `width` قيمة `0`, و`height` قيمة `0`، و`border-style` قيمة `solid`.
|
||||
استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-hat`. أعطيه `width` قيمة `0`, و`height` قيمة `0`، و`border-style` قيمة `solid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
Just like with your `#white-hat`, you should style the border for the `#black-hat` element. قم باعطائه `border-top-color`، و `border-right-color` و `border-bottom-color` بقيمة `transparent`. عيّن `border-left-color` بقيمة `rgb(45, 31, 19)`.
|
||||
تماماً مثل `#white-hat`، صمم الحدود (style border) لعنصر `#black-hat`. قم باعطائه `border-top-color`، و `border-right-color` و `border-bottom-color` بقيمة `transparent`. عيّن `border-left-color` بقيمة `rgb(45, 31, 19)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
Now position the `#black-hat` element. أعطيه `position` بقيمة `absolute`، و`top` بقيمة `-150px`، و `left` بقيمة `0`.
|
||||
الآن ضع عنصر `#black-hat`. أعطيه `position` بقيمة `absolute`، و`top` بقيمة `-150px`، و `left` بقيمة `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-44
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, style the element with the id `gray-mask`. أعطيه `width` بقيمة `150px`، و `height` بقيمة `150px`، و `background-color` بقيمة `rgb(167, 162, 117)`.
|
||||
باستخدام منتقي معرف (id selector)، صمم العنصر مع معرف (id) يسمى `gray-mask`. أعطيه `width` بقيمة `150px`، و `height` بقيمة `150px`، و `background-color` بقيمة `rgb(167, 162, 117)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `#gray-mask` element by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`.
|
||||
غير موضع عنصر `#gray-mask` عن طريق إضافة `position` بقيمة `absolute`، و`top` بقيمة `-10px`, و`left` بقيمة `70px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-46
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, create a rule for the id `white-paper`. عيّن `width` بقيمة `400px`, و`height` بقيمة `100px`, و`background-color` بقيمة `GhostWhite`.
|
||||
باستخدام منتقي معرف (id selector)، أنشئ قاعدة لأستهداف معرف (id) يسمى `white-paper`. عيّن `width` بقيمة `400px`, و`height` بقيمة `100px`, و`background-color` بقيمة `GhostWhite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,23 +7,23 @@ dashedName: step-47
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place.
|
||||
اعطي `#white-paper` خاصية `position` بقيمة `absolute`، و`top` بقيمة `250px`، و`left` بقيمة `-150px` لنقلها إلى مكانها.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب يحمل لمنتقي `#white-paper` الخاص بك خاصية `position` بقيمة `absolute`.
|
||||
يجب أن يحتوي منتقيك `#white-paper` على خاصية `position` بقيمة `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute');
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#white-paper` الخاص بك الخاصية `top` بقيمة `250px`.
|
||||
يجب أن يحتوي منتقيك `#white-paper` على خاصية `top` بقيمة `250px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px');
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#white-paper` الخاص بك الخاصية `left` بقيمة `-150px`.
|
||||
يجب أن يحتوي منتقيك `#white-paper` على خاصية `left` بقيمة `-150px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px');
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-48
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `z-index` of the `#white-paper` element to `1`.
|
||||
عيّن `z-index` في عنصر `#white-paper` بقيمة `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-49
|
||||
|
||||
# --description--
|
||||
|
||||
يأتوا FrontAwesome icons مع أسلوبهم الخاص لتعريف الأيقونة. ومع ذلك، لا يزال بإمكانك ضبط الأسلوب بنفسك أيضاً، لتغيير أشياء مثل اللون والحجم. For now, use a class selector to target the icons with the class `fa-music`. عيّن `display` بقيمة `inline-block`, و`margin-top` بقيمة `8%`، و`margin-left` بقيمة `13%`.
|
||||
يأتوا FrontAwesome icons مع أسلوبهم الخاص لتعريف الأيقونة. ومع ذلك، لا يزال بإمكانك ضبط الأسلوب بنفسك أيضاً، لتغيير أشياء مثل اللون والحجم. حالياً, استخدم منتقي الفئة (class selector) لاستهداف أيقونة (icons) تحتوي على فئة (class) تسمى `fa-music`. عيّن `display` بقيمة `inline-block`, و`margin-top` بقيمة `8%`، و`margin-left` بقيمة `13%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-50
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `#black-character` element, add two new `div` elements. ستكون هذه هي الوشاح. أعطِ كليهما `class` من `blue`. ثم أعطى الأول `id` قيمته `blue-left`, والثاني هو `id` قيمته `blue-right`.
|
||||
تحت عنصر `#black-character`، أضف عنصرين `div` جديدين. ستكون هذه هي الوشاح. أعطِ كليهما `class` من `blue`. ثم أعطى الأول `id` قيمته `blue-left`, والثاني هو `id` قيمته `blue-right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-51
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to target the new elements with the class `blue`. عيّن `background-color` إلى `#1E90FF`.
|
||||
استخدم منتقي الفئة (class selector) لاستهداف العناصر الجديدة تحتوي على فئة (class) تسمى `blue`. عيّن `background-color` إلى `#1E90FF`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-52
|
||||
|
||||
# --description--
|
||||
|
||||
Select the element with the id `blue-left` using an id selector. أعطيه `width` قيمته `500px` و`height` قيمته `300px`.
|
||||
حدد العنصر مع معرف (id) يسمى `blue-left` باستخدام محدد المعرف (id selector). أعطيه `width` قيمته `500px` و`height` قيمته `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -17,7 +17,7 @@ Select the element with the id `blue-left` using an id selector. أعطيه `wid
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left'));
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقيك `#blue-left` الخاصية `width` بقيمة `500px`.
|
||||
يجب أن يحتوي منتقيك `#blue-left` على خاصية `width` بقيمة `500px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px');
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-54
|
||||
|
||||
# --description--
|
||||
|
||||
Next, target the element with the id `blue-right` using an id selector. تقم بتعيين `width` إلى `400px` و `height` إلى `300px`.
|
||||
بعد ذلك, أستهدف عنصر مع معرف (id) يسمى `blue-right` باستخدام محدد المعرف (id selector). تقم بتعيين `width` إلى `400px` و `height` إلى `300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,23 +7,23 @@ dashedName: step-55
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#blue-right` element the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`.
|
||||
اعطي عنصر `#blue-right` المكان الصحيح بإضافة `position` بقيمة `absolute` و `top` بقيمة `50%` و `left` بقيمة `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
يجب أن يكون لمنتقي `#blue-right` الخاص بك خاصية `position` بقيمة `absolute`.
|
||||
يجب أن يحتوي منتقيك `#blue-right` على خاصية `position` بقيمة `absolute`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute');
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `top` بقيمة `50%`.
|
||||
يجب أن يحتوي منتقيك `#blue-right` على خاصية `top` بقيمة `50%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%');
|
||||
```
|
||||
|
||||
يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `left` بقيمة `40%`.
|
||||
يجب أن يحتوي منتقيك `#blue-right` على خاصية `left` بقيمة `40%`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%');
|
||||
|
||||
@ -7,11 +7,11 @@ dashedName: step-56
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.blue` elements, add another `div`. قم باعطائه `id` بقيمة `orange-character`.
|
||||
أسفل عناصرك `.blue`، أضف `div` آخر. قم باعطائه `id` بقيمة `orange-character`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `div` element within your `.characters` element.
|
||||
يجب أن يكون لديك عنصر `div` جديد داخل عنصرك `.characters`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 5);
|
||||
|
||||
@ -7,11 +7,11 @@ dashedName: step-57
|
||||
|
||||
# --description--
|
||||
|
||||
Within that `#orange-character` element, add four `div` elements. اعطي `id` قيم `black-round-hat`، و`eyes-div`, و `triangles`، و `guitar`، بالترتيب.
|
||||
ضمن عنصر `#orange-character`، أضف أربع عناصر `div`. اعطي `id` قيم `black-round-hat`، و`eyes-div`, و `triangles`، و `guitar`، بالترتيب.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have four new `div` elements within your `#orange-character` element.
|
||||
يجب أن يكون لديك أربع عناصر `div` جديدة داخل عنصرك `#orange-character`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#orange-character > div')?.length === 4);
|
||||
|
||||
@ -7,11 +7,11 @@ dashedName: step-58
|
||||
|
||||
# --description--
|
||||
|
||||
The `#eyes-div` element should hold some eyes. أضف عنصرين `div` داخلهما. اعطي أول `class` أسم `eyes left`, إعطاء `class` الثانية من `eyes right`.
|
||||
يجب أن يحمل عنصر `#eyes-div` ببعض العيون. أضف عنصرين `div` داخلهما. اعطي أول `class` أسم `eyes left`, إعطاء `class` الثانية من `eyes right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have two `div` elements nested in your `#eyes-div` element.
|
||||
يجب أن يدخل عنصراك `div` في عنصر `#eyes-div`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#eyes-div > div')?.length === 2);
|
||||
|
||||
@ -7,11 +7,11 @@ dashedName: step-59
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `#triangles` div, you will need to add the elements that will become your triangles. أنشئ ثلاثين عناصر `div` وإعطاء كل منهم فئة `triangle`.
|
||||
ضمن عنصر `#triangles`، ستحتاج إلى إضافة العناصر التي ستصبح مثلثاتك. أنشئ ثلاثين عناصر `div` وإعطاء كل منهم فئة `triangle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have 30 `div` elements within your `#triangles` element.
|
||||
يجب أن يكون لديك 30 عناصر `div` داخل عنصرك `#triangles`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#triangles > div')?.length === 30);
|
||||
|
||||
@ -7,13 +7,13 @@ dashedName: step-60
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `#guitar` element, create three `div` elements. اعطي أول اثنين `class` باسم `guitar`. ثم أعطى الأول `id` أسم `guitar-left`, والثاني `id` اسم `guitar-right`. إضافة `id` إلى ثالث `div` باسم `guitar-neck`.
|
||||
داخل عنصر `#guitar`، أنشئ ثلاث عناصر `div`. اعطي أول اثنين `class` باسم `guitar`. ثم أعطى الأول `id` أسم `guitar-left`, والثاني `id` اسم `guitar-right`. إضافة `id` إلى ثالث `div` باسم `guitar-neck`.
|
||||
|
||||
أما الثالث `div` فلا ينبغي أن يحتوي على فئة `guitar`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three new `div` elements within your `#guitar` element.
|
||||
يجب أن يكون لديك ثلاث عناصر `div` جديدة بداخل عنصرك `#guitar`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar > div')?.length === 3);
|
||||
|
||||
@ -7,17 +7,17 @@ dashedName: step-61
|
||||
|
||||
# --description--
|
||||
|
||||
Use another FontAwesome icon for your `.guitar`. Inside both the `#guitar-left` and `#guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`.
|
||||
استخدم أيقونة FontAwesome الأخرى في `.guitar` الخاص بك. داخل كل من عنصرين `#guitar-left` و`#guitar-right`، أضف عنصر `i` وأعطيه `class` باسم `fas fa-bars`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Within your `#guitar-left` element, you should add an `i` element.
|
||||
ضمن عنصرك `#guitar-left`، يجب عليك إضافة عنصر `i`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar-left > i')?.length === 1);
|
||||
```
|
||||
|
||||
Within your `#guitar-right` element, you should add an `i` element.
|
||||
داخل عنصرك `#guitar-right`، يجب عليك إضافة عنصر `i`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#guitar-right > i')?.length === 1);
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-62
|
||||
|
||||
# --description--
|
||||
|
||||
Select your `orange-character` element with an id selector. أعطيه `width` بقيمة `250px`، و `height` بقيمة `550px`، و `background-color` بقيمة `rgb(240, 78, 42)`.
|
||||
حدد عنصرك `orange-character` مع المنتقي المعرف (id selector). أعطيه `width` بقيمة `250px`، و `height` بقيمة `550px`، و `background-color` بقيمة `rgb(240, 78, 42)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-63
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#orange-character` element a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`.
|
||||
اعطي عنصر `#orange-character` خاصية `position` بقيمة `absolute`، و`top` بقيمة `25%`، و`left` بقيمة `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-65
|
||||
|
||||
# --description--
|
||||
|
||||
The `#black-round-hat` element should probably be round. أعطيه `border-radius` بقيمة `50%` لإصلاح هذا.
|
||||
يجب أن يكون عنصر `#black-round-hat` مستدير (round). أعطيه `border-radius` بقيمة `50%` لإصلاح هذا.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-66
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `#black-round-hat` element into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`.
|
||||
أنقل عنصر `#black-round-hat` إلى مكانها مع `position` بقيمة `absolute`، و `top` بقيمة `-100px`، و `left` بقيمة `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-67
|
||||
|
||||
# --description--
|
||||
|
||||
Put the `#black-round-hat` element on the correct layer with a `z-index` of `-1`.
|
||||
ضع عنصر `#black-round-hat` على الطبقة الصحيحة مع `z-index` بقيمة `-1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-68
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to create a rule for the element with the id `eyes-div`. عيّن `width` إلى `180px` و `height` إلى `50px`.
|
||||
استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `eyes-div`. عيّن `width` إلى `180px` و `height` إلى `50px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-70
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#eyes-div` element a `z-index` of `3`.
|
||||
اعطي عنصر `#eyes-div` خاصية `z-index` بقيمة `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-82
|
||||
|
||||
# --description--
|
||||
|
||||
الآن تحتاج إلى نقل أيقونات الشريط (bar icons) إلى مكانها. Create a class selector for the `fa-bars` class. قم بتعيين `display` إلى `block`و `margin-top` إلى `30%`، و `margin-left` إلى `40%`.
|
||||
الآن تحتاج إلى نقل أيقونات الشريط (bar icons) إلى مكانها. أنشئ منتقي فئة (class selector) تستهدف فئة (class) تسمى `fa-bars`. قم بتعيين `display` إلى `block`و `margin-top` إلى `30%`، و `margin-left` إلى `40%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-83
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to create a rule for the id `guitar-neck`. قم بتعيين `width` إلى `200px`، و `height` إلى `30px`، و `background-color` إلى `#D2691E`.
|
||||
استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف معرف (id) يسمى `guitar-neck`. قم بتعيين `width` إلى `200px`، و `height` إلى `30px`، و `background-color` إلى `#D2691E`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-84
|
||||
|
||||
# --description--
|
||||
|
||||
Now move the `#guitar-neck` element with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`.
|
||||
الآن انقل عنصر `#guitar-neck` باستخدام `position` بقيمة `absolute` و `top` بقيمة `45px`، و `left` بقيمة `200px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-85
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#guitar-neck` element a `z-index` of `3`.
|
||||
اعطي عنصر `#guitar-neck` خاصية `z-index` بقيمة `3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-86
|
||||
|
||||
# --description--
|
||||
|
||||
Time to style the elements with the `eyes` class. Use a class selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`.
|
||||
حان الوقت لتصميم العناصر مع فئة (class) تسمى `eyes`. استخدم منتقي فئة (class selector) لتعيين `width` بقيمة `35px`، و `height` بقيمة `20px` و `background-color` بقيمة `#8B4513`، و `border-radius` بقيمة `20px 50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-75
|
||||
|
||||
# --description--
|
||||
|
||||
Adjust the layout of the `.triangle` elements with a `display` of `inline-block`.
|
||||
ضبط تخطيط عناصر `.triangle` بواسطة `display` بقيمة `inline-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-74
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `.triangle` elements the correct color. عيّن `border-top-color`، و`border-bottom-color`, و`border-left-color` إلى `transparent`. عيّن `border-right-color` إلى `Gold`.
|
||||
أعط العناصر `.triangle` اللون الصحيح. عيّن `border-top-color`، و`border-bottom-color`, و`border-left-color` إلى `transparent`. عيّن `border-right-color` إلى `Gold`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-73
|
||||
|
||||
# --description--
|
||||
|
||||
Style the border of your `.triangle` elements. عيّن `border-style` بقيمة `solid` و`border-width` بقيمة `42px 45px 45px 0`.
|
||||
صمم حدود (style border) عناصرك `.triangle`. عيّن `border-style` بقيمة `solid` و`border-width` بقيمة `42px 45px 45px 0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-72
|
||||
|
||||
# --description--
|
||||
|
||||
Create a class selector for the elements with the `triangle` class. عيّن `width` إلى `0` و `height` إلى `0`.
|
||||
إنشاء منتقي الفئة (class selector) تستهدف عناصر مع فئة (class) تسمى `triangle`. عيّن `width` إلى `0` و `height` إلى `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-71
|
||||
|
||||
# --description--
|
||||
|
||||
Target the element with the id `triangles` using an id selector. عيّن `width` إلى `250px` و `height` إلى `550px`.
|
||||
أستهدف عنصر مع معرف (id) يسمى `triangles` باستخدام محدد المعرف (id selector). عيّن `width` إلى `250px` و `height` إلى `550px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-76
|
||||
|
||||
# --description--
|
||||
|
||||
Now use an id selector for `guitar`. عيّن `width` بقيمة `100%`, و `height` بقيمة `100px`.
|
||||
الآن استخدم منتقي المعرف (id selector) بقيمة `guitar`. عيّن `width` بقيمة `100%`, و `height` بقيمة `100px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `border-width` of the `#black-hat` to `150px 0 0 300px`.
|
||||
عيّن `border-width` في `#black-hat` بقيمة `150px 0 0 300px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,11 +7,11 @@ dashedName: step-6
|
||||
|
||||
# --description--
|
||||
|
||||
ضمن عنصر `div` الخاص بك، أضف ثلاثة عناصر `span`. اعطي كل منهم سمة `class` تم تعيينها إلى `year`، وأضف النصوص التالية (بالترتيب): `2019`و `2020` و `2021`.
|
||||
ضمن عنصرك `div`، أضف ثلاث عناصر `span`. اعطي كل منهم سمة `class` تم تعيينها إلى `year`، وأضف النصوص التالية (بالترتيب): `2019`و `2020` و `2021`.
|
||||
|
||||
# --hints--
|
||||
|
||||
عنصر `div` الخاص بك يجب أن يحتوي على ثلاثة عناصر `span`.
|
||||
يجب أن يحتوي عنصرك `div` على ثلاث عناصر `span`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.children?.length === 3);
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-56
|
||||
|
||||
# --description--
|
||||
|
||||
الفرق الرئيسي بين `tr[class="total"]` و `tr.total` هو أن الأول سيختار عناصر `tr` حيث classs الـ *only* هو `total`. The second will select `tr` elements where the class *includes* `total`.
|
||||
الفرق الرئيسي بين `tr[class="total"]` و `tr.total` هو أن الأول سيختار عناصر `tr` حيث classs الـ *only* هو `total`. وسيقوم الثاني باختيار عناصر `tr` حيث *يشمل* فئة (class) تسمى `total`.
|
||||
|
||||
في حالتك `tr.total` سوف يعمل. يمكنك استخدام هذا المنتقى لاستهداف جميع عناصر `td` داخل صفوف `.total`. قم بمحاذاة النص إلى اليمين، وإعطائه padding من `0 0.25rem`.
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@ function fun1() {
|
||||
// Only change code above this line
|
||||
|
||||
function fun2() {
|
||||
var output = "";
|
||||
let output = "";
|
||||
if (typeof myGlobal != "undefined") {
|
||||
output += "myGlobal: " + myGlobal;
|
||||
}
|
||||
@ -116,7 +116,7 @@ function fun1() {
|
||||
}
|
||||
|
||||
function fun2() {
|
||||
var output = "";
|
||||
let output = "";
|
||||
if(typeof myGlobal != "undefined") {
|
||||
output += "myGlobal: " + myGlobal;
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@ assert.exists(document.querySelector('section:last-of-type + button') || documen
|
||||
assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
|
||||
```
|
||||
|
||||
The submit should display the text `Send`.
|
||||
提交按鈕的文本應爲 `Send`。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Send');
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-20
|
||||
|
||||
# --description--
|
||||
|
||||
建築物相互堆疊，並超出了屏幕。讓我們解決這個問題。 Align the buildings by turning the `.background-buildings` element into a flexbox parent. 使用 `align-items` 和 `justify-content` 在元素的底部均勻地排布建築物。
|
||||
建築物相互堆疊，並超出了屏幕。讓我們解決這個問題。 通過將 `.background-buildings` 元素變成一個 flexbox 父元素來對齊建築物。 使用 `align-items` 和 `justify-content` 在元素的底部均勻地排布建築物。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -62,6 +62,7 @@ assert(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
--fcc-editable-region--
|
||||
|
||||
<p>Click here to view more cat photos.</p>
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-7
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to give the element with the id `back-wall` a `background-color` of `#8B4513`.
|
||||
使用 id 選擇器爲 id `back-wall` 設置 `background-color` 爲 `#8B4513`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-8
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#back-wall` element a `width` of `100%` and a `height` of `60%`.
|
||||
給 `#back-wall` 元素一個 `100%` 的 `width` 和一個 `60%` 的 `height` 。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: step-9
|
||||
|
||||
通常，HTML 以自上而下的方式呈現。 代碼頂部的元素位於頁面頂部。 但是，很多時候你可能希望將元素移動到不同的位置。 你可以使用 `position` 屬性來執行此操作。
|
||||
|
||||
Set the `position` property for the `#back-wall` element to `absolute`. `absolute` 位置將元素從自上而下的文檔流中取出，並允許你相對於其容器調整它。
|
||||
將 `#back-wall` 元素的 `position` 屬性設置爲 `absolute`。 `absolute` 位置將元素從自上而下的文檔流中取出，並允許你相對於其容器調整它。
|
||||
|
||||
手動定位元素時，你可以使用 `top`、`left`、`right` 和 `bottom` 移動其佈局。 Set the `#back-wall` element to have a `top` value of `0`, and a `left` value of `0`.
|
||||
手動定位元素時，你可以使用 `top`、`left`、`right` 和 `bottom` 移動其佈局。 設置 `#back-wall` 的 `top` 值爲 `0`，`left` 值爲 `0`。
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-11
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `#back-wall` element, create a `div` with a `class` of `characters`. 這是你將創建繪畫角色的地方。
|
||||
在你的 `#back-wall` 元素的下方，創建一個 `div`，其包含 `class` 爲 `characters`。 這是你將創建繪畫角色的地方。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-12
|
||||
|
||||
# --description--
|
||||
|
||||
Inside that `.characters` element, create another `div` with an `id` of `offwhite-character`.
|
||||
在該 `.characters` 元素中，創建另一個 `div`，其 `id` 爲 `offwhite-character`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-14
|
||||
|
||||
# --description--
|
||||
|
||||
這個角色需要眼睛。 Create two `div` elements in the `#black-mask` element. 按順序爲它們提供 `eyes left` 和 `eyes right` 類。
|
||||
這個角色需要眼睛。 在 `#black-mask` 元素中創建兩個 `div` 元素。 按順序爲它們提供 `eyes left` 和 `eyes right` 類。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-15
|
||||
|
||||
# --description--
|
||||
|
||||
爲樂器創建一些“點”。 Add five `div` elements within your `#gray-instrument` element. 將每個的 `class` 設置爲 `black-dot`。
|
||||
爲樂器創建一些“點”。 在你的 `#gray-instrument` 元素中添加五個 `div` 元素。 將每個的 `class` 設置爲 `black-dot`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-16
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, create a rule for the element with the id `offwhite-character`. 給它一個 `width` 爲 `300px`、一個 `height` 爲 `550px` 和一個 `background-color` 爲 `GhostWhite`。
|
||||
使用 id 選擇器爲 id 爲 `offwhite-character` 的元素創建規則。 給它一個 `width` 爲 `300px`、一個 `height` 爲 `550px` 和一個 `background-color` 爲 `GhostWhite`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `#offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`.
|
||||
將 `#offwhite-character` 移至適當位置，爲此，給它一個 `absolute` 的 `position`，一個 `top` 值爲 `20%`，一個 `left` 值爲 `17.5%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-18
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, style the element with the id `white-hat`. 給它一個 `width` 和 `height` 均爲 `0`，以及一個 `solid` 的 `border-style`。
|
||||
使用 id 選擇器，爲 id 爲 `white-hat` 的元素設置樣式。 給它一個 `width` 和 `height` 均爲 `0`，以及一個 `solid` 的 `border-style`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, create a rule for the element with the id `black-mask`. 給它一個 `100%` 的 `width`、一個 `50px` 的 `height`，和一個 `rgb(45, 31, 19)` 的 `background-color`。
|
||||
使用 id 選擇器爲 id 爲 `black-mask` 的元素創建規則。 給它一個 `100%` 的 `width`、一個 `50px` 的 `height`，和一個 `rgb(45, 31, 19)` 的 `background-color`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-25
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, give the element with the id `gray-instrument` a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`.
|
||||
使用 id 選擇器，給 id 爲 `gray-instrument` 的元素一個 `width` 爲 `15%`，`height` 設置爲 `40%` 和 `background-color` 爲 `rgb(167, 162, 117)`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-28
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to create a rule for the elements with `black-dot` class. 將 `width` 設置爲 `10px`，`height` 設置爲 `10px`，`background-color` 設置爲 `rgb(45, 31, 19)`。
|
||||
使用類選擇器爲具有 `black-dot` 類的元素創建規則。 將 `width` 設置爲 `10px`，`height` 設置爲 `10px`，`background-color` 設置爲 `rgb(45, 31, 19)`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-31
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to style the element with the id `tan-table`. 給它一個 `width` 值爲 `450px`、一個 `height` 值爲 `140px`，和一個 `background-color` 值爲 `#D2691E`。
|
||||
使用 id 選擇器，爲 id 爲 `tan-table` 的元素設置樣式。 給它一個 `width` 值爲 `450px`、一個 `height` 值爲 `140px`，和一個 `background-color` 值爲 `#D2691E`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-35
|
||||
|
||||
# --description--
|
||||
|
||||
Within your new `#black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`.
|
||||
在你的新的 `#black-character` 元素中，添加三個 `div` 元素，並按以下順序設置 `id` 值：`black-hat`、`gray-mask`、`white-paper`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
面具需要眼睛。 Within your `#gray-mask` element, add two `div` elements. 第一個應該將 `class` 設置爲 `eyes left`，第二個應該將 `class` 設置爲 `eyes right`。
|
||||
面具需要眼睛。 在你的 `#gray-mask` 元素中，添加兩個 `div` 元素。 第一個應該將 `class` 設置爲 `eyes left`，第二個應該將 `class` 設置爲 `eyes right`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: step-37
|
||||
|
||||
`i` 元素用於習語文本，或與“正常”文本內容分開的文本。 這可能適用於_斜體_文本，例如科學術語，也可能適用於 FontAwesome 提供的圖標。
|
||||
|
||||
Within your `#white-paper` element, add four `i` elements. 給它們一個 `fas fa-music` 的 `class`。
|
||||
在你的 `#white-paper` 元素中，添加四個 `i` 元素。 給它們一個 `fas fa-music` 的 `class`。
|
||||
|
||||
這個特殊的類是 FontAwesome 如何確定要加載哪個圖標。 `fas` 表示圖標的類別（此處爲 FontAwesome Solid 字體），而 `fa-music` 選擇特定圖標。
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to create a rule for the element with the id `black-character`. 將 `width` 設置爲 `300px`，`height` 設置爲 `500px`，`background-color` 設置爲 `rgb(45, 31, 19)`。
|
||||
使用 id 選擇器爲 id 爲 `black-character` 的元素創建規則。 將 `width` 設置爲 `300px`，`height` 設置爲 `500px`，`background-color` 設置爲 `rgb(45, 31, 19)`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-39
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `#black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`.
|
||||
通過將 `position` 設置爲 `absolute`，`top` 設置爲 `30%`，`left` 設置爲 `59%`，將 `#black-character` 元素移動到位。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
Use an id selector to create a rule for the element with the id `black-hat`. 給它一個 `width` 值爲 `0`、一個 `height` 值爲 `0`，和一個 `border-style` 值爲 `solid`。
|
||||
使用 id 選擇器爲 id 爲 `black-hat` 的元素創建規則。 給它一個 `width` 值爲 `0`、一個 `height` 值爲 `0`，和一個 `border-style` 值爲 `solid`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
Just like with your `#white-hat`, you should style the border for the `#black-hat` element. 給它添加值爲 `transparent` 的 `border-top-color`、`border-right-color` 和 `border-bottom-color`。 將 `border-left-color` 設置爲 `rgb(45, 31, 19)`。
|
||||
就像你的 `#white-hat` 一樣，你應該爲 `#black-hat` 元素設置邊框樣式。 給它添加值爲 `transparent` 的 `border-top-color`、`border-right-color` 和 `border-bottom-color`。 將 `border-left-color` 設置爲 `rgb(45, 31, 19)`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
Now position the `#black-hat` element. 給它一個 `position` 爲 `absolute`，一個 `top` 爲 `-150px` 和一個 `left` 爲 `0`。
|
||||
現在定位 `#black-hat` 元素。 給它一個 `position` 爲 `absolute`，一個 `top` 爲 `-150px` 和一個 `left` 爲 `0`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-44
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, style the element with the id `gray-mask`. 給它一個 `width` 爲 `150px`、一個 `height` 爲 `150px` 和一個 `background-color` 爲 `rgb(167, 162, 117)`。
|
||||
使用 id 選擇器，爲 id 爲 `gray-mask` 的元素設置樣式。 給它一個 `width` 爲 `150px`、一個 `height` 爲 `150px` 和一個 `background-color` 爲 `rgb(167, 162, 117)`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
Position the `#gray-mask` element by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`.
|
||||
通過將 `position` 設置爲 `absolute`、將 `top` 設置爲 `-10px`，以及將 `left` 設置爲 `70px`，來定位 `#gray-mask`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-46
|
||||
|
||||
# --description--
|
||||
|
||||
Using an id selector, create a rule for the id `white-paper`. 將 `width` 設置爲 `400px`、`height` 設置爲 `100px`、`background-color` 設置爲 `GhostWhite`。
|
||||
使用 id 選擇器，爲 id 爲 `white-paper` 的元素創建規則。 將 `width` 設置爲 `400px`、`height` 設置爲 `100px`、`background-color` 設置爲 `GhostWhite`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-47
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place.
|
||||
給 `#white-paper` 一個 `position` 爲 `absolute`、一個 `top` 爲 `250px` 和一個 `left` 爲 `-150px`，將其移動到位。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-48
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `z-index` of the `#white-paper` element to `1`.
|
||||
將 `#white-paper` 的 `z-index` 設置爲 `1`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-49
|
||||
|
||||
# --description--
|
||||
|
||||
FontAwesome 圖標帶有自己的樣式來定義圖標。 但是，你仍然可以自己設置樣式，以更改顏色和大小等內容。 For now, use a class selector to target the icons with the class `fa-music`. 將 `display` 設置爲 `inline-block`，將 `margin-top` 設置爲 `8%`，並將 `margin-left` 設置爲 `13%`。
|
||||
FontAwesome 圖標帶有自己的樣式來定義圖標。 但是，你仍然可以自己設置樣式，以更改顏色和大小等內容。 現在，使用類選擇器來選中具有 `fa-music` 類的圖標。 將 `display` 設置爲 `inline-block`，將 `margin-top` 設置爲 `8%`，並將 `margin-left` 設置爲 `13%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-50
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `#black-character` element, add two new `div` elements. 這些將是披肩。 給它們添加 `class` 爲 `blue`。 然後給第一個設置 `id` 爲 `blue-left`，給第二個設置 `id` 爲 `blue-right`。
|
||||
在你的 `#black-character` 元素下方，添加兩個新的 `div` 元素。 這些將是披肩。 給它們添加 `class` 爲 `blue`。 然後給第一個設置 `id` 爲 `blue-left`，給第二個設置 `id` 爲 `blue-right`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-51
|
||||
|
||||
# --description--
|
||||
|
||||
Use a class selector to target the new elements with the class `blue`. 將 `background-color` 設置爲 `#1E90FF`。
|
||||
使用類選擇器來定位具有 `blue` 類的新元素。 將 `background-color` 設置爲 `#1E90FF`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-52
|
||||
|
||||
# --description--
|
||||
|
||||
Select the element with the id `blue-left` using an id selector. 給它一個 `width` 爲 `500px` 和一個 `height` 爲 `300px`。
|
||||
使用 id 選擇器選中 id 爲 `blue-left` 的元素。 給它一個 `width` 爲 `500px` 和一個 `height` 爲 `300px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-54
|
||||
|
||||
# --description--
|
||||
|
||||
Next, target the element with the id `blue-right` using an id selector. 將 `width` 設置爲 `400px`，將 `height` 設置爲 `300px`。
|
||||
接着，使用 id 選擇器選中 id 爲 `blue-right` 的元素。 將 `width` 設置爲 `400px`，將 `height` 設置爲 `300px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-55
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#blue-right` element the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`.
|
||||
爲 `#blue-right` 提供正確的定位，將 `position` 設置爲 `absolute`，`top` 設置爲 `50%`，`left` 設置爲 `40%`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,11 +7,11 @@ dashedName: step-56
|
||||
|
||||
# --description--
|
||||
|
||||
Below your `.blue` elements, add another `div`. 將它的 `id` 值設置爲 `orange-character`。
|
||||
在你的 `.blue` 元素下方，添加另一個 `div`。 將它的 `id` 值設置爲 `orange-character`。
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `div` element within your `.characters` element.
|
||||
你的 `.characters` 元素中應該有一個新的 `div` 元素。
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.characters > div')?.length === 5);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user