Ir para conteúdo
Faça parte da equipe! (2024) ×

html CRIANDO MENU EM HTML COM CSS

TheScription2016

Por ,
em Desenvolvimento Web

 Compartilhar

Posts Recomendados

Participativo

TheScription2016 45

Postado
Denunciar
Postado

A função do CSS é definir regras de formatação e estilo de texto dentro de páginas web, então em nosso sistema de hoje vamos usar uma página em HTML e uma em CSS para criar um menu que mude de cor, o que gera um efeito muito interessante para sua página.

 

Primeiramente vamos criar nossa página em HTML com o nome menu.html para criar está página poremos usar varias ferramentas, como Notepad++ um ótimo editor de código e que pode ser encontrado facilmente na internet para download.

 

Criando o menu em HTML para criarmos o menu primeiro vamos criar uma lista não ordenada (tag UL), com 5 itens contendo um link cada um. Isto deve ser feito diretamente na página HTML, com o seguinte código.

É necessário se cadastrar para acessar o conteúdo.

Lembrando que este código deve estar entre as tags <body></body> de sua página.

 

Cada item LI será um botão do nosso menu, e cada um deles terá seu respectivo link.

 

Até aqui temos a lista dos links para as páginas que você deseja. Porém como o CSS ira funcionar? Nós colocamos o seguinte comando no topo de nossa página para chamar a folha de estilos:

É necessário se cadastrar para acessar o conteúdo.

Então até agora nossa página se encontra assim.

É necessário se cadastrar para acessar o conteúdo.

Agora iremos criar o arquivo chamado css.css na mesma página que nosso página html, podemos criar em outro lugar porem teremos que alterar o destino no começo de nossa página html.

CRIANDO UMA PÁGINA CSS

Para criação de nossa página de CSS nós temos algumas características que mudam e que podem fazer uma grande diferença futuramente nós podemos comentar algumas linhas, linhas comentadas estão entre as tags /* e */ ou seja tudo que estiver dentro destra linha não será lida pelo sistema portanto podemos comentar o que cada parte do código ira fazer, este tipo de coisa que parece pouco importante pode fazer realente uma grande diferença.

 

A estrutura de uma página css também é diferente de uma html, pois ela não começa com nenhuma tag html.

 

Dentro da página CSS, nós iremos colocar o estilo para cada elemento de nosso menu.

 

Primeiramente iremos atribuir características de fontes para toda a página, apenas para uma melhor exibição:

É necessário se cadastrar para acessar o conteúdo.

Os próximos códigos vamos usar para poder retirar a marcação dos itens da lista, bem como colocá-los sempre na mesma linha, uma vez que, por padrão, eles vem um embaixo do outro. Vamos também redefinir as margens internas e externas.

É necessário se cadastrar para acessar o conteúdo.

Agora vamos definir o estilo dos links, para que a visualização dos mesmos fique mais agradável.

É necessário se cadastrar para acessar o conteúdo.

O código completo de nossa página CSS fica assim:

É necessário se cadastrar para acessar o conteúdo.

 

[/b]

"O verdadeiro hacker não se autodenomina com este título, ele é denominado."

UhkocKg.gif

ﾠﾠTroféus e Medalhasﾠﾠ
Link para o comentário
Compartilhar em outros sites
Este tópico está impedido de receber novos posts.
 Compartilhar
Ir para a lista de tópicos
×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.

 Accept Cookies  Reject Cookies