Konteyner Sınıf
W3-konteyner sınıfı W3.CSS sınıflarının çok önemlidir.
W3-konteyner sınıfı gibi HTML konteyner elemanlarının her türlü kullanılır:
<Div> <header>, <footer>, <makale>, <bölüm>, <blockquote>, <form> ve daha fazlası.
Bu Başlık Green.
Bu altbilgi kırmızıdır.
Bu makale açık gri ve metin kahverengi.
Konteynerleri Eşitlik Sağlar
W3-konteyner sınıfı eşitliği sağlanması için önemlidir:
- Ortak marjları
- Ortak altlıkları
- Ortak dikey hizaya
- Ortak yatay hizalamalar
- Ortak yazı
- Ortak renkler
Örnek
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Kendin dene " Bir renk eklemek için, sadece bir w3- renk sınıfını ekleyin:
Örnek
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Kendin dene " Başlıkları ve Altbilgiler
W3-konteyner sınıfı bir başlık stil kullanılabilir:
Başlık 1
W3-konteyner sınıfı bir altbilgi stil kullanılabilir:
Örnek
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Kendin dene " Makale ve Bölümler
W3-konteyner sınıfı stili için kullanılabilir <article> ve <section> elemanlar:
Örnek
<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> Kendin dene " Pek çok web sayfaları kullanır <div> yerine elemanlarını <article> ve <section> elemanlar.
Notlar, Paneller ve Alıntılar
W3-konteyner sınıf notlarının her türlü görüntülemek için kullanabileceğiniz edilebilir:
Örnek
<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> Kendin dene " W3-konteyner sınıfı panellerin her türlü göstermek için kullanmak olabilir:
Londra İngiltere'nin başkentidir. 13 milyonun üzerinde nüfuslu bir metropol alana sahip İngiltere'deki en kalabalık kentidir.
Örnek
<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> Kendin dene " W3-konteyner sınıfı tırnak her türlü görüntülemek için kullanabileceğiniz edilebilir:
Örnek
<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>
Kendin dene " Bölüme gitme W3.CSS Sınırlar gösteren notlar, paneller ve tırnak hakkında daha fazla bilgi için.
Kombinasyonlar
Başlık
Bir araba taşımacılığında kullanılan tekerlekli, kendi kendine çalışan motorlu araç. terimin çoğu tanımları arabalar yollarda öncelikle çalışacak şekilde tasarlanmıştır belirtin. (Wikipedia)
HTML kullanarak Örnek <div> öğelerini
<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> Kendin dene " HTML semantik elemanları kullanılarak Örnek
<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> Kendin dene " Konteyner Dolgu
w3-container sınıfı varsayılan bir sol 16px ve sağ dolgu ve hiçbir üst veya alt dolgu vardır:
Normalde paragraflar ve başlık dolgu simüle edilecek marjlarını sundukları için, bir kabın varsayılan dolgu değiştirmek zorunda olmayacaktır.
Ben Başlık 1 am
Ben bir paragraf değilim.
Örnek
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Kendin dene " Konteyner Kesit
w3-container sınıfı varsayılan üst veya alt kenar boşluğu vardır.
Aralarında marj wothout gösterecektir İki konteyner:
Ben Başlık 1 am
Ben bir paragraf değilim.
Ben Başlık 1 am
Ben bir paragraf değilim.
w3-section sınıfı kapların ayrılması için de kullanılabilir. Bu 16px üst ve alt kenardan vardır:
Ben Başlık 1 am
Ben bir paragraf değilim.
Ben Başlık 1 am
Ben bir paragraf değilim.
Örnek
<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>
Kendin dene " Gizleme (Closing) Konteynerler
Gizleme veya bir kap kapama kolaydır:
Bu kabı kapatmak için, sağ üst köşedeki X tıklayın.
Örnek
<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>
Kendin dene " Konteynerler Açılış
kapalı kapları Açılış kolaydır:
Örnek
<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>
Kendin dene "