W3.CSS Kontenery
To jest mój nagłówek
To jest mój artykuł
Ten artykuł jest jasnoszary, a tekst jest brązowy. Ten artykuł jest jasnoszary, a tekst jest brązowy. Ten artykuł jest jasnoszary, a tekst jest brązowy. Ten artykuł jest jasnoszary, a tekst jest brązowy. Ten artykuł jest jasnoszary, a tekst jest brązowy.
To jest moja stopka
Klasa kontenera
Klasa w3-container dodaje 16px lewy i prawy dopełnienie do dowolnego elementu HTML.
Klasa w3-container jest idealną klasą do użycia dla wszystkich elementów kontenera HTML, takich jak:
<div>, <artykuł>, <sekcja>, <nagłówek>, <stopka>, <formularz> i inne.
Kontenery zapewniają równość
Kontener w3 zapewnia równość dla wszystkich elementów kontenera HTML:
- Wspólne marże
- Wspólne wyściółki
- Wspólne wyrównania
- Popularne czcionki
- Wspólne kolory
Aby użyć kontenera, po prostu dodaj klasę w3-container do dowolnego elementu:
Przykład
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Aby dodać kolor, po prostu dodaj klasę kolorów w3 :
Przykład
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Nagłówki i stopki
Klasa kontenera w3 może służyć do stylizowania nagłówków:
nagłówek
Przykład
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Przykład
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Nie ma różnicy w sposobie, w jaki W3.CSS traktuje elementy <div> i <header>.
Klasa kontenera w3 może służyć do stylizowania stopek:
Przykład
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Przykład
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Wiele stron internetowych używa elementów <div> zamiast elementów <header> i <footer>.
Artykuły i sekcje
Klasa kontenera w3 może być użyta do stylizacji elementów <article> i <section>:
Przykład
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
Wiele stron internetowych używa elementów <div> zamiast elementów <article> i <section>.
Przykład strony internetowej
nagłówek
Samochód to kołowy pojazd silnikowy z własnym napędem używany do transportu. Większość definicji tego terminu określa, że samochody są przeznaczone głównie do poruszania się po drogach. (Wikipedia)
Przykład z użyciem elementów HTML <div>
<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>
Przykład z użyciem elementów semantycznych HTML
<header class="w3-container w3-teal">
<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-teal">
<h5>Footer</h5>
</footer>
Wypełnienie kontenera
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>