Programacion C

*/Comencemos con algunas reglas básicas que nos ayudarán a proveer consistencia al diseño/*

* {

margin: 0px;

padding: 0px;

}

Siempre deberemos especificar el tamaño de este contenido, o un tamaño máximo, para obtener un diseño consistente a través de diferentes configuraciones de pantalla.

body {

text-align: center;

}

De este modo, modificando el tamaño de este elemento lo hacemos al mismo tiempo para todos los demás:

#agrupar {

width: 960px;

margin: 15px auto;

text-align: left;

}

Eementos el espacio máximo disponible estará determinado por el ancho de su elemento padre.

#cabecera {

background: #FFFBB9;

border: 1px solid #999999;

padding: 20px;

}

Esto último lo logramos agregando un fondo gris y un pequeño margen interno para separar las opciones del menú del borde del elemento

#menu {

background: #CCCCCC;

padding: 5px 15px;

} #

menu li {

display: inline-block;

list-style: none;

padding: 5px;

font: bold 14px verdana, sans-serif;

}

Los elementos que utilizamos en nuestra plantilla HTML para crear estas cajas son

<section> y <aside>, cada uno identificado con el atributo id y los valores seccion y columna respectivamente.

#seccion {

float: left;

width: 660px;

margin: 20px;

} #columna {

float: left;

width: 220px;

margin: 20px 0px;

padding: 20px;

background: #CCCCCC;

}

Esta propiedad devuelve al documento su flujo normal y nos permite posicionar <footer> debajo del último elemento en lugar de a su lado

#pie {

clear: both;

text-align: center;

padding: 20px;

border-top: 2px solid #999999;

}

En este caso la nueva fórmula sería simplemente: tamaño + márgenes.

div {

width: 100px;

margin: 20px;

padding: 10px;

border: 1px solid #000000;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

propiedad box-shadow podremos aplicar sombras a nuestras cajas con

...