Html e css código para uma barra de navegação com um canto arredondado

A lista não ordenada

• Aqui está o código para uma lista desordenada básico que vai se tornar uma barra de navegação:

• alguns Página
• outra Página

Observe que cada item na lista - criado pelo "

" tag - é envolto em um item da lista ou "
• " tag par. Uma vez que os visitantes do site precisa clicar em itens na lista, você deve usar a marca de âncora para criar ligações para fora de cada item da lista.

Retirar estilo padrão

• Antes você pode estilizar uma lista desordenada em uma barra de navegação, você deve despir estilos padrão. Se você usar uma folha de estilo reset, como o criado por Eric Meyers, você pode pular esta etapa. Despojamento estilo padrão requer a configuração do "list-style" propriedade para "Nenhum" para remover as balas, e então você precisa remover a margem esquerda e estofamento esquerda. O código CSS parece com isso:

  ul {

  list-style: none;

  margin-left: 0;

  padding-left: 0;

  }

Faça a lista Horizontal

• Embora alguns sites usam menus da barra lateral para a navegação, a orientação da barra de navegação mais comum é horizontal, abrangendo toda a parte superior do site. Você pode fazer a sua lista horizontal desordenada, definindo os itens da lista para "float: left" como isso:

  li {

  float: left;

  }

links de navegação

• Dando a cada link de um tipo de exibição "quadra" é a melhor maneira de fazer a sua barra de navegação fácil de usar. Sem "display: block", Você não pode adicionar padding para os links que agregam espaço clicável em torno de seu texto. O preenchimento também faz item da barra de navegação destacando mais fácil. Este é um exemplo de código CSS para links em uma barra de navegação:

  
  
  
  

  Li uma {

  display: block;

  padding: 10px;

  background-color: # 555555;

  color: #ffffff;

  text-decoration: none;

  }

  li a: hover {

  background-color: # 333333;

  }

  O código anterior acrescenta 10 pixels de preenchimento em torno de cada link. Os links obter uma cor de fundo cinza médio e uma cor de texto de branco. "Text-decoration: none" desliga ligação sublinhado. o "li a: hover" regras de estilo do seletor de fazê-lo assim quando o usuário passa um ponteiro do mouse sobre um link, o fundo torna-se um cinza mais escuro.

Styling O bar em si

• Você pode dar a sua barra de navegação qualquer estilo que você quer, com fundos, gradientes, sombras e cantos arredondados. Certifique-se de que o seu estilo funciona em todos os navegadores, a menos que seja aprovado no projeto especial para permitir a barra para degradar normalmente. Por exemplo, aqui está o código para um bar com um fundo preto e cantos arredondados:

  ul {

  background: # 000000;

  border-radius: 20px;

  }

  o "border-radius" propriedade não irá funcionar no Internet Explorer 8 e abaixo, sem o uso de um polyfill tais como "CSS3Pie." A folha de estilo separada envolto em comentários condicionais, juntamente com imagens de canto, pode criar um fallback para o canto arredondado bem.