Derniers tutoriels de développement web
 

W3.CSS limite


Classes frontalières

Les classes W3.CSS frontalières peuvent être utilisés sur tous les éléments HTML.

Je frontières de tous les côtés.


J'ai une bordure inférieure rouge


J'ai bords arrondis.


J'ai un leftbar bleu.

Exemple

<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>
Try It Yourself »

Affichage des notes

Les notes sont souvent affichées avec une couleur pâle et une barre de couleur:

Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.


Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.

Exemple

<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>
Try It Yourself »

Affichage des panneaux

Les panneaux peuvent être affichés dans un million de différentes façons:

Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.


Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.


Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.


Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.


Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.


Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.


Londres est la capitale de l'Angleterre. Il est la ville la plus peuplée du Royaume-Uni, avec une région métropolitaine de plus de 13 millions d'habitants.

Exemple

<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> 
Try It Yourself »

Affichage Quotes

La classe w3-conteneur peut être utiliser pour afficher des citations.

"Faire aussi simple que possible, mais pasplussimple."

Albert Einstein


"Faire aussi simple que possible, mais pasplussimple."

Albert Einstein


"Faire aussi simple que possible, mais pasplussimple."

Albert Einstein

Exemple

<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> 
Try It Yourself »

Si vous utilisez HTML <blockquote>, rappelez-vous que le HTML va ajouter une marge gauche supplémentaire:

"Faire aussi simple que possible, mais pasplussimple."

Albert Einstein

Exemple

<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> 
Try It Yourself »

Hoverable Borders

Les classes de couleur w3-hover-border- changer la couleur de la bordure sur la souris sur:

frontière hoverable Rouge


frontière pourpre qui vire au bleu sur le vol stationnaire


Les barres rouges qui vire au vert sur le vol stationnaire.

Exemple

<div class="w3-container w3-border w3-hover-border-red">
  <p>Red hoverable border</p>
</div>
Try It Yourself »

Affichage du code

HTML Exemple

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
Try It Yourself »

CSS Exemple

<div class="w3-code cssHigh">

.. CSS code here

</div>
Try It Yourself »

JavaScript Exemple

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
Try It Yourself »