Classi di frontiera
Le classi W3.CSS di confine può essere utilizzato su tutti gli elementi HTML.
Ho confini su tutti i lati.
Ho un bordo inferiore rosso
Ho bordi arrotondati.
Esempio
<div class="w3-border">
<p>I have borders on all sides.</p>
</div>
<div class="w3-border-bottom w3-border-red">
<p>I have
a red bottom border.</p>
</div>
<div class="w3-border
w3-round-xlarge">
<p>I have rounded borders.</p>
</div>
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>I have a blue leftbar.</p>
</div>
Prova tu stesso " Visualizzazione Note
Note sono spesso visualizzati con un colore pallido e una barra colorata:
Esempio
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Prova tu stesso " Visualizzazione di pannelli
I pannelli possono essere visualizzati in un milione di modi diversi:
Londra è la capitale dell'Inghilterra. E 'la città più popolosa del Regno Unito, con un'area metropolitana di oltre 13 milioni di abitanti.
Londra è la capitale dell'Inghilterra. E 'la città più popolosa del Regno Unito, con un'area metropolitana di oltre 13 milioni di abitanti.
Londra è la capitale dell'Inghilterra. E 'la città più popolosa del Regno Unito, con un'area metropolitana di oltre 13 milioni di abitanti.
Esempio
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> Prova tu stesso " Visualizzazione Citazioni
La classe w3-contenitore può essere utilizzato per visualizzare le virgolette.
Esempio
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it
as simple as possible, but not simpler."</i></p>
<p>Albert
Einstein</p>
</div> Prova tu stesso " Se si utilizza HTML <blockquote>, si ricordi che HTML aggiungerà un ulteriore margine di sinistra:
"Rendere più semplice possibile, ma non più semplice."
Albert Einstein
Esempio
<blockquote class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make
it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote> Prova tu stesso " Hoverable Borders
Le classi colore w3-hover-border-cambiare il colore del bordo al passaggio del mouse:
Red confine hoverable
Bordo viola che diventa blu al passaggio del mouse
Esempio
<div class="w3-container w3-border w3-hover-border-red">
<p>Red
hoverable border</p>
</div> Prova tu stesso "