Menu
Coddy logo textTech
EMPEZAR A APRENDER
flag Es iconEspañoldown icon

Organizar elementos

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 73 de 76.

challenge icon

Desafío

Fácil

Practiquemos flexbox para crear una barra de navegación horizontal sencilla. Usa CSS para dar estilo al menú de modo que coincida con el diseño de la imagen de abajo.

Screen Shot 2025-02-26 at 12.29.32.png

Sigue los pasos a continuación:

  1. Establece la barra de navegación como un contenedor flex.
  2. Añade espaciado entre los enlaces.
    1. Usa justify-content: space-around para distribuir los enlaces uniformemente.
  3. Da estilo a la barra de navegación.
    1. Establece el color de fondo a dark blue.
    2. Añade algo de padding para crear espacio alrededor de los enlaces.
  4. Da estilo a los enlaces de navegación.
    1. Selecciona los elementos <a>.
    2. Establece el color del texto a white.
    3. Elimina el subrayado predeterminado.
    4. Establece el tamaño de fuente a 18px.
    5. Añade 8px 15px de padding para un mejor espaciado.

Pruébalo tú mismo

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>

Todas las lecciones de Styling with CSS

1Introducción

¿Qué es CSS?Sintaxis de CSSComentarios en CSSLa etiqueta HeadLa etiqueta Title

4Fundamentos del texto

Color de textoFamilia de fuentesTamaño de fuenteGrosor de fuenteAlineación de textoDecoración de textoDesafío de repaso #1Desafío de repaso #2

7Modelo de caja - Parte 1

¿Qué es el modelo de caja?PaddingMárgenesBordesAncho y altoDesafío de repaso

10Formulario de inicio de sesión

CuerpoContenedor del formularioLección de proyectoInputLección de proyectoBotónLección de proyecto

13Página web de Tonga

Menú de navegaciónEncabezado de bienvenidaLección de proyectoSección "Acerca de"Lección de proyectoSección de contactoLección de proyectoEtiqueta ViewportLección de proyectoMedia QueryLección de proyecto

2Añadir CSS

CSS en líneaCSS internoCSS externoDesafío de estilos básicos

5Colores y fondos

Color de fondoColores HEXColores RGBTransparencia con RGBADesafío de repaso #1

8Modelo de caja - Parte 2

Box SizingBorder RadiusOverflowBox ShadowDesafío de repaso

11Técnicas de maquetación

Elementos de bloque vs. en líneaConceptos básicos de posicionamientoPosicionamiento relativoPosicionamiento absolutoPosicionamiento fijoConceptos básicos de Z-IndexDesafío de repaso

14Desafíos finales

Organizar elementosLista de películasTarjeta de invitación de bodaNotificación flotante

3Selectores básicos

Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección

6Menú de cafetería

Fundamentos de tipografíaEstilo de textoLección de proyectoColor y fondosLección de proyecto

9Flex Box

¿Qué es Flex Box?Flex DirectionJustify ContentAlign ItemsEl centrado perfectoDesafío de Flex Box

12Fundamentos de Diseño Responsivo

¿Qué es el Diseño Responsivo?Etiqueta Meta ViewportDiseños FluidosUnidades de ViewportFundamentos de Media QueriesImágenes Flexibles