Criar listas

As listas são uma parte da vida cotidiana. As listas de tarefas determinam o que fazer. As rotas de navegação fornecem listas de instruções passo-a-passo. As receitas fornecem listas de ingredientes e listas de instruções. Com uma lista para quase tudo, é fácil entender por que é que eles também são populares online.

Quando queremos usar uma lista num site, o HTML fornece três tipos diferentes para escolher: listas não ordenadas, encomendadas e de descrição. Escolher qual tipo de lista usar - ou se usar uma lista - resume-se ao conteúdo e a opção mais semanticamente apropriada para exibir esse conteúdo.

Além dos três tipos diferentes de listas disponíveis em HTML, existem várias maneiras de modelar essas listas com CSS. Por exemplo, podemos escolher o tipo de marcador a ser usado em uma lista. O marcador pode ser quadrado, redondo, numérico, alfabético ou talvez inexistente. Além disso, podemos decidir se uma lista deve ser exibida verticalmente ou horizontalmente. Todas essas opções desempenham papéis significativos no estilo de nossas páginas da web.

Listas não ordenadas

Uma lista não ordenada é simplesmente uma lista de itens relacionados cuja ordem não importa. A criação de uma lista não ordenada em HTML é realizada usando o elemento de nível de bloco da lista não ordenada, <ul>. Cada item dentro de uma lista não ordenada é marcado individualmente usando o elemento do item da lista, <li>.

Por padrão, a maioria dos navegadores adiciona uma margem vertical e preenchimento esquerdo ao elemento <ul> e precede cada elemento <li> com um ponto sólido. Este ponto sólido é chamado de marcador de item da lista, e pode ser alterado usando CSS.

<ul>

<li>Orange</li>

<li>Green</li>

<li>Blue</li>

</ul>

Listas encomendadas

O elemento da lista ordenada, <ol>, funciona muito como o elemento da lista não ordenada; itens de lista individuais são criados da mesma maneira. A principal diferença entre uma lista ordenada e uma lista não ordenada é que, com uma lista ordenada, a ordem em que os itens são apresentados é importante.

Como o assunto é importante, em vez de usar um ponto como o marcador padrão do item da lista, uma lista ordenada usa números.

<ol>

<li>Head north on N Halsted St</li>

<li>Turn right on W Diversey Pkwy</li>

<li>Turn left on N Orchard St</li>

</ol>

As listas encomendadas também possuem atributos únicos disponíveis para eles, incluindo iniciar e reverter.

Atributo Iniciar

O atributo de início define o número a partir do qual uma lista ordenada deve começar. Por padrão, as listas ordenadas começam em 1. No entanto, pode haver casos em que uma lista deve começar em 30 ou outro número. Quando usamos o atributo de início no elemento <ol>, podemos identificar exatamente a qual número uma lista ordenada deve começar a contar.

O atributo start aceita apenas valores inteiros, mesmo que listas ordenadas possam usar diferentes sistemas de numeração, como números romanos.

<ol start="30">

<li>Head north on N Halsted St</li>

<li>Turn right on W Diversey Pkwy</li>

<li>Turn left on N Orchard St</li>

</ol>

Atributo invertido

O atributo invertido, quando usado no elemento <ol>, permite que uma lista apareça na ordem inversa. Uma lista ordenada de cinco itens numerados de 1 a 5 pode ser revertida e ordenada de 5 para 1.

O atributo invertido é um atributo booleano e, como tal, não aceita nenhum valor. É verdade ou falso. False é o valor padrão; o valor torna-se verdadeiro quando o nome do atributo invertido aparece no elemento <ol>.

<ol reversed>

<li>Head north on N Halsted St</li>

<li>Turn right on W Diversey Pkwy</li>

<li>Turn left on N Orchard St</li>

</ol>

Atributo de valor

O atributo de valor pode ser usado num elemento <li> individual dentro de uma lista ordenada para alterar seu valor dentro da lista. O número de qualquer item da lista que aparece abaixo de um item de lista com um atributo de valor será recalculado em conformidade.

Como exemplo, se o item da segunda lista tiver um valor de atributo de valor de 9, o número desse marcador do item da lista aparecerá como se fosse o nono item. Todos os itens da lista subsequentes serão numerados para cima a partir de 9.

<ol>

<li>Head north on N Halsted St</li>

<li value="9">Turn right on W Diversey Pkwy</li>

<li>Turn left on N Orchard St</li>

</ol>

Listas de descrição

Outro tipo de lista vista on-line (mas não tão frequentemente como listas não ordenadas ou ordenadas) é a lista de descrição. As listas de descrição são usadas para descrever vários termos e as suas descrições, como num glossário, por exemplo.

A criação de uma lista de descrição em HTML é realizada utilizando o elemento de nível de bloco da lista de descrição, <dl>. Em vez de usar um elemento <li> para marcar itens de lista, a lista de descrição requer dois elementos de nível de bloco: o elemento de termo de descrição, <dt> e o elemento de descrição, <dd>.

Uma lista de descrição pode conter vários termos e descrições, uma após a outra. Além disso, uma lista de descrição pode ter vários termos por descrição, bem como várias descrições por prazo. Um único termo pode ter múltiplos significados e justificar múltiplas descrições. Por outro lado, uma única descrição pode ser adequada para múltiplos termos.

Ao adicionar uma lista de descrição, o elemento <dt> deve vir antes do elemento <dd>. O termo de definição e a descrição que segue diretamente correspondem uns aos outros; Assim, a ordem desses elementos é importante.

Por padrão, o elemento <dl> incluirá margens verticais, assim como os elementos <ul> e <ol>. Além disso, o elemento <dd> inclui uma margem esquerda por padrão.

<dl>

<dt>study</dt>

<dd>The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books</dd>

<dt>design</dt>

<dd>A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd>

<dd>Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object</dd>

<dt>business</dt>

<dt>work</dt>

<dd>A person's regular occupation, profession, or trade</dd>

</dl>

Listas de nidificação

Uma característica que torna as listas extremamente poderosas é a capacidade de serem aninhadas. Todas listas podem ser colocadas dentro de outra lista; eles podem ser aninhadas continuamente. Mas o potencial para aniquilar listas indefinidamente não proporciona controlo gratuito para o fazer. As listas ainda devem ser reservadas especificamente para onde possuem o valor mais semântico.

Um truque com listas de nidificação é saber por onde começar e terminar cada lista e item da lista. Falando especificamente sobre listas não ordenadas e ordenadas, como é a maior parte da nidificação, o único elemento que pode residir diretamente nos elementos <ul> e <ol> é o elemento <li>. Para repetir, o único elemento que podemos colocar como filho direto dos elementos <ul> e <ol> é o elemento <li>.

Dito isto, uma vez dentro do elemento <li>, o conjunto padrão de elementos pode ser adicionado, incluindo quaisquer elementos <ul> ou <ol>.

Para aninhar uma lista ao invés de fechar um item da lista, comece uma nova lista. Uma vez que a lista aninhada esteja completa e fechada, feche o item da lista de wrapping e continue com a lista original.

<ol>

<li>Walk the dog</li>

<li>Fold laundry</li>

<li>

`Go to the grocery and buy:`

`<ul>`

  `<li>Milk</li>`

  `<li>Bread</li>`

  `<li>Cheese</li>`

`</ul>`

</li>

<li>Mow the lawn</li>

<li>Make dinner</li>

</ol>

Como as listas de nidificação podem ser um pouco complicadas - e os estilos indesejados aparecerão se for feito incorretamente - vamos rapidamente rever. Os elementos <ul> e <ol> podem conter apenas elementos <li>. O elemento <li> pode conter qualquer elemento normal conforme desejado; no entanto, o elemento <li> deve ser um filho direto de um elemento <ul> ou <ol>.

