Stap 4: De voettekst
#menu {breedte: 100%, float: left; lettertype-grootte: 10px; lijn-hoogte: 10px; lettertype-familie: 'MyriadPro-regelmatige'; text-transform: hoofdletters}
#menu .footer_nav {breedte: auto, float: left; lijst-stijl: none; padding: 13px 0 14px 16px}
#menu .footer_nav li {float: left; marge-rechts: 20px}
#menu .footer_nav li een {float: left; text-decoration: none; kleur: #FFF; }
#menu .footer_nav li een: hover {kleur: #-f3d508}
#menu .footer_nav li.active een {kleur: #-f3d508}
Met behulp van de tag van de voettekst, stelt u de breedte, maken het drijven naar links, en de afbeelding via de eigenschap background plaatst en maken herhalen-x 0 0, ook de kleurcode instellen en definieer vervolgens de marge van de top en de minimale breedte. Verder, definiëren de breedte tekengrootte, regelafstand, lettertype-familie, tekst-transformatie voor de sectie-tag met een id van menu, en ook maken het een zwevende werkbalk aan de linkerkant. In de volgende stap, de nav-tag, en de li-tag, de lijst anker en lijst met aanwijseffect tags die erin wordt gedefinieerd in de HTML-code dienovereenkomstig te definiëren.
Plaatsing van sociale pictogrammen
#menu .social_icon {breedte: auto, float: recht; lijst-stijl: geen}
#menu .social_icon li {float: left; marge-rechts: 20px}
#menu .social_icon li.last {marge-rechts: 0}
#menu .social_icon li .facebook {float: left breedte: 36px hoogte: 36px; url: achtergrond (.. /images/Facebook.png) neen-repeat 0 0}
#menu .social_icon li .facebook:hover {url: achtergrond (.. /images/Facebook.png) neen-repeat 0 - 36px}
#menu .social_icon li .google {float: left breedte: 36px hoogte: 36px; url: achtergrond (.. /images/google_plus.png) neen-repeat 0 0}
#menu .social_icon li .google:hover {url: achtergrond (.. /images/google_plus.png) neen-repeat 0 - 36px}
#menu .social_icon li .twitter {float: left breedte: 36px hoogte: 36px; url: achtergrond (.. /images/Twitter.png) neen-repeat 0 0}
#menu .social_icon li .twitter:hover {url: achtergrond (.. /images/Twitter.png) neen-repeat 0 - 36px}
Voor het plaatsen van de social iconen, haar klasse definiëren en maken het drijven naar rechts, de breedte automatisch ingesteld en houden van de lijst-stijl op geen. Daarna definiëren de hele li-tags geplaatst binnen de belangrijkste sociale pictogram tag met hun klassen één voor één, en plaats van hun beelden dienovereenkomstig. Maar herinner me nog een ding dat we de sprites techniek gebruiken, dus voor de hover-eigenschap, houd de neen-repeat eigenschap negatief.
De laatste voettekst
voettekst .bottom_nav {float: left; lijst-style: none;}
voettekst .bottom_nav li {float: left; lettertype-grootte: 10px; lijn-hoogte: 30px; lettertype-familie: 'MyriadPro-regelmatige'; kleur: #27a9e1; opvulling: 0 8px; achtergrond: url (.. /images/li_bg.jpg) neen-repeat juiste 9px}
voettekst .bottom_nav li.first {padding-links: 16px}
voettekst .bottom_nav li.last {achtergrond: geen}
voettekst .bottom_nav li een {float: left; text-decoration: none; kleur: #27a9e1;}
voettekst .bottom_nav li een: hover {tekst-decoratie: onderstreping}
Tot slot, zijn we nu bij de laatste stap van deze lange tutorial. Zoals u in de PSD hebben we een specifieke tekstregel in de voettekst zien kunt, definiëren we nu dat alleen. Dus beginnen door haar klasse definiëren, maken het zweven naar links en houd van haar lijst-stijl op geen. Vervolgens declareren alle het anker tag en lijst tags die we hebben binnen dit specifieke deel en laatste set de hover-eigenschap voor die de tekst-decoratie houden te onderstrepen.
Dat is alles voor deze tutorial, kunt u nu de praktijk allen op uw eigen, en voor uw referentie, hebben ook wij alle vereiste bestanden om te downloaden. Dus download hen, en houden beoefenen, als hoe meer je oefent, hoe meer u zult verbeteren.
