Podemos incluir viñetas con imágenes.
En Dreamweaver puede hacerse facilmente:
Ejemplo
|
Código CSS |
ul{
list-style-position: outside;
list-style-image: url(Rd_pin.gif);
color: #F60;
}
|
|
Código HTML y Resultado |
<body>
<h3> CICLOS FORMATIVOS</h3>
<ul>
<li>1º ASIR</li>
<li>2º ASIR</li>
</ul>
</body>
|
 |
Caso práctico
Listas inline (diseño de Menús de Navegación)
Los menús de navegación suelen diseñarse con listas inline:
Proceso:
-
Crear la lista y enlaces dentro de las etiquetas <nav></nav>
-
Colocar los items en línea (display: inline;…..)
-
Aplicar estilos a los enlaces
-
Crear efectos al pasar el ratón por los items
|
|
Código CSS |
-
/*Colocar los elementos en línea*/
-
nav li {
-
display: inline;
-
margin:20px;
-
}
-
/*Aplicar estilo a los enlaces*/
-
nav li a {
-
font-family: Arial;
-
font-size:11px;
-
text-decoration: none;
-
padding: 10px;
-
background-color: #2175bc;
-
color: #fff;
-
-webkit-border-radius: 14px 4px 14px 4px;
-
border-radius: 14px 4px 14px 4px;
-
}
-
-
/*Crear efecto al pasar el ratón*/
-
li a:hover {
-
background-color: #2586d7;
-
margin-top:-2px;
-
padding-bottom:12px;
-
}
|
|
Código HTML y Resultado |
<nav>
<ul>
<li><a href="#">Lenguajes de Marcas</a></li>
<li><a href="#">Bases de Datos</a></li>
<li><a href="#">Redes Locales</a></li>
<li><a href="#">Sistemas Operativos</a></li>
</ul>
</nav>
|
|
|
Para saber más
