Testen Sie Ihre Fähigkeiten: Bilder und Formularelemente

Bilder und Formularelemente 1

In dieser Aufgabe ragt ein Bild über seine Box hinaus. Skalieren Sie das Bild so, dass es ohne zusätzlichen Leerraum in die Box passt. Es ist in Ordnung, wenn dabei ein Teil des Bildes abgeschnitten wird. Passen Sie dazu das CSS an.

Der Ausgangszustand sieht so aus:

Dies ist der zugrunde liegende Code:

<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>

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

img {
  /* Add styles here */
}

Nach der Anpassung sollte es so aussehen:

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

Bilder und Formularelemente 2

In dieser Aufgabe haben Sie ein Suchfeld und einen Button.

So lösen Sie die Aufgabe:

1. Verwenden Sie Attributselektoren, um das Suchfeld und den Button innerhalb von .my-form auszuwählen.
2. Legen Sie für das Formularfeld und den Button dieselbe Schriftgröße fest wie für den Rest des Containers.
3. Geben Sie dem Formularfeld und dem Button ein Padding von 10px.
4. Geben Sie dem Button einen Hintergrund in rebeccapurple, weiße Schrift, keinen Rahmen und abgerundete Ecken mit einem Radius von 5 px.

Der Ausgangszustand sieht so aus:

Dies ist der zugrunde liegende Code:

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

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

Nach der Anpassung sollte es so aussehen:

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

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

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

Bilder und Formularelemente 3

Die Lösung für diese Aufgabe ist recht offen gestaltet. Sie haben viel Spielraum bei der Umsetzung. Deshalb zeigen wir kein Beispiel für das fertige Ergebnis.

Ihr CSS sollte Folgendes enthalten:

1. Ein einfaches „Reset“, das Schriftarten, Padding, Margins und Größenangaben von Anfang an vereinheitlicht, wie unter Formularverhalten normalisieren beschrieben.
2. Eine ansprechende, einheitliche Gestaltung der Eingabefelder und des Buttons.
3. Eine Layout-Technik, mit der Eingabefelder und Labels sauber ausgerichtet werden.

Der Ausgangszustand sieht so aus:

Dies ist der zugrunde liegende Code:

<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 type="button">Update preferences</button>
  </li>
</ul>

* {
  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 */

Für diese Aufgabe zeigen wir kein fertiges Ergebnis, da viele Lösungen möglich sind.

/* ... */
/* 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;
}

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter