Detaillierte Erläuterung des Codes zur Implementierung von sechs Siebstilen mithilfe des HTML-Rasterlayouts

Fügen Sie zunächst den Code unter dem Effektdiagramm an

Bildbeschreibung hier einfügen

<!DOCTYPE html>
<html>

	<Kopf>
		<meta charset="UTF-8">
		<Titel></Titel>
		<style type="text/css">
			.groß {
				Breite: 100px;
				Höhe: 100px;
				Hintergrund: himmelblau;
				Anzeige: Flex;
				Rand oben: 20px;
			} 
			.klein {
				Breite: 10px;
				Höhe: 10px;
				Hintergrund: lila;
				Rahmenradius: 5px;
			}
			
			.eins {
				Anzeige: Flex;
				Inhalt ausrichten: zentriert;
				/*Querachse*/
				Elemente ausrichten: zentrieren;
			}
			
			.zwei {
				Anzeige: Flex;
				Inhalt ausrichten: Abstand herum;
				Elemente ausrichten: zentrieren;
			}
			
			.zwei2 {
				Anzeige: Flex;
				Flex-Richtung: Spalte;
				Inhalt ausrichten: Abstand herum;
				Elemente ausrichten: zentrieren;
			}
			
			.drei {
				Anzeige: Flex;
				Flex-Richtung: Spalte;
				Inhalt ausrichten: Abstand dazwischen;
				Elemente ausrichten: zentrieren;
			}
			
			.vier {
				Anzeige: Flex;
				Inhalt ausrichten: Abstand herum;
			}
			
			.vier1 {
				Anzeige: Flex;
				Inhalt ausrichten: Abstand herum;
				Elemente ausrichten: zentrieren;
			}
			
			.vier2 {
				Anzeige: Flex;
				Flex-Richtung: Spalte;
				Inhalt ausrichten: Abstand herum;
				Elemente ausrichten: zentrieren;
			}
			
			.fünf {
				Anzeige: Flex;
				Inhalt ausrichten: Abstand herum;
			}
			
			.fünf1 {
				Anzeige: Flex;
				Flex-Richtung: Spalte;
				Inhalt ausrichten: Abstand herum;
				Elemente ausrichten: zentrieren;
			}
			
			.fünf2 {
				Anzeige: Flex;
				Flex-Richtung: Reihe;
				selbst ausrichten: zentrieren;
			}
			
			.sechs {
				Anzeige: Flex;
				Inhalt ausrichten: Abstand herum;
			}
			
			.sechs1 {
				Anzeige: Flex;
				Flex-Richtung: Spalte;
				Inhalt ausrichten: Abstand herum;
				Elemente ausrichten: zentrieren;
			}
		</Stil>
	</Kopf>

	<Text>
		<div Klasse="Großer">
			<div Klasse="klein"></div>
		</div>
		<div Klasse="große Zwei">
			<div Klasse="klein"></div>
			<div Klasse="klein"></div>
		</div>
		<div Klasse="große zwei2">
			<div Klasse="klein"></div>
			<div Klasse="klein"></div>
		</div>
		<div Klasse="große Drei">
			<div Klasse = "small" Stil = "align-self: flex-start;"></div>
			<div Klasse = "small" Stil = "align-self: center;"></div>
			<div Klasse = "small" Stil = "align-self: flex-end;"></div>
		</div>
		<div Klasse="große Drei">
			<div Klasse = "small" Stil = "align-self: flex-end;"></div>
			<div Klasse = "small" Stil = "align-self: center;"></div>
			<div Klasse = "small" Stil = "align-self: flex-start;"></div>
		</div>
		<div Klasse="Große Vier">
			<div Klasse="vier2">

				<div Klasse="klein"></div>
				<div Klasse="klein"></div>
			</div>
			<div Klasse="vier2">

				<div Klasse="klein"></div>
				<div Klasse="klein"></div>
			</div>
		</div>
		<div Klasse="Große Fünf">
			<div Klasse="fünf1">

				<div Klasse="klein"></div>
				<div Klasse="klein"></div>
			</div>
			<div Klasse="fünf2">

				<div Klasse="klein"></div>
			</div>
			<div Klasse="fünf1">

				<div Klasse="klein"></div>
				<div Klasse="klein"></div>
			</div>
		</div>

		<div Klasse="Große Sechs">
			<div Klasse="sechs1">
				<div Klasse="klein"></div>
				<div Klasse="klein"></div>
				<div Klasse="klein"></div>
			</div>
			<div Klasse="sechs1">
				<div Klasse="klein"></div>
				<div Klasse="klein"></div>
				<div Klasse="klein"></div>
			</div>
		</div>
		<div Klasse="Große Sechs">
			<div Klasse="sechs1">
				<div Klasse="klein"></div> 
				<div Klasse="klein"></div>
			</div>
			<div Klasse="sechs1">
				<div Klasse="klein"></div>
				<div Klasse="klein"></div> 
			</div>
			<div Klasse="sechs1">
				<div Klasse="klein"></div>
				<div Klasse="klein"></div> 
			</div>
		</div>
	</body>

</html>

Zusammenfassen

Damit ist dieser Artikel über die Verwendung des HTML-Rasterlayouts zur Implementierung von sechs Siebstilen abgeschlossen. Weitere relevante Inhalte zum HTML-Rasterlayout finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Horizontales Header-Menü mit CSS3 implementiert

>>: Wie können wir für Jiedaibao werben, damit sich jeder anmeldet? Methoden und Fähigkeiten zur Förderung von Jiedaibao