La classe Container
La classe w3-contenitore è la più importante delle classi W3.CSS.
La classe w3-contenitore viene utilizzato per tutti i tipi di elementi contenitori HTML come:
<Div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, e altro ancora.
Questa intestazione è verde.
Questo piè di pagina è di colore rosso.
Questo articolo è grigio chiaro e il testo è di colore marrone.
Contenitori Fornisce uguaglianza
La classe w3-contenitore è importante per fornire l'uguaglianza:
- margini comuni
- imbottiture comuni
- allineamenti verticali comuni
- allineamenti orizzontali comuni
- font comuni
- colori comuni
Esempio
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Prova tu stesso " Per aggiungere un colore, basta aggiungere una classe di colore w3-:
Esempio
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Prova tu stesso " Intestazioni e piè
La classe w3-contenitore può essere utilizzato per lo stile un'intestazione:
Titolo 1
La classe w3-contenitore può essere utilizzato per lo stile un piè di pagina:
Esempio
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Prova tu stesso " Articoli e Sezioni
La classe w3-contenitore può essere utilizzato per lo stile <article> e <section> elementi:
Esempio
<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> Prova tu stesso "  | Molte pagine web utilizza <div> gli elementi al posto di <article> e <section> elementi. |
|---|
Note, pannelli, e citazioni
La classe w3-contenitore può essere utilizzato per visualizzare tutti i tipi di note:
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 " La classe w3-contenitore può essere utilizzato per visualizzare tutti i tipi di pannelli:
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 " La classe w3-contenitore può essere utilizzato per visualizzare tutti i tipi di citazioni:
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 " Vai al capitolo W3.CSS frontiere per conoscere meglio note visualizzazione, pannelli e citazioni.
combinazioni
Intestazione
Una macchina è un veicolo a motore autoalimentato ruote utilizzato per il trasporto. La maggior parte delle definizioni del termine specificano che le auto sono progettati per funzionare in primo luogo sulle strade. (Wikipedia)
Esempio utilizzando HTML <div> elementi
<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> Prova tu stesso " Esempio utilizzando HTML elementi semantici
<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> Prova tu stesso " contenitore Imbottitura
La classew3-contenitore ha un 16 pixel di default sinistra e imbottitura a destra, e non in alto o in basso padding:
Esempio
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Prova tu stesso " Normalmente non sarà necessario cambiare l'imbottitura di default di un contenitore, perché paragrafi e voci forniscono margini che simulerà imbottitura.
Sto rubrica 1
Sono un paragrafo.
Esempio
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Prova tu stesso " contenitore sezionamento
La classew3-contenitore non superiore predefinito o margine inferiore.
Due contenitori visualizzerà wothout un margine tra di loro:
Sto rubrica 1
Sono un paragrafo.
Sto rubrica 1
Sono un paragrafo.
La classew3-sezione può essere utilizzata per separare contenitori.Ha 16px superiore e margine inferiore:
Sto rubrica 1
Sono un paragrafo.
Sto rubrica 1
Sono un paragrafo.
Esempio
<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>
Prova tu stesso " Nascondere contenitori (di chiusura)
Nascondere o la chiusura di un contenitore è facile:
Per chiudere il contenitore, cliccare sulla X in alto a destra.
Esempio
<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>
Prova tu stesso " Contenitori di apertura
Apertura contenitori chiusi è facile:
Esempio
<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>
Prova tu stesso "