PSD till HTML5 konvertering: lägga till en HTML5 reglaget på en webbsida - del 2 (4 / 4 steg)

Steg 4: Sidfoten

sidfot {float: left; bredd: 100%; bakgrund: url (.. / images/footer_bg.jpg) upprepa-x 0 0 #d1dde1; marginal-top: 30px; min-bredd: 994px}
#menu {float: left; bredd: 100%; font-storlek: 10px; linje-höjd: 10px; font-family: 'MyriadPro-vanliga'; text-transform: versaler}
#menu .footer_nav {float: left; bredd: auto; list-style: none; padding: 13px 0 14px 16px}
#menu .footer_nav li {float: left; marginal-rätt: 20px}
#menu .footer_nav li en {float: left; text-decoration: none; color: #FFF;}
#menu .footer_nav li en: hover {color: #f3d508}
#menu .footer_nav li.active en {color: #f3d508}

Med hjälp av taggen sidfot som dess bredd, gör det flyta till vänster, och placera dess bild via bakgrund egendom och göra det upprepa-x till 0 0, även dess färgkod och sedan definiera dess marginal från toppen och minsta bredd. Flytta längre, ange bredd, font-storlek, line-height, font-family, text-transform för avsnitt taggen med id-menyn, och även göra det flyta till vänster. I nästa steg definiera taggen nav och taggen li, lista anchor och lista hover Taggar definieras inuti den i HTML-därmed.

Placering av sociala ikoner

#menu .social_icon {float: höger; bredd: auto; list-style: none}
#menu .social_icon li {float: left; marginal-rätt: 20px}
#menu .social_icon li.last {marginal-rätt: 0}
#menu .social_icon li .facebook {float: left; bredd: 36px höjd: 36px; bakgrund: url (.. /images/Facebook.png) no-repeat 0 0}
#menu .social_icon li .facebook:hover {bakgrunden: url (.. /images/Facebook.png) no-repeat 0 - 36px}
#menu .social_icon li .google {float: left; bredd: 36px höjd: 36px; bakgrund: url (.. /images/google_plus.png) no-repeat 0 0}
#menu .social_icon li .google:hover {bakgrunden: url (.. /images/google_plus.png) no-repeat 0 - 36px}
#menu .social_icon li .twitter {float: left; bredd: 36px höjd: 36px; bakgrund: url (.. /images/Twitter.png) no-repeat 0 0}
#menu .social_icon li .twitter:hover {bakgrunden: url (.. /images/Twitter.png) no-repeat 0 - 36px}

För att placera de sociala ikonerna, definiera sin klass och göra det flyta till höger, ange dess bredd till auto och hålla sin lista-stil till ingen. Sedan definiera hela li taggarna placeras inuti taggen viktigaste sociala ikon med sina klasser en efter en och placera sina bilder därefter. Men kom ihåg en sak till att vi använder tekniken som sprites, så för egenskapen hover, håll egenskapen upprepa inte negativt.

Den senaste texten i sidfoten

sidfot .bottom_nav {float: left; list-style: none;}
sidfot .bottom_nav li {float: left; font-storlek: 10px; linje-höjd: 30px; font-family: 'MyriadPro-vanliga'; färg: #27a9e1; padding: 0 8px; bakgrund: url (.. /images/li_bg.jpg) upprepa inte rätt 9px}
sidfot .bottom_nav li.first {padding-vänster: 16px}
sidfot .bottom_nav li.last {bakgrunden: ingen}
sidfot .bottom_nav li en {float: left; text-decoration: none; color: #27a9e1;}
sidfot .bottom_nav li en: hover {text-dekoration: understrykning}

Slutligen är vi nu på det sista steget i denna långa handledning. Som ni kan se i PSD har vi en viss textrad i sidfoten, kommer vi nu att definiera att endast. Så börja genom att definiera sin klass, få det att flyta till vänster och hålla sin lista-stil till ingen. Sedan förklara alla ankare tagg och lista Taggar som vi har inom detta särskilda avsnitt, och på sista set egenskapen hover som hålla text-decoration understryka.

Det är allt för denna tutorial, du kan nu öva det allt på egen hand, och som referens, har vi också lagt alla nödvändiga filer för nedladdning. Så ladda ner dem, och hålla öva, som den mer du tränar, desto mer du ska förbättra.