Codelab: CSS zentrieren

Adam Argyle

In diesem Codelab können Sie Ihre bevorzugte CSS-Zentralisierung vorstellen und präsentieren.

In meinem Blogpost CSS zentrieren erfahren Sie mehr über fünf meiner Lieblingsmethoden, mit denen ich CSS zentriere. Oder schau dir dieses Video an!

Einrichtung

  1. Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  2. app/index.html öffnen
  3. Ersetzen Sie bei line 23 /* your centering CSS here /* durch Ihr Preisvergleichsportal
  4. (Optional) Benennen Sie die Zentrierungsmethode und ersetzen Sie den Text in den <h1>.

Stile

  1. Neue Datei im Ordner app/css/ erstellen
  2. Erstellen Sie einen Selektor für die Zentrierungslösung, z. B. .turbo-center oder [floaty-mcfloat]
  3. Schreiben Sie in diesem neuen Selektor die Zentrierungsmethode (Sie können sich die anderen Methoden in app/css/ als Beispiele ansehen).
  4. (optional) Schreiben Sie einige „Unterstützungsstile“, damit wir sehen können, welche Kinder Stile benötigen,
  5. Öffne app/css/index.css und importiere die neue Datei unten

Verknüpfen

  1. app/index.html wieder öffnen
  2. Suchen Sie die <article> und weisen Sie ihr den benutzerdefinierten Selektor zu, den Sie in Schritt 2 des vorherigen Abschnitts erstellt haben.
  3. Twittere deinen Glitch und werde ihn in dem Blogpost vorstellen.