[Sugestão] dica para agilidade na criação de listas(vs code) | HTML5 e CSS3 parte 1: crie uma página da Web | Alura - Cursos online de tecnologia

2
respostas

Referente ao curso HTML5 e CSS3 parte 1: crie uma página da Web, no capítulo Listas e divisões de conteúdo e atividade Trabalhando com listas

por Ellen Cristine

| 103.4k xp | 2 posts

estagiária

Dentro de "ol" ou "ul" basta digitar: li*(quantidade de tópicos que você quer) e dar um tab. Exemplo:

Imagem da execução

<ol>
    li*3
</ol>
Dê tab

*Resultado: *

<ol>    
    <li></li>
    <li></li>
    <li></li>
</ol>

Outras Dicas

para criar mais de um tópico com classes iguais faça: execução2

<ul>
    li.item*3
</ul>
Dê um tab.

Resultado: resultado2

<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

Depois pode-se adicionar números ex: "item1", "item2", para diferenciar os itens.

2 respostas

por Ellen Cristine

| 103.4k xp | 2 posts

estagiária

27/11/2022

no sublime text infelizmente não é possível a execução, mas para quem está estudando usando o Visual Studio Code, a dica é útil.

por Noberto Luis Martins Ferreira Filho

| 127.3k xp | 77 posts

Frontend developer

27/11/2022

oi, realmente é muito útil. sugiro pesquisarem por EMMET pois as possibilidades são infinitas.

o exemplo acima para daria ser todo feito assim:

ul.lista>li.item*3

já nesse exemplo abaixo é criada a mesma lista, porém com uma < a > dentro de cada LI.

ul.lista1>(li.item>a.item__link)*3+li#current>a.item__link

<ul class="lista1">
    <li class="item"><a class=item__link></a></li>
    <li class="item"><a class=item__link></a></li>
    <li class="item"><a class=item__link></a></li>
    <li id="current"><a class=item__link></a></li>
</ul>