<!doctype html>
<html lang="es">
<head>
<title> paginados</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<meta charset="utf-8">
</head>
<body>
<header>
TÍTULO DE LA PÁGINA
</header>
<nav>
<ul>
<li><a href="#">PRINCIPAL</a></li>
<li><a href="#">GALERIAS</a></li>
<li><a href="#">CONTACTOS</a></li>
<li><a href="#">PREGUNTAS</a></li>
<li><a href="#">PRODUCTOS</a></li>
</ul>
</nav>
<section id="contenedor">
<section id="contenido">
CONTENIDO PRINCIPAL
</section>
<aside>
CONTENIDO SECUNDARIO
</aside>
</section>
<footer>
AUTOR HEBER RODRIGUEZ
</footer>
</body>
</html>
____________________________________________________________________________
APLICANDO CSS AL HTML5
body{
background-color:#4682B4;
color:white;
font-size: 1.2em;
}
header,nav,footer,section#contenido,section#contenedor,aside{
background-color:black;
padding: .5em ;/*separacion entre el texto y el borde*/
text-align:center;/*centra todo el contenido*/
border-radius: .5em;/*borde de cada div*/
margin:.1em auto;/*separa el margen de arriba y abajo de cada div*/
width:90%;
}
aside,section#contenido{
display:inline-block;
background-color:#008f8f;
min-height:210px;/*minimo de altura*/
width:55%;
vertical-align: top;
}
nav ul{
list-style:none;
margin:.1em;
padding:0px;/*sin margen a los lados pegado a los margenes de los lados*/
text-align:center;
}
nav ul li{
display:inline-block;
padding: .5em; /*este es el margen de cada li separados del margen*/
}
nav ul li a{
text-decoration:none;
border-radius:.5em;
background-color:white;
padding:.6em;
transition:all 0.5s linear;
}
nav ul li a:hover{
background:#e44e2d;
}
aside{
width:40%;
}
No hay comentarios:
Publicar un comentario