Disposición de estructura de la página con CSS
Ejercicio 35
Viendo las características de la siguiente página, resolverla de la misma manera
index.html
<!DOCTYPE html>
<html>
<head>
<title>Pagina visual</title>
<style>
* {
box-sizing: border-box;
}
header{
background-color: darkslategray;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav{
float: left;
width: 30%;
background-color: darksalmon;
padding: 20px;
color: darkslategray;
}
nav ul {
list-style-type: none;
padding: 0;
}
main{
float: right;
padding: 20px;
width: 70%;
background-color: white;
color: black;
}
aside{}
footer{
background-color:darkslategray;
padding: 10px;
color: white;
}
</style>
</head>
<body>
<header>
<h1>Mi página de prueba</h1>
</header>
<nav>
<ul>
<li>Acerca de nosotros</li>
<li>Contacto</li>
</ul>
</nav>
<main>
<h1>PAGINA INICIO</h1>
<p>Esta es mi página principal de inicio, aquí escribiré información importante</p>
<p>Esta es mi página principal de inicio, aquí escribiré información importante</p>
<p>Esta es mi página principal de inicio, aquí escribiré información importante</p>
<p>Esta es mi página principal de inicio, aquí escribiré información importante</p>
<p>Esta es mi página principal de inicio, aquí escribiré información importante</p>
<p>Esta es mi página principal de inicio, aquí escribiré información importante</p>
<p>Esta es mi página principal de inicio, aquí escribiré información importante</p>
</main>
<footer>
<marquee>Este es el pie de mi página</marquee>
</footer>
</body>
</html>
...
Comentarios
Publicar un comentario