Учебники

W3.CSS — Карты

Ноябрь 23, 2018

В 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>

Результат

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

41
Share: