Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

06 haz lo que hicimos en el aula

Referente al curso HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación, en el capítulo Navegación entre páginas y actividad Haz lo que hicimos en el aula

por Oscar Daniel Martinez Martinez
| 84.3k xp | 33 posts
Encargado 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Productos-Barberia Alura</title>

    <link rel="stylesheet" href="Productos.css">
</head>
<body>
    <header>
        <h1><img src="imagenes/logo.png" alt=""></h1>
        <!-- listas ordenadas -->

        <nav>
            <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="Productos.html">PRODUCTOS</a></li>
            <li><a href="contactos.html">CONTACTOS</a></li>
        </ul>
        </nav>

    </header>

</body>
</html>
header{
    background-color: #bbbbbb;
}

nav li {
    display: inline;  /* con esto le digo que solo ocupe el tamaño de su contenido */
    margin: 0 0 0 15px; /* arriba,derecha,abajo,izquierda - --- reaaliza una serparacion de las letras entre si */

} 
nav a{
    text-transform: uppercase;/*  convierte el texto a mayusculas */
    color: black;
    font-weight: bold; /* se hace referencia al grosor de la letra  */
    font-size: 20px;/*   determina el tamaño de las letras */
    text-decoration: none; /* quita el subrayado que indica que es un enlace  */

}
1 respuesta
por Rafaela Rocha
| 2875.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Oscar!

En el código que publicaste, se está creando un encabezado con un logotipo y una lista de navegación. El encabezado tiene un fondo gris claro y la lista de navegación se muestra en línea.

El CSS que se está utilizando para lograr esto es el siguiente:

header{
    background-color: #bbbbbb;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;   
} 

nav a{
    text-transform: uppercase;
    color: black;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
}

El primer bloque de CSS establece el color de fondo del encabezado en gris claro. El segundo bloque de CSS se aplica a los elementos de lista dentro de la lista de navegación y establece su visualización en línea y su margen izquierdo en 15 píxeles. El tercer bloque de CSS se aplica a los enlaces dentro de la lista de navegación y establece su transformación de texto en mayúsculas, su color en negro, su peso de fuente en negrita, su tamaño de fuente en 20 píxeles y su decoración de texto en ninguna.

Espero que esto te haya ayudado a entender lo que se está haciendo en el código. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)