viernes, 17 de julio de 2015

HTML / CSS ejemplo de página parte 2

Ya tenemos creada una lista no ordenada de los elementos que queremos para nuestra página.
Esta lista la vamos a transformar en un menú desplegable horizontal.

Lo primero que vamos haces es con la etiqueta <a>, creamos enlaces y a la href le pondremos el signo comodín #, hasta que decidamos donde queremos enlazar cada elemento.

 Ahora tenemos el código HTML.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>España</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

 <body>
<h1>ESPAÑA</h1>

 <h2>Comunidades autonomas</h2>

 <ul>

 <li><a href="#">Andalucía</a>
    <ul>
        <li><a href="#">Almería</a></li>
            <li><a href="#">Cadíz</a></li>
            <li><a href="#">Cordoba</a></li>
            <li><a href="#">Granada</a></li>
            <li><a href="#">Huelva</a></li>
            <li><a href="#">Jaen</a></li>
            <li><a href="#">Málaga</a></li>
            <li><a href="#">Sevilla</a></li>
        </ul>
    </li>
    <li><a href="#">Aragón</a>
    <ul>
        <li><a href="#">Huesca</a></li>
            <li><a href="#">Teruel</a></li>
            <li><a href="#">Zaragoza</a></li>
        </ul>
    </li>
    <li><a href="#">Cantabria</a>
    <ul>
        <li><a href="#">Santander</a></li>
        </ul>
    </li>
    <li><a href="#">Castilla y León</a>
    <ul>
        <li><a href="#">Avila</a></li>
            <li><a href="#">Burgos</a></li>
            <li><a href="#">León</a></li>
            <li><a href="#">Palencia</a></li>
            <li><a href="#">Salamanca</a></li>
            <li><a href="#">Segovia</a></li>
            <li><a href="#">Soria</a></li>
            <li><a href="#">Valladolid</a></li>
            <li><a href="#">Zamora</a></li>
        </ul>
    </li>
    <li><a href="#">Castilla-La Mancha</a>
    <ul>
        <li><a href="#">Albacete</a></li>
            <li><a href="#">Ciudad Real</a></li>
            <li><a href="#">Cuenca</a></li>
            <li><a href="#">Guadalajara</a></li>
            <li><a href="#">Toledo</a></li>
        </ul>
    </li>
    <li><a href="#">Cataluña</a>
    <ul>
        <li><a href="#">Barcelona</a></li>
            <li><a href="#">Girona</a></li>
            <li><a href="#">Lleida</a></li>
            <li><a href="#">Tarragona</a></li>
        </ul>
    </li>
    <li><a href="#">Ceuta</a></li>
    <li><a href="#">Comunidad de Madrid</a></li>
    <li><a href="#">Comunidad Valenciana</a>
    <ul>
        <li><a href="#">Alicante</a></li>
            <li><a href="#">Castellon</a></li>
            <li><a href="#">Valencia</a></li>
        </ul>
    </li>
    <li><a href="#">Extremadura</a>
    <ul>
        <li><a href="#">Badajoz</a></li>
            <li><a href="#">Caceres</a></li>
        </ul>
    </li>
    <li><a href="#">Galicia</a>
    <ul>
        <li><a href="#">A Coruña</a></li>
            <li><a href="#">Lugo</a></li>
            <li><a href="#">Ourense</a></li>
            <li><a href="#">Pontevedra</a></li>
        </ul>
    </li>
    <li><a href="#">Illes Balears</a>
    <ul>
        <li><a href="#">Bareales</a>
            <ul>
            <li><a href="#">Menorca</a></li>
                <li><a href="#">Mallorca</a></li>
                <li><a href="#">Ibiza</a></li>
                <li><a href="#">Formentera</a></li>
                <li><a href="#">Cabrera</a></li>
            </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Islas Canarias</a>
    <ul>
        <li><a href="#">Las Palmas</a>
            <ul>
            <li><a href="#">Gran Canaria</a></li>
                <li><a href="#">Fuerteventura</a></li>
                <li><a href="#">Lanzarote</a></li>
            </ul>
            </li>
            <li><a href="#">Santa Cruz de Tenerife</a>
            <ul>
            <li><a href="#">Tenerife</a></li>
                <li>La Gomera</a></li>
                <li>La Palma</a></li>
                <li>El Hierro</a></li>
                </ul>
          </li>
        </ul>
    </li>
    <li><a href="#">La Rioja</a>
    <ul>
        <li><a href="#">La Rioja</a></li>
        </ul>
    </li>
    <li><a href="#">Melilla</a></li>
    <li><a href="#">Comunidad Foral de Navarra</a>
    <ul>
        <li><a href="#">Navarra</a></li>
        </ul>
    </li>
    <li><a href="#">País Vasco</a>
    <ul>
        <li><a href="#">Alava</a></li>
            <li><a href="#">Guipuzcoa</a></li>
            <li><a href="#">Vizcaya</a></li>
        </ul>
    </li>
    <li><a href="#">Principado de Asturias</a>
    <ul>
        <li><a href="#">Oviedo</a></li>
        </ul>
    </li>
    <li><a href="#">Región de Murcia</a></li>
</ul>
</body>

</html>

Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)