Пример использования W3.CSS
Создание адаптивного веб-сайта с нуля
В этой главе мы создадим веб-сайт с поддержкой W3.CSS с нуля.
Во-первых, начните с простой HTML-страницы с начальным окном просмотра и ссылкой на W3.CSS.
Пример
<!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>
Поместите элементы в контейнеры
Чтобы добавить общие поля и отступы, поместите элементы HTML в контейнеры (<div class="w3-container">).
Отделите заголовок от остального содержимого, используя два отдельных элемента <div>:
Пример
<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>
Цветовые классы
Цветовые классы определяют цвет элементов.
В этом примере к первому элементу <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>
Используйте семантические элементы
Если вы хотите следовать семантическим рекомендациям 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-therth», чтобы быстро создавать столбцы сетки.
- Поместите текстовое содержимое внутри столбцов сетки
В этом примере показано, как создать три столбца одинаковой ширины:
Пример
<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";
}