EJERCICIO 26 : Con ayuda de CSS3 dar formato a un blog diseñado con estructura html5 .

Con el html entregado darle forma al blog con CSS3 y añadir las imágenes que faltan para que el resultado sea el que se muestra en el proyector.
Perfeccionar el menú consiguiendo una forma más armónica con sombras y bordes redondeados ,añadiendo al lado de cada opción un icono que
PASOS:
•represente la función que realiza esa opción del menú. Añadir dos nuevas opciones al menú y cambiar los nombres de las opciones del ejemplo.

1)Centramos el contenido desde el body y ponemos un gris claro de fondo.

body{ margin:0px;
background-color: lightgray;
text-align:center; }
Centramos el blog en el navegador:
.principal
{ width: 60%;
margin:auto;
}
2) Trabajamos la cabecera , añadiendo una imagen representativa del HTML5 + CSS3
header{ background-color:white;
Border:1px solid #999999;}
3) Trabajamos el menú .
nav{
margin:0px;
color:white;
background-color:black;
Border:1px solid #999999;}
nav li /* los li son elementos de bloque por defecto*/
{ list-style:none; /* elimino el estilo de la lista , nos elimina los puntos*/
padding: 5 px;
Font: bold 30px verdana;
Display:inline; /* cambiamos los li como elementos de línea para que se situen uno al lado del otro*/} 149
5) Trabajamos las siguientes partes del documento con CSS3, section , article , aside,
footer…
• section{
margin:20px;
width:60%;
border:1px solid black;
float:left;
background:yellow;}/* contenido principal, dejamos un hueco para el aside*/
• article{ background:#fffbcc;
border:1px solid #999;
padding: 20px;
margin-bottom: 15 px;
text-align:center;}
• aside{ margin:20px 0px ;
width: 30%;
border:1px solid black;
background: yellow;
float:left;}
• footer{ Clear:both;}
150