Учебники

W3.CSS — Краткое руководство

Ноябрь 23, 2018

W3.CSS — Обзор

W3.CSS — это каскадная таблица стилей (CSS), разработанная w3schools.com . Это помогает в создании более быстрых, красивых и отзывчивых сайтов. Он основан на Google Material Design.

Некоторые из его характерных особенностей заключаются в следующем —

  • Встроенное адаптивное проектирование

  • Стандартный CSS

  • Вдохновленный Google Material Design

  • Бесплатно использовать

Встроенное адаптивное проектирование

Стандартный CSS

Вдохновленный Google Material Design

Бесплатно использовать

Адаптивный дизайн

  • W3.CSS имеет встроенный адаптивный дизайн, так что веб-сайт, созданный с использованием W3.CSS, будет переделывать себя в соответствии с размером устройства.

  • W3.CSS имеет 12-колоночную подвижную сетку для мобильных устройств, которая поддерживает адаптивные классы для экрана малого, большого и среднего размера.

  • Классы W3.CSS созданы таким образом, что веб-сайт может соответствовать любому размеру экрана.

  • Веб-сайты, созданные с использованием W3.CSS, полностью совместимы с ПК, планшетами и мобильными устройствами.

W3.CSS имеет встроенный адаптивный дизайн, так что веб-сайт, созданный с использованием W3.CSS, будет переделывать себя в соответствии с размером устройства.

W3.CSS имеет 12-колоночную подвижную сетку для мобильных устройств, которая поддерживает адаптивные классы для экрана малого, большого и среднего размера.

Классы W3.CSS созданы таким образом, что веб-сайт может соответствовать любому размеру экрана.

Веб-сайты, созданные с использованием W3.CSS, полностью совместимы с ПК, планшетами и мобильными устройствами.

Стандартный CSS

  • W3.CSS использует только стандартный CSS, и его очень легко изучить.

  • Нет никакой зависимости от какой-либо внешней библиотеки JavaScript, такой как jQuery.

W3.CSS использует только стандартный CSS, и его очень легко изучить.

Нет никакой зависимости от какой-либо внешней библиотеки JavaScript, такой как jQuery.

Материал Дизайн

  • W3.CSS вдохновлен Google Material Design.

  • Он поддерживает бумажный дизайн.

  • Поддерживает тени и жирные цвета.

  • Цвета и оттенки остаются одинаковыми на разных платформах и устройствах.

W3.CSS вдохновлен Google Material Design.

Он поддерживает бумажный дизайн.

Поддерживает тени и жирные цвета.

Цвета и оттенки остаются одинаковыми на разных платформах и устройствах.

И самое главное, это абсолютно бесплатно в использовании.

W3.CSS — Настройка среды

Как использовать W3.CSS?

Есть два способа использования W3.CSS —

  • Локальная установка. Вы можете загрузить файл W3.CSS на свой локальный компьютер и включить его в свой HTML-код.

  • Версия на основе CDN. Вы можете включить файл W3.CSS в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка. Вы можете загрузить файл W3.CSS на свой локальный компьютер и включить его в свой HTML-код.

Версия на основе CDN. Вы можете включить файл W3.CSS в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка

  • Перейдите на https://www.w3schools.com/w3css/w3css_downloads.asp, чтобы загрузить последнюю доступную версию.

  • Затем поместите загруженный файл w3.css в каталог вашего сайта, например, / css.

Перейдите на https://www.w3schools.com/w3css/w3css_downloads.asp, чтобы загрузить последнюю доступную версию.

Затем поместите загруженный файл w3.css в каталог вашего сайта, например, / css.

пример

Теперь вы можете включить CSS- файл в ваш HTML-файл следующим образом: 

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

Это даст следующий результат —

CDN основанная версия

Вы можете включить файл W3.CSS в свой HTML-код непосредственно из сети доставки контента (CDN). W3Schools.com предоставляет контент для последней версии.

Примечание. В этом руководстве мы используем версию библиотеки W3Schools.com CDN.

пример

Теперь давайте перепишем приведенный выше пример, используя библиотеку jQuery из W3Schools.com CDN.

Live Demo 

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

Это даст следующий результат —

W3.CSS — Контейнеры

