mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-26 13:01:43 -04:00

Files

camperbot 1e1c933362 chore(i18n,learn): processed translations (#49493 )

2023-02-24 10:23:07 -08:00

3.1 KiB

Raw Blame History

id, title, challengeType, dashedName

id	title	challengeType	dashedName
62a240c67f3dbb1a1e6d95ee	步骤 10	0	step-10

--description--

为 #game 提供 500px 的最大宽度和 400px 的最大高度。将 background-color 设置为 lightgray，并将 color 设置为 white。 Use margins to center it by setting the top and bottom margin to 0, and the left and right margin to auto. Finally, give it 10px of padding on all four sides.

--hints--

应该有一个 #game 选择器。

const game = new __helpers.CSSHelp(document).getStyle('#game');
assert.exists(game);

#game 选择器的 max-width 应该是 500px。

const maxWidth = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-width');
assert.equal(maxWidth, '500px');

#game 选择器的 max-height 应该是 400px。

const maxHeight = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-height');
assert.equal(maxHeight, '400px');

#game 选择器应该具有 lightgray 的 background-color。

const background = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('background-color');
assert.equal(background, 'lightgray');

#game 选择器应该有一个 color white。

const color = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('color');
assert.equal(color, 'white');

#game 选择器应该将 margin 设置为 0 auto。

const margin = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('margin');
assert.equal(margin, '0px auto');

#game 选择器应该有 10px 的边距。

const padding = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('padding');
assert.equal(padding, '10px');

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
</head>
<body>
    <div id="game">
        <div id="stats">
            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
        </div>
        <div id="controls">
            <button id="button1">Go to store</button>
            <button id="button2">Go to cave</button>
            <button id="button3">Fight dragon</button>
        </div>
        <div id="monsterStats">
            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
        </div>
        <div id="text">
            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
        </div>
    </div>
</body>
</html>

body {
    background-color: darkblue;
}

#text {
    background-color: black;
    color: white;
    padding: 10px;
}

--fcc-editable-region--

--fcc-editable-region--

3.1 KiB Raw Blame History

--description--

--hints--

--seed--

--seed-contents--

3.1 KiB

Raw Blame History