Ejercicios prácticos de CSS

CSS

Utilizando XHTML Strict 1.0 y CSS crea los documentos que se detallan a continuación, cada uno en un fichero diferente. No olvides validar dichos documentos para corregir los errores de sintaxis que puedan existir y que puedes utilizar la opción Inspeccionar elemento en el navegador para comprobar si las propiedades se están aplicando correctamente.

Estructura el código con el formato del siguiente ejemplo en tus hojas de estilos, situando cada propiedad en una línea diferente:

h1 {
   color: #8A8E27;
   font-weight: normal;
   font-family: Arial, Helvetica, sans-serif;
}

 

1.- Currículum Vitae

  • Crear una capa diferente para cada uno de los principales elementos del Currículum: "cabecera", "índice", "fotografía", "datos personales", "formación académica", "experiencia laboral" y "otros datos".
  • Situar la fotografía a la derecha de "datos personales" utilizando las propiedades de flotación.
  • Modificar el tipo de letra utilizando las fuentes de Google Fonts.
  • Eliminar el subrayado de los enlaces.
  • Utilizar las pseudo-propiedades en los enlaces, para que cambien de color al pasar el ratón por ellos.
  • Personalizar las listas incluyendo un icono que te puedes descargar de Internet.
  • Personalizar los bordes, márgenes y colores a tu gusto.

 

2.- Menús de navegación

Diseña los siguientes menús de navegación, todos en un mismo documento HTML:

(Azul oscuro para elementos. Azul claro al pasar encima del menú. No tener en cuenta el color blanco)

(Azul oscuro para elementos. Azul claro al pasar encima del menú. No tener en cuenta el color blanco)

(Elementos con dos imágenes de fondo, una para todos los elementos y otra para cuando estamos encima)

(No son necesarios los bordes redondeados. No tener en cuenta la pestaña de color blanco)

3.- Calendarios

Utilizando tablas, diseña los siguientes calendarios:

4.- Formularios

Diseña el siguiente formulario. Utiliza las propiedades de flotación (y nunca tablas) para alinear los elementos.

5.- Portal de noticias

  • Asigna el color verde #4b8a20 a toda la página.
  • Crea la capa "contenedor" que mida 900px y se centre automáticamente en el navegador. Esta capa contendrá todo el contenido de la página. Tendrá un padding de 30px a derecha e izquierda y el fondo de color blanco.
  • Dentro de "contenedor" incluye las capas "cabecera", "contenido" y "pie". 
  • En la capa "cabecera" incluye esta imagen.
  • La capa "contenido" incluirá las capas "noticia" y "columna", y esta última se dividirá en "clubs" y "síguenos". 
  • La capa "pie" se dividirá en seis capas "lista".
  • Utiliza el tipo de letra Helvetica.
  • Algunos colores utilizados son: #333333 #4b8a20 #dddddd #e7123a.
  • Las líneas grises se definirán mediante propiedades "border" y no etiquetas "hr".

Noticia

 

Archivos adjuntos: 
AdjuntoTamaño
Image icon noticia-css.png1.7 MB
Image icon xataka-img-header.jpg15.26 KB

Licencia Creative Commons

Este artículo publicado en TicArte pertenece a Rafa Morales y está protegido bajo una Licencia Creative Commons.

Tags: 
Ir arriba