Também vale a pena notar que, à medida que as listas são aninhadas dentro de outras listas, os marcadores de itens da lista mudarão de acordo com a profundidade da lista. No exemplo anterior, a lista não ordenada aninhada dentro da lista ordenada usa círculos ocos em vez de discos sólidos como o marcador do item da lista. Essa alteração acontece porque a lista não ordenada é aninhada a um nível na lista ordenada.

Felizmente, temos controlo sobre como esses marcadores de itens de lista aparecem em qualquer nível, o que vamos ver de seguida.

Estilo de item da lista

As listas não ordenadas e ordenadas usam marcadores de item de lista por padrão. Para listas não ordenadas, esses são geralmente pontos sólidos, enquanto as listas ordenadas normalmente usam números. Com CSS, o estilo e a posição desses marcadores de itens de lista podem ser ajustados.

Tipo de estilo da lista

A propriedade tipo lista-estilo é usada para definir o conteúdo de um marcador de item de lista. Os valores disponíveis variam de quadrados e números decimais até a numeração arménia e o estilo pode ser colocado nos elementos <ul>, <ol> ou <li> dentro do CSS.

Qualquer valor de propriedade de estilo de lista pode ser adicionado a listas não ordenadas ou ordenadas. Com isso em mente, é possível usar um marcador de item de lista numérico numa lista desordenada e um marcador não-numérico numa lista ordenada.

HTML

<ul>

<li>Orange</li>

<li>Green</li>

<li>Blue</li>

</ul>

CSS

ul {

list-style-type: square;

}

Valores do tipo de estilo da lista

Conforme mencionado anteriormente, a propriedade tipo lista-estilo vem com um punhado de valores diferentes. A lista a seguir descreve esses valores, bem como o conteúdo correspondente.

Usando uma imagem como um marcador de item de lista

Pode chegar uma altura em que os valores de propriedades do tipo de lista padrão não são suficientes e queremos personalizar o nosso próprio marcador de item de lista. Isso é mais comumente realizado colocando uma imagem de plano de fundo em cada elemento <li> dentro de uma lista.

O processo inclui a remoção de qualquer valor padrão da propriedade do tipo lista-estilo e a adição de uma imagem de fundo e preenchimento ao elemento <li>.

Em detalhes, o valor de propriedade do tipo de lista de nenhum removerá os marcadores de itens de lista existentes. A propriedade de fundo identificará uma imagem de plano de fundo, juntamente com sua posição e valor de repetição, se necessário. E a propriedade de preenchimento proporcionará espaço à esquerda do texto para a imagem de fundo.

HTML

<ul>

<li>Orange</li>

<li>Green</li>

<li>Blue</li>

</ul>

CSS

li {

background: url("arrow.png") 0 50% no-repeat;

list-style-type: none;

padding-left: 12px;

}

Propriedade da posição do estilo da lista

Por padrão, o marcador do item da lista fica à esquerda do conteúdo no elemento <li>. Este posicionamento em estilo de lista é descrito como fora, o que significa que todo o conteúdo aparecerá diretamente à direita, fora do marcador do item da lista. Usando a propriedade list-style-position, podemos alterar o valor padrão de fora para dentro ou herdar.

O valor da propriedade externa coloca o marcador do item da lista à esquerda do elemento <li> e não permite que nenhum conteúdo se envolva abaixo do marcador do item da lista. O valor da propriedade interna (que raramente é visto ou usado) coloca o marcador do item da lista de acordo com a primeira linha do elemento <li> e permite que outro conteúdo se envolva abaixo dele conforme necessário.

HTML

<ul>

<li>Cupcakes...</li>

<li>Sprinkles...</li>

</ul>

CSS

ul {

list-style-position: inside;

}

Propriedade em Estilo da Lista Estadiónica

As propriedades de estilo de lista discutidas até agora, list-style-position e position-style-list, podem ser combinadas num valor de propriedade de estilo de lista abreviada. Ao usar a propriedade de estilo de lista, podemos usar um ou todos os valores da propriedade do estilo da lista ao mesmo tempo. A ordem desses valores abreviados deve ser tipo de list-style seguido de list-style-position.

