Listas

Listas Ordenadas

Padrão - decimal

  1. Aliquet malesuada quis it amet, eu odio non nibh aliquet
  2. Nisi elit aliquip commodo sed esse
  3. Vivamus cursus sed molestie pulvinar
  4. Aliquam sodares purus maximus pharetra
  5. Non proident sunt culpa qui officia deserunt
  6. Si num tem leite então bota uma pinga aí cumpadi
  7. Copo furadis é disculpa de bebadis
<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. Tempor incididunt labore dolore magna aliqua
  2. Aliquet malesuada quis it amet, eu odio non nibh aliquet
  3. Corpse terrible incessu the voodoo sacerdos
  4. Aliquet malesuada quis it amet, eu odio non nibh aliquet
  5. Pindureta nois paga e fazendo pose
  6. Pindureta nois paga e fazendo pose
  7. Duis aute irure dolor in reprehenderit
<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. Nisi elit aliquip commodo sed esse
  2. Cillum dolore eu fugiat nulla pariatur
  3. Mussum cacilds vidis litro abertis
  4. Mussum cacilds vidis litro abertis
  5. Copo furadis é disculpa de bebadis
  6. Consequat do voluptate velit anim
  7. Nisi elit aliquip commodo sed esse
<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. Omero survivor hi mindless mortuis
  2. A ordem dos tratores não altera o pão duris
  3. Sem Mussum ipsum infelizes
  4. Monti palavris qui num significa nadis i pareci latim
  5. Si num tem leite então bota uma pinga aí cumpadi
  6. Tempor incididunt labore dolore magna aliqua
  7. Consequat do voluptate velit anim
<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. Virus suscitat mortuos that carnem human
  2. Cevadis im ampola pa arma uma pindureta
  3. Omero survivor hi mindless mortuis
  4. Nisi elit aliquip commodo sed esse
  5. Nisi elit aliquip commodo sed esse
  6. Nisi elit aliquip commodo sed esse
  7. Duis aute irure dolor in reprehenderit
<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

  • Não sou faixa preta cumpadi sou preto inteiris
  • Pellentesque bibendum justo dignissim pellentesque
  • A ordem dos tratores não altera o pão duris
  • Mauris ante malesuada congue interdum quis
  • Est laborum sollicitudin tincidunt
  • Aliquam sodares purus maximus pharetra
  • Donec nulla molestie eget gravida sapien
<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

  • Si num tem leite então bota uma pinga aí cumpadi
  • Excepteur sint occaecat cupidatat
  • Aenean pulvinar metus vitae
  • Nostrud exercitation ullamco laboris
  • Tempor incididunt labore dolore magna aliqua
  • Mussum cacilds vidis litro abertis
  • Não sou faixa preta cumpadi sou preto inteiris
<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

  • A ordem dos tratores não altera o pão duris
  • Corpse terrible incessu the voodoo sacerdos
  • Omero survivor hi mindless mortuis
  • Nostrud exercitation ullamco laboris
  • Duis aute irure dolor in reprehenderit
  • In elementis mé pra quem é amistosis
  • Copo furadis é disculpa de bebadis
<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

  • Sem Mussum ipsum infelizes
  • Copo furadis é disculpa de bebadis
  • Duis aute irure dolor in reprehenderit
  • Mussum cacilds vidis litro abertis
  • Virus suscitat mortuos that carnem human
  • Corpse terrible incessu the voodoo sacerdos
  • Tempor incididunt labore dolore magna aliqua
<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

  • Atirei o pau no gatis per gatis num morreus
  • Monti palavris qui num significa nadis i pareci latim
  • Aliquet malesuada quis it amet, eu odio non nibh aliquet
  • Pellentesque bibendum justo dignissim pellentesque
  • Soulless creaturas evil stalking adventus
  • Copo furadis é disculpa de bebadis
  • 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

  • Si num tem Mussum ipsum infelizes
  • Consequat do voluptate velit anim
  • Zombie ipsum reversus, the viral infernal
  • Cevadis im ampola pa arma uma pindureta
  • Adipisicing utad enim minim veniam
  • Aenean pulvinar metus vitae
  • Zombie ipsum reversus, the viral infernal
<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

  • Omero survivor hi mindless mortuis
  • Tempor incididunt labore dolore magna aliqua
  • Si num tem leite então bota uma pinga aí cumpadi
  • Vivamus cursus sed molestie pulvinar
  • Em pé sem cair, deitado sem dormir, sentado sem cochilar
  • Pellentesque bibendum justo dignissim pellentesque
  • Pindureta nois paga e fazendo pose
<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
  • Quem num gosta di mé boa gentis num é
  • Atirei o pau no gatis per gatis num morreus
  • De carne muerta corpora malum cerebro continus
  • Omero survivor hi mindless mortuis
  • Tempor incididunt labore dolore magna aliqua
  • Donec nulla molestie eget gravida sapien
<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

  • Summus morbo vel maleficia de apocalypsi
  • Atirei o pau no gatis per gatis num morreus
  • Mauris ante malesuada congue interdum quis
  • Pindureta nois paga e fazendo pose
  • Ipsum dolor sit amet consectetur
  • Cevadis im ampola pa arma uma pindureta
  • Non proident sunt culpa qui officia deserunt
<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

  • In elementis mé pra quem é amistosis
  • Aliquam sodares purus maximus pharetra
  • Si num tem Mussum ipsum infelizes
  • Duis aute irure dolor in reprehenderit
  • Vivamus cursus sed molestie pulvinar
  • Monti palavris qui num significa nadis i pareci latim
  • De carne muerta corpora malum cerebro continus
<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
  • Consequat do voluptate velit anim
  • Per aumento de cachacis eu reclamis
  • Adipisicing utad enim minim veniam
  • Consequat do voluptate velit anim
  • Omero survivor hi mindless mortuis
  • Soulless creaturas evil stalking adventus
<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;
}