HTML - Menú de navegación

Ejercicio 29:

Crear una página en html, agregar minimamente:

    1. Un nombre a la página
    2. CSS de forma interna:
        a. Un menú de navegación de al menos 3 páginas


index.html

<!DOCTYPE html>

<html>

    <head>

        <title>HTML - Menú de navegación</title>

        <!-- OVERFLOW - hidden: recorta nuestro texto/imagen/etc, scroll: añade una barra por lo que no recorta nuestro texto/imagen/etc, auto: añade o no la barra dependiendo si es o no necesario por lo que no recorta nuestro texto/imagen/etc 
                DISPLAY - block: uno debajo del otro (en nuestro caso responde el padding), inline-block: uno al lado del otro -->

        <style>

            ul{
                list-style-typenone;
                margin0;
                padding0;
                overflowhidden;
                background-color#333333;

            }

            li{
                float: left;
            }

            li a{
                displayblock;
                color: white;
                text-aligncenter;
                padding: 16px;
                text-decoration: none;
            }

            li a:hover{
                background-color: #111111;
            }

        </style>

    </head>

    <body>

        <main>

            <h1>Menú de navegación en HTML</h1>

            <p>También usamos CSS de foma interna/incrustada</p>

            <!-- Un menú clásico de navegación podría contener como items: Inicio/Home, Contacto/Contact, Acerca/About, etc...
                    En el caso de este ejemplo utiicé páginas que habíamos creado en el taller -->

            <ul>

            <!-- ../ para salir de la carpeta actual e ir a carpeta anterior, / para entrar en la carpeta -->

                <li><a href="../Imagen/index.html">Imágen</a></li>
                <li><a href="../Enlace/index.html">
Enlace</a></li>
                <li><a href="../listas/index.html">Listas</a></li>

            </ul>

        </main>

    </body>

</html>





...

Comentarios

Entradas más populares de este blog

Formulario 2