La práctica 4 que no logramos completar en clase tiene como finalidad ejemplicar:
- Tres diferentes formas de ver una lista utilizando CSS
a) Lista sin viñeta
<style type="text/css">
#navi1 {
list-style:none;
margin:0;
padding:0;
}
list-style:none;
margin:0;
padding:0;
}
</style>
<ul id="navi1" >
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a></li>
</ul>
b) Lista con viñeta en forma de círculos
<style type="text/css">
#navi2 {
list-style-type:circle;
}
list-style-type:circle;
}
</style>
<ul id="navi2" >
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a></li>
</ul>
- c) Lista con viñetas usando imagenes ".png" (la imagen debe estar dentro de la misma carpeta que contiene el archivo HTML)
 |
| Clic derecho para descargar |
<style type="text/css">
#navi3 {
list-style-image:url(User.png);
}
list-style-image:url(User.png);
}
</style>
<ul id="navi3" >
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a></li>
</ul>
2. Titulos <H1> para cada tipo de lista: sin viñetas, con viñetas circulares y de imagen, y un titulo principal <H2>. El código fuente que agrupa las 3 listas anteriores es el siguiente:
<style type="text/css">
h1 {
color: #12cc33;
}
h2 {
color: #cccc33;
}
color: #12cc33;
}
h2 {
color: #cccc33;
}
</style>
<br><br>
<h1>Listado sin viñeta</h1>
<ul id="navi1" >
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a></li>
</ul>
<br><br>
<h1>Listado con viñeta circulos</h1>
<ul id="navi2">
<li>inicio</li>
<li>acerca de</li>
<li>contactos</li>
</ul>
<br>
<h1>Listado con imagenes de viñeta</h1>
<ul id="navi3">
<li>inicio</li>
<li>acerca de</li>
<li>contactos</li>
</ul>
El código CSS necesario para que la primera lista tome la forma de un menú es el siguiente:
#navi1 li{
margin:2px;
padding:0;
border:1px solid#CCCCCC;
float:left;
}
#navi1 li a {
display:block;
width:200px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:20px;
color:#FFFFFF;
background-color:#000000;
border-left:10px solid #666666;
}
#navi1 li a:hover {
color:#99CC00;
background-color:#003366;
border-left-color:#99CC00; }
Quedando la página con una apariencia parecida con la siguiente:
Para completar la página solo deberán acomodar todo el código en un solo documento HTML, donde todo el código CSS debe estar ubicado dentro de las etiquetas <STYLE type="text/css"> </STYLE> y el código HTML dentro de <BODY> </BODY>
No hay comentarios:
Publicar un comentario