Explicación
Se trata de una página elaborada específicamente para contener ejercicios de javascript, divididos todos en dos partes. La primera, su visualización, y la segunda, su código.
En la parte superior está localizado el menú con los distintos ejercicios que, al hacer click en cada uno de ellos, te lleva a la parte de la página donde está el susodicho.
Durante todo el desplazamiento por la página, nos acompaña la imagen de un gato, al hacer click en él, volvemos al inicio o parte superior de la página. De momento sólo hay ocho ejercicios,pero irá ampliándose. Aquí lo presento ya con el primer ejercicio acabado.
Cógigo html
<!Doctype html><html lang="es"><head><TITLE>index</TITLE><LINK REL="stylesheet" HREF="index.css" TYPE="text/css"><meta name= Description content="ejercicios de java"><meta charset"utf-8" /></head><body> <a name="arriba"></a><div id="menu" ><h1 class="nombre">Melani</h1> <div id="contenedor"><div id="menu1"> <ul> <a href="#uno" title="Ir Arriba"><li>Ejercicio uno</li></a> <p></p> <a href="#dos" title="Ir Arriba"><li>Ejercicio dos</li></a> <p></p> <a href="#tres" title="Ir Arriba"><li>Ejercicio tres</li></a> <p></p> <a href="#cuatro" title="Ir Arriba"><li>Ejercicio cuatro</li></a> </ul> </div> <div id="menu2"> <ul> <a href="#cinco" title="Ir Arriba"><li>Ejercicio cinco</li></a> <p></p> <a href="#seis" title="Ir Arriba"><li>Ejercicio seis</li></a> <p></p> <a href="#siete" title="Ir Arriba"><li>Ejercicio siete</li></a> <p></p> <a href="#ocho" title="Ir Arriba"><li>Ejercicio ocho</li></a> </ul> </div> </div> <a name="uno"><h1>Ejercicio uno</h1></a> <h2>Visualización</h2> <div id="menu3"> <script> window.open("http://www.google.com","","width=550,height=420,menubar=no") </script> <script> window.alert("Bienvenido") </script> <script> document.write (new Date()) </script> <input type=button value=Atrás onclick="history.go(-1)"> </div> <h2 class="dos">Código</h2> <div id="menu4"> <p> Colocamos éstas líneas de código entre etiquetas "script", exceptuando la línea que tiene "input", eso sí, añadimos el corchete que le falta</p>window.open("http://www.google.com","","width=550,height=420,menubar=no") <p></p> window.alert("Bienvenido") <p></p> document.write (new Date()) <p></p> input type=button value=Atrás onclick="history.go(-1)"> </div> <a name="dos"><h1>Ejercicio dos</h1></a> <h2>Viasualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="tres"><h1>Ejercicio tres</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="cuatro"><h1>Ejercicio cuatro</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="cinco"><h1>Ejercicio cinco</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4"> </div> <a name="seis"><h1>Ejercicio seis</h1></a> <h2>Viasualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="siete"><h1>Ejercicio siete</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> <a name="ocho"><h1>Ejercicio ocho</h1></a> <h2>Visualización</h2> <div id="menu3"> </div> <h2 class="dos">Código</h2> <div id="menu4">
</div> </div><a class="ir" href="#arriba"><img src="gato.gif"/></a></body></html>
Código css
body{ background-image: url( "gatito.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#menu
{ background-color: #CEF6F5;
width: 1310px;
height:3900px;
margin-top: 5%;
margin-right: 10%;
margin-left: 7%;
border-radius: 15px;
opacity: 0.7;
padding: 20px;
}
h1{
text-align: center;
font-family: "Segoe Script";
position: relative;
top: 50px;
}
.nombre{
text-align: center;
font-family: "Segoe Script";
position: relative;
top:5px;
font: bold 90%;
}
#menu1{width: 500px;
height: 200px;
border: solid 1px black;
float: left;
margin-left: 25px;
}
#menu2{width: 500px;
height: 200px;
border: solid 1px black;
float: left;
margin-left: 250px;
}
li{font-size: 26px;
}
h2{position: relative;
top: 60px;
left: 200px;
}
#menu3{width: 500px;
height: 250px;
border: solid 1px black;
float: left;
margin-left: 25px;
position: relative;
top: 50px;
left: 3px;
}
.dos{ position: relative;
top: 5px;
left: 450px;
}
#menu4{width: 500px;
height: 250px;
border: solid 1px black;
float: left;
margin-left: 250px;
position: relative;
}
#contenedor{ width: 100%;
height: 300px;
position: relative;
}
.ir{position:fixed;
right:0;
top:0;
}
Visualización
No hay comentarios:
Publicar un comentario