Listas

Listas Ordenadas

Padrão - decimal

  1. Summus morbo vel maleficia de apocalypsi
  2. Quem num gosta di mé boa gentis num é
  3. Monti palavris qui num significa nadis i pareci latim
  4. Atirei o pau no gatis per gatis num morreus
  5. Cillum dolore eu fugiat nulla pariatur
  6. Si num tem leite então bota uma pinga aí cumpadi
  7. Mauris ante malesuada congue interdum quis
<ol>
    <li>Adipisicing utad enim minim veniam</li>
    <li>In elementis mé pra quem é amistosis</li>
    <li>Nostrud exercitation ullamco laboris</li>
    <li>Virus suscitat mortuos that carnem human</li>
    <li>Per aumento de cachacis eu reclamis</li>
    <li>Corpse terrible incessu the voodoo sacerdos</li>
</ol>

Decimal com zero inicial

  1. Mussum cacilds vidis litro abertis
  2. Em pé sem cair, deitado sem dormir, sentado sem cochilar
  3. In elementis mé pra quem é amistosis
  4. Cras tincidunt placerat non mollit on vel
  5. Pindureta nois paga e fazendo pose
  6. Si num tem Mussum ipsum infelizes
  7. In elementis mé pra quem é amistosis
<ol class="ini0">
    <li>Não sou faixa preta cumpadi sou inteiris</li>
    <li>Tempor incididunt labore dolore magna</li>
    <li>Donec nulla molestie eget gravida sapien</li>
    <li>Aliquet malesuada quis it amet</li>
    <li>Donec nulla molestie eget gravida sapien</li>
    <li>Em pé sem cair, deitado sem dormir</li>
</ol>

Letras minúsculas

  1. Donec nulla molestie eget gravida sapien
  2. Innec elit volutpat molestie eiusmod
  3. Monti palavris qui num significa nadis i pareci latim
  4. A ordem dos tratores não altera o pão duris
  5. Adipisicing utad enim minim veniam
  6. Pindureta nois paga e fazendo pose
  7. Per aumento de cachacis eu reclamis
<ol class="lowercase">
    <li>A ordem não altera o pão duris</li>
    <li>Copo furadis é disculpa de bebadis</li>
    <li>Duis aute irure dolor in reprehenderit</li>
    <li>Donec nulla molestie eget gravida sapien</li>
    <li>Aenean pulvinar metus vitae</li>
    <li>Mauris ante malesuada congue interdum</li>
</ol>

Letras maiúsculas

  1. Pellentesque bibendum justo dignissim pellentesque
  2. Innec elit volutpat molestie eiusmod
  3. Excepteur sint occaecat cupidatat
  4. Omero survivor hi mindless mortuis
  5. Zombie ipsum reversus, the viral infernal
  6. Per aumento de cachacis eu reclamis
  7. Em pé sem cair, deitado sem dormir, sentado sem cochilar
<ol class="uppercase">
    <li>Duis aute irure dolor in reprehenderit</li>
    <li>A ordem dos tratores não altera o pão duris</li>
    <li>Si num tem Mussum ipsum infelizes</li>
    <li>Nisi elit aliquip commodo sed esse</li>
    <li>A ordem dos tratores não altera o pão duris</li>
    <li>Aliquam sodares purus maximus pharetra</li>
</ol>

Números romanos

  1. Consequat do voluptate velit anim
  2. Nescio horror comedere defunctis golum cerebro
  3. Quem num gosta di mé boa gentis num é
  4. Nescio horror comedere defunctis golum cerebro
  5. Aliquet malesuada quis it amet, eu odio non nibh aliquet
  6. Nisi elit aliquip commodo sed esse
  7. Corpse terrible incessu the voodoo sacerdos
<ol class="roman">
    <li>Sem Mussum ipsum infelizes</li>
    <li>Est laborum sollicitudin tincidunt</li>
    <li>De carne muerta cerebro continus</li>
    <li>Duis aute irure dolor reprehenderit</li>
    <li>Omero survivor hi mindless mortuis</li>
    <li>Copo furadis é disculpa de bebadis</li>
</ol>

Listas não Ordenadas

Padrão - disco externo disc - outside

  • Virus suscitat mortuos that carnem human
  • Innec elit volutpat molestie eiusmod
  • De carne muerta corpora malum cerebro continus
  • Consequat do voluptate velit anim
  • Vivamus cursus sed molestie pulvinar
  • Innec elit volutpat molestie eiusmod
  • Soulless creaturas evil stalking adventus
<ul>
    <li>Ipsum dolor sit amet consectetur</li>
    <li>Donec nulla molestie eget gravida sapien</li>
    <li>A ordem dos tratores não altera o pão duris</li>
    <li>Cras tincidunt placerat non mollit on vel</li>
    <li>Atirei o pau no gatis per gatis num morreus</li>
    <li>Pindureta nois paga e fazendo pose</li>
</ul>

Disco interno disc - inside

  • Cillum dolore eu fugiat nulla pariatur
  • Per aumento de cachacis eu reclamis
  • Duis aute irure dolor in reprehenderit
  • Per aumento de cachacis eu reclamis
  • Corpse terrible incessu the voodoo sacerdos
  • Atirei o pau no gatis per gatis num morreus
  • Omero survivor hi mindless mortuis
<ul class="inside">
    <li>Monti palavris qui num significa nadis</li>
    <li>Sem Mussum ipsum infelizes</li>
    <li>Duis aute irure dolor in reprehenderit</li>
    <li>Adipisicing utad enim minim veniam</li>
    <li>Si num tem Mussum ipsum infelizes</li>
    <li>A ordem dos tratores não altera o pão duris</li>
</ul>

Circular list-style: circle

  • Nisi elit aliquip commodo sed esse
  • Pellentesque bibendum justo dignissim pellentesque
  • Est laborum sollicitudin tincidunt
  • Cras tincidunt placerat non mollit on vel
  • A ordem dos tratores não altera o pão duris
  • Innec elit volutpat molestie eiusmod
  • Zombie ipsum reversus, the viral infernal
<ul class="circle">
    <li>Num tem leite então bota uma pinga aí cumpadi</li>
    <li>De carne muerta corpora malum cerebro continus</li>
    <li>Não sou faixa preta cumpadi sou preto inteiris</li>
    <li>Omero survivor hi mindless mortuis</li>
    <li>Quem num gosta di mé boa gentis num é</li>
    <li>Pellentesque bibendum justo dignissim</li>
</ul>

Quadrangular list-style: square

  • Atirei o pau no gatis per gatis num morreus
  • A ordem dos tratores não altera o pão duris
  • Pindureta nois paga e fazendo pose
  • Em pé sem cair, deitado sem dormir, sentado sem cochilar
  • Per aumento de cachacis eu reclamis
  • Non proident sunt culpa qui officia deserunt
  • Copo furadis é disculpa de bebadis
<ul class="square">
    <li>Quem num gosta di mé boa gentis num é</li>
    <li>Donec nulla molestie eget gravida sapien</li>
    <li>A ordem dos tratores não altera o pão duris</li>
    <li>Corpse terrible incessu the voodoo sacerdos</li>
    <li>Mussum cacilds vidis litro abertis</li>
    <li>Excepteur sint occaecat cupidatat</li>
</ul>

Marcador verificado ::marker checked

  • Soulless creaturas evil stalking adventus
  • Aliquam sodares purus maximus pharetra
  • Atirei o pau no gatis per gatis num morreus
  • Omero survivor hi mindless mortuis
  • Virus suscitat mortuos that carnem human
  • Excepteur sint occaecat cupidatat
  • Si num tem Mussum ipsum infelizes
<ul class="checked">
    <li>Soulless creaturas evil stalking adventus</li>
    <li>Innec elit volutpat molestie eiusmod</li>
    <li>Donec nulla molestie eget gravida sapien</li>
    <li>Ipsum dolor sit amet consectetur</li>
    <li>Non proident sunt culpa qui deserunt</li>
    <li>Nisi elit aliquip commodo sed esse</li>
</ul>

Marcador com hífen ::marker hyphen

  • De carne muerta corpora malum cerebro continus
  • Per aumento de cachacis eu reclamis
  • Zombie ipsum reversus, the viral infernal
  • In elementis mé pra quem é amistosis
  • Virus suscitat mortuos that carnem human
  • Nisi elit aliquip commodo sed esse
  • In elementis mé pra quem é amistosis
<ul class="hyphen">
    <li>Corpse terrible incessu the voodoo sacerdos</li>
    <li>Pellentesque bibendum justo dignissim pellentesque</li>
    <li>Si tem leite então bota uma pinga aí cumpadi</li>
    <li>Non proident sunt culpa qui officia deserunt</li>
    <li>Nisi elit aliquip commodo sed esse</li>
    <li>De carne muerta corpora malum cerebro continus</li>
</ul>

Marcador mais ::marker plus

  • Em pé sem cair, deitado sem dormir, sentado sem cochilar
  • Aliquam sodares purus maximus pharetra
  • Virus suscitat mortuos that carnem human
  • Cras tincidunt placerat non mollit on vel
  • Adipisicing utad enim minim veniam
  • Cras tincidunt placerat non mollit on vel
  • Corpse terrible incessu the voodoo sacerdos
<ul class="plus">
    <li>Quem num gosta di mé boa gentis num é</li>
    <li>In elementis mé pra quem é amistosis</li>
    <li>Quem num gosta di mé boa gentis num é</li>
    <li>Cras placerat non mollit on vel</li>
    <li>Omero survivor hi mindless mortuis</li>
    <li>Adipisicing utad enim minim veniam</li>
</ul>

Marcador com seta ::marker arrow

  • Não sou faixa preta cumpadi sou preto inteiris
  • Em pé sem cair, deitado sem dormir, sentado sem cochilar
  • Vivamus cursus sed molestie pulvinar
  • Copo furadis é disculpa de bebadis
  • De carne muerta corpora malum cerebro continus
  • Monti palavris qui num significa nadis i pareci latim
  • Ipsum dolor sit amet consectetur
<ul class="arrow">
    <li>Cevadis im ampola pa arma uma pindureta</li>
    <li>Summus morbo vel maleficia de apocalypsi</li>
    <li>Ipsum dolor sit amet consectetur</li>
    <li>Vivamus cursus sed molestie pulvinar</li>
    <li>Excepteur sint occaecat cupidatat</li>
    <li>Virus suscitat mortuos that carnem human</li>
</ul>

Marcador com estrela ::marker star

  • Consequat do voluptate velit anim
  • Não sou faixa preta cumpadi sou preto inteiris
  • Vivamus cursus sed molestie pulvinar
  • Atirei o pau no gatis per gatis num morreus
  • Vivamus cursus sed molestie pulvinar
  • Soulless creaturas evil stalking adventus
  • Donec nulla molestie eget gravida sapien
<ul class="star">
    <li>Corpse terrible incessu the voodoo sacerdos</li>
    <li>Excepteur sint occaecat cupidatat</li>
    <li>Excepteur sint occaecat cupidatat</li>
    <li>Aenean pulvinar metus vitae</li>
    <li>Copo furadis é disculpa de bebadis</li>
    <li>Donec nulla molestie eget gravida sapien</li>
</ul>

Marcador com coração ::marker heart

  • Est laborum sollicitudin tincidunt
  • Copo furadis é disculpa de bebadis
  • Nisi elit aliquip commodo sed esse
  • Corpse terrible incessu the voodoo sacerdos
  • Quem num gosta di mé boa gentis num é
  • Excepteur sint occaecat cupidatat
  • Nescio horror comedere defunctis golum cerebro
<ul class="heart">
    <li>Cevadis im ampola pa arma uma pindureta</li>
    <li>Innec elit volutpat molestie eiusmod</li>
    <li>Tempor incididunt labore dolore magna aliqua</li>
    <li>Corpse terrible incessu the voodoo sacerdos</li>
    <li>Pellentesque bibendum dignissim pellentesque</li>
    <li>Virus suscitat mortuos that carnem human</li>
</ul>

Sem marcador

  • Cevadis im ampola pa arma uma pindureta
  • In elementis mé pra quem é amistosis
  • Ipsum dolor sit amet consectetur
  • Omero survivor hi mindless mortuis
  • Vivamus cursus sed molestie pulvinar
  • Aliquam sodares purus maximus pharetra
  • Não sou faixa preta cumpadi sou preto inteiris
<ol class="unlist">
    <li>Mussum.</li>
    <li>Zombie..</li>
    <li>Ipsum...</li>
</ol>

<ul class="unlist">
    <li>Mussum.</li>
    <li>Zombie..</li>
    <li>Ipsum...</li>
</ul>

Item de lista inline list inline-block

  1. HTML5
  2. CSS3
  3. JavaScript
  4. PHP
  5. MySQL
  6. Apache
<ol class="unlist inline">
    <li>HTML<sup>5</sup></li>
    <li>CSS<sup>3</sup></li>
    <li>JavaScript</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>Apache</li>
</ol>

<ul class="unlist inline">
    <li>HTML<sup>5</sup></li>
    <li>CSS<sup>3</sup></li>
    <li>JavaScript</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>Apache</li>
</ul>

Lista dl, dt, dd

Zombie
Summus morbo vel maleficia de apocalypsi
DummyText
Nostrud feugiat lectus curae nesciunt voluptatum
Mussum
Suco de cevadiss é um leite divinis qui tem:
lupuliz
matis
aguis
fermentis
Lorem
Dolor sit amet consectetur adipisicing elit excepteur
<dl>
    <dt>.ipsum:</dt>

    <dt>Zombie</dt>
    <dd>Summus morbo vel maleficia de apocalypsi</dd>

    <dt>DummyText</dt>
    <dd>Nostrud feugiat lectus curae nesciunt voluptatum</dd>

    <dt>Mussum</dt>
    <dd>Suco de cevadiss é um leite divinis qui tem:</dd>
    <dd>lupuliz</dd>
    <dd>matis</dd>
    <dd>aguis</dd>
    <dd>fermentis</dd>

    <dt>Lorem</dt>
    <dd>Dolor sit amet consectetur adipisicing elit excepteur</dd>
</dl>

/** padroes em reset.css */
/* ....................................................

 * Listas ordenadas 
    
 * ..................................................... */
ol.ini0, ol.lowercase, ol.uppercase {
    padding-left: 34px;
}
ol.ini0 {
    list-style: decimal-leading-zero;
}
ol.lowercase {
    list-style: lower-latin;
}
ol.uppercase {
    list-style: upper-latin;
}
ol.lowercase li::marker, ol.uppercase li::marker {
    font-family: var(--fontMono);
}
ol.roman {
    margin-left: 25px;
}
ol.roman li {
    position: relative;
    list-style: none;
    counter-increment: listroman 1;
}
ol.roman li::before {
    position: absolute;
    top: -3px;
    left: -40px;
    line-height: 2;
    content: counter(listroman, upper-roman) '.'; /* counter(listroman, upper-roman) ".\00A0 " */
    font-family: var(--fontSerif);
}


/* ....................................................

 * Listas nao ordenadas 
      
 * ..................................................... */
ul.inside {
    list-style: inside;
}
ul.circle {
    list-style: circle;
}
ul.square {
    list-style: square;
}
ul.checked {
    list-style: '\02713'; /* ✓ */
}
ul.checked li::marker {
    font-size: 17px;
    font-weight: bold;
}

ul.hyphen {
    list-style: '\2013'; /* – − */
}
ul.hyphen li::marker {
    font-size: 17px;
    font-weight: bold;
}

ul.plus {
    list-style: '\002B'; /* + + */
}
ul.plus li::marker {
    font-size: 21px;
    font-weight: bold;
}

ul.arrow {
    list-style: '\027A4'; /* ➤ */
}
ul.arrow li {
    padding-left: 4px;
}
ul.arrow li::marker {
    font-size: 12.5px;
}

ul.star {
    list-style: '\2605'; /* ★ */
}
ul.star li::marker {
    font-size: 20px;
}
ul.heart {
    list-style: '\2665'; /* ♥  ♥*/
}
ul.heart li::marker {
    font-size: 18px;
}
ul.checked li, ul.hyphen li, ul.plus li, ul.star li, ul.heart li {
    padding-left: 6px;
}


.unlist {
    padding: 0 0;
    margin: 0 0;
    list-style: none;
}
ol.inline li, ul.inline li {
    display: inline-block;
    padding: 5px 10px;
}