Propriedade em Estilo da Lista Estadiónica

As propriedades de estilo de lista discutidas até agora, list-style-position e position-style-list, podem ser combinadas num valor de propriedade de estilo de lista abreviada. Ao usar a propriedade de estilo de lista, podemos usar um ou todos os valores da propriedade do estilo da lista ao mesmo tempo. A ordem desses valores abreviados deve ser tipo de list-style seguido de list-style-position.

ul {

list-style: circle inside;

}

ol {

list-style: lower-roman;

}

Mostrar a lista horizontalmente

Ocasionalmente, podemos querer exibir listas horizontalmente em vez de verticalmente. Talvez queiramos dividir uma lista em várias colunas, criar uma lista de navegação ou colocar alguns itens de lista numa única linha. Dependendo do conteúdo e da aparência desejada, existem algumas maneiras diferentes de exibir listas como uma única linha, como por exemplo, fazendo com que o valor da propriedade de exibição dos elementos <li> seja inline ou inline-block ou floating.

Exibindo lista

A maneira mais rápida de exibir uma lista numa única linha é dar aos elementos <li> um valor de propriedade de exibição de inline ou inline-block. Assim, colocamos todos os elementos <li> dentro de uma única linha, com um único espaço entre cada item da lista.

Se os espaços entre cada um dos elementos <li> forem problemáticos, eles podem ser removidos usando as mesmas técnicas que discutimos na Lição 5, "Posicionando o conteúdo".

Na maioria das vezes, usaremos o valor da propriedade inline-block em vez do valor da propriedade inline. O valor da propriedade do bloco em linha permite-nos adicionar facilmente margens verticais e outros espaçamentos aos elementos <li>, enquanto que o valor da propriedade em linha não.

Ao alterar o valor da propriedade de exibição para inline ou inline-block, o marcador do item da lista, seja uma bala, número ou outro estilo, é removido.

HTML

<ul>

<li>Orange</li>

<li>Green</li>

<li>Blue</li>

</ul>

CSS

li {

display: inline-block;

margin: 0 10px;

}

Lista flutuante

Alterar o valor da propriedade de exibição para inline ou inline-block é rápido, no entanto, ele remove o marcador do item da lista. Se o marcador do item de lista for necessário, flutuar cada elemento <li> é uma opção melhor do que alterar a propriedade de exibição.

Definir toda a propriedade flutuante de elementos <li> para a esquerda alinhará horizontalmente todos os elementos <li> diretamente ao lado uns dos outros sem nenhum espaço entre eles. Quando flutuamos cada elemento <li>, o marcador do item da lista é exibido por padrão e, na verdade, ficará no topo do elemento <li> ao lado dele. Para evitar que o marcador do item da lista seja exibido em cima de outros elementos <li>, uma margem ou preenchimento horizontal deve ser adicionado.

HTML

<ul>

<li>Orange</li>

<li>Green</li>

<li>Blue</li>

</ul>

CSS

li {

float: left;

margin: 0 20px;

}

Demonstração da lista flutuante

Como quando flutuamos qualquer elemento, isso quebra o fluxo da página. Devemos lembrar-nos de limpar os nossos carros - mais comumente com a técnica clearfix - e devolver a página ao seu fluxo normal.

Exemplo da lista de navegação

Muitas vezes, desenvolveremos e encontraremos menus de navegação usando listas não ordenadas. Essas listas são comumente estabelecidas como listas horizontais, usando qualquer uma das duas técnicas anteriormente mencionadas. Aqui está um exemplo de um menu de navegação horizontal marcado usando uma lista não ordenada com elementos <li> exibidos como elementos de bloco em linha.

HTML

<nav class="navigation">

<ul>

`<li><a href="#">Profile</a></li><!--`

`--><li><a href="#">Settings</a></li><!--`

`--><li><a href="#">Notifications</a></li><!--`

`--><li><a href="#">Logout</a></li>`

</ul>

</nav>

CSS

.navigation ul {

font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;

margin: 0;

padding: 0;

text-transform: uppercase;

}

.navigation li {

display: inline-block;

}

.navigation a {

background: #395870;

background: linear-gradient(#49708f, #293f50);

border-right: 1px solid rgba(0, 0, 0, .3);

color: #fff;

padding: 12px 20px;

text-decoration: none;

}

.navigation a:hover {

background: #314b60;

box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);

}

.navigation li:first-child a {

border-radius: 4px 0 0 4px;

}

.navigation li:last-child a {

border-right: 0;

border-radius: 0 4px 4px 0;

}

Na prática

Agora que sabemos como criar listas dentro de HTML e CSS, vamos voltar ao nosso site da Conferência Styles e ver onde poderemos usar listas.

1. Atualmente, os menus de navegação dentro dos elementos <header> e <footer> nas páginas consistem num punhado de elementos de âncora. Esses elementos âncora podem ser melhor organizados numa lista desordenada.

Usar uma lista não ordenada (através do elemento <ul>) e itens de lista (através do elemento <li>) dará estrutura aos nossos menus de navegação. Esses novos elementos, no entanto, exibirão os nossos menus de navegação verticalmente.

Vamos querer mudar o valor de exibição dos nossos elementos <li> para o bloco in-line para obtê-los todos para alinhar numa linha horizontal. No entanto, quando fizermos isso, também precisamos de ter em conta o espaço em branco deixado entre cada elemento <li>. Pensando na Lição 5, "Posicionando Conteúdo", sabemos que abrir um comentário HTML no final de um elemento <li> e fechar um comentário HTML no início de um elemento <li> irá remover esse espaço.

Tendo isso em mente, a marcação para o menu de navegação dentro do nosso elemento <header> agora será assim:

<nav class="nav primary-nav">

<ul>

`<li><a href="index.html">Home</a></li><!--`

`--><li><a href="speakers.html">Speakers</a></li><!--`

`--><li><a href="schedule.html">Schedule</a></li><!--`

`--><li><a href="venue.html">Venue</a></li><!--`

`--><li><a href="register.html">Register</a></li>`

</ul>

</nav>

Nessa mesma linha, a marcação para o menu de navegação dentro do nosso elemento <footer> agora será assim:

<nav class="nav">

<ul>

`<li><a href="index.html">Home</a></li><!--`

`--><li><a href="speakers.html">Speakers</a></li><!--`

`--><li><a href="schedule.html">Schedule</a></li><!--`

`--><li><a href="venue.html">Venue</a></li><!--`

`--><li><a href="register.html">Register</a></li>`

</ul>

</nav>

Não nos podemos esquecer de fazer essas mudanças em todos os nossos arquivos HTML.

1. Com a lista desordenada no lugar, vamos certificar-nos de que os itens da lista se alinham horizontalmente e vamos limpar os seus estilos um pouco. Vamos usar a classe nav existente para ajudar a atingir os novos estilos.

Começaremos por definir todos os elementos <li> dentro de qualquer elemento com o valor de atributo de classe do nav para ser exibido no bloco em linha, para incluir algumas margens horizontais e para ser alinhado verticalmente ao topo do elemento.

Além disso, usaremos o seletor de pseudo-classe de último filho para identificar o último elemento <li> e redefinir a margem direita para 0. Isso garante que qualquer espaço horizontal entre o elemento <li> e a borda do seu pai O elemento é removido.

Dentro do nosso arquivo main.css, abaixo de nossos estilos de navegação existentes, vamos adicionar o seguinte CSS:

.nav li {

display: inline-block;

margin: 0 10px;

vertical-align: top;

}

.nav li:last-child {

margin-right: 0;

}

Pode estar a perguntar-se por que a nossa lista desordenada não incluiu nenhum marcadore de itens da lista ou estilos padrão. Esses estilos foram removidos pela reinicialização na parte superior da nossa folha de estilos. Se olharmos para o reset, veremos os nossos elementos <ol>, <ul> e <li> todos incluem uma margem e preenchimento de 0, e os nossos elementos <ol> e <ul> têm um valor de estilo de lista de nenhum.

