Pesquisar na Comunidade
Mostrando resultados para as tags ''criando menu''.
Atualmente, o índice de pesquisa está sendo processado. Os resultados atuais podem não estar completos.
Encontrado 1 registro
-
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. <ul> [b] <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> <li><a href="#">link 5</a></li> </ul> 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: <link href="css.css" rel="stylesheet" type="text/css" /> Então até agora nossa página se encontra assim. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[Hidden Content]] [b][b]<html xmlns="[Hidden Content]; <head> <title>Exemplo de Menu em HTML com CSS - WebCheats</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> <li><a href="#">link 5</a></li> </ul> </body> </html> 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: * {[/color][/size][/left] [size=5][color=#000000] [left] font-family:Verdana, Geneva, sans-serif; font-size:12px; } 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. ul {[/color][/size][/left] [size=5][color=#000000] [left] margin: 0; padding:0; } li { list-style: none; margin: 10px; display: inline; } Agora vamos definir o estilo dos links, para que a visualização dos mesmos fique mais agradável. li a {[/color][/size][/left] [size=5][color=#000000] [left] padding: 5px 10px; margin:0; border: 0px solid #f00; background: #903; text-decoration: none; color:#FFF; /* cantos arredondados */ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } li a:hover { background: #CCC; color: #000; border-color: #000; } O código completo de nossa página CSS fica assim: * {[/color][/size][/left] [size=5][color=#000000] [left] font-family:Verdana, Geneva, sans-serif; font-size:12px; } ul { margin: 0; padding:0; } li { list-style: none; margin: 10px; display: inline; } li a { padding: 5px 10px; margin:0; border: 0px solid #f00; background: #903; text-decoration: none; color:#FFF; /* cantos arredondados */ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } li a:hover { background: #CCC; color: #000; border-color: #000; } [/b]
