W3.CSS- lyste


  • ×
    Mike
    Web Ontwerper
  • ×
    Jill
    Ondersteuning
  • ×
    Jane
    Rekenmeester

Basiese lys

Die w3-ul klas word gebruik om 'n basiese lys te vertoon:

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Begrensde lys

Die w3-grens klas voeg 'n rand om die lys by:

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>


Lysopskrif

'n Voorbeeld van hoe om 'n opskrifelement binne die lysitem by te voeg:

  • Name

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Lys as 'n kaart

Die w3-kaart-nommerklasse kan gebruik word om 'n lys as 'n kaart te wys:

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-card-4" style="width:50%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Gesentreerde lys

Die w3-sentrumklas kan gebruik word om die lysitems in 'n lys te sentreer:

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Gekleurde Lys

Die w3- kleurklasse kan gebruik word om 'n kleur by die lys te voeg :

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Gekleurde lysitem

Die w3- kleurklasse kan gebruik word om 'n kleur by die lysitem te voeg:

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Beweegbare lys

Die w3-sweefbare klas voeg 'n grys agtergrondkleur by elke lysitem by muis-oor:

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

As jy 'n spesifieke sweefkleur wil hê, voeg enige van die w3-sweef-kleurklasse by elke <li>-element:

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul">
  <li class="w3-hover-red">Jill</li>
  <li class="w3-hover-blue">Eve</li>
  <li class="w3-hover-green">Adam</li>
</ul>

Sluitbare lysitem

Klik op die "x" om 'n lysitem toe te maak/versteek:

  • Jill ×
  • Adam ×
  • Eva ×

Voorbeeld

<li class="w3-display-container">Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-right">&times;</span>
</li>

Wenk: Die HTML × entiteit is die voorkeur-ikoon vir toemaakknoppies (eerder as die letter "X").


Lys Met Opvulling

Die w3-opvullingsklasse kan gebruik word om opvulling by lysitems te voeg: 

  • Jill
  • Eva
  • Adam
  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul">
  <li class="w3-padding-small">Jill</li>
  <li class="w3-padding-small">Eve</li>
  <li class="w3-padding-small">Adam</li>
</ul>

Avatar lys

  • ×
    Mike
    Web Ontwerper
  • ×
    Jill
    Ondersteuning
  • ×
    Jane
    Rekenmeester

Voorbeeld

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
  <img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
  <div class="w3-bar-item">
    <span class="w3-large">Mike</span><br>
    <span>Web Designer</span>
  </div>
</li>

Wenk: Jy sal meer leer oor die w3-staafklasse in ons W3.CSS Bars en W3.CSS Navigation hoofstukke.


Lysbreedte

Lyste het by verstek 'n 100% breedte. Gebruik die width-eienskap om dit te verander.

Voorbeeld

<ul class="w3-ul" style="width:30%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

30% breedte:

  • Jill
  • Adam

50% breedte:

  • Jill
  • Adam

80% breedte:

  • Jill
  • Adam

Klein lysie

Gebruik die w3-klein klas om 'n klein lysie te vertoon: 

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Klein lysie

Gebruik die w3-klein klas om 'n klein lysie te vertoon:  

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Groot lys

Gebruik die w3-large klas om 'n groot lys te vertoon: 

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

XLarge lys

Gebruik die w3-xlarge klas om 'n ekstra groot lys te vertoon:  

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

XXLroot lys

Gebruik die w3-xxlarge- klas om 'n XXLarge-lys te vertoon:  

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

XXX Groot lys

Gebruik die w3-xxxlarge- klas om 'n XXXLarge-lys te vertoon:  

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Jumbo lys

Gebruik die w3-jumbo- klas om 'n enorme "jumbo"-lys te vertoon:  

  • Jill
  • Eva
  • Adam

Voorbeeld

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>