1. Os nossos menus de navegação não são os únicos lugares em que usaremos as listas. Nós também os usaremos em algumas das nossas páginas internas, incluindo a página Speakers. Vamos adicionar alguns oradores à nossa conferência.

Dentro do nosso arquivo speakers.html logo abaixo da nossa secção principal, vamos criar uma nova secção onde apresentaremos todos os nossos alto-falantes. Reutilizando alguns estilos existentes, usamos um elemento <section> com um valor de atributo de classe de linha para embrulhar todos os nossos alto-falantes e aplicar um fundo branco e preencher atrás deles. Dentro do elemento <section>, adicionaremos um elemento <div> com um valor de atributo de classe da grade para centrar nossos alto-falantes na página e nos permitirmos usar várias colunas ao fazê-lo.

Até agora o nosso HTML abaixo da seção principal parece assim:

<section class="row">

<div class="grid">

</div>

</section>

1. Dentro da grade, cada alto-falante será marcado com o seu próprio elemento <section>, que incluirá duas colunas. A primeira coluna abrangerá dois terços do elemento <section> e será marcada usando um elemento <div>. A segunda coluna abrangerá o terço restante do elemento <section> e será marcada usando um elemento <aside>, pois o seu conteúdo é secundário para o falante e a sua conversa específica.

Usando as nossas classes col-2-3 e col-1-3 existentes, o contorno para uma seção de alto-falante será assim:

<section id="shay-howe">

<div class="col-2-3">

`...`

</div><!--

--><aside class="col-1-3">

`...`

</aside>

</section>

Existem alguns itens a serem observados aqui. Primeiro, cada elemento <section> para cada orador inclui um atributo ID com o nome do orador como o valor do atributo. Mais tarde, quando criamos o cronograma para a nossa conferência, esses atributos de identificação servirão como âncoras, permitindo-nos vincular a partir do cronograma ao perfil de um falante.

Além disso, a tag de fecho do elemento <div> é seguida pela abertura de um comentário HTML, e a tag de abertura do elemento <aside> é precedida do fecho de um comentário HTML. Como as classes baseadas em coluna exibirão esses elementos como elementos do bloco em linha, estamos a remover o espaço em branco que aparecerá entre eles.

1. Dentro da coluna de dois terços, marcada com o elemento <div>, usaremos alguns títulos e parágrafos para mostrar o nome do falante, o título e o resumo da palestra e uma breve biografia.

Incluindo este conteúdo, uma seção de alto-falante será assim:

section id="shay-howe">

<div class="col-2-3">

`<h2>Shay Howe</h2>`

`<h5>Less Is More: How Constraints Cultivate Growth</h5>`

`<p>By setting constraints, we force ourselves...</p>`

`<h5>About Shay</h5>`

`<p>As a designer and front-end developer, Shay...</p>`

</div><!--

--><aside class="col-1-3">

`...`

</aside>

</section>

1. Dentro da coluna de um terço, marcada com um elemento <aside>, vamos adicionar um elemento <div> com um valor de atributo de classe de informações de alto-falante. Usaremos um elemento <div> porque iremos adicionar estilos a este elemento em breve.

Antes de entrar em qualquer estilo, vamos adicionar uma lista desordenada no elemento <div> que inclui como itens de lista alguns links relevantes para o falante.

Agora, o nosso HTML para um orador será assim:

<section id="shay-howe">

<div class="col-2-3">

`<h2>Shay Howe</h2>`

`<h5>Less Is More: How Constraints Cultivate Growth</h5>`

`<p>By setting constraints, we force ourselves...</p>`

`<h5>About Shay</h5>`

`<p>As a designer and front-end developer, Shay...</p>`

</div><!--

--><aside class="col-1-3">

`<div class="speaker-info">`

  `<ul>`

    `<li><a href="https://twitter.com/shayhowe">@shayhowe</a></li>`

    `<li><a href="http://learn.shayhowe.com/">learn.shayhowe.com</a></li>`

  `</ul>`

