LISTAS NÃO ORDENADAS HTML
<ul> é a
tag para começo da lista.
<li> é a
tag para cada item da lista.
A lista vai ser um círculo preto.
<!DOCTYPE html>
<html>
<body>
<h2>LISTA NÃO ORDENADA DO HTML5</h2>
<ul>
<li>LEITE</li>
<li>CAFÉ</li>
<li>PÃO</li>
</ul>
</body>
</html>
Escolher marcador de item de lista
list-style-type é uma propriedade
do css para definir marcador lista.
disc – define o marcador
como um disco.
circle – define o marcador
como um círculo.
square – define o marcador
como um quadrado.
none – define o marcador
como nenhum.
COMO UM DISCO
<!DOCTYPE html>
<html>
<body>
<h2>LISTA NÃO ORDENADA DO HTML5</h2>
<ul style="list-style-type:disc;">
<li>LEITE</li>
<li>CAFÉ</li>
<li>PÃO</li>
</ul>
</body>
</html>
COMO UM CÍRCULO
<!DOCTYPE html>
<html>
<body>
<h2>LISTA NÃO ORDENADA DO HTML5</h2>
<ul style="list-style-type:circle;">
<li>LEITE</li>
<li>CAFÉ</li>
<li>PÃO</li>
</ul>
</body>
</html>
COMO UM QUADRADO
<!DOCTYPE html>
<html>
<body>
<h2>LISTA NÃO ORDENADA DO HTML5</h2>
<ul style="list-style-type:square;">
<li>LEITE</li>
<li>CAFÉ</li>
<li>PÃO</li>
</ul>
</body>
</html>
COMO NENHUM
<!DOCTYPE html>
<html>
<body>
<h2>LISTA NÃO ORDENADA DO HTML5</h2>
<ul style="list-style-type:none;">
<li>LEITE</li>
<li>CAFÉ</li>
<li>PÃO</li>
</ul>
</body>
</html>
lista
dentro da lista
<!DOCTYPE html>
<html>
<body>
<h2>LISTA DENTRO DA
LISTA</h2>
<ul>
<li>CAFÉ</li>
<li>LEITE
<ul>
<li>PÃO</li>
<li>MAGARINA</li>
</ul>
</li>
<li>UVA</li>
</ul>
</body>
</html>
Lista horizontal com CSS
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333333;
}
li {
float:
left;
}
li a {
display:
block;
color:
blue;
text-align:
center;
padding:
16px;
text-decoration: none;
}
li a:hover {
background-color:#FFFF00;
}
</style>
</head>
<body>
<h2>MENU</h2>
<ul>
<li><a href="#home">HOME</a></li>
<li><a
href="#NOTICIA">NOTICIA</a></li>
<li><a
href="#CONTATO">CONTATO</a></li>
<li><a href="#AJUDA">AJUDA</a></li>
</ul>
</body>
</html>