W3.CSS Кейс. Тематическое исследование
Создание адаптивного веб-сайта с нуля
В этой главе мы с нуля создадим адаптивный веб-сайт на фреймворке W3.CSS.
Сначала начните с простой HTML-страницы, с начальным окном просмотра и ссылкой на таблицу стилей W3.CSS.
Пример
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Кейс</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://w3schoolsrus.github.io/lib/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>Мой первый W3.CSS веб-сайт!</h1>
<p>Этот сайт будет расти по мере добавления ...</p>
</div>
<div
class="w3-container">
<p>Это другой параграф.</p>
<p>Это параграф.</p>
<p>Это другой параграф.</p>
</div>
Попробуйте сами »
Классы размеров
Классы размеров определяют размер текста для элементов.
Этот пример добавляет размер к обоим элементам заголовка:
Пример
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">Мой первый W3.CSS веб-сайт!</h1>
<p
class="w3-xxlarge">Этот сайт будет расти по мере добавления ...</p>
</div>
<div class="w3-container">
<p>Это другой параграф.</p>
<p>Это параграф.</p>
<p>Это другой параграф.</p>
</div>
Попробуйте сами »
Используйте семантические элементы
Если вы хотите следовать семантическим рекомендациям HTML5, делайте это!
Для W3.CSS это не имеет значения, если вы используете <div> или <header>.
Пример
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Кейс</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://w3schoolsrus.github.io/lib/w3.css">
<body>
<header class="w3-container w3-light-grey">
<h1 class="w3-jumbo">Мой первый W3.CSS веб-сайт!</h1>
<p
class="w3-xxlarge">Этот сайт будет расти по мере добавления ...</p>
</header>
<div class="w3-container">
<p>Это другой параграф.</p>
<p>Это параграф.</p>
<p>Это другой параграф.</p>
</div>
<footer
class="w3-container">
<p>Это 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="#">Ссылка 1</a>
<a
class="w3-bar-item w3-button" href="#">Ссылка 2</a>
<a
class="w3-bar-item w3-button"
href="#">Ссылка 3</a>
</nav>
JavaScript используется для открытия и скрытия меню:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
Попробуйте сами »
Навбар с иконками
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политики конфиденциальности.
Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Сайт работает на фреймворке W3.CSS.