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:
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-formzu 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
rebeccapurpleHintergrund, eine weiße Vordergrundfarbe, keinen Rahmen und abgerundete Ecken von 5px.
Ihr Endergebnis sollte wie das untenstehende Bild aussehen:
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.