Mostrar Mensajes
41
Aprender a programar desde cero / background-image repeat crear una web con una imagen de fondo tapiz CU01030D
« en: 25 de Agosto 2016, 20:12 »
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
CU01030Da.css
Ejercicio 2:
CU01030Db1.html
CU01030Db2.html
CU01030Db.css
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
Código: [Seleccionar]
<!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
Código: [Seleccionar]
/* 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
Código: [Seleccionar]
<!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
Código: [Seleccionar]
<!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
Código: [Seleccionar]
/* 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 */
. WEBeando encontre la equivalencia para 1em (12pt 16px 1em 100%) y con eso arme una hoja en OpenOffice para obtener los otros datos. Con todo esto, me puse a escalar en % hasta dar mas o menos con el tamaño de cada 1 y este es mi resultado!!
RSS