HTML5 имеет следующие элементы контейнера —

  • <div> — Предоставляет общий контейнер для содержимого HTML.

  • <header> — Представляет раздел заголовка.

  • <нижний колонтитул> — представляет раздел нижнего колонтитула.

  • <article> — представляет статьи.

  • <section> — Предоставляет универсальный контейнер для различных типов разделов.

<div> — Предоставляет общий контейнер для содержимого HTML.

<header> — Представляет раздел заголовка.

<нижний колонтитул> — представляет раздел нижнего колонтитула.

<article> — представляет статьи.

<section> — Предоставляет универсальный контейнер для различных типов разделов.

W3.CSS предоставляет w3-контейнер в качестве основного класса для стилизации всех вышеупомянутых контейнеров. W3.CSS также имеет другие классы, такие как w3-border , w3-red , w3-teal , w3-padding-32 для добавления дополнительных атрибутов стиля в контейнеры.

пример

В следующем примере демонстрируется использование класса w3-container для стилизации различных контейнеров.

w3css_containers.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-red">
         <h1>HTML5 Tutorial</h1>
      </header>
      
      <div class = "w3-container w3-border w3-teal">
         <p>HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a mark up language.</p>
      </div>
      
      <article class = "w3-container">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </article>
      
      <section class = "w3-container">
         <p>HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.</p>
      </section>
      
      <footer class = "w3-container w3-red">
         <p>Copyright @TutorialsPoint.COM</p>
      </footer>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS также предоставляет контейнеры с возможностью скрытия / закрытия. Смотрите следующий пример —

w3css_hide_container.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <div class = "w3-container w3-border w3-teal">
         <span class = "w3-closebtn" onclick = "this.parentElement.style.display = 'none'">X</span>
         <p>Close container by clicking on the X in the upper right corner.</p>
      </div>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Кодовая раскраска

W3.CSS обеспечивает отличную поддержку подсветки синтаксиса следующих языков —

  • HTML — используйте классы w3-кода htmlHigh на контейнере, имеющем HTML-код.

  • CSS — Используйте классы w3-code cssHigh на контейнере, имеющем CSS Code.

  • JS — использовать классы w3-кода jsHigh на контейнере, имеющем код CSS.

HTML — используйте классы w3-кода htmlHigh на контейнере, имеющем HTML-код.

CSS — Используйте классы w3-code cssHigh на контейнере, имеющем CSS Code.

JS — использовать классы w3-кода jsHigh на контейнере, имеющем код CSS.

Вы должны включить следующий скрипт, чтобы иметь ссылку на файл js, чтобы иметь поддержку подсветки синтаксиса — 

<script src = "https://www.w3schools.com/lib/w3codecolors.js"></script>

w3css_color_coding.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>HTML Syntax Highlighted</h2>
      </header>
      <div class = "w3-code htmlHigh">
         <html>
            <head>
               <title>The W3.CSS Example</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="css/w3.css">
            </head>
            
            <body>
               <header class="w3-container w3-teal">
                  <h1>Hello World!</h1>
               </header>
            </body>
         </html>
      </div>
      
      <header class="w3-container w3-teal">
         <h2>CSS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         .bold {
            font-weight:bold;
         }
         #boldLabel {
            font-weight:bold;
         }
         table, th, td {
            font-family:sans;
         }
      </div>
      
      <header class = "w3-container w3-teal">
         <h2>JS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         <script type="text/javascript">
            function(message){
            }
            var message = "Hello, World!";
            alert(message);
         </script>
      </div>
      <script src="https://www.w3schools.com/lib/w3codecolors.js"></script>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Карты

В W3.CSS есть несколько специальных классов для отображения контейнеров в виде бумажных карточек с тенью.

Старший Имя класса и описание
1

w3-карты

Стилизует контейнер для любого содержимого HTML с рамкой

2

w3-карта-2

Стилизует контейнер для любого содержимого HTML с тенью на 2 пикселя.

3

w3-карта-4

Стилизует контейнер для любого содержимого HTML с тенью на 4 пикселя.

4

w3-карта-8

Стилизует контейнер для любого содержимого HTML с тенью на 8 пикселей

5

w3-карты 12

Стилизует контейнер для любого содержимого HTML с тенью на 12 пикселей

w3-карты

Стилизует контейнер для любого содержимого HTML с рамкой

w3-карта-2

Стилизует контейнер для любого содержимого HTML с тенью на 2 пикселя.

w3-карта-4

Стилизует контейнер для любого содержимого HTML с тенью на 4 пикселя.

w3-карта-8

