Erstellen eines Spielbretts Das Spiel, für das ich mich entschieden habe, ist eines meiner Favoriten. Es ist eine Gefahr, es existiert seit 1964 und es geht immer noch stark. Was Sie hier sehen, ist ein Online-Entwickler. Es heißt CodePen IO. Und was du hier machen darfst testet einen Teil des Codes aus mit denen du arbeiten wirst. Ich habe ein kleines HTML-Dokument erstellt das will vier Spalten ausdrucken. Und für dieses Design und für diesen Kurs, Wir werden tief in die Fähigkeiten eintauchen der Gitterklasse. Und was wir tun können, ist stellen Sie ein Spielbrett zusammen, das im Design anspricht, und auch attraktiv für die Augen. Wie Sie sehen können, auf der linken Seite des Bildschirms In meinem HTML-Dokument habe ich ein einfaches HTML mit einer Abteilung namens Klasse, Ich habe einen Abschnitt des Programms das ist in vier Spalten unterteilt, und ich habe dort zwei Klassen, eine heißt Gitterklasse, und die andere heißt Spaltenklasse und wir werden uns ansehen, wie das in CSS gestaltet ist. Wenn Sie in die Mitte schauen, ist dies das CSS-Codefenster. Wir haben einige grundlegende Dinge für unseren Körper und dann definieren wir, was die Gitterklasse ist. Wenn Sie genau in den roten Kreis schauen, Sie werden sehen, dass ich etwas namens erschaffe eine Rastervorlagenspalte und ich möchte, dass vier Spalten jeweils 25% des Bildschirms einnehmen. Das Problem ist, wenn ich diese Spalten trennen möchte mit so etwas wie einer Gitterlücke. Und wie Sie sehen können, in Zeile 12, Ich stelle die Gitterlücke auf 10 Pixel ein. Und das gibt mir einen Raum zwischen jeder der Spalten. Was passiert mit Rastervorlagenspalten und den 25%? ist, dass es die Lücke zwischen den Spalten nicht enthält und entsprechend wird eine horizontale Bildlaufleiste erstellt. etwas, das wir nie sehen wollen. Wenn Sie auf die rechte Seite im Fenster schauen Das ist normalerweise für JavaScript reserviert In diesem speziellen Bildschirm haben wir keine, Wenn Sie die 25% verwenden, erhalten Sie eine horizontale Bildlaufleiste am Ende der vierten Spalte. Anstelle von vier und 25% Ich ändere die Art und Weise, wie die Rastervorlagenspalten eingerichtet sind. Ich habe die 25% geändert, um zu sagen, dass ich einen Bruch verwenden möchte des verbleibenden Raumes. Und was wir tun werden, ist, dass wir lernen werden genau wie das funktioniert. Die Idee ist, dass es berechnet wird wie viel verbleibender Platz übrig ist und passen Sie die Spaltenbreite anstelle von 25% an. es wird es auf 22 oder 23% niederschlagen um die Breite der Lücken aufzunehmen. Und dieser Bruchteil, wie Sie sehen können, 1fr ermöglicht es mir, die gesamte Breite von vier Spalten zu erhalten und fügen Sie die Lücken in der Breite der Seite ein. Mal sehen, wie das aussieht, wenn wir es auf einem Spielbrett entwerfen. In diesem Fall dreht sich in unseren Kategorien alles um CSS. und das Zeug, an dem wir arbeiten werden. Wir haben Dollarwerte ähnlich wie Jeopardy sie hat. Und wir werden dieses Spiel codieren, damit es funktioniert wie Jeopardy mit einer kleinen Wendung. Damit das Spielbrett funktioniert, Wir werden erstellen und verwenden wollen die Box-Sizing-Eigenschaft. Was wir tun wollen, ist eine Höhe und Breite zu erstellen dass wir dieser Box zuweisen werden und handhaben, was auch immer in der Box ist. Rahmen und Polster werden der Breite hinzugefügt um uns die Größe der auf dem Bildschirm gerenderten Kästchen zu geben und wir müssen diesen Wert anpassen. Wieder, wie gesagt, wenn wir vier Kisten mit jeweils 25% haben, Jede rechte oder linke Polsterung passt nicht in eine Zeile innerhalb der Beschränkung dieses Box-Containers. Also ändern wir es, anstatt das Inhaltsfeld zu verwenden, Welches ist die Standardversion, wir wollen es in border-box ändern. Und damit kann der Browser zählen von Rändern und Polsterung und Spaltbreite und allem anderen, Die Größe des Dokuments wird automatisch verkleinert so dass es kein horizontales Scrollen gibt. Die Verwendung eines Rahmens erleichtert die Verwendung mit jedem Element das beseitigt die Probleme mit dem Layout aller unserer Inhalte. Relative und absolute Positionierung Ermöglicht, dass diese Werte relativ zum Inhalt sind und unabhängig von Änderungen an Rand und Polsterung. Wir werden also immer gleiche Spalten erhalten egal was wir tun. Schauen wir uns den Code an das erzeugt dieses Inhaltsfeld und dieses Rahmenfeld. Die erste, diese größere Box, hat unsere Box-Sizing-Eigenschaft auf Content-Box zu setzen. Die Box wird 160 Pixel breit, 80 Pixel hoch sein, es wird eine Auffüllung von 20 Pixeln haben, Das wird das Inhaltsfeld der Wörter verschieben 20 Pixel vom Rand entfernt, und es wird einen Acht-Pixel-Rand haben. Wenn Sie etwas rechnen, werden die 160 Pixel für die Box, plus die beiden Polstersätze links und rechts plus die beiden Rahmensätze links und rechts gibt Ihnen wirklich eine 216 Pixel breite Box. Und das Gleiche gilt für die Höhe. Anstatt Content-Box zu sagen, Wir erstellen eine Klasse namens Border-Box. Diese Polsterung wird von der gesamten Kastenbreite abgezogen und wir bekommen eine viel kleinere Box. Warum die große Sache? Nun, wenn Benutzer verschiedene Arten von Geräten verwenden Um auf die Seiten zugreifen zu können, müssen wir so viel Platz auf dem Bildschirm sparen Wenn möglich, hilft uns die Verwendung von Border-Box dabei.
