Paso 4: El pie de página
#menu {flotante: izquierda; width: 100%; font-tamaño: 10px; línea-altura: 10px; font-family: 'MyriadPro-Regular'; transformación de texto: mayúsculas}
.footer_nav #menu {flotante: izquierda; width: auto; lista estilo: none; padding: 13px 0 14px 16px}
li .footer_nav de #menu {flotante: izquierda; margen-derecho: 20px}
.footer_nav de #menu li a {flotante: izquierda; decoración de texto: none; color: #FFF; }
.footer_nav de #menu li a: hover {color: #f3d508}
#menu .footer_nav li.active a {color: #f3d508}
Usando la etiqueta de pie de página, establezca su ancho, hacer flotar a la izquierda y colocar su imagen mediante la propiedad background y hacerla repeat-x 0 0, también establecer su código de color y luego definir su margen de la parte superior y ancho mínimo. Mover más, definen la anchura, tamaño de fuente, altura de línea, font-family, transformación de texto para la etiqueta de la sección con un id del menú y también hacer flote a la izquierda. En el siguiente paso, definir la etiqueta nav y la etiqueta li, el ancla lista y lista suspender etiquetas definidos en su interior en el HTML por consiguiente.
Colocación de iconos sociales
.social_icon #menu {float: derecha; width: auto; estilo de lista: none}
li .social_icon de #menu {flotante: izquierda; margen-derecho: 20px}
li.last de .social_icon de #menu {margen-derecha: 0}
.social_icon de #menu li .facebook {flotante: izquierda; anchura: 36px; altura: 36px; fondo: url (... /images/Facebook.png) no-repeat 0 0}
.social_icon de #menu li .facebook:hover {url de fondo: (.. /images/Facebook.png) no-repeat 0 - 36px}
.social_icon de #menu li .google {flotante: izquierda; anchura: 36px; altura: 36px; fondo: url (... /images/google_plus.png) no-repeat 0 0}
.social_icon de #menu li .google:hover {url de fondo: (.. /images/google_plus.png) no-repeat 0 - 36px}
.social_icon de #menu li .twitter {flotante: izquierda; anchura: 36px; altura: 36px; fondo: url (... /images/Twitter.png) no-repeat 0 0}
.social_icon de #menu li .twitter:hover {url de fondo: (.. /images/Twitter.png) no-repeat 0 - 36px}
Para la colocación de los iconos sociales, definir su clase y hacer flotar a la derecha, establezca su ancho de y mantener su estilo de lista a ninguno. Luego definir las etiquetas li todo colocadas dentro de la etiqueta de icono social principal con sus clases una por una y colocar sus imágenes en consecuencia. Pero recuerda una cosa más, que estamos utilizando la técnica de sprites, así que para la propiedad de suspender, mantener la propiedad de no-repeat en negativo.
El último texto de pie de página
.bottom_nav de pie de página {flotante: izquierda; lista estilo: none;}
pie de página .bottom_nav li {flotante: izquierda; font-tamaño: 10px; línea-altura: 30px; font-family: 'MyriadPro-Regular'; color: #27a9e1; relleno: 0 8px; fondo: url (... /images/li_bg.jpg) no-repeat 9px derecha}
pie de página .bottom_nav li.first {padding-izquierda: 16px}
pie de página .bottom_nav li.last {fondo: none}
pie de página .bottom_nav li a {flotante: izquierda; decoración de texto: none; color: #27a9e1;}
pie de página .bottom_nav li a: hover {texto-decoración: subrayado}
Por último, nos encontramos en el último paso de este largo tutorial. Como se puede ver en el PSD contamos con una línea de texto específica en el pie de página, nos será ahora definir solamente. Así que empieza por definir su clase, hacen flotar a la izquierda y mantenga su estilo de lista a ninguno. Entonces declara el anclaje etiqueta y lista de etiquetas que tenemos dentro de esta sección en particular y en el último set la propiedad hover para que mantenga la decoración de texto a subrayar.
Eso es todo por este tutorial, usted puede ahora practicarlo por su cuenta, y para su referencia, también hemos puesto todos los archivos necesarios para descargar. Así que descargar y seguir practicando, como la más práctica, más que a mejorar.
