Пограничные классы
В W3.CSS пограничные классы могут быть использованы на любых HTML-элементов.
У меня есть границы со всех сторон.
У меня есть красный нижнюю границу
У меня есть закругленные границы.
пример
<div class="w3-border">
<p>I have borders on all sides.</p>
</div>
<div class="w3-border-bottom w3-border-red">
<p>I have
a red bottom border.</p>
</div>
<div class="w3-border
w3-round-xlarge">
<p>I have rounded borders.</p>
</div>
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>I have a blue leftbar.</p>
</div>
Попробуй сам " Отображение Примечания
Примечания часто отображаются с бледным цветом и цветной полосой:
пример
<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> Попробуй сам " Отображение панелей
Панели могут быть отображены на миллион по-разному:
Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами более 13 миллионов жителей.
Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами более 13 миллионов жителей.
Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами более 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> Попробуй сам " Если вы используете HTML <BLOCKQUOTE>, помните, что HTML будет добавить дополнительный левый край:
"Сделать этотакже просто,какэтовозможно, но не проще."
Альберт Эйнштейн
пример
<blockquote 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>
</blockquote> Попробуй сам " Hoverable Границы
В w3- при наведении курсора-цветовые классы внешних пунктов пропуска изменить цвет границы курсора мыши над:
Красный hoverable границы
Фиолетовый граница, которая становится синим при наведении курсора мыши
пример
<div class="w3-container w3-border w3-hover-border-red">
<p>Red
hoverable border</p>
</div> Попробуй сам "