Sıfırdan Duyarlı Web Sitesi Yapı
Bu bölümde sıfırdan bir W3.CSS Duyarlı bir web sitesi kuracak.
İlk olarak, bir ilk görüntü alanına ve W3.CSS bir bağlantı ile, basit bir HTML sayfası ile başlayın.
Örnek
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html> Kendin dene " Konteyner Elements koy
Şimdi hepimiz elemanlarına ortak bir marj ve dolgu eklemeniz gerekir.
Bunu başarmak için, kapların içine HTML elemanlarını koymak (<div class = "w3-konteyner">)
Mümkün başlıklarıyla için ayrı sınıflar tanımlar yapmak için. Ayrı kullanılarak, geri kalan içeriğinden başlık Ayrı <div> elemanı;
Örnek
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div> Kendin dene " Renk Sınıflar
Renk sınıfları elementlerin rengini tanımlar.
Bu örnek ilk bir renk katar <div> elemanı:
Örnek
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Kendin dene " Boyut Sınıflar
Boyut sınıfları elemanları metin boyutunu tanımlar.
Bu örnekte, her iki başlık elemanları için bir boyut ekler:
Örnek
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This sage
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Kendin dene " Semantik Öğeleri kullanın
HTML5 semantik öneriler takip etmek isterseniz. lütfen yap!
Kullanmak eğer W3.CSS için önemli değil <div> veya <header> .
Örnek
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html> Kendin dene " Çok Sütunlu Duyarlı Düzeni
W3.CSS sayesinde çok sütun duyarlı bir düzen oluşturmak kolaydır.
farklı ekran boyutlarına bakıldığında sütunlar kendilerini otomatik olarak yeniden düzenlemek olacaktır.
Bazı ızgara kuralları:
- Bir satır sınıfında <div class = "w3-satır-dolgu"> ile başlayın
- Gibi önceden tanımlanmış sınıflar kullanın "w3-third" hızlı ızgara sütunları yapmak
- Izgara kolonların içindeki metin içeriğini yerleştirin
Bu örnek, aynı genişlikte üç sütunlar oluşturmak için gösterilmiştir:
Örnek
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> Kendin dene " Bu örnek, aynı genişlikte dört sütunlar oluşturmak için gösterilmiştir:
Örnek
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> Kendin dene " Farklı genişlikte sütunlar
Bu örnek ortada sütun ilk ve son sütunda daha geniş bir üç sütunluk bir düzen oluşturur:
Örnek
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> Kendin dene " Navigasyon Barlar
Gezinti çubuğu sayfanın üst kısmında yer alan bir navigasyon başlığıdır.
Örnek
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Kendin dene " Yan Navigasyon
Yandaki gezinme ile, birkaç seçeneğiniz vardır:
- Daima sayfa içeriğine solundaki gezinti bölmesini görüntüler.
- sayfa içeriğinin sol kısmını gizleyerek, navigasyon bölmesini açın.
- sayfa içeriğinin tüm gizleme, navigasyon bölmesini açın.
- gezinme bölmesini açarken sağ sayfa içeriğinin Shift.
Bu örnek sayfa içeriğinin bir kısmını gizleyerek, gezinme bölmesini açar:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
JavaScript açın ve menüye gizlemek için kullanılır:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Kendin dene "