Buenas buenas!!!
Dejo mis ejercicios de la entrega CU01030D del tutorial de desarrollo web con CSS para beginners.
Para el ejercicio 2, como siempre, tratando de usar todo o parte de lo aprendido, arme un pequeño menu con CSS y quería usar solo una hoja de estilo con las dos paginas, así que hice un class en el body. No se si esto es correcto, pero con lo aprendido hasta acá es lo único que se me ocurrió.
Ejercicio 1:
CU01030Da.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Background-image repeat - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Background-image repeat CSS. Top, right, botton, left" />
<meta name="keywords" content="curso, aprender a programar, html, css, background-image,repeat, (CU01030D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01030Da.css"/>
</head>
<body>
<h1 id="ejercicio">Resolución ejercicio numero 1 (CU01030D)</h1>
<h2 id="entrega">Entrega número 30</h2>
<div id="div1"> Marca de vehículo que me gusta.</div>
<div id="div2"> <P>Cocinando</P><p>con</p><p>Hugo</p></div>
<div id="div3"><p>Si no lo conoces...</p></div>
<div id="div4"> Taller Metalúrgico <p><strong>"La soldadora loca"</strong></p></div>
</body>
</html>
CU01030Da.css
/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01029D)*/
*{
font-family: Arial, sans-serif;
}
html{
background-color: beige
}
#ejercicio {
text-align: center;
margin: 0;
}
#entrega {
text-align: center;
}
#div1,#div2,#div3,#div4{
width: 250px;
height: 250px;
float: left;
text-align:center;
margin: 30px;
padding: 30px;
}
#div1{
background-color: aqua;
background-image: url(http://i.imgur.com/NAPXgz1.png);
font-size: 2em;
font-weight: bold;
}
#div2{
color: aliceblue;
background-color: aqua;
background-image: url(http://i.imgur.com/sPRwb9B.png);
font-size: 2em;
font-weight: bold;
}
#div3{
background-color: black;
background-image: url(http://i.imgur.com/8TZu9z7.png);
font-size: 3em;
font-weight: bold;
color:black;
line-height: 2em;
}
#div3 p{background-color: rgba(240,248,255,0.5)}
#div4{
color:beige;
background-color: aqua;
background-image: url(http://i.imgur.com/jVmOGtl.png);
font-size: 2em;
}
Ejercicio 2:
CU01030Db1.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Background-image repeat - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Background-image repeat CSS. Top, right, botton, left" />
<meta name="keywords" content="curso, aprender a programar, html, css, background-image,repeat, (CU01030D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01030Db.css"/>
</head>
<body class="pag1">
<div class="encabezado">
<h1>Resolución ejercicio numero 2 (CU01030D)</h1>
<h2>Entrega número 30 (página 1)</h2>
</div>
<div>
<hr>
<ul class="menu">
<li><a href="#" title="Esta página">Página 1</a></li>
<li><a href="CU01030Db2.html" title="Página 2">Página 2</a></li>
</ul>
<hr>
</div>
</body>
</html>
CU01030Db2.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Background-image repeat - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Background-image repeat CSS. Top, right, botton, left" />
<meta name="keywords" content="curso, aprender a programar, html, css, background-image,repeat, (CU01030D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01030Db.css"/>
</head>
<body class="pag2">
<div class="encabezado">
<h1>Resolución ejercicio numero 2 (CU01030D)</h1>
<h2>Entrega número 30 (página 2)</h2>
</div>
<div>
<hr>
<ul class="menu">
<li><a href="CU01030Db1.html" title="Esta página">Página 1</a></li>
<li><a href="#" title="Página 2">Página 2</a></li>
</ul>
<hr>
</div>
</body>
</html>
CU01030Db.css
/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01029D)*/
*{
font-family: Arial, sans-serif;
}
/* estilos para la pagina 1*/
.pag1{
background:#8ba987 url(http://i.imgur.com/2owFXpH.jpg) no-repeat;
}
.pag1 .encabezado{
text-align: center;
}
.pag1 .encabezado h1{
margin: 0px;
}
/* estilos para la pagina 2*/
.pag2{
background:#8ba987 url(http://i.imgur.com/jVmOGtl.png);
}
.pag2 .encabezado{
text-align: center;
color: aliceblue;
}
.pag2 .encabezado h1{
margin: 0px;
}
/* Mi pequeño menu */
hr {
background-color: darkgrey;
margin:0px;
padding:0px;
width: 100%;
}
ul.menu {
float: left;
width: 100%;
list-style: none;
margin: 5px;
padding: 0;
}
ul.menu li {
float: left;
}
ul.menu li a {
padding: .3em;
display: block;
text-decoration: none;
color:black;
background: rgba(244,244,244,.2);
border: 1px inset darkgray;
}
/*cambio el color del texto en la pagina 2*/
.pag2 ul.menu li a{
color:aliceblue;
}
/* Fin mi pequeño menu */