Programacion C
Enviado por ricardohl • 9 de Marzo de 2015 • 384 Palabras (2 Páginas) • 186 Visitas
*/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 solo una simple línea de código:
body {
text-align: center;
} #principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
...