Стилизует контейнер для любого содержимого HTML с тенью на 8 пикселей

w3-карты 12

Стилизует контейнер для любого содержимого HTML с тенью на 12 пикселей

пример

w3css_cards.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <style>
         div {
            width : 200px;	
            height : 200px;	
         } 
      </style>
   </head>
   
   <body>   
      <header class = "w3-container w3-teal">   
         <h2>Yellow Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-2 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-4 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-8 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <header class = "w3-container w3-teal">   
         <h2>White Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-white">
         <p><b>TODO:</b> Learn W3.CSS</p>
      </div>
      <div class = "w3-card-8 w3-white">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <div class = "w3-card-4" style = "width:550px;">
         <header class = "w3-container w3-blue">
            <h1>HTML5 Tutorial</h1>
         </header>
         
         <div class = "w3-container" style = "width:550px;">
            <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
         </div>
      </div>
      <br/>
      
      <header class  =  "w3-container w3-teal">   
         <h2>Image Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card-12" style = "width:255px; height: 230px;">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-container">
            <p>Learn HTML5</p>
         </div>
      </div>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Адаптивный Дизайн

В W3.CSS есть несколько специальных классов для создания адаптивного дизайна.

Старший Имя класса и описание
1

w3 половина

Устанавливает контейнер на половину окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

2

и3-третьих

Устанавливает контейнер на 1/3 окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

3

w3 четверть

Устанавливает, что контейнер занимает 1/4 окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

4

w3-цв

Определяет столбец в сетке из 12 столбцов.

5

и3-строка

Определяет контейнер без отступов, который будет использоваться для адаптивных классов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными.

w3 половина

Устанавливает контейнер на половину окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

и3-третьих

Устанавливает контейнер на 1/3 окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

w3 четверть

Устанавливает, что контейнер занимает 1/4 окна на устройствах среднего или большого экрана. Если размер экрана меньше 601 пикселя, размер контейнера увеличивается до 100%.

w3-цв

Определяет столбец в сетке из 12 столбцов.

и3-строка

Определяет контейнер без отступов, который будет использоваться для адаптивных классов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными.

пример

w3css_responsive_design.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-half w3-red">
            <h2>w3-half</h2>
            <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-half">
            <h2>w3-half</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-third w3-red">
            <h2>w3-third</h2>
            <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-third">
            <h2>w3-third</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-quarter w3-red">
            <h2>w3-quarter</h2>
            <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-quarter">
            <h2>w3-quarter</h2>
         </div>
      </div>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Сетки

W3.CSS предоставляет сетку с 12 колонками, реагирующими на жидкость.

Он использует классы стиля w3-row и w3-col для определения строк и столбцов соответственно.

Старший Имя класса и описание
1

и3-строка

Определяет контейнер без отступов, который будет использоваться для отзывчивых столбцов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными.

2

w3-цв

Определяет столбец с подклассами

и3-строка

Определяет контейнер без отступов, который будет использоваться для отзывчивых столбцов. Этот класс обязателен, чтобы адаптивные классы были полностью адаптивными.

w3-цв

Определяет столбец с подклассами

В w3-col есть несколько подклассов, предназначенных для разных типов экранов.

Колонны для небольших экранных устройств

Вот список стилей на уровне столбцов для небольших экранных устройств, как правило, смартфонов.

Старший Имя класса и описание
1

s1

Определяет 1 из 12 столбцов с шириной 08,33%.

2

s2

Определяет 2 из 12 столбцов с шириной 16,66%.

3

s3

Определяет 3 из 12 столбцов с шириной 25,00%.

4

s4

Определяет 4 из 12 столбцов с шириной 33,33%.

5

s12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов с небольшим экраном.

s1

Определяет 1 из 12 столбцов с шириной 08,33%.

s2

Определяет 2 из 12 столбцов с шириной 16,66%.

s3

Определяет 3 из 12 столбцов с шириной 25,00%.

s4

Определяет 4 из 12 столбцов с шириной 33,33%.

s12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов с небольшим экраном.

Колонки для средних экранов

Вот список стилей на уровне столбцов для устройств со средним экраном, обычно для планшетов.

Старший Имя класса и описание
1

m1

Определяет 1 из 12 столбцов с шириной 08,33%.

2

м2

Определяет 2 из 12 столбцов с шириной 16,66%.

3

м3

Определяет 3 из 12 столбцов с шириной 25,00%.

4

m4

Определяет 4 из 12 столбцов с шириной 33,33%.

5

m12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов среднего размера.

m1

Определяет 1 из 12 столбцов с шириной 08,33%.

м2

Определяет 2 из 12 столбцов с шириной 16,66%.

м3

Определяет 3 из 12 столбцов с шириной 25,00%.

m4

Определяет 4 из 12 столбцов с шириной 33,33%.

m12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для телефонов среднего размера.

Колонны для устройств с большим экраном

Вот список стилей на уровне столбцов для устройств с большим экраном, обычно для ноутбуков.

Старший Имя класса и описание
1

| 1

Определяет 1 из 12 столбцов с шириной 08,33%.

2

| 2

Определяет 2 из 12 столбцов с шириной 16,66%.

3

| 3

Определяет 3 из 12 столбцов с шириной 25,00%.

4

| 4

Определяет 4 из 12 столбцов с шириной 33,33%.

5

| 12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для устройств с большим экраном.

| 1

Определяет 1 из 12 столбцов с шириной 08,33%.

| 2

Определяет 2 из 12 столбцов с шириной 16,66%.

| 3

Определяет 3 из 12 столбцов с шириной 25,00%.

| 4

Определяет 4 из 12 столбцов с шириной 33,33%.

| 12

Определяет 12 из 12 столбцов с шириной 100%. Класс по умолчанию для устройств с большим экраном.

использование

Каждый подкласс определяет количество столбцов сетки, которые будут использоваться, в зависимости от типа устройства. Рассмотрим следующий фрагмент HTML. 

<div class = "w3-row">
   <div class = "w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

Столбцы по умолчанию, которые будут использоваться на устройстве, равны 12, если подкласс не указан в атрибуте класса HTML-элемента.

пример

w3css_grids.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <div class = "w3-row">
         <div class = "w3-col m1 w3-center w3-grey">1</div>
         <div class = "w3-col m1 w3-center">2</div>
         <div class = "w3-col m1 w3-center w3-grey">3</div>
         <div class = "w3-col m1 w3-center">4</div>
      
         <div class = "w3-col m1 w3-center w3-grey">5</div>
         <div class = "w3-col m1 w3-center">6</div>
         <div class = "w3-col m1 w3-center w3-grey">7</div>
         <div class = "w3-col m1 w3-center">8</div>
      
         <div class = "w3-col m1 w3-center w3-grey">9</div>
         <div class = "w3-col m1 w3-center">10</div>
         <div class = "w3-col m1 w3-center w3-grey">11</div>
         <div class = "w3-col m1 w3-center">12</div>
      </div>
      
      <div class = "w3-row">
         <div class = "w3-col w3-container m4 l3 w3-yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>
      
         <div class = "w3-col w3-container s4 m8 l9">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Формы

W3.CSS имеет очень красивый и отзывчивый CSS для проектирования форм. Используются следующие CSS —

Старший Имя класса и описание
1

w3-группа

Представляет граничный контейнер. Может использоваться для группировки метки и ввода.

2

и3-вход

Украшает элемент управления вводом.

3

w3-этикетки

Украшает этикетку.

4

w3-checkbox w3-checkmark

Украсьте флажок / переключатель.

w3-группа

Представляет граничный контейнер. Может использоваться для группировки метки и ввода.

и3-вход

Украшает элемент управления вводом.

w3-этикетки

Украшает этикетку.

w3-checkbox w3-checkmark

Украсьте флажок / переключатель.

пример

w3css_forms.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <form class = "w3-container w3-card-8">
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">User Name</label>
         </div>
         
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">Email</label>
         </div>
         
         <div class = "w3-group">
            <textarea class = "w3-input" style = "width:90%" required></textarea>
            <label class = "w3-label">Comments</label>
         </div>
         <div class = "w3-row">
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "checkbox" checked = "checked">
                  <div class = "w3-checkmark"></div> Married
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox">
                  <div class = "w3-checkmark"></div> Single
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
               <br>
               <br>
            </div>
            
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "male" checked>
                  <div class = "w3-checkmark"></div> Male
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female">
                  <div class = "w3-checkmark"></div> Female
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
            </div>
         </div>
      </form>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Кнопки

W3.CSS имеет очень красивый и отзывчивый CSS для настройки внешнего вида кнопки. Используются следующие CSS —

Старший Имя класса и описание
1

w3-BTN

Представляет стандартную кнопку. Может также использоваться для стилизации ссылки как кнопки.

2

w3-БТН-плавающая

Представляет собой плавающую кнопку, имеющую круглую форму.

3

w3-БТН-плавающей большой

Представляет большую плавающую кнопку.

w3-BTN

Представляет стандартную кнопку. Может также использоваться для стилизации ссылки как кнопки.

w3-БТН-плавающая

Представляет собой плавающую кнопку, имеющую круглую форму.

w3-БТН-плавающей большой

Представляет большую плавающую кнопку.

пример

w3css_buttons.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Standard Buttons</h2>
      <button class = "w3-btn">Click Me</button>
      <button class = "w3-btn w3-teal">Click Me</button>
      <button class = "w3-btn w3-disabled">I am disabled</button>
      
      <h2>Links as Buttons</h2>
      <a class = "w3-btn">Link</a>
      <a class = "w3-btn w3-teal">Link</a>
      <a class = "w3-btn w3-disabled">Disabled Link</a>
      
      <h2>Floating Buttons</h2>
      <a class = "w3-btn-floating">+</a>
      <a class = "w3-btn-floating w3-teal">+</a>
      <a class = "w3-btn-floating w3-disabled">+</a>
      
      <h2>Large Floating Buttons</h2>
      <a class = "w3-btn-floating-large">+</a>
      <a class = "w3-btn-floating-large w3-teal">+</a>
      <a class = "w3-btn-floating-large w3-disabled">+</a>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Подсказки

W3.CSS поддерживает подсказки другого типа, используя класс w3-tooltip. Посмотрите на следующий пример. Здесь мы поместили всплывающую подсказку в div и изображение и применили w3-подсказку к родительскому div. 

<div class = "w3-tooltip">
   <div class = "w3-text w3-container w3-teal" style = "width:255px;">
      <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
   </div>
   <div>
      <img src = "html5-mini-logo.jpg" alt = "html5">
   </div>
</div>

пример

w3css_tooltips.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Tooltips</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Hover Demo</h2>
      <div class = "w3-tooltip">
         <div class = "w3-text w3-container w3-teal" style = "width:255px;">
            <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
         </div>
         
         <div>
            <img src = "html5-mini-logo.jpg" alt = "html5">
         </div>
      </div>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Модальный диалог

W3.CSS можно использовать для отображения настраиваемого модального диалогового окна вместо стандартного предупреждения JavaScript.

Он использует классы стиля w3-row и w3-col для определения строк и столбцов соответственно.

Старший Имя класса и описание
1

модальный-диалог

Представляет главное родительское окно для определения диалогового окна.

2

w3-модальный-диалог

Представляет контейнер содержимого диалога.

3

w3-модальное содержание

Представляет содержимое диалога.

модальный-диалог

Представляет главное родительское окно для определения диалогового окна.

w3-модальный-диалог

Представляет контейнер содержимого диалога.

w3-модальное содержание

Представляет содержимое диалога.

пример

w3css_modal_dialog.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Modal dialog</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Modal dialog Demo</h2>
      <a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a>
      <div id = "model-dialog" class = "w3-modal">
         <div class = "w3-modal-dialog">
            <div class = "w3-modal-content w3-card-8">
               <header class = "w3-container w3-teal">
                  <a href = "#" class = "w3-closebtn">×</a>
                  <h2>TutorialsPoint</h2>
               </header>
               <div class = "w3-container">
                  <p>Hello World!</p>
               </div>
               <footer class = "w3-container w3-teal">
                  <p>@TutorialsPoint.COM</p>
               </footer>
            </div>
         </div>
      </div>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Таблицы

W3.CSS может использоваться для отображения разных типов таблиц с использованием различных стилей над таблицей w3.

Старший Имя класса и описание
1

w3 стол

Представляет базовую таблицу без каких-либо границ.

2

w3-полосатый

Отображает раздетую таблицу.

3

w3 каймой

Рисует таблицу с рамкой между рядами.

4

w3-граница

Рисует таблицу с границами.

5

w3-карты

Рисует стол как карту.

6

w3 реагирующих

Рисует адаптивную таблицу, показывающую горизонтальную полосу прокрутки, если экран слишком мал для отображения содержимого.

7 w3-крошечное

Рисует таблицу с очень маленьким шрифтом.

8

w3-маленький

Рисует таблицу мелким шрифтом.

9

w3-большой

Рисует таблицу крупным шрифтом.

10

w3-XLarge

Рисует таблицу с очень крупным шрифтом.

11

w3-XXLarge

Рисует таблицу с очень очень крупным шрифтом.

12

w3-XXXLarge

Рисует таблицу с очень высоким очень крупным шрифтом.

13

w3-джамбо

Рисует таблицу с большим шрифтом.

w3 стол

Представляет базовую таблицу без каких-либо границ.

w3-полосатый

Отображает раздетую таблицу.

w3 каймой

Рисует таблицу с рамкой между рядами.

w3-граница

Рисует таблицу с границами.

w3-карты

Рисует стол как карту.

w3 реагирующих

Рисует адаптивную таблицу, показывающую горизонтальную полосу прокрутки, если экран слишком мал для отображения содержимого.

w3-маленький

Рисует таблицу мелким шрифтом.

w3-большой

Рисует таблицу крупным шрифтом.

w3-XLarge

Рисует таблицу с очень крупным шрифтом.

w3-XXLarge

Рисует таблицу с очень очень крупным шрифтом.

w3-XXXLarge

Рисует таблицу с очень высоким очень крупным шрифтом.

w3-джамбо

Рисует таблицу с большим шрифтом.

пример

w3css_tables.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Tables</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <table class = "w3-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Stripped Table with borders</h3>
      <table class = "w3-table w3-striped w3-bordered w3-border">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      <hr/>
      
      <h3>Table as Card</h3>
      <table class = "w3-table w3-card-4">
         <thead>
            <tr>
            <th>Student</th>
            <th>Class</th>
            <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Responsive table</h3>
      <div class = "w3-responsive">
         <table class = "w3-table w3-card-4">
            <thead>
               <tr>
                  <th>Student</th>
                  <th>Class</th>
                  <th>Data #1</th>
                  <th>Data #2</th>
                  <th>Data #3</th>
                  <th>Data #4</th>
                  <th>Data #5</th>
                  <th>Data #6</th>
                  <th>Data #7</th>
                  <th>Data #8</th>
                  <th>Data #9</th>
                  <th>Data #10</th>
               </tr>
            </thead>
            
            <tbody>
               <tr>
                  <td>Mahesh Parashar</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Rahul Sharma</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Mohan Sood</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <h3>Table with very small font</h3>
      <table class = "w3-table w3-tiny">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
               </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Списки

W3.CSS может использоваться для отображения разных типов списков с использованием различных стилей поверх w3-ul.

Старший Имя класса и описание
1

и3-уль

Представляет основной список без каких-либо границ.

2

w3-полосатый

Отображает раздетый список.

3

w3 каймой

Рисует список с границей между строками.

4

w3-граница

Рисует список с рамкой.

5

w3-карты

Рисует список как карточку.

6

w3-крошечное

Рисует список с очень маленьким шрифтом.

7

w3-маленький

Рисует список мелким шрифтом.

8

w3-большой

Рисует список крупным шрифтом.

9

w3-XLarge

Рисует список с очень крупным шрифтом.

10

w3-XXLarge

Рисует список с очень очень крупным шрифтом.

11

w3-XXXLarge

Рисует список с очень высоким очень крупным шрифтом.

12

w3-джамбо

Рисует список с большим шрифтом.

и3-уль

Представляет основной список без каких-либо границ.

w3-полосатый

Отображает раздетый список.

w3 каймой

Рисует список с границей между строками.

w3-граница

Рисует список с рамкой.

w3-карты

Рисует список как карточку.

w3-крошечное

Рисует список с очень маленьким шрифтом.

w3-маленький

Рисует список мелким шрифтом.

w3-большой

Рисует список крупным шрифтом.

w3-XLarge

Рисует список с очень крупным шрифтом.

w3-XXLarge

Рисует список с очень очень крупным шрифтом.

w3-XXXLarge

Рисует список с очень высоким очень крупным шрифтом.

w3-джамбо

Рисует список с большим шрифтом.

пример

w3css_lists.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Lists</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>List Demo</h2>
      <hr/>
      <h3>Simple List</h3>
      <ul class = "w3-ul">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>Stripped List with borders</h3>
      <ul class = "w3-ul w3-striped w3-bordered w3-border">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List as Card</h3>
      <ul class = "w3-ul w3-card-4">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List with very small font</h3>
      <ul class = "w3-ul w3-tiny">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Изображения

W3.CSS предоставляет опции для отображения изображений красивыми и интересными способами, используя w3-изображение в качестве основного класса.

Старший Имя класса и описание
1

w3-изображение

Представляет базовое стилизованное изображение без каких-либо границ.

2

w3-круг

Отображает изображение внутри круга

3

w3-заголовок

Используется для размещения текста поверх изображения.

4

w3-карты

Рисует изображение как карточку.

w3-изображение

Представляет базовое стилизованное изображение без каких-либо границ.

w3-круг

Отображает изображение внутри круга

w3-заголовок

Используется для размещения текста поверх изображения.

w3-карты

Рисует изображение как карточку.

пример

w3css_images.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Images Demo</h2>
      <hr/>
      <h3>Simple Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5">
      </div>
      
      <h3>Circled Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      
      <h3>Text over image</h3>
      <div class = "w3-image"><img src = "html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-title w3-text-black">Learn HTML5</div>
      </div>
      
      <h3>Image as a card</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-card-4">
      </div>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Иконки

W3.CSS поддерживает следующие популярные библиотеки значков —

  • Font Awesome Icons

  • Google Material Icons

  • Bootstrap Иконки

Font Awesome Icons

Google Material Icons

Bootstrap Иконки

использование

Чтобы использовать значок, поместите имя значка в класс HTML-элемента <i>. Чтобы контролировать размер иконки, вы можете использовать следующие классы —

Старший Имя класса и описание
1

w3-крошечное

Рисует иконку очень маленького размера.

2

w3-маленький

Рисует иконку небольшого размера.

3

w3-большой

Рисует иконку большого размера.

4

w3-XLarge

Рисует иконку очень большого размера.

5

w3-XXLarge

Рисует иконку очень большого размера.

6

w3-XXXLarge

Рисует иконку очень высокого очень большого размера.

w3-крошечное

Рисует иконку очень маленького размера.

w3-маленький

Рисует иконку небольшого размера.

w3-большой

Рисует иконку большого размера.

w3-XLarge

Рисует иконку очень большого размера.

w3-XXLarge

Рисует иконку очень большого размера.

w3-XXXLarge

Рисует иконку очень высокого очень большого размера.

пример

w3css_icons.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "w3-container">
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud w3-large"></i>
      <i class = "fa fa-cloud w3-xlarge"></i>
      <i class = "fa fa-cloud w3-xxlarge"></i>
      <i class = "fa fa-cloud w3-xxxlarge"></i>
      <i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>
      
      <h3>Google Material Design Icon Demo</h3>
      <i class = "material-icons w3-large">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons w3-xlarge">cloud</i>
      <i class = "material-icons w3-xxlarge">cloud</i>
      <i class = "material-icons w3-xxxlarge">cloud</i>
      <i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
      <i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Цвета

W3.CSS поддерживает богатый набор цветовых классов. Эти цветовые классы вдохновлены и разработаны с учетом цветов, используемых в маркетинге, дорожных знаков и заметок.

  • w3-красный

  • w3-розовый

  • w3-фиолетовый

  • w3-глубоко-фиолетовый

  • w3-индиго

  • w3-синий

  • w3-светло-голубой

  • и3-циан

  • w3-бирюзовые

  • w3-зеленый

  • w3-светло-зеленый

  • и3-кальциево

  • w3-хаки

  • w3-желтый

  • w3-янтарный

  • w3-оранжевый

  • w3-темно-оранжевый цвет

  • w3-сине-серый

  • и3-коричневого цвета

  • и3-светло-серый

  • w3-серый

  • w3-темно-серый

  • w3-черный

w3-красный

w3-розовый

w3-фиолетовый

w3-глубоко-фиолетовый

w3-индиго

w3-синий

w3-светло-голубой

и3-циан

w3-бирюзовые

w3-зеленый

w3-светло-зеленый

и3-кальциево

w3-хаки

w3-желтый

w3-янтарный

w3-оранжевый

w3-темно-оранжевый цвет

w3-сине-серый

и3-коричневого цвета

и3-светло-серый

w3-серый

w3-темно-серый

w3-черный

Цветные Темы

W3.CSS обеспечивает отличную поддержку для применения темы к веб-сайту, используя свою общедоступную тему css. Некоторые из примеров приведены ниже —

Старший CSS имя и описание
1

w3-тема-indigo.css

CSS с вариантами цвета индиго

2

w3-тема-red.css

CSS, имеющий красный вариант цвета

w3-тема-indigo.css

CSS с вариантами цвета индиго

w3-тема-red.css

CSS, имеющий красный вариант цвета

Чтобы использовать темы, перейдите по адресу https://www.w3schools.com/w3css/w3css_downloads.asp, чтобы загрузить необходимый файл CSS.

пример

w3css_colors.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Color Themes</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "css/w3-theme-red.css">
   </head>
   
   <body class = "w3-container">
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "w3-card-4">
         <div class = "w3-container w3-theme w3-card-2">
            <h1>Red Colored Theme</h1>
         </div>
         
         <div class = "w3-container w3-text-theme">
            <h2>w3-text-theme - Theme for Text</h2>
         </div>
         
         <ul class = "w3-ul w3-border-top">
            <li class = "w3-theme-l5" style = "position:relative">
            <a class = "w3-btn-floating-large w3-theme-action w3-right"
            style = "position:absolute;top:-28px;right:16px;">+</a>
            <p>Using w3-theme-l5 / w3-theme-light style</p>
            </li>
            <li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
            <li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
            <li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
            <li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
            <li class = "w3-theme"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
         </ul>
      </div>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Навигация

W3.CSS имеет несколько специальных классов для быстрого отображения панели навигации или меню на веб-сайте.

Старший Имя класса и описание
1

w3-topnav

Стилизует список как горизонтальное меню / панель навигации.

2

w3-sidenav

Стилизует список как вертикальное меню / панель навигации.

w3-topnav

Стилизует список как горизонтальное меню / панель навигации.

w3-sidenav

Стилизует список как вертикальное меню / панель навигации.

пример

w3css_navigation.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Navigation</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body class = "w3-container">
      <h2>Navigation Demo</h2>
      <hr/>
      <h3>Horizontal top navigation bar</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using font awesome icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="fa fa-home"></i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using material icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="material-icons">home</i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using Side Navigation</h3>
      <nav class = "w3-sidenav w3-red w3-card-2" style="width:25%">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
   </body>
</html>

Результат

Проверьте результат.

W3.CSS — Утилиты

В W3.CSS есть несколько служебных классов, которые очень полезны для повседневных нужд проектирования.

  • Утилиты по цвету — Примеры: w3-красный, w3-желтый

  • Вспомогательные классы заполнения — Примеры: w3-padding-jumbo, w3-padding-16

  • Полезные классы маржи — Примеры: w3-margin-8, w3-margin-64

  • Утилита Border. Примеры: w3-border-left, w3-border-right

  • Утилиты размера size — Примеры: w3-tiny, w3-small

  • Утилита Circle — пример: w3-circle

  • Сервисный класс Center — Пример: w3-center

Утилиты по цвету — Примеры: w3-красный, w3-желтый

Вспомогательные классы заполнения — Примеры: w3-padding-jumbo, w3-padding-16

Полезные классы маржи — Примеры: w3-margin-8, w3-margin-64

Утилита Border. Примеры: w3-border-left, w3-border-right

Утилиты размера size — Примеры: w3-tiny, w3-small

Утилита Circle — пример: w3-circle

Сервисный класс Center — Пример: w3-center

пример

w3css_utilities.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Utilities</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>W3.CSS Utilities</h2>
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "w3-container w3-red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Padding Utilities Demo</h3>
      <div class = "w3-container w3-red w3-padding-jumbo">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-padding-16">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Margin Utilities Demo</h3>
      <div class = "w3-container w3-margin-64">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-margin-8">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Border Utilities Demo</h3>
      <div class = "w3-container w3-red w3-border-left w3-border-right">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-border">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
 
      <h3>Size Utilities Demo</h3>
      <div class = "w3-container">
         <p class = "w3-small">Using w3-small font.</p>
         <p>Using Default (medium).</p>
         <p class = "w3-large">Using w3-large font.</p>
         <p class = "w3-xlarge">Using w3-xlarge font.</p>
      </div>

      <h3>Circle Utility Demo</h3>
      <div class = "w3-container">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      <h3>Center Utility Demo</h3>
      <div class = "w3-container w3-center w3-black w3-card-2">
         <img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
      </div>
   </body>
</html>

Результат

Проверьте результат.

130
Share: