Отображение карты
Джон
Архитектор и инженер
| Класс | Определяет |
|---|---|
| W3-карты | Контейнер для любого содержимого HTML (с рамкой) |
| W3-карта-2 | Контейнер для любого содержимого HTML (2px Окаймленный тень) |
| W3-карта-4 | Контейнер для любого содержимого HTML (4px Окаймленный тень) |
| W3-карта-8 | Контейнер для любого содержимого HTML (8px Окаймленный тень) |
| W3-карта-12 | Контейнер для любого содержимого HTML (12px граничила тень) |
| W3-карта-16 | Контейнер для любого содержимого HTML (16px граничила тень) |
| W3-карта-24 | Контейнер для любого содержимого HTML (24px граничила тень) |
Цветные карты
Создание бумажных карт , как с классами w3-карт, а также использовать класс W3-цвета , чтобы добавить цвет:
W3-карта-2
W3-карта-4
W3-карта-8
фотокарточка
Язык тролля в Хардангер, Норвегия
пример
<div class="w3-card-12">
<img src="img_fjords.jpg"
alt="Norway">
<div class="w3-container w3-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div> Попробуй сам " карточка Содержание
заголовок
Какой-то текст .. Lorem Ipsum Dolor сидеть Амет, consectetur adipisicing Элит, СЭД у eiusmod Tempor incididunt ут Лаборе и др Dolore магна aliqua. Ут enim объявления миним veniam, Quis nostrud ullamco Laboris упражнение НИСИ ут aliquip ех еа Commodo consequat.
пример
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
<button
class="w3-btn">Button</button>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div> Попробуй сам " Hover Effect
W3-парят-тень класс добавляет эффект тени на парении - это сделает любой элемент выглядеть как карты курсора мыши над ( таком же стиле , как W3-карты-4).
Наведите курсор мыши на меня!
Еще примеры
Запрос в друзья
Джон Доу
пример
<div class="w3-card-8 w3-dark-grey">
<div class="w3-container
w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png"
alt="Avatar" style="width:80%">
<h5>John
Doe</h5>
<button class="w3-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>
</div>
</div> Попробуй сам " Джон Доу
1 новый запрос друг
Генеральный директор Могучей школы. Маркетинг и реклама. Ищу новую работу и новые возможности.
пример
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div
class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-btn-block
w3-dark-grey">+ Connect</button>
</div> Попробуй сам "