Imagini Afiseaza
cilindrat:
Cerc:
mărginit:
Text:
Natură
Imagine rotunjit
Clasa W3-rotund rotunjite la colțuri adaugă o imagine:
Imagine încercuite
Clasa W3-cerc forme o imagine într - un cerc:
Imagine marginita
Clasa W3-frontieră adaugă margini în jurul imaginii:
Imagine Hoverable
Clasa W3-Hover-opacitate adaugă transparență imaginii cu mouse-ul:
Imagine ca un card
Înfășurați oricare dintre-W3 * în jurul claselor de carte de <img> elementul pentru a afișa ca un card (add shadows) :
Simon
Seful tuturor sefilor
Exemplu
<div class="w3-card-4">
<img src="img_avatar.png"
alt="Person">
</div>
Încearcă - l singur » Text imagine
Poziționați textul într - o imagine cu clasele-W3 Display-:
Stânga sus
Sus în dreapta
Stânga jos
Dreapta-jos
Mijloc
Exemplu
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-middle w3-large">Middle</div>
</div> Încearcă - l singur » Construirea un album foto
În acest exemplu, vom folosi sistemul Grid Receptiv W3.CSS pentru a crea un album foto care arata bine pe toate dispozitivele. Vei afla mai multe despre asta mai târziu.
Vara 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Exemplu
<div class="w3-third">
<div class="w3-card-2">
<img src="img_monterosso.png" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
Încearcă - l singur »