W3.CSS Вивчення кейса
Створення адаптивного вебсайту з нуля
У цьому розділі ми створимо з нуля адаптивний вебсайт W3.CSS.
По-перше, почніть із простої HTML-сторінки з початковим вікном перегляду та посиланням на W3.CSS.
Приклад
<!DOCTYPE html>
<html lang="uk">
<title>W3.CSS Кейс</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schoolsua.github.io/w3css/4/w3.css">
<body>
<h1>Мій перший W3.CSS вебсайт!</h1>
<p>Цей сайт буде рости, коли ми додамо більше ...</p>
<p>Це інший параграф.</p>
<p>Це також параграф.</p>
<p>Ще один нікчемний параграф.</p>
</body>
</html>
Спробуйте самі »
Помістіть елементи в контейнери
Щоб додати загальні поля та відступи, помістіть елементи HTML у контейнери (<div class="w3-container">)
Відокремте заголовок від решти вмісту за допомогою двох окремих <div> елементів:
Приклад
<div class="w3-container">
<h1>Мій перший W3.CSS вебсайт!</h1>
<p>Цей сайт буде зростати й далі, якщо ви не полінитесь і будете його наповнювати...</p>
</div>
<div class="w3-container">
<p>Всі знають, що українці - непереможна нація!</p>
<p>Слава Україні!</p>
<p>Героям Слава!</p>
</div>
Спробуйте самі »
Класи кольорів
Класи кольорів визначають колір елементів.
Цей приклад додає колір до першого <div> елемента:
Приклад
<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>
Спробуйте самі »
Класи розміру
Класи розміру визначають розмір тексту для елементів.
У цьому прикладі додається розмір до обох елементів заголовка:
Приклад
<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>
Спробуйте самі »
Використовуйте семантичні елементи
Якщо ви хочете, щоб ваш сайт потрапив в результати пошуку Google, будь ласка, дотримуйтесь семантичних рекомендацій HTML5!
Це не має значення для W3.CSS, якщо ви використовуєте <div> або <header>.
Приклад
<!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>
Спробуйте самі »
Адаптивний макет із кількома стовпцями
За допомогою W3.CSS легко створити адаптивний макет із кількома стовпцями.
Стовпці змінюватимуться автоматично під час перегляду на екранах різних розмірів.
Деякі правила сітки:
- Почати з класу рядків <div class="w3-row-padding">
- Використовуйте попередньо визначені класи, такі як "w3-third" для швидкого створення стовпців сітки
- Розмістіть текстовий вміст у стовпцях сітки
У цьому прикладі показано, як створити три стовпці однакової ширини:
Приклад
<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>
Спробуйте самі »
У цьому прикладі показано, як створити чотири стовпці однакової ширини:
Приклад
<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>
Спробуйте самі »
Стовпці з різною шириною
У цьому прикладі створюється макет із трьома стовпцями, де стовпець посередині ширший за перший і останній стовпці:
Приклад
<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>
Спробуйте самі »
Панелі навігації
Панель навігації – це навігаційний заголовок, який розміщується у верхній частині сторінки.
Приклад
<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>
Спробуйте самі »
Бічна навігація
За допомогою бічної навігації у вас є кілька варіантів:
- Завжди відображайте навігаційну панель ліворуч від вмісту сторінки.
- Використовуйте адаптивну бічну навігацію, що згортається, повністю автоматичну.
- Відкрити навігаційну панель у лівій частині вмісту сторінки.
- Відкрити навігаційну панель над усім вмістом сторінки.
- Посуньте вміст сторінки праворуч, відкриваючи навігаційну панель.
- Відображайте панель навігації праворуч, а не ліворуч
Цей приклад відкриває навігаційну панель над лівою частиною вмісту сторінки:
<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 використовувався для відкриття та приховування меню:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
Спробуйте самі »
