Menu
Coddy logo textTech
COMEÇAR A APRENDER
flag Pt iconPortuguêsdown icon

Organizar Itens

Parte da seção Styling with CSS do Journey de HTML da Coddy. Lição 73 de 76.

challenge icon

Desafio

Fácil

Vamos praticar flexbox para criar uma barra de navegação horizontal simples. Use CSS para estilizar o menu para que ele corresponda ao design na imagem abaixo.

Siga os passos abaixo:

  1. Defina a barra de navegação como um contêiner flex.
  2. Adicione espaçamento entre os links.
    1. Use justify-content: space-around para distribuir os links uniformemente.
  3. Estilize a barra de navegação.
    1. Defina a cor de fundo como dark blue.
    2. Adicione preenchimento (padding) para criar algum espaço ao redor dos links.
  4. Estilize os links de navegação.
    1. Selecione os elementos <a>.
    2. Defina a cor do texto como white.
    3. Remova o sublinhado padrão.
    4. Defina o tamanho da fonte como 18px.
    5. Adicione 8px 15px de preenchimento (padding) para um melhor espaçamento.

Experimente você mesmo

<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 as lições de Styling with CSS

1Introdução

O que é CSS?Sintaxe CSSComentários CSSA Tag HeadA Tag Title

4Fundamentos de Texto

Cor do TextoFamília da FonteTamanho da FontePeso da FonteAlinhamento de TextoDecoração de TextoDesafio de Recapitulação nº 1Desafio de Recapitulação nº 2

7Modelo de Caixa Parte 1

O que é o Modelo de Caixa?PaddingMargensBordasLargura e AlturaDesafio de Revisão

10Formulário de Login

CorpoContainer do FormulárioLição de projetoInputLição de projetoBotãoLição de projeto

13Página Web de Tonga

Menu de NavegaçãoCabeçalho de Boas-vindasLição de projetoSeção SobreLição de projetoSeção de ContatoLição de projetoTag ViewportLição de projetoMedia QueryLição de projeto

2Adicionando CSS

CSS InlineCSS InternoCSS ExternoDesafio de Estilização Básica

5Cores e Planos de Fundo

Cor de FundoCores HEXCores RGBTransparência com RGBADesafio de Revisão nº 1

8Modelo de Caixa Parte 2

Box SizingBorder RadiusOverflowBox ShadowDesafio de Revisão

11Técnicas de Layout

Elementos Block vs InlineFundamentos de PosicionamentoPosicionamento RelativoPosicionamento AbsolutoPosicionamento FixoFundamentos de Z-IndexDesafio de Recapitulação

14Desafios Finais

Organizar ItensLista de FilmesConvite de CasamentoNotificação Flutuante

3Seletores Básicos

Introdução aos SeletoresSeletor de TipoSeletor de ClasseSeletor de IDSeletores de GrupoSeletor UniversalDesafio de Seleção

6Cardápio de Café

Fundamentos de TipografiaEstilização de TextoLição de projetoCores e Planos de FundoLição de projeto

9Flex Box

O que é Flex Box?Flex DirectionJustify ContentAlign ItemsO Centro PerfeitoDesafio de Flex Box

12Fundamentos do Design Responsivo

O que é Design Responsivo?Meta Tag ViewportLayouts FluidosUnidades de ViewportFundamentos de Media QueriesImagens Flexíveis

Pratique por conta própria: Playground de Web