Testen Sie Ihr Können: Bilder und Formularelemente

Ziel dieses Tests ist es, zu bewerten, ob Sie verstehen, wie spezielle Elemente wie Bilder, Medien und Formularelemente in CSS behandelt werden.

Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Anleitung zur Nutzung der Skill-Tests. Sie können uns auch über einen unserer Kommunikationskanäle erreichen.

Aufgabe 1

In dieser Aufgabe haben Sie ein Bild, das über den Rahmen hinausragt. Wir möchten, dass das Bild verkleinert wird, um in den Rahmen zu passen, ohne zusätzlichen weißen Raum, aber es stört uns nicht, wenn ein Teil des Bildes beschnitten wird. Aktualisieren Sie das CSS, um dies zu erreichen.

Ihr Endergebnis sollte wie die folgende Darstellung aussehen:

html

<div class="box">
  <img
    alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>

css

.box {
  border: 5px solid black;
  width: 400px;
  height: 200px;
}

img {
  /* Add styles here */
}

Dies ist der Anfangszustand der Aufgabe:

Klicken Sie hier, um die Lösung anzuzeigen

Es ist in Ordnung, wenn Teile des Bildes beschnitten werden. object-fit: cover ist die beste Wahl, zudem müssen Sie die Breite und Höhe auf 100% setzen:

css

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Aufgabe 2

In dieser Aufgabe haben Sie ein einfaches Formular.

Zum Abschließen der Aufgabe:

Verwenden Sie Attributselektoren, um das Suchfeld und den Button innerhalb von .my-form zu markieren.
Stellen Sie sicher, dass das Formularfeld und der Button dieselbe Schriftgröße wie der Rest des Formulars verwenden.
Geben Sie dem Formularfeld und dem Button 10px Abstand.
Geben Sie dem Button einen Hintergrund in rebeccapurple, einen weißen Vordergrund, keinen Rahmen und abgerundete Ecken von 5px.

Ihr Endergebnis sollte wie die folgende Darstellung aussehen:

html

<form action="" class="my-form" method="post">
  <div>
    <label for="fldSearch">Keywords</label>
    <input id="fldSearch" name="keywords" type="search" />
    <input name="btnSubmit" type="submit" value="Search" />
  </div>
</form>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
.my-form {
  border: 2px solid black;
  padding: 5px;
}

Dies ist der Anfangszustand der Aufgabe:

Klicken Sie hier, um die Lösung anzuzeigen

Hier ist eine Beispiel-Lösung für die Aufgabe:

css

.my-form {
  border: 2px solid black;
  padding: 5px;
}

.my-form input[type="search"] {
  padding: 10px;
  font-size: inherit;
}

.my-form input[type="submit"] {
  padding: 10px;
  font-size: inherit;
  background-color: rebeccapurple;
  color: white;
  border: 0;
  border-radius: 5px;
}

Aufgabe 3

Die Lösung für diese Aufgabe ist relativ frei gestaltet, und Sie haben viel Flexibilität, was Sie hier tun können. Deshalb bieten wir keine Beispiel-Darstellung an.

Ihr CSS muss Folgendes enthalten:

Einen leichten "Reset", um Schriften, Abstände, Ränder und Größen von Anfang an konsistenter zu machen, wie beschrieben in Normalizing form behavior.
Eine schöne, konsistente Gestaltung für die Eingabefelder und den Button.
Eine Layout-Technik, um die Eingabefelder und Labels sauber auszurichten.

<form>
  <h2>Edit your preferences</h2>
  <ul>
    <li>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
    </li>
    <li>
      <label for="website">Website:</label>
      <input type="url" id="website" name="website" />
    </li>
    <li>
      <label for="phone">Phone number:</label>
      <input type="tel" id="phone" name="phone" />
    </li>
    <li>
      <label for="food">Favorite food:</label>
      <select name="food" id="food">
        <option>Salad</option>
        <option>Curry</option>
        <option>Pizza</option>
        <option>Fajitas</option>
      </select>
    </li>
    <li>
      <button>Update preferences</button>
    </li>
  </ul>
</form>

css

* {
  box-sizing: border-box;
}

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
  width: 500px;
}

/* Don't edit the code above here! */

/* Add your code here */

Dies ist der Anfangszustand der Aufgabe:

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges CSS könnte in etwa so aussehen:

css

/* ... */
/* Don't edit the code above here! */

button,
input,
select {
  font-family: inherit;
  font-size: 100%;
  padding: 0;
  margin: 0;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

li:last-of-type {
  margin-top: 30px;
}

label {
  flex: 0 40%;
  text-align: right;
  padding-right: 10px;
}

input,
select {
  flex: auto;
  height: 2em;
}

input,
select,
button {
  display: block;
  padding: 5px 10px;
  border: 1px solid #cccccc;
  border-radius: 3px;
}

select {
  padding: 5px;
}

button {
  margin: 0 auto;
  padding: 5px 20px;
  line-height: 1.5;
  background: #eeeeee;
}

button:hover,
button:focus {
  background: #dddddd;
}

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden