The Art & science of CSS
Barra de Navegacion
Version 2 a la cual se le a agregado lo siguiente como CSS
<![CDATA[
<style>
html {
font: small/1.4 "Lucida Grande", Tahoma, sans-serif;
}
body {
font-size: 92%;
}
</style>
]]>
Version 3
En esta version se agrega estos cambios que afectan la lista con id="nav3"
<![CDATA[
#nav3 {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 180px;
}
<ul id="nav3">
<li id="nav3_ini"><a href="https://www.blogger.com/">Inicio</a></li>
<li id="nav3_lib"><a href="https://www.blogger.com/libros">Libros</a></li>
<li id="nav3_eje"><a href="https://www.blogger.com/ejercicios">Talleres</a></li>
<li id="nav3_eve"><a href="https://www.blogger.com/eventos">Eventos</a></li>
<li id="nav3_sem"><a href="https://www.blogger.com/seminarios">Seminarios</a></li>
<li id="nav3_tal"><a href="https://www.blogger.com/talleres">Talleres</a></li>
<li id="nav3_ref"><a href="https://www.blogger.com/referencias">Referencias</a></li>
<li id="nav3_con"><a href="https://www.blogger.com/contacto">Contacto</a></li>
</ul>
]]>
Version 4
En esta version se le agrega los siguientes modificadores
<![CDATA[
#nav4 {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 180px;
}
#nav4 li {
margin: 0;
padding: 0;
}
/* display:block to increase clicable area as a's default to inline*/
#nav4 a {
display: block;
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}
#nav4 #nav4_con a {
border: 0;
}
#nav4 a:hover {
background: #4F4532;
}
<ul id="nav4">
<li id="nav4_ini"><a href="https://www.blogger.com/">Inicio</a></li>
<li id="nav4_lib"><a href="https://www.blogger.com/libros">Libros</a></li>
<li id="nav4_eje"><a href="https://www.blogger.com/ejercicios">Talleres</a></li>
<li id="nav4_eve"><a href="https://www.blogger.com/eventos">Eventos</a></li>
<li id="nav4_sem"><a href="https://www.blogger.com/seminarios">Seminarios</a></li>
<li id="nav4_tal"><a href="https://www.blogger.com/talleres">Talleres</a></li>
<li id="nav4_ref"><a href="https://www.blogger.com/referencias">Referencias</a></li>
<li id="nav4_con"><a href="https://www.blogger.com/contacto">Contacto</a></li>
</ul>
]]>
Version 5
Se le agrega un indicador a la pestaña que identifique la supuesta ubicacion actual.
<![CDATA[
#nav5 li.current a {
background: #BEB06F;
color: #1A1303;
font-weight: bold;
}
]]>
Version 6
Se pueden agregar a las especificaciones CSS varias etiquetas a las cuales se aplicara el formato.
<![CDATA[
#body_ini #nav_ini a,
#body_lib #nav_lib a,
#body_eje #nav_eje a,
#body_eve #nav_eve a,
#body_sem #nav_sem a,
#body_tal #nav_tal a,
#body_ref #nav_ref a,
#body_con #nav_con a {
background: #BEB06F;
color: #1A1303;
font-weight: bold;
}
]]>
Version 7
Esta es la version Horizontal del menu de navegacion. basicamente se integra float: left;
<![CDATA[
#nav7 {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 767px;
float: left; /*contiene lista de items flotantes*/
}
/* display:block to increase clicable area as a's default to inline*/
#nav7 a {
float: left;
width: 127px;
text-align: center;
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}
]]>
Version 8
Se integra una imagen de fondo en las pestañas donde se observa la curva superior de las pestañas,
es una imagen grabada con tres pestañas, la cual se recorre con background-position: -127px 0; para que caiga la parte de la imagen deseada.
Imagen de fondo de pestaña utilizada
No hay comentarios:
Publicar un comentario