`</div>`

</aside>

</section>

1. Com o elemento <div> com um valor de atributo de classe de informações de altifalante pronto, podemos adicionar-lhe alguns estilos.

Começamos por adicionar uma nova secção dentro do nosso arquivo main.css para os estilos de página do altifalante. A partir daí, vamos adicionar uma borda cinza sólido de 1 pixel com um raio de 5 píxeis em torno de qualquer elemento que inclua o valor do atributo da classe da informação do alto-falante.

Em seguida, vamos adicionar uma margem superior de 88 píxeis para posicionar o elemento na mesma linha vertical do primeiro parágrafo da descrição da conversa e também adicionar 22 píxeis de preenchimento vertical dentro do elemento para fornecer espaço para a lista não ordenada aninhada.

Por fim, vamos centrar todo o texto dentro do elemento.

No total, o nosso CSS para o conjunto de regras de classe de falante-info parece:

/*

========================================

Speakers

========================================

*/

.speaker-info {

border: 1px solid #dfe2e5;

border-radius: 5px;

margin-top: 88px;

padding: 22px 0;

text-align: center;

}

Vamos dar um minuto para avaliar por que estamos usando um elemento <div> aqui e os estilos correspondentes.

Estamos colocando um elemento <div> dentro do elemento <aside> com o valor de atributo de classe de col-1-3 porque queremos que o preenchimento herdado da classe col-1-3 esteja fora da borda no elemento <div>. Em pouco tempo, iremos incluir uma imagem dentro do elemento <div>, ao lado da lista desordenada; portanto, criamos um elemento <div> ao invés de aplicar esses estilos diretamente ao elemento <ul>.

1. À medida que adicionamos mais e mais altifalantes à página, queremos garantir que eles permaneçam separados na vertical. Para fazer isso, criaremos um conjunto de regras de classe de falante que inclua uma margem inferior de 44 píxeis, como este:

.speaker {

margin-bottom: 44px;

}

Podemos então aplicar esta classe ao elemento <section> para cada falante, desde que não seja o último orador. Nós omitiremos esta classe no último orador, pois não queremos criar margens desnecessárias antes do nosso elemento <footer>. Com mais de um falante, o nosso layout ficará assim:

<section class="row">

<div class="grid">

`<section class="speaker" id="chris-mills">`

  `<div class="col-2-3">`

    `...`

  `</div><!--`

  `--><aside class="col-1-3">`

    `...`

  `</aside>`

`</section>`

`<section id="shay-howe">`

  `<div class="col-2-3">`

    `...`

  `</div><!--`

  `--><aside class="col-1-3">`

    `...`

  `</aside>`

`</section>`

</div>

</section>

Observe como o elemento do primeiro altifalante <section>, para Chris Mills, inclui o valor do atributo da classe do altifalante, que o separa verticalmente do elemento <section> do alto-falante para mim, Shay Howe. O último elemento do falante <section>, novamente para mim, não inclui um valor de atributo de classe do alto-falante para mantê-lo a uma distância adequada do elemento <footer>.

Os nossos menus de navegação estão agora completos e a página de altifalantes está tomando forma.

Resumo

As listas são bastante utilizadas em HTML, muitas vezes em locais que podem não ser óbvios ou aparentes. A chave é usá-los de forma semanticamente possível e alavancá-los onde eles se encaixam melhor.

Vamos recapitular. Dentro desta lição, cobrimos o seguinte:

• Como criar listas não ordenadas, encomendadas e de descrição

• Como aninhar corretamente listas dentro de outras listas

• Como alterar o estilo e a posição do marcador da lista

• Como usar uma imagem de fundo em vez de um marcador de item de lista

• Como exibir ou flutuar horizontalmente listas

Agora que sabemos como adicionar listas às nossas páginas, adicione mídia também às nossas páginas. No próximo capítulo, mergulharemos em mídias embutidas, como imagens, áudio e vídeo.