Контейнер класса
Класс w3-контейнер является наиболее важным из классов W3.CSS.
Класс w3-контейнер используется для всех типов HTML элементов контейнеров , таких как:
<DIV>, <заголовок>, <сноска>, <статья>, <раздел>, <BLOCKQUOTE>, <форма>, и многое другое.
Этот заголовок зеленый.
Это сноска красный.
Эта статья является светло-серый и текст коричневого цвета.
Контейнеры обеспечивает равенство
Класс w3-контейнер имеет важное значение для обеспечения равенства:
- Общие поля
- Общие паддинги
- Общие вертикальные выравнивания
- Общие горизонтальные выравнивания
- Общие шрифты
- Общие цветы
пример
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Попробуй сам " Чтобы добавить цвет, просто добавьте w3- класс цвет:
пример
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Попробуй сам " Заголовки и колонтитулы
Класс w3-контейнер может быть использован для применения стиля заголовка:
Заголовок 1
Класс w3-контейнер может быть использован для применения стиля нижнего колонтитула:
пример
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Попробуй сам " Статьи и Разделы
Класс w3-контейнер может быть использован для стиля <статьи> и <раздел> элементы:
пример
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Попробуй сам "  | Многие веб-страницы использует элементы <div> вместо <статьи> и <раздел> элементы. |
|---|
Примечания, панели, и котировки
Класс w3-контейнер можно использовать для отображения всех видов заметок:
пример
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Попробуй сам " Класс w3-контейнер можно использовать для отображения всех видов панелей:
Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами более 13 миллионов жителей.
пример
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> Попробуй сам " Класс w3-контейнер можно использовать для отображения всех видов цитат:
пример
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
Попробуй сам " Перейти к главе W3.CSS границ , чтобы узнать больше о просмотре заметок, панелей и кавычки.
Комбинации
заголовок
Автомобиль представляет собой колесное, с автономным питанием двигателя транспортное средство, используемое для перевозки. Большинство определений термина указывается, что автомобили предназначены для работы в первую очередь на дорогах. (Википедия)
Пример использования элементов HTML <div>
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> Попробуй сам " Пример использования HTML семантические элементы
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> Попробуй сам " Контейнер Перетяжка
Классw3-контейнер имеет 16px по умолчанию левый и правый отступы, а не верхний или нижний отступ:
Как правило, вам не придется менять отступы по умолчанию контейнера, так как пункты и заголовок обеспечивают поля, которые моделируют заполнение.
Я Заголовок 1
Я абзац.
пример
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Попробуй сам " Контейнер Секционирование
Классw3-контейнер не имеет наверху списка по умолчанию или нижний край.
Два контейнера будут отображаться wothout запас между ними:
Я Заголовок 1
Я абзац.
Я Заголовок 1
Я абзац.
КлассW3-секция может быть использована для отделения контейнеров.Он имеет 16px верхний и нижний край:
Я Заголовок 1
Я абзац.
Я Заголовок 1
Я абзац.
пример
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Попробуй сам " Скрытие (закрытия) Контейнеры
Скрытие или закрытия контейнера легко:
Чтобы закрыть этот контейнер, нажмите на X в правом верхнем углу.
пример
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
Попробуй сам " Открытие контейнеров
Открытие закрытых контейнеров легко:
пример
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
Попробуй сам "