Testen Sie Ihre Fähigkeiten: Bilder und Formularelemente

Das Ziel dieses Fähigkeitstests ist es, zu überprüfen, ob Sie verstehen, wie spezielle Elemente wie Bilder, Medien und Formularelemente in CSS behandelt werden.

Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.

Wenn Sie nicht weiterkommen, können Sie uns in einem unserer Kommunikationskanäle erreichen.

Aufgabe 1

In dieser Aufgabe haben Sie ein Bild, das aus dem Rahmen herausragt. Wir möchten, dass das Bild verkleinert wird, um in den Rahmen zu passen, ohne zusätzlichen weißen Raum, aber es macht nichts aus, wenn ein Teil des Bildes abgeschnitten wird.

Ihr Endergebnis sollte wie das untenstehende Bild aussehen:

Ein Bild in einem Rahmen

Versuchen Sie, den folgenden Live-Code zu aktualisieren, um das fertige Beispiel nachzustellen:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.

Aufgabe 2

In dieser Aufgabe haben Sie ein einfaches Formular. Ihre Aufgabe ist es, die folgenden Änderungen vorzunehmen:

  • Verwenden Sie Attributselektoren, um das Suchfeld und den Button innerhalb von .my-form zu zielen.
  • Sorgen Sie dafür, dass das Formularfeld und der Button dieselbe Textgröße wie der Rest des Formulars verwenden.
  • Geben Sie dem Formularfeld und dem Button 10 px Padding.
  • Geben Sie dem Button einen rebeccapurple Hintergrund, eine weiße Vordergrundfarbe, keinen Rahmen und abgerundete Ecken von 5px.

Ihr Endergebnis sollte wie das untenstehende Bild aussehen:

Ein einzeiliges Formular

Versuchen Sie, den folgenden Live-Code zu aktualisieren, um das fertige Beispiel nachzustellen:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.