Skip to content

C
css-e002
Commit 3a126371 by Pedro Rolon
Options

Se agregaron los archivos correspondientes a la tarea 2

parents
Showing with 189 additions and 0 deletions
2/ejercicio2.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 2!</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
</head>
<body>
<br><br><a href="https://www.facebook.com">Enlace número 1</a> <br>
<br><br><a href="https://www.twitter.com">Enlace número 2</a> <br>
<br><br><a href="https://www.w3schools.com">Enlace número 3</a> <br>
<br><br><a href="https://www.pinterest.com">Enlace número 4</a> <br>
<br><br><a href="https://www.instagram.com">Enlace número 5</a> <br>
</body>
</html>
\ No newline at end of file
2/style.css 0 → 100644
a:link {
color: #CC0000;
}
p {
color: red;
margin-top: 500px;
}
a:hover{
background-color: #CC0000;
color: #FFF;
}
a:visited{
color:#CCC;
}
\ No newline at end of file
3/galeria.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>Galeria!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="recursos/imagen.png">
<img src="recursos/imagen.png">
<img src="recursos/imagen.png">
<img src="recursos/imagen.png">
<img src="recursos/imagen.png">
<img src="recursos/imagen.png">
<img src="recursos/imagen.png">
<img src="recursos/imagen.png">
<img src="recursos/imagen.png">
</body>
</html>
\ No newline at end of file
3/style.css 0 → 100644
img {
width:90px;
margin: 10px;
border-style: solid;
border-width: thin;
border-spacing: 100px;
padding: 5px;
border-color: #e3e7ed;
}
\ No newline at end of file
4/ejercicio/index.html 0 → 100644
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml" xml:lang="es" lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ejercicio 4 (Introducción a CSS)</title>
<h1 id="" class="title">
Ejercicio 4
</h1>
<p>Modificar el menú vertical sencillo para que muestre el siguiente comportamiento:</p>
<p>1) Los elementos deben mostrar una imagen de fondo (<code>flecha_inactiva.png</code>):</p>
<div class="figure" id="figure_15_13">
<img src="./index_files/f0916.gif" alt="Menú vertical con imagen de fondo">
<p class="caption"><strong>Figura 4.1</strong> Menú vertical con imagen de fondo</p>
</div>
<p>2) Cuando se pasa el ratón por encima de un elemento, se debe mostrar una imagen alternativa (<code>flecha_activa.png</code>):</p>
<div class="figure" id="figure_15_14">
<img src="./index_files/f0917.gif" alt="Menú vertical con imagen de fondo alternativa">
<p class="caption"><strong>Figura 4.2</strong> Menú vertical con imagen de fondo alternativa</p>
</div>
<p>3) El color de fondo del elemento también debe variar ligeramente y mostrar un color gris más oscuro (<code>#E4E4E4</code>) cuando se pasa el ratón por encima:</p>
<div class="figure" id="figure_15_15">
<img src="./index_files/f0918.gif" alt="Menú vertical con imagen de fondo y color alternativos">
<p class="caption"><strong>Figura 4.3</strong> Menú vertical con imagen de fondo y color alternativos</p>
</div>
<p>4) El comportamiento anterior se debe producir cuando el usuario pasa el ratón por encima de cualquier zona del elemento del menú, no solo cuando se pasa el ratón por encima del texto del elemento (este problema sólo sucede con Internet Explorer 6):</p>
<div class="figure" id="figure_15_16">
<img src="./index_files/f0919.gif" alt="Aspecto final del menú vertical avanzado creado con CSS">
<p class="caption"><strong>Figura</strong> Aspecto final del menú vertical avanzado creado con CSS</p>
</div>
</body></html>
\ No newline at end of file
4/recursos/index.html 0 → 100644
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ejercicio menu vertical avanzado</title>
<style type="text/css">
ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #7C7C7C;
}
ul.menu li {
border-bottom: 1px solid #7C7C7C;
border-top: 1px solid #FFF;
background: #F4F4F4;
}
ul.menu li a {
padding: .2em 0 .2em 1.3em;
display: block;
text-decoration: none;
color: #333;
background-image: url("flecha_inactiva.png");
background-repeat: no-repeat;
}
ul.menu li a:hover{
background-image: url("flecha_activa.png");
background-color: #E4E4E4;
}
</style>
</head>
<body cz-shortcut-listen="true">
<ul class="menu">
<li><a href="#" title="Enlace generico">Elemento 1</a></li>
<li><a href="#" title="Enlace generico">Elemento 2</a></li>
<li><a href="#" title="Enlace generico">Elemento 3</a></li>
<li><a href="#" title="Enlace generico">Elemento 4</a></li>
<li><a href="#" title="Enlace generico">Elemento 5</a></li>
<li><a href="#" title="Enlace generico">Elemento 6</a></li>
</ul>
</body>
</html>
\ No newline at end of file
README.md 0 → 100644
# Anotaciones y Especificaciones
## Ejercicio 2
* Creé un archivo **ejercicio2.html** para lograr el contenido de la imagen
* Agregué un archivo **style.css** que contiene el código necesario para lograr el comportamiento requerido en el ejercicio
## Ejercicio 3
* Creé el archivo **galeria.html** para lograr el contenido de la imagen
* Creé el acrhivo **style.css** para lograr el comportamiento requerido en el ejercicio
## EJercicio 4
* Modifiqué el archivo **index.html**, que contiene dentro el estilo embebido.
Dicho archivo se encuentra en la carpeta **recursos**
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment