Como fazer um navegações bar profissional com css
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.
Abra um editor de texto, como o Bloco de Notas, EditPad ou TextPad. Clique "Arquivo" e "Novo" para criar um novo documento CSS.
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
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-}
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; }
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
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-}
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-}
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 ."
Use o bloco de notas ou um editor de texto semelhante para abrir o arquivo HTML onde a barra de navegação será colocado.
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: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
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