Ejercicios prácticos de CSS

CSS

Utilizando XHTML 1.0 Strict y CSS crea los documentos que se detallan a continuación, cada uno en un fichero diferente. No olvides validar dichos documentos en el W3C Validator 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 básico

  • Asigna el color verde #4b8a20 al fondo de 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".

Portal de noticias 1

6.- Portal de noticias avanzado

General

  • Según el programa que utilices, establece el charset (Codificación de caracteres) a ISO-8859-1 o a UTF-8 dentro del <head> del documento.
  • Utiliza el tipo de letra Helvetica.
  • Incluye tu propias imágenes e iconos que estarán descargadas en tu ordenador.
  • Algunos colores utilizados son: #333333 #4b8a20 #dddddd #e7123a.
  • Utiliza "id" para las capas de la estructura solamente y "class" para el resto de elementos. Crea las mínimas clases posibles, intentando reutilizar sus propiedades siempre que puedas.
  • Sólo se podrá utilizar la etiqueta <table> en la tabla de la noticia.
  • Sólo se podrá utilizar la etiqueta <br/> dentro de un párrafo para realizar un salto de línea, nunca para separar el contenido de los elementos de la página.
  • Las líneas grises se definirán mediante propiedades "border" y no etiquetas <hr>.

Estructura de capas

  • Asigna el color verde #4b8a20 al fondo de 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", "menu", "contenido" y "pie". 
  • La capa "contenido" incluirá las capas "columnaizquierda" y "columnaderecha".
  • La capa "columnaderecha" se dividirá en "recomendados" y "escribenos".
  • La capa "pie" se dividirá en cinco capas "lista".

Capa "cabecera"

Capa "menu"

  • El menú incluirá las opciones que se muestran en la imagen.
  • Los elementos del menú serán enlaces a "http://www.ticarte.com".
  • Al pasar el raton sobre los elementos del menú, éstos cambiarán de color a un gris más oscuro.
  • Incluye submenús que se activen al pasar el ratón por encima del elemento principal dentro de "Educación", "Tecnología" y "Admin".
  • El icono de la flecha que hay junto a los elementos con submenú se incluirá desde CSS.

Capa "columnaizquierda"

  • Los iconos de "Síguenos" serán imágenes individuales, y cada una será un enlace a la red social correspondiente.

Capa "columnaderecha"

  • En el formulario "Mensaje" será un <textarea>. "Enviar" será un <input type="submit">.

Capa "pie"

  • Todas las capas "lista" utilizarán la misma clase.
  • "Subir" será un enlace (no una imagen ni un botón) que mediante un ancla subirá al inicio de la página.
  • El icono del triángulo que hay junto al enlace "Subir" se incluirá desde CSS.

Portal noticias CSS

Archivos adjuntos: 
AdjuntoTamaño
Image icon noticia-css1.png1.7 MB
Image icon noticia-css2.jpg323.43 KB
Archivo noticia-css2.xcf1.67 MB
Image icon xataka-cabecera.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