W3.CSS- lyste
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">×</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
Voorbeeld
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</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>