Class Container
Clasa W3-container este cel mai important al claselor W3.CSS.
Clasa W3-container este utilizat pentru toate tipurile de elemente de containere , cum ar fi HTML:
<Div>, <header>, <subsol>, <Article>, <section> <blockquote>, <form>, și multe altele.
Acest antet este verde.
Acest subsol este de culoare roșie.
Acest articol este lumina gri, iar textul este maro.
Containere Asigură egalitatea
Clasa W3-container este important pentru asigurarea egalității:
- marjele comune
- căptușeli comune
- aliniamente verticale comune
- aliniamente orizontale comune
- fonturi comune
- culorile comune
Exemplu
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Încearcă - l singur » Pentru a adăuga o culoare, trebuie doar să adăugați o clasă de culoare w3-:
Exemplu
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Încearcă - l singur » Anteturilor și subsolurilor
Clasa W3-container poate fi utilizat pentru un antet stil:
rubrica 1
Clasa W3-container poate fi folosit pentru a stil un subsol:
Exemplu
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Încearcă - l singur » Articole și secțiunile
Clasa W3-container poate fi utilizat pentru stilul <article> și <section> elemente:
Exemplu
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Încearcă - l singur » Multe pagini web utilizează <div> elemente în loc de <article> și <section> elemente.
Note, panouri, și Citate
Clasa W3-container poate fi folosit pentru a afișa toate tipurile de note:
Exemplu
<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> Încearcă - l singur » Clasa W3-container poate fi folosit pentru a afișa toate tipurile de panouri:
Londra este capitala Angliei. Acesta este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.
Exemplu
<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> Încearcă - l singur » Clasa W3-container poate fi folosit pentru a afișa toate tipurile de citate:
Exemplu
<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>
Încearcă - l singur » Du - te la capitolul W3.CSS Borders pentru a afla mai multe despre notele de afișare, panouri, si citate.
Combinații
Antet
O mașină este un vehicul cu roți, auto-alimentat cu motor utilizat pentru transport. Cele mai multe definiții ale termenului specifică faptul că mașinile sunt proiectate pentru a rula în primul rând pe drumuri. (Wikipedia)
Exemplu folosind HTML <div> elemente
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> Încearcă - l singur » Exemplu folosind elemente semantice HTML
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> Încearcă - l singur » container Umplere
w3-container clasa are un 16px implicit la stânga și la dreapta padding, și nu de sus sau de jos umplutură:
Exemplu
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Încearcă - l singur » În mod normal, nu va trebui să se schimbe padding implicit a unui container, deoarece punctele și rubrică oferă marje care va simula umplutură.
Sunt rubrica 1
Sunt un paragraf.
Exemplu
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Încearcă - l singur » container de sectionare
w3-container clasa nu are nici o sus implicită sau marginea de jos.
Două containere vor afișa wothout o marjă între ele:
Sunt rubrica 1
Sunt un paragraf.
Sunt rubrica 1
Sunt un paragraf.
w3-section clasă pot fi folosite pentru a separa containere. Ea are 16px sus și marginea de jos:
Sunt rubrica 1
Sunt un paragraf.
Sunt rubrica 1
Sunt un paragraf.
Exemplu
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Încearcă - l singur » Ascunderea (Closing) de (Closing) Containere
Ascunderea sau închiderea unui container este simplu:
Pentru a închide acest container, faceți clic pe X din colțul din dreapta sus.
Exemplu
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
Încearcă - l singur » deschiderea Containere
Deschiderea containere închise este ușor:
Exemplu
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
Încearcă - l singur »