Kinosaal-Sitzplatzanordnung

Einführung

In diesem Projekt lernst du, wie du mithilfe von CSS eine Sitzplatzanordnung für eine Kinosaal erstellen kannst. Ziel ist es, ein Layout zu entwerfen, das einen Bildschirm und einen Sitzbereich mit bestimmten Abstandsanforderungen umfasst.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du den Sitzbereich mit der erforderlichen Anzahl von Plätzen und dem Abstand zwischen ihnen einrichtest
• Wie du den Bildschirm zum Layout hinzufügst und ihn vom Sitzbereich trennst
• Wie du CSS-Stile anwendest, um das gewünschte visuelle Erscheinungsbild des Kinosaal-Layouts zu erreichen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• CSS verwenden, um ein flexibles Layout für den Sitzbereich zu erstellen
• Das Bildschirmelement positionieren und gestalten
• Spezifische Abstandsregeln anwenden, um das gewünschte Layout zu erreichen
• Deine Fähigkeiten bei der Gestaltung und Implementierung komplexer Layoutstrukturen demonstrieren, was eine essentielle Fähigkeit für die Webentwicklung ist

Skills Graph

Projekt einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner, der die folgenden Dateien und Verzeichnisse enthält:

├── css
│   └── style.css
└── index.html

Hierbei gilt:

• index.html ist die Hauptseite.
• css/style.css ist die Datei, in der du die erforderlichen Stile hinzufügen musst.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Öffne anschließend "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Den Bildschirm hinzufügen

In diesem Schritt wirst du lernen, wie du den Bildschirm zum Kinosaal-Layout hinzufügst. Folge den Schritten unten, um diesen Schritt abzuschließen:

1. Öffne die Datei css/style.css in deinem Code-Editor.

2. Füge innerhalb der Klasse .screen die folgenden CSS-Eigenschaften hinzu:

   .screen {
     background-color: #fff;
     height: 70px;
     width: 100%;
     transform: rotateX(-45deg);
     box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
     color: #242333;
     text-align: center;
     line-height: 70px;
     font-size: 30px;
   }

   Dadurch wird der Bildschirm gestaltet, seine Größe und Farbe festgelegt und es wird ein 3D-Rotations-Effekt und eine Schattierung hinzugefügt.

Den Sitzbereich einrichten

In diesem Schritt wirst du lernen, wie du den Sitzbereich für den Kinosaal einrichtest. Folge den Schritten unten, um diesen Schritt abzuschließen:

1. Öffne die Datei css/style.css in deinem Code-Editor.

2. Füge innerhalb der Klasse .seat-area die folgenden CSS-Eigenschaften hinzu:

   .seat-area {
     display: flex;
     flex-wrap: wrap;
     margin-top: 40px;
   }

   Dadurch wird ein flexibles Layout für den Sitzbereich erstellt, wobei die Sitze in Reihen angeordnet sind.

3. Wähle anschließend die Klasse .seat aus und füge die folgenden CSS-Eigenschaften hinzu:

   .seat {
     background-color: #444451;
     height: 40px;
     width: 45px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     margin-right: 10px;
     margin-top: 10px;
   }

   Dadurch werden die einzelnen Sitze gestaltet, ihre Größe und Farbe festgelegt und es werden abgerundete Ecken hinzugefügt.

4. Um den gewünschten Abstand zwischen den Sitzen zu erzeugen, füge die folgenden CSS-Regeln hinzu:

   .seat:nth-child(8n + 2) {
     margin-right: 30px;
   }

.seat:nth-child(8n + 6) {
margin-right: 30px;
}

.seat:nth-child(8n + 0) {
margin-right: 0;
}

Dadurch wird ein 30px-Spalt zwischen der 2. und 6. Spalte (an den Gangflächen angrenzend) und ein 10px-Spalt zwischen den anderen Sitzen hinzugefügt.

Dein Kinosaal-Layout ist jetzt fertig! Aktualisiere das Browserfenster, in dem die Webseite angezeigt wird. Das fertige Ergebnis ist wie folgt:

![Abgeschlossene Sitzplatzanordnung im Kinosaal](https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/css/project-movie-theater-seat-arrangement/lab-movie-theater-seat-arrangement/de/../assets/1.png)

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.