Listas

Listas Ordenadas

Padrão - decimal

  1. Est laborum sollicitudin tincidunt
  2. Não sou faixa preta cumpadi sou preto inteiris
  3. Nescio horror comedere defunctis golum cerebro
  4. Cillum dolore eu fugiat nulla pariatur
  5. De carne muerta corpora malum cerebro continus
  6. Soulless creaturas evil stalking adventus
  7. Aenean pulvinar metus vitae
<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. Est laborum sollicitudin tincidunt
  2. Summus morbo vel maleficia de apocalypsi
  3. Innec elit volutpat molestie eiusmod
  4. Nostrud exercitation ullamco laboris
  5. Em pé sem cair, deitado sem dormir, sentado sem cochilar
  6. Innec elit volutpat molestie eiusmod
  7. Nostrud exercitation ullamco laboris
<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. De carne muerta corpora malum cerebro continus
  2. Cevadis im ampola pa arma uma pindureta
  3. Est laborum sollicitudin tincidunt
  4. Aliquam sodares purus maximus pharetra
  5. Pindureta nois paga e fazendo pose
  6. Pindureta nois paga e fazendo pose
  7. Mauris ante malesuada congue interdum quis
<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. Excepteur sint occaecat cupidatat
  2. Est laborum sollicitudin tincidunt
  3. Donec nulla molestie eget gravida sapien
  4. Aenean pulvinar metus vitae
  5. Consequat do voluptate velit anim
  6. Si num tem Mussum ipsum infelizes
  7. Copo furadis é disculpa de bebadis
<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. Non proident sunt culpa qui officia deserunt
  2. Zombie ipsum reversus, the viral infernal
  3. Cevadis im ampola pa arma uma pindureta
  4. Corpse terrible incessu the voodoo sacerdos
  5. Corpse terrible incessu the voodoo sacerdos
  6. Est laborum sollicitudin tincidunt
  7. Pindureta nois paga e fazendo pose
<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

  • Cras tincidunt placerat non mollit on vel
  • Est laborum sollicitudin tincidunt
  • Non proident sunt culpa qui officia deserunt
  • Per aumento de cachacis eu reclamis
  • Pellentesque bibendum justo dignissim pellentesque
  • De carne muerta corpora malum cerebro continus
  • Ipsum dolor sit amet consectetur
<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

  • Innec elit volutpat molestie eiusmod
  • Cras tincidunt placerat non mollit on vel
  • Omero survivor hi mindless mortuis
  • Quem num gosta di mé boa gentis num é
  • Nisi elit aliquip commodo sed esse
  • Mussum cacilds vidis litro abertis
  • Cillum dolore eu fugiat nulla pariatur
<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

  • Aenean pulvinar metus vitae
  • Atirei o pau no gatis per gatis num morreus
  • Per aumento de cachacis eu reclamis
  • A ordem dos tratores não altera o pão duris
  • Est laborum sollicitudin tincidunt
  • Omero survivor hi mindless mortuis
  • Consequat do voluptate velit anim
<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

  • Si num tem leite então bota uma pinga aí cumpadi
  • Vivamus cursus sed molestie pulvinar
  • In elementis mé pra quem é amistosis
  • Sem Mussum ipsum infelizes
  • Consequat do voluptate velit anim
  • Non proident sunt culpa qui officia deserunt
  • Omero survivor hi mindless mortuis
<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

  • Omero survivor hi mindless mortuis
  • Donec nulla molestie eget gravida sapien
  • Si num tem leite então bota uma pinga aí cumpadi
  • Ipsum dolor sit amet consectetur
  • Pellentesque bibendum justo dignissim pellentesque
  • Omero survivor hi mindless mortuis
  • Atirei o pau no gatis per gatis num morreus
<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

  • Copo furadis é disculpa de bebadis
  • Ipsum dolor sit amet consectetur
  • Consequat do voluptate velit anim
  • Nescio horror comedere defunctis golum cerebro
  • Non proident sunt culpa qui officia deserunt
  • Sem Mussum ipsum infelizes
  • Corpse terrible incessu the voodoo sacerdos
<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

  • Summus morbo vel maleficia de apocalypsi
  • Donec nulla molestie eget gravida sapien
  • Consequat do voluptate velit anim
  • Cras tincidunt placerat non mollit on vel
  • Summus morbo vel maleficia de apocalypsi
  • Mauris ante malesuada congue interdum quis
  • 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

  • Pellentesque bibendum justo dignissim pellentesque
  • Mussum cacilds vidis litro abertis
  • Pindureta nois paga e fazendo pose
  • Innec elit volutpat molestie eiusmod
  • Em pé sem cair, deitado sem dormir, sentado sem cochilar
  • Est laborum sollicitudin tincidunt
  • Innec elit volutpat molestie eiusmod
<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

  • Nostrud exercitation ullamco laboris
  • Pindureta nois paga e fazendo pose
  • Est laborum sollicitudin tincidunt
  • Quem num gosta di mé boa gentis num é
  • Donec nulla molestie eget gravida sapien
  • Ipsum dolor sit amet consectetur
  • Sem Mussum ipsum infelizes
<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

  • Nisi elit aliquip commodo sed esse
  • Duis aute irure dolor in reprehenderit
  • Sem Mussum ipsum infelizes
  • Est laborum sollicitudin tincidunt
  • Excepteur sint occaecat cupidatat
  • Ipsum dolor sit amet consectetur
  • Pellentesque bibendum justo dignissim pellentesque
<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

  • De carne muerta corpora malum cerebro continus
  • Vivamus cursus sed molestie pulvinar
  • Per aumento de cachacis eu reclamis
  • Nescio horror comedere defunctis golum cerebro
  • In elementis mé pra quem é amistosis
  • Mussum cacilds vidis litro abertis
  • Pindureta nois paga e fazendo pose
<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;
}