Exercícios: listas e margens - HTML

Ainda na página sobre.html, crie um subtítulo chamadoDiferenciais e, logo em seguida, uma lista de diferenciais. Use<h2> para o subtítulo, <ul> para a lista e <li> para os itens da lista.

Dica: você pode copiar o texto dos diferenciais do arquivodiferenciais.txt.

<h2>Diferenciais</h2>

<ul>
  <li>Menor preço do varejo, garantido</li>
  <li>Se você achar uma loja mais barata, leva o produto de graça</li>
  ....
</ul>

Teste o resultado no navegador.

Podemos melhorar a apresentação da página acertando alguns espaçamentos usando várias propriedades do CSS, como margin,padding e text-indent.

h1 {
    padding: 10px;
}

h2 {
    margin-top: 30px;
}

p {
    padding: 0 45px;
    text-indent: 15px;
}

figure {
    padding: 15px;
    margin: 30px;
}

figcaption {
    margin-top: 10px;
}

Veja o resultado no navegador.

Para centralizar o body como no design, podemos usar o truque de colocar um tamanho fixo e margens auto na esquerda e na direita:

body {
    margin-left: auto;
    margin-right: auto;
    width: 940px;
}

Verifique mais uma vez o resultado.