Menu de lecciones
- • Como crear una pagina web paso a paso
- • Descargar e instalar NVU
- • Configurar NVU
- • Conceptos básicos de HTML
- • Creando la pagina inicial
- • Insertando parrafos y saltos de linea en nuestra pagina
- • Crear enlaces con HTML
- • Insertar imagen con HTML
- • Hoja de estilos CSS
- • Conceptos básicos de estilos CSS
- • Poner fondo con estilos CSS
- • Centrar contenido con CSS
- • Margen y padding con estilos CSS
- • Crear listas con HTML
- • Maquetar pagina web con DIVs (capas o layouts)
- • Creando nuestro primer DIV
- • Dar formato a un DIV
- • Flotar y acomodar un DIV
- • Evitar que un DIV o capa se superponga con otra
- • Maquetando una pagina Web con DIVs o Capas (layouts)
- • Maquetar el contenedor general con CSS
- • Maquetar cabecera con CSS
- • Maquetar la barra lateral con CSS
- • Maquetar contenido con CSS
- • Maquetar pie de pagina CSS
- • Como subir una pagina Web
Compartir
4262
Maquetar pie de pagina CSS
Ultima lección del curso de maquetación con CSS y capas, donde aprenderemos a maquetar el pie de pagina y veremos el ejemplo terminado.
Pie de pagina
En el pie de pagina utilizaremos la propiedad clear que vimos en la lección anterior, también definiremos un color de fondo:
#pie {
background-color: blue;
clear: both;
}
Finalmente el HTML quedaría así:
<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="cabecera">Esta es la cabecera</div>
<div id="barra-lateral">Esta es la barra lateral</div>
<div id="contenido">Este es el contenido principal</div>
<div id="pie">Este es el pie de pagina</div>
</div>
</body>
</html>
Si queremos agregar un espacio entre las palabras y los bordes solo agregamos "padding:5px;" en todas las capas CSS.
Ya terminamos! para ver el ejemplo terminado haz clic acá.
Imprimir
Enviar por email
Favoritos
Tamaño de fuente