Budowanie Responsive Web Site od podstaw
W tym rozdziale będziemy budować W3.CSS czułe internetową od podstaw.
Po pierwsze, należy rozpocząć od prostej strony HTML, z początkowym rzutni i link do W3.CSS.
Przykład
<!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> Spróbuj sam " Elementy umieścić w pojemnikach
Teraz musimy dodać wspólny margines i dopełnienie do wszystkich elementów.
Aby to osiągnąć, umieścić elementy HTML wewnątrz pojemników (<div class = "w3-pojemnik">)
Aby było to możliwe zdefiniowanie oddzielnych klas dla nagłówków. Oddzielania nagłówka od pozostałej zawartości, przy wykorzystaniu oddzielnego <div>:
Przykład
<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> Spróbuj sam " Klasy kolor
Klasy kolorów określa kolor elementów.
Ten przykład dodaje kolor do pierwszego element <div>:
Przykład
<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>
Spróbuj sam " rozmiar Klasy
Klasy wielkości określa rozmiar tekstu dla elementów.
W przykładzie tym zwiększa się rozmiar obu elementów nagłówka:
Przykład
<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>
Spróbuj sam " Użyj Semantic Elements
Jeśli chcesz śledzić HTML5 semantyczne rekomendacji. proszę zrób!
 | To nie ma znaczenia dla W3.CSS jeśli używasz <div> lub <header>. |
|---|
Przykład
<!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> Spróbuj sam " Układ wielokolumnowym Responsive
Z W3.CSS łatwo jest utworzyć wielokolumnowej układ elastyczny.
Kolumny będą przestawiać się automatycznie, gdy patrzy się na różnych rozmiarach ekranu.
Niektóre zasady grid:
- Start z klasy wiersz <div class = "w3-row-dopełnienia">
- Użyj predefiniowanych klas jak "w3 trzeciej", aby szybko dokonać kolumn siatki
- Umieść zawartość tekstową wewnątrz kolumn siatki
Ten przykład pokazuje, jak utworzyć trzy kolumny o jednakowej szerokości:
Przykład
<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> Spróbuj sam " Ten przykład pokazuje, jak utworzyć cztery kolumny o jednakowej szerokości:
Przykład
<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> Spróbuj sam " Kolumny o różnej szerokości
Przykład ten tworzy układ trzech kolumn, w których kolumny w środku jest większy niż pierwszy i ostatni kolumny:
Przykład
<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> Spróbuj sam " paski nawigacyjne
Pasek nawigacyjny jest nagłówek nawigacji, który jest umieszczony na górze strony.
Przykład
<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> Spróbuj sam " Side Nawigacja
Z bocznej nawigacji, masz kilka opcji:
- Zawsze wyświetlaj okienka nawigacji po lewej stronie zawartości strony.
- Otwórz panel nawigacyjny, ukrywając lewą część zawartości strony.
- Otwórz panel nawigacyjny, ukrywając całą zawartość strony.
- Przesunięcie zawartości strony do prawej, po otwarciu okienka nawigacji.
Ten przykład otwiera panel nawigacji, ukrywając część zawartości strony:
<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 używany do otwierania i ukryć menu:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Spróbuj sam "