W3.CSS

W3.CSS ГЛАВНАЯ Введение в W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS W3.CSS Границы Карточки W3.CSS W3.CSS по умолчанию W3.CSS-шрифты W3.CSS Google Текст W3.CSS W3.CSS Раунд W3.CSS заполнение Поля W3.CSS W3.CSS Отображение Кнопки W3.CSS Примечания W3.CSS W3.CSS Цитаты Оповещения W3.CSS W3.CSS-таблицы Списки W3.CSS Изображения W3.CSS Входные данные W3.CSS Значки W3.CSS W3.CSS-теги Иконки W3.CSS W3.CSS Отзывчивый Макет W3.CSS W3.CSS-анимации W3.CSS эффекты W3.CSS бары Выпадающие списки W3.CSS Аккордеоны W3.CSS W3.CSS-навигация Боковая панель W3.CSS Вкладки W3.CSS W3.CSS Пагинация Индикаторы выполнения W3.CSS Слайд-шоу W3.CSS W3.CSS Модальный Подсказки W3.CSS W3.CSS сетка W3.CSS-код W3.CSS-фильтры Тенденции W3.CSS Случай W3.CSS W3.CSS Материал Проверка W3.CSS Версии W3.CSS W3.CSS для мобильных устройств

Цвета W3.CSS

Цветовые классы W3.CSS W3.CSS цветной материал W3.CSS цветной плоский интерфейс W3.CSS Цветной интерфейс Metro W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Цветовая мода Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов W3.CSS

Веб-строительство

Веб-введение Веб-HTML Веб-CSS Веб-JavaScript Веб-макет Веб-группа Веб-кейтеринг Интернет-ресторан Веб-архитектор

Примеры

Примеры W3.CSS Демонстрации W3.CSS Шаблоны W3.CSS

использованная литература

Справочник по W3.CSS W3.CSS Загрузки

Пример использования 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";
}