Si actualizas la página, verás las etiquetas predeterminadas, realmente no hay mucho que ver. Vamos a utilizar el h1 como nuestro logo. Cambie de nuevo a style.css y agrega algunas propiedades a nuestra etiqueta con el logotipo h1 #.

 h1 # logo ancho: 280px; altura: 96px; texto-sangría: -9999px; fondo: url (… /… /img/logo.gif) arriba a la izquierda sin repetición; flotador izquierdo; 

Lo que hemos hecho aquí es establecer la altura y anchura de h1 a la altura y anchura de nuestra imagen de logotipo. A continuación, hemos eliminado el texto con sangría por -9999px. Por último, hemos establecido el fondo de nuestro h1 en nuestra etiqueta del logotipo y lo hemos dejado flotar. Esto asegurará que se encuentre bien al lado de la navegación.

El logo se ve increíble, pero la navegación necesita un poco de amor CSS. Vamos a darle un poco!

Un pequeño paso rápido de nuestra navegación, vamos a incluir rápidamente nuestra fuente Days que usamos para nuestro logotipo y navegación..

Vamos a usar @ font-face para decirle a CSS que queremos usar la nueva fuente para nuestro archivo. Esta propiedad no está disponible en todos los navegadores, pero vamos a utilizar una pila de fuentes para asegurarnos de que el otro navegador todavía podrá ver nuestros estilos..

Primero necesitamos incluir nuestra fuente en nuestro archivo CSS. Cree una nueva carpeta llamada fuentes dentro de nuestra carpeta inc y arrastre days.otf dentro de la nueva carpeta de fuentes.

Si no tiene la fuente days, puede descargarla, así como otras fuentes de fuente segura para fuentes de http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/

Una vez que tengamos la fuente, podemos usar @ font-face para incluirla en nuestro script CSS.

 @ font-face font-family: Days; src: url ("… /fonts/days.otf"); 

La primera propiedad le dice a nuestro archivo CSS cuál es el nombre de la fuente para que podamos usarla en nuestra propiedad de familia de fuentes con otros elementos. La segunda propiedad es donde se encuentra nuestra fuente..

De vuelta a nuestra navegación. Se ha convertido en el estándar para usar listas ordenadas o desordenadas cuando se trata de la navegación. Diseñar la navegación puede ser un poco difícil cuando eres un principiante, pero una vez que lo entiendes puede ser muy poderoso..

 ul.nav float: derecha; margen: 25px 0 0 0;  ul.nav li float: izquierda; margen: 0 0 0 10px;  ul.nav li a font-family: Days, Helvetica, Verdana, Sans-Serif; texto-decoración: ninguno; relleno: 5px 10px; color: # 6e6e6e; -moz-border-radius: 5px; -webkit-border-radius: 5px; tamaño de letra: 1.4em;  ul.nav li a: hover background: # e0e0e0;  ul.nav li.active a background: # 00b8ff; color: # f5f5f5; 

Hacemos referencia a ul.nav y flotamos a la derecha. Esto lo coloca en el extremo derecho de nuestra división de contenido a través de nuestro logotipo.

Por defecto, las etiquetas li de nuestras listas están ubicadas una encima de la otra en una nueva línea para cada li. No queremos esto, queremos que nuestra navegación se siente lado a lado. Flota al rescate! Añadimos un poco de margen a cada elemento li para espaciarlos un poco..

Vamos a agregar un poco de estilo a nuestros elementos de enlace para que se vean como botones gráficos. Vamos a utilizar otra propiedad que no está disponible en todos los navegadores, pero quiero que todo sea sencillo por aprender..

Esto donde -moz-border-radius y -webkit-border-radius ven a jugar. Estas 2 propiedades agregan un buen radio de 5 píxeles a cada elemento de enlace. Solo notará el redondeo cuando el enlace esté activo o se encuentre sobre él porque son los únicos 2 eventos en los que estamos cambiando el color de fondo..

Refréscate y disfruta de la gloria de tu nueva navegación!

Con nuestro nuevo conocimiento de las listas, nos moveremos a la barra lateral y agregaremos otra lista desordenada para la navegación de la barra lateral. El método para crear la navegación de la barra lateral es casi idéntico a nuestra navegación superior, por lo que si está buscando un desafío, intente realizar la barra lateral y diseñe el estilo antes de ver el código real.!

A continuación encontrará el código HTML y CSS para la navegación de nuestra barra lateral. No lo guiaré porque como dije antes, es casi idéntico a nuestra navegación de encabezado, excepto que estamos configurando un ancho para nuestros elementos de enlace porque queremos que sean del tamaño completo de la barra lateral.

 #sidebar_container ul, #sidebar_container ul li float: left; Limpia los dos; ancho: 280px;  #sidebar_container ul li margen: 0 0 10px 0;  #sidebar_container ul li a -moz-border-radius: 5px; -webkit-border-radius: 5px; relleno: 7px 10px; texto-decoración: ninguno; color: # 6e6e6e; flotador izquierdo; Limpia los dos; ancho: 260px; tamaño de letra: 1.5em; transformación de texto: mayúsculas; Familia tipográfica: Días, Helvética, Verdana, Sans-Serif;  #sidebar_container ul li a: hover background: # e0e0e0;  #sidebar_container ul li.active a background: # 00b8ff; color: # f5f5f5; 

A estas alturas ya deberías ser un profesional de la lista desordenada y odio hacerte esto, pero vamos a hacer una lista más, te lo prometo. Vamos a utilizar otra lista para nuestro pie de página..

Una vez más, les voy a dar tanto el código HTML como el código CSS con un poco de explicación porque es casi idéntico, excepto que estamos flotando algunos elementos de manera diferente esta vez..

 #footer_container color: #bebebe;  #footer_container a color: # 6e6e6e; texto-decoración: ninguno; tamaño de letra: 1.4em;  #footer_container ul li float: derecha; borde izquierdo: 1px sólido #bebebe; relleno: 0 10px;  #footer_container ul li.copyright float: left; relleno: 0; borde: 0;  #footer_container ul li p margin: 0; 

Tenemos nuestra lista de pie de página y cada uno de nuestros elementos li está flotando a la derecha, pero queremos que li.copyright se ubique en el lado izquierdo de nuestra página lejos de la lista de pie de página real. Para hacer esto le damos una clase de derechos de autor y flotamos a la izquierda en lugar de a la derecha También hemos agregado algunos bordes a la izquierda de cada elemento li, excepto nuestro li con copyright para un poco de sabor.

¿Ya estás harto de las listas? Si la respuesta es sí, estás de suerte, hemos terminado con las listas de este tutorial. Gracias por quedarse por tanto tiempo: P

Estamos cerca de la línea de meta, solo tenemos que agregar algunos elementos de contenido y agregar algunos retoques de última hora..

Llénalo con contenido

 
Planes y Precios
 
Plan gratis
 
 
  
Lorem ipsum dolor sit amet, consultor adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Ultrices quesos de pédida gravida. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus en diam. Nam sapien ligula, id de consectetuer, hendrerit en, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, úlceras de placerat, orci.
 
Lorem ipsum dolor sit amet, consultor adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Ultrices quesos de pédida gravida. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus en diam. Nam sapien ligula, id de consectetuer, hendrerit en, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, úlceras de placerat, orci.
 
Lorem ipsum dolor sit amet, consultor adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Ultrices quesos de pédida gravida. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus en diam. Nam sapien ligula, id de consectetuer, hendrerit en, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, úlceras de placerat, orci.

Todos nuestros elementos de contenido son principalmente elementos predeterminados en la página, excepto nuestro header_image div. Esto es bueno porque significa una cantidad mínima de CSS para que nuestra página se vea increíble.

 / * - Elementos de encabezado - * / h1, h2, h3 font-family: Days, Helvetica, Verdana, Sans-Serif;  h2 font-size: 4em; color: # 00b8ff;  h3 font-size: 2em; color: # 6e6e6e; línea de altura: 2em;  / * - Publicar elementos - * / .header_image float: left; Limpia los dos; margen: 10px 0; fondo: # 00b8ff; relleno: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 

Los encabezados tienen un estilo, la imagen del encabezado se ve genial Todo parece estar saliendo bien. ¡Renueva la página y disfruta de la gloria de tu nueva página! El encabezado se ve un poco apagado a pesar de ser absorbido hasta la parte superior de la página.

Vamos a agregar un poco de margen superior e inferior a nuestro contenedor de encabezado para separar todo.

Agregue la propiedad de margen a nuestro elemento header_container.

margen: 20px 0;

Esto agrega 20 píxeles de margen a la parte superior e inferior de header_container. Es muy sencillo!

El retoque final que vamos a agregar es un poco de relleno y borde a nuestro footer_container.

 borde superior: 1px sólido # d0d0d0; relleno: 10px 0;

Todos estamos codificados y todo se ve genial, así que es el final de este tutorial. Pase al siguiente tutorial donde vamos a tomar este archivo y hacer que WordPress genere contenido para cada página!