Menu Simples em HTML e CSS | PromoveFácil
Você está aqui: PromoveFácil » CSS » Menu Simples em HTML e CSS

Menu Simples em HTML e CSS

12 de julho de 2018

Ao adentrar aos estudos de HTML e CSS é necessário ter de certa forma não só o que se passa como simples mas também ao avançado, compreender o que se deve dar de esforço para mostrar que é uma linguagem simples e poderosa para saber que ou o quê se dará como usual durante os projetos em que você caminha para saber que se precisa manter os olhares aficionados por algo em que não pode passar despercebido.

 

Até então é necessário você treinar e ver diferentes linhas de códigos para saber que nada está se deixando passar para compreender que é necessário treinar a paciência, o olho, e as unhas em que você irá conseguir digitar ainda muitas linhas em sua IDE até transformar-se em algo que não pode deixar de mão até que se de alguma forma você não entenda será preciso recorrer a web, que como poderosa ferramenta traçou a carreira de muitos profissionais em início de carreira.

Ao iniciar sua carreira será necessário adentrar às poderosas ferramentas que com linguagens técnicas e simples de vez em quando dependendo da IDE transforme um mundo que você não deixará passar despercebido e começará a gostar.

Ao momento apresento um menu simples desenvolvido para mérito de ensino traçado como básico para dar iniciativa do necessário para ir compreendendo de forma fácil e atraente aos olhos do profissional que está iniciando carreira.

Atente que você deve copiar o código e salvá-lo como um arquivo com extensão .html para que posteriormente testá-lo no seu navegador.

 

Verificar o menu no navegador, clique aqui. O código do arquivo encontra-se abaixo.

arquivo: INDEX.HTML

<html>
<head>
<title>Menu</title>
<style>

* {
padding:0;
margin:0;
}

.menu {

list-style-type:none;
}

.menu li a {
float:left;
padding:10px 30px;
background:#f50495;
text-decoration:none;
color:#ffffff;
margin-right:1px;
}

.menu li a:hover {
float:left;
padding:10px 30px;
background:#4f0495;
text-decoration:none;
color:#ffffff;
margin-right:1px;
}
</style>

</head>

<body>

<ul class=”menu”>
<li><a href=”#”>HOME</a></li>
<li><a href=”#”>SOBRE</a></li>
<li><a href=”#”>SINOPSE</a></li>
<li><a href=”#”>CONTATO</a></li>
</ul>

</body>

</html>

 

 

 

 

Últimos posts por Fábio Pereira (exibir todos)