Skip to content

C
css-e002
Commit 6b12bdaa by roshka
Options

ejercicios css02

parents
Showing with 509 additions and 0 deletions
ejercicio2.css 0 → 100644
a:link{
color: #CC0000;
margin: 20px;
display: block;;
}
a:hover{
background: #CC0000;
color: #FFF;
}
a:visited{
color: #CCC;
}
\ No newline at end of file
ejercicio2.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="ejercicio2.css" title="style" /
<title>ejercicio 2</title>
</head>
<body>
<p><a href="https://www.oracle.com/index.html" target="_blank">Ejemplo numero 1</a></p>
<p><a href="https://www.w3schools.com/default.asp" target="_blank">Ejemplo numero 2</a></p>
<p><a href="http://librosweb.es/" target="_blank">Ejemplo numero 3</a></p>
<p><a href="https://www.howtoforge.com/using-iscsi-on-debian-squeeze-initiator-and-target" target="_blank">Ejemplo numero 4</a></p>
<p><a href="https://www.mongodb.com/es" target="blank">Ejemplo numero 5</a></p>
</body>
</html>
\ No newline at end of file
ejercicio3.css 0 → 100644
#imagen{
float: left;
margin-right: 1em;
}
#imagen1{
float: left;
margin-right: 1em;
}
#imagen2{
margin-bottom: 1em;
margin-right: 1em;
}
#imagen3{
float: left;
margin-right: 1em;
margin-top: 1em;
}
#imagen4{
float: left;
margin-right: 1em;
margin-top: 1em;
}
#imagen5{
margin-top: 1em;
}
#imagen6{
float: left;
margin-right: 1em;
margin-top: 1em;
}
#imagen7{
float: left;
margin-right: 1em;
margin-top: 1em;
}
#imagen8{
margin-top: 1em;
padding-bottom: 0;
ejercicio3.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<title>ejercicio 3</title>
<link rel="stylesheet" type="text/css" href="ejercicio3.css" title="style" />
<title>galeria</title>
</head>
<body>
<div class="galeria">
<div id="galeria1">
<div id="imagen">
<img src="imagen.png" style="width: 100px">
</div>
<div id="imagen1" >
<img src="imagen.png" style="width: 100px">
</div>
<div id="imagen2">
<img src="imagen.png" style="width: 100px">
</div>
</div>
<div id="galeria2">
<div id="imagen3">
<img src="imagen.png" style="width: 100px">
</div>
<div id="imagen4">
<img src="imagen.png" style="width: 100px">
</div>
<div id="imagen5">
<img src="imagen.png" style="width: 100px" style="margin-top: 1em">
</div>
</div>
<div id="galeria3">
<div id="imagen6">
<img src="imagen.png" style="width: 100px">
</div>
<div id="imagen7">
<img src="imagen.png" style="width: 100px">
</div>
<div id="imagen8">
<img src="imagen.png" style="width: 100px">
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
estilos.css 0 → 100644
/*Página original
-El elemento #cabecera debe tener un relleno de 1em en todos los lados.
-El elemento #menu debe tener un relleno de 0.5em en todos los lados y un margen inferior de 0.5em.
-El resto de elementos (#noticias, #publicidad, #principal, #secundario) deben tener 0.5em de relleno en todos sus lados, salvo
el elemento #pie, que sólo debe tener relleno en la zona superior e inferior.
-Los elementos .articulo deben mostrar una separación entre ellos de 1em.
-Las imágenes de los artículos muestran un margen de 0.5em en todos sus lados.
-El elemento #publicidad está separado 1em de su elemento superior.
-El elemento #pie debe tener un margen superior de 1em.*/
#cabecera{
padding: 1em;
border: 2px solid;
display: block;
margin-bottom: .5em;
}
#menu_principal{
list-style: none;
}
#menu_principal {
list-style: none;
position:relative;
left:30px;
top:-1px;
text-align: left;
}
#buscador{
top: 20px;
right: 10px;
float:right;
position: absolute;
}
#menu{
padding: :.5em;
margin-bottom: .5em;
border: 1px solid;
}
#lateral{
float: left;
border: 1px solid;
width: 300px;
margin-right:2%;
}
#noticias,publicidad{
padding: .5em;
}
#principal{
padding: .5em;
border: 1px solid;
width: 657px;
float: left;
}
#secundario{
padding: .5em;
border: 1px solid;
width: 200px;
float: right;
}
.articulo{
margin:1em;
}
#pie {
border: 1px solid;
padding-bottom: 0;
width: 690px;
position: relative;
float: left;
margin: 3em;
}
.copyright{
float: right;
}
\ No newline at end of file
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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style/estilos.css" title="style" />
<title>Lorem ipsum</title>
</head>
<body>
<!-- Contenedor -->
<div id="contenedor">
<!-- Cabecera -->
<div id="cabecera">
<div id="logo">
<h1><span>LOGOTIPO</span></h1>
</div>
<div id="buscador">
<form action="#" method="post">
Buscar &nbsp; <input name="busqueda" type="text" />
</form>
</div>
<div class="clear"></div>
</div>
<!-- /Cabecera -->
<!-- Menu principal -->
<div id="menu">
<ul id="menu_principal">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
<li><a href="#">Amet</a></li>
</ul>
<div class="clear"></div>
</div>
<!-- Lateral -->
<div id="lateral">
<!-- Noticias -->
<div id="noticias">
<h3><a href="#">Noticias</a></h3>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Lorem ipsum dolor sit amet</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Consectetuer adipiscing elit</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Donec molestie nunc eu sapien</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Maecenas aliquam dolor eget metus</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Fusce tristique lorem id metus</a></p>
<h3><a href="#">Enlaces relacionados</a></h3>
<ul>
<li><a href="#">Proin placerat</a></li>
<li><a href="#">Nulla in felis</a></li>
<li><a href="#">Nam luctus</a></li>
</ul>
</div>
<!-- /Noticias -->
<!-- Publicidad -->
<div id="publicidad">
<h3><a href="#">Publicidad</a></h3>
<p>Etiam fermentum, nisl tincidunt blandit interdum, massa velit posuere dolor, sed euismod sem odio at mi.</p>
<p>Duis porta placerat arcu. Nullam felis pede, commodo vel, suscipit a, molestie vel, felis. Maecenas mattis est vel est.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
<!-- /Publicidad -->
</div>
<!-- /Lateral -->
<div id="contenido">
<!-- Principal -->
<div id="principal">
<div class="articulo">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
<img src="imagenes/imagen.png" alt="Imagen gen�rica" />
<p>Nullam est lacus, suscipit ut, dapibus quis, condimentum ac, risus. Vivamus vestibulum, ipsum sollicitudin faucibus pharetra, dolor metus fringilla dui, vel aliquet pede diam tempor tortor.</p>
<p>Vestibulum pulvinar urna et quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vel turpis vitae dui imperdiet laoreet. Quisque eget ipsum.</p>
<p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
<div class="articulo">
<h2>Vivamus lobortis turpis ac ante fringilla faucibus</h2>
<img src="imagenes/imagen.png" alt="Imagen gen�rica" />
<p>Quisque eget ipsum. Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dictum hendrerit neque. Mauris id ligula non elit mattis semper. Fusce arcu ipsum, tempus eget, tincidunt at, imperdiet in, mi.</p>
<p>Sed fermentum cursus dolor. Aenean a diam. Phasellus feugiat. Donec tempor dignissim sem.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
</div>
<!-- /Principal -->
<!-- Secundario -->
<div id="secundario">
<h2>Phasellus blandit</h2>
<p>Praesent sodales imperdiet augue. Mauris lorem felis, semper eu, tincidunt eu, sollicitudin eget, sem. Nulla facilisi. Morbi ut enim ut enim ultricies dapibus.</p>
<p><a href="#">Seguir leyendo...</a></p>
<h2>Nullam vel turpis</h2>
<p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
<!-- /Secundario -->
</div>
<!-- /Contenido -->
<div class="clear"></div>
<!-- Pie -->
<div id="pie">
<span class="enlaces">
<a href="#">Nulla</a> |
<a href="#">Pharetra</a> |
<a href="#">Luctus</a> |
<a href="#">Ipsum</a> |
<a href="#">Proin</a> |
<a href="#">Placerat</a>
</span>
<span class="copyright">
&copy; Copyright Lorem ipsum
</span>
<div class="clear"></div>
</div>
<!-- /Pie -->
</div>
<!-- /Contenedor -->
</body>
</html>
\ No newline at end of file
index2.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" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="estilos.css" title="style" />
<title>Lorem ipsum</title>
</head>
<body>
<!-- Contenedor -->
<div id="contenedor">
<!-- Cabecera -->
<div id="cabecera">
<div id="logo">
<h1><span>LOGOTIPO</span></h1>
</div>
<div id="buscador">
<form action="#" method="post">
Buscar &nbsp; <input name="busqueda" type="text" />
</form>
</div>
<div class="clear"></div>
</div>
<!-- /Cabecera -->
<!-- Menu principal -->
<div id="menu">
<ul id="menu_principal">
<a href="#">Lorem</a>
<a href="#">Ipsum</a>
<a href="#">Dolor</a>
<a href="#">Sit</a>
<a href="#">Amet</a>
</ul>
<div class="clear"></div>
</div>
<!-- Lateral -->
<div id="lateral">
<!-- Noticias -->
<div id="noticias">
<h3><a href="#">Noticias</a></h3>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Lorem ipsum dolor sit amet</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Consectetuer adipiscing elit</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Donec molestie nunc eu sapien</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Maecenas aliquam dolor eget metus</a></p>
<p><span class="fecha">dd/mm/aaaa</span> <a href="#">Fusce tristique lorem id metus</a></p>
<h3><a href="#">Enlaces relacionados</a></h3>
<ul>
<li><a href="#">Proin placerat</a></li>
<li><a href="#">Nulla in felis</a></li>
<li><a href="#">Nam luctus</a></li>
</ul>
</div>
<!-- /Noticias -->
<!-- Publicidad -->
<div id="publicidad">
<h3><a href="#">Publicidad</a></h3>
<p>Etiam fermentum, nisl tincidunt blandit interdum, massa velit posuere dolor, sed euismod sem odio at mi.</p>
<p>Duis porta placerat arcu. Nullam felis pede, commodo vel, suscipit a, molestie vel, felis. Maecenas mattis est vel est.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
<!-- /Publicidad -->
</div>
<!-- /Lateral -->
<div id="contenido">
<!-- Principal -->
<div id="principal">
<div class="articulo">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
<img src="imagen.png" alt="Imagen generica" align="left" />
<p>Nullam est lacus, suscipit ut, dapibus quis, condimentum ac, risus. Vivamus vestibulum, ipsum sollicitudin faucibus pharetra, dolor metus fringilla dui, vel aliquet pede diam tempor tortor.</p>
<p>Vestibulum pulvinar urna et quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vel turpis vitae dui imperdiet laoreet. Quisque eget ipsum.</p>
<p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
<div class="articulo">
<h2>Vivamus lobortis turpis ac ante fringilla faucibus</h2>
<img src="imagen.png" alt="Imagen generica" align="left" />
<p>Quisque eget ipsum. Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dictum hendrerit neque. Mauris id ligula non elit mattis semper. Fusce arcu ipsum, tempus eget, tincidunt at, imperdiet in, mi.</p>
<p>Sed fermentum cursus dolor. Aenean a diam. Phasellus feugiat. Donec tempor dignissim sem.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
</div>
<!-- /Principal -->
<!-- Secundario -->
<div id="secundario">
<h2>Phasellus blandit</h2>
<p>Praesent sodales imperdiet augue. Mauris lorem felis, semper eu, tincidunt eu, sollicitudin eget, sem. Nulla facilisi. Morbi ut enim ut enim ultricies dapibus.</p>
<p><a href="#">Seguir leyendo...</a></p>
<h2>Nullam vel turpis</h2>
<p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p>
<p><a href="#">Seguir leyendo...</a></p>
</div>
<!-- /Secundario -->
</div>
<!-- /Contenido -->
<div class="clear"></div>
</div>
<!-- /Contenedor -->
<!-- Pie -->
<div id="pie">
<span class="enlaces">
<a href="#">Nulla</a> |
<a href="#">Pharetra</a> |
<a href="#">Luctus</a> |
<a href="#">Ipsum</a> |
<a href="#">Proin</a> |
<a href="#">Placerat</a>
</span>
<span class="copyright">
&copy; Copyright Lorem ipsum
</span>
<div class="clear"></div>
</div>
<!-- /Pie -->
</body>
</html>
\ 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