Codigo
HTML
<!DOCTYPE html>
<html
lang="es">
<head>
<title>Estructura
Básica en HTML 5 y CSS3</title>
<meta charset="utf-8"/>
<meta
name="description" content="Estructura con HTML5 y CSS3 "
/>
<link
rel="stylesheet" href="estilos.css" />
</head>
<body>
<h1>Estructura Semántica
HTML5</h1>
<header>
<p>Aqui
va el Header</p>
</header>
<nav>
<p>Aqui
va el Nav</p>
</nav>
<section
id="contenedor">
<section
id="principal">
<p>Aqui
va el Section principal</p>
<article>
<p>Aqui
va el Article</p>
</article>
</section>
<aside>
<p>Aqui
va el Aside</p>
</aside>
</section>
<footer>
<p>Aqui
va el Footer</p>
</footer>
</body>
</html>
Estilos CSS
*{
margin: 0; /*
margenes externos al bloque */
padding: 0; /*
distancia interna de los lados del bloque */
}
body{
color: Blue;
font-family: Verdana;
font-size: 16px;
}
h1{
color: #F00; /*Rojo*/
background: #1E6381;
max-width: 800px; /*Ancho
maximo del bloque*/
border-radius: 15px;
margin: 5px auto;
/*Distancia externa del bloque con los otros bloques */
padding: 10px;
text-align: center;
text-shadow: 5px 5px 10px
rgba(255,255,255,0.5);
/* Sombra para un texto
(sobre x, sobre y, desenfoque, transparencia blanco - opacidad */
}
header, nav, footer{
/* cuando los bloques tienen
identicos atributos pueden heredarse asi */
color: White;
background:
#1E6381;
border-radius:
10px; /*redondear bordes del bloque*/
margin: 25px auto; /*arriba y abajo - derecha e izquierda (auto:centra automatico)*/
max-width: 960px; /*ancho maximo, dependiendo del
tamaño del dispositivo*/
padding: 12px;
text-align: center;
}
#contenedor {
background: Pink;
margin: 25px auto;
max-width: 960px;
padding: 10px;
text-align: center;
}
#principal, aside {
color: White;
width: 55%; /*
ancho de cada bloque -- ej. 65% de los 960px del bloque contenedor */
background: #1E6381;
border-radius: 10px;
margin: 20px auto;
min-height:
200px; /* altura minima -- depende del
contenido del bloque */
padding: 10px;
text-align: center;
display: inline-block; /*Alinear los dos bloques en la misma linea*/
vertical-align: top; /*alinear los bloques arriba iguales */
}
article {
background: #011E30;
border-radius: 10px;
min-height: 160px;
padding: 15px;
}
aside {
width: 40%; /*
ancho del bloque aside -- ambos suman 95% de los 960px del width del
contenedor */
}
No hay comentarios:
Publicar un comentario