Dieses Mal bringe ich Ihnen einen praktischen Fall von H5-Semantik-Tags. Was sind die Vorsichtsmaßnahmen bei der Verwendung von H5-Semantik-Tags? Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Seitenlayout basiert auf HTML5-Elementen. Daher ist es wichtig, dass Sie sich vor Beginn mit den HTML5-Elementen vertraut machen und anschließend prüfen, ob deren Semantik zu Ihrem Layout passt.
Die HTML5-Struktur
Es ist sehr wichtig, dass Sie beim Schreiben von HTML5-Code nicht einfach das
. Zum Beispiel Wrapper oder Container div
Eines der neuen Tags, die verwendet werden können, um das traditionelle div-Element zu ersetzen, ist das
umschließt. Das h1-Element, das einen Anker enthält, ist der Titel unseres Blogs.
Zuerst habe ich
Innerhalb des div-Elements ist jeder Blogbeitrag in ein eigenes Artikelelement eingeschlossen.
Unter einer Reihe von Blogs befinden sich zwei paginierte Links. Normalerweise ist die Bedeutung von Paginierungslinks nicht gleichbedeutend mit dem Element
Vor der Überarbeitung des
In diesem Beispiel enthält das aside-Element mehrere Abschnittselemente. Unten in der Seitenleiste befindet sich ein einfaches Suchfeld. Es gibt uns Zugriff auf einige neue Funktionen von HTML5-Formularen.
Eines davon ist das Platzhalterattribut
Das Layout endet mit dem Fußzeilenelement. In diesem Beispiel muss das Fußzeilenelement außerhalb des div-Containers platziert werden, sodass sich die Breite des Fußzeilenelements über die gesamte Seite erstreckt.
header {
margin: 0 0 98px 0;
}
header h1 {
float: left; font-size: 36px;
font-weight: normal;
}
header nav {
float: right; text-align: right;
padding: 6px 0 0 0;
}
header nav ul {
list-style: none;
}
header nav li {
float: left; font-size: 18px;
width: 136px; margin: 0 0 0 20px;
}
header nav li:nth-child(1):before {
content: "1. ";
color: #a2a2a2;
}
header nav li:nth-child(2):before {
content: "2. ";
color: #a2a2a2;
}
header nav li:nth-child(3):before {
content: "3. ";
color: #a2a2a2;
}
header nav li:nth-child(4):before {
content: "4. ";
color: #a2a2a2;
}
header nav li:nth-child(5):before {
content: "5. ";
color: #a2a2a2;
}
#sidebar {
width: 292px; float: left;
padding: 4px 0 0 0;
}
#sidebar h3 {
font-size: 18px; font-weight: normal;
margin: 0 0 25px 0;
}
#sidebar ul {
list-style: none;
}
#sidebar section {
margin: 0 0 47px 0;
}
#sidebar #about a.more {
display: block; text-align: right;
}
#sidebar #categories {
width: 136px; float: left;
margin: 0 20px 0 0;
}
#sidebar #social {
width: 136px; float: left;
}
#footer-container {
background: rgba(0,0,0,0.2);
overflow: hidden;
}
footer {
width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px;
}
footer #credits {
list-style: none; float: left;
}
footer #credits li {
float: left; margin: 0 6px 0 0;
}
footer #credits li.wordpress a {
display: block; width: 20px; height: 20px;
background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
}
footer #credits li.spoongraphics a {
display: block; width: 25px; height: 20px;
background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
}
footer #back-top {
float: right; font-size: 12px;
}Verwandte Lektüre:
So erstellen Sie einen Drag-Effekt in H5Wie Sie mit H5 die Kamera aufrufenSo gehen Sie mit der Inkompatibilität älterer Browserversionen mit H5 und C3 umDas obige ist der detaillierte Inhalt vonTatsächlicher Fall des semantischen H5-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
