Stap 5: De voettekst
< div class = "wrapper" >
< sectie id = "menu" >
< ul class = "footer_nav" >
< li class = "active" >< een href = "#" > < /a >< /li > home
< li >< een href = "#" > over met ons opnemen < /a >< /li >
< li >< een href = "#" > < /a >< /li > Nieuws
< li >< een href = "#" > contact met ons opnemen < /a >< /li >
< li >< een href = "#" > < /a >< /li > producten
< li >< een href = "#" > services < /a >< /li >
< li >< een href = "#" > < /a >< /li > getuigenissen
Tot slot hebben we in de buurt van het einde van de HTML-code, en we kunnen nu de code van de voettekst. Om de voettekstsectie, maakt een voettekst-tag, en binnen die maken een div-tag met een soort wrapper. Maak vervolgens een label van de sectie met een id van menu, als we nodig hebben om een navigatiebalk in de voettekst te maken.
Nu een geordende lijst maken met een klasse van voettekst nav, en maken 7 lijst of li-tags, plaatst van de menuopties erin, laten aaneen te schakelen met behulp van de anker-tags, en sluit de ul-tag.
Sociale pictogrammen toevoegen
< ul class = "social_icon" >
< li >< een href = "#" class = "facebook" >< /a >< /li >
< li >< een href = "#" class = "google" >< /a >< /li >
< li klasse = "laatste" >< een href = "#" class = "twitter" >< /a >< /li >
< /ul >
< / afdeling >
In de voettekst moeten ook drie sociale pictogrammen, die u met de respectieve profielen via CSS3 koppelen kunt plaatsen. Nu in de HTML5 we niet hun afbeeldingen plaatsen zullen, zullen in plaats daarvan we alleen definiëren hen. Zorg dus voor een nieuwe niet-geordende lijst met een klasse van sociaal pictogrammen. Binnen deze ul-tag, maken drie lijst of li-tags, en zet drie ankertags, één binnen elk li label en geven ze allemaal een klasse van facebook, google en twitter in een chronologische volgorde, en sluit de afdeling en ul-tags.
Het einde van de voettekst
< ul class = "bottom_nav" >
< li klasse = "eerste" > COPYRIGHT © < /li >
< li >< een href = "www.Projectsigns.com" > WWW.ProjectSIGNS.COM < /a >< /li >
< li klasse = "laatst" > Alle rechten voorbehouden < /li >
< /ul >
< / div >
< / voettekst >
< / body >
< / html >
Om de voettekst eind, maak een nieuwe tag van de ongeordende lijst, en geef het een klasse van bottom_nav. binnen deze ul-tag, maken drie lijst of li sluit labels en plaats de juiste inhoud binnen hen in een reeks, de ul, div, voettekst, lichaam en HTML-tags respectievelijk.