W3.CSS Studium przypadku
Tworzenie responsywnej strony internetowej od podstaw
W tym rozdziale zbudujemy od podstaw responsywną stronę W3.CSS.
Najpierw zacznij od prostej strony HTML, z początkowym oknem podglądu i linkiem 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="https://www.w3schools.com/w3css/4/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>
Umieść elementy w pojemnikach
Aby dodać wspólne marginesy i dopełnienie, umieść elementy HTML wewnątrz kontenerów (<div class="w3-container">)
Oddziel nagłówek od reszty treści, używając dwóch oddzielnych elementów <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>
Klasy kolorów
Klasy kolorów określają kolor elementów.
Ten przykład dodaje kolor do pierwszego elementu <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>
Klasy wielkości
Klasy rozmiarów określają rozmiar tekstu dla elementów.
Ten przykład dodaje rozmiar do 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 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>
Użyj elementów semantycznych
Jeśli lubisz przestrzegać semantycznych zaleceń HTML5. proszę zrób!
Dla W3.CSS nie ma znaczenia, czy używasz <div> czy <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="https://www.w3schools.com/w3css/4/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>
Wielokolumnowy układ responsywny
Dzięki W3.CSS łatwo jest stworzyć wielokolumnowy, responsywny układ.
Kolumny zmienią się automatycznie podczas wyświetlania na ekranach o różnych rozmiarach.
Niektóre zasady dotyczące siatki:
- Zacznij od klasy wiersza <div class="w3-row-padding">
- Użyj predefiniowanych klas, takich jak „w3/3”, aby szybko tworzyć kolumny siatki
- Umieść treść tekstową w kolumnach siatki
Ten przykład pokazuje, jak utworzyć trzy kolumny o równej 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>
Ten przykład pokazuje, jak utworzyć cztery kolumny o równej 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>
Kolumny o różnych szerokościach
Ten przykład tworzy układ trójkolumnowy, w którym kolumna pośrodku jest szersza niż pierwsza i ostatnia kolumna:
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>
Paski nawigacyjne
Pasek nawigacyjny to nagłówek nawigacyjny umieszczony u góry strony.
Przykład
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Nawigacja strony
Dzięki nawigacji bocznej masz kilka opcji:
- Zawsze wyświetlaj okienko nawigacji po lewej stronie zawartości strony.
- Użyj składanej, „w pełni automatycznej” elastycznej nawigacji bocznej.
- Otwórz okienko nawigacji w lewej części zawartości strony.
- Otwórz okienko nawigacji na całej zawartości strony.
- Przesuń zawartość strony w prawo podczas otwierania okienka nawigacji.
- Wyświetl okienko nawigacyjne po prawej stronie zamiast po lewej stronie
Ten przykład otwiera panel nawigacji w lewej części zawartości strony:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript używany do otwierania i ukrywania menu:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}