Como fazer um navegações bar profissional com css

Use uma barra de navegação para vincular a páginas importantes em seu site.

Use uma barra de navegação para vincular a páginas importantes em seu site.

Cascading Style Sheets (CSS) manipular o estilo e design de um Web site. barra de navegação de uma página Web é construído usando UL e LI etiquetas, tags HTML que são usados ​​para criar listas na Web. Embora navegadores da Web tornar tais tags como listas de marcadores por padrão, você pode substituir a formatação usando CSS para dar o seu site um acabamento profissional. Com um pouco de personalização, você também pode misturar a sua navegação com o resto de sua página.

1

Abra um editor de texto, como o Bloco de Notas, EditPad ou TextPad. Clique "Arquivo" e "Novo" para criar um novo documento CSS.

2

Insira o seguinte código CSS em você página. Ele define as margens superior e inferior a zero na sua página Web:

body {margin: preenchimento 0-: 0-}

Video: Como fazer um site profissional - HTML5, javascript & CSS

3

Insira o seguinte código abaixo da linha de código anterior. Ele cria um estilo para a barra de navegação, cobrindo a largura total do seu contêiner pai ou seção. Ele também deixou; alinha o bar (tanto à esquerda como possível de seu recipiente) e dá-lhe um fundo preto. Para alterar a cor de fundo para a navegação, a mudança "Preto" para uma cor diferente, mas deixar o ponto e vírgula intacta.

nav {

width: 100% - float: left; background: preto-}

4

Adicione o seguinte código abaixo da linha de código anterior. Ele remove as balas da marca UL e remove as margens e padding:

nav ul {

margin: 0- padding: 0- list-style-type: none; }

5

Adicione o seguinte código CSS abaixo do código anterior. Faz o conteúdo dentro da exibição de navegação na mesma linha:

li nav {

display: inline-}

Video: how to Create transparent Navigation Bar HTML & Css

6

Adicionar o seguinte código abaixo das linhas de código anterior. Ele formata as ligações dentro da navegação e exibe-os como guias. Ele adiciona um preenchimento vertical de 2 pixels e preenchimento horizontal de 15 pixels para cada link. Ele remove sublinhado das ligações, torna o texto branco e aplica um fundo preto. Ele também adiciona uma borda fina, branca à direita de cada link. Para personalizar a barra de navegação, altere as cores dentro do código.

nav ul um {

display: flutuador BLOCO: left; padding: 2px 15px; text-decoration: none; background: cor preto-: branco-border-right: 1px solid white-}

7

Adicione a seguinte linha de código para alterar a cor das guias de fundo quando você selecioná-los:

nav ul um: {pairar

background: azul-}

8

Clique "Arquivo" e "Salve " a partir do menu. Nomeie o arquivo "nav.css" no "Salvar como" caixa de diálogo. Coloque o arquivo na mesma pasta que o arquivo HTML onde a barra de navegação irá. Clique "Salve ."

9

Use o bloco de notas ou um editor de texto semelhante para abrir o arquivo HTML onde a barra de navegação será colocado.

10

Vá até o "cabeça" seção, localizada na parte superior da página, logo abaixo do "" código. Para identificar a seção correta, clique entre "" e "" e inserir o seguinte código:

11

Role abaixo da abertura "corpo" marcar e clique onde deseja que a barra de navegação para exibir. Insira o seguinte código, mas substitua "#" com o endereço do site que você está ligando. Substituir "Link 1," "Link 2," e "Fazer a ligação 3" com o texto que deseja exibir na navegação.

Video: Como Criar Um Blog - Profissional 2016

12

Clique "Arquivo" e "Salve " a partir do menu para salvar as alterações.

Unid você precisará

Referências

  • ligação W3 Escolas: CSS Navigation Bar
  • ligação W3 Escolas: Float CSS

Sobre o autor

Foye Robinson é um escritor e Web designer freelancer com precisão Web Crafting. Ela divide seu amor pela família / relacionamentos, fitness e Web design em sua escrita. Robinson tem um grau de Bacharel em Ciências pela Universidade de Webster e também escreve artigos diversos e romances.


Artigos relacionados