Étape 4: Le pied de page
#menu {float : left ; width : 100 %; font-size : 10px ; line-height : 10px ; famille de police: « MyriadPro-temps normal » ; text-transform : majuscules}
#menu .footer_nav {float : left ; width : auto ; liste-style : none ; padding : 13px 0 14px 16px}
#menu .footer_nav li {float : left ; margin-droit : 20px}
#menu li de .footer_nav un {float : left ; text-decoration : none ; color: #FFF ; }
#menu li de .footer_nav a: hover {color: #f3d508}
#menu .footer_nav li.active a {color: #f3d508}
À l’aide de la balise de pied de page, définissez sa largeur, faire flotter à gauche et place son image via la propriété background et rendent horizontale 0 0, également définir son code couleur et ensuite définir sa marge par le haut et la largeur minimale. Aller plus loin, définir la largeur, taille de la police, line-height-famille de polices, text-transform pour la balise de la section portant l’id du menu et aussi faire flotter à gauche. Dans l’étape suivante, définir la balise de nav et la balise li, l’ancre de la liste et liste hover tags définis à l’intérieur dans le code HTML en conséquence.
Placement des icônes sociales
#menu .social_icon {float : right ; width : auto ; liste-style : none}
#menu .social_icon li {float : left ; margin-droit : 20px}
#menu .social_icon li.last {marge-droit: 0}
#menu .social_icon li Facebook {float : left ; width : 36px ; hauteur : 36px ; background : url (.. /images/Facebook.png) non-repeat 0 0}
#menu .social_icon li .facebook:hover {background : url (.. /images/Facebook.png) non-repeat 0 - 36px}
#menu .social_icon li .google {float : left ; width : 36px ; hauteur : 36px ; background : url (.. /images/google_plus.png) non-repeat 0 0}
#menu .social_icon li .google:hover {background : url (.. /images/google_plus.png) non-repeat 0 - 36px}
#menu .social_icon li .twitter {float : left ; width : 36px ; hauteur : 36px ; background : url (.. /images/Twitter.png) non-repeat 0 0}
#menu .social_icon li .twitter:hover {background : url (.. /images/Twitter.png) non-repeat 0 - 36px}
Pour placer les icônes sociaux, définir sa classe et faire flotter à droite, définissez sa largeur à l’automobile et garder sa liste-style none. Puis définir les balises li tout placés à l’intérieur de la balise principale icône sociale avec leurs classes un par un et placer leurs images en conséquence. Mais n’oubliez pas une chose que nous utilisons la technique de sprites, donc pour la propriété hover, gardez la propriété non-repeat en négatif.
Le dernier texte de pied de page
pied de page .bottom_nav {float : left ; liste-style : none;}
pied .bottom_nav li {float : left ; font-size : 10px ; line-height : 30px ; font-family: « MyriadPro-Regular »; color: #27a9e1 ; padding: 0 8px ; Background : url (.. /images/li_bg.jpg) non-répétition 9px droite}
pied de page .bottom_nav li.first {padding-left : 16px}
pied de page .bottom_nav li.last {background : none}
pied de page .bottom_nav li un {float : left ; text-decoration : none ; color: #27a9e1;}
pied .bottom_nav li a: hover {text-decoration : underline}
Enfin, nous sommes maintenant à la dernière étape de ce long tutoriel. Comme vous pouvez le voir dans le PSD que nous avons une ligne de texte spécifique dans le pied, nous avons maintenant définirons qui seulement. Alors commençons par définir sa classe, faire flotter à gauche et garder sa liste-style none. Puis déclarer tous l’ancre tags tag et la liste que nous avons à l’intérieur de cette section particulière et au dernier jeu de la propriété hover pour lesquelles garder la décoration du texte à souligner.
C’est tout pour ce tutoriel, vous pouvez maintenant pratiquer il tout sur vos propres, et pour votre référence, nous avons aussi mis tous les fichiers requis pour le téléchargement. Donc les télécharger et continuer à pratiquer, que plus vous pratiquerez, plus vous vous améliorez.