Версия для слабовидящих

Материалы СИБ — различия между версиями

Материал из Ярославский педагогический университет
Перейти к: навигация, поиск
Строка 4: Строка 4:
  
 
<!---------------------------Содержание------------------------------>
 
<!---------------------------Содержание------------------------------>
 +
 +
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<style>
 +
* {
 +
  box-sizing: border-box;
 +
}
 +
 +
body {
 +
  font-family: 'Lucida Sans Unicode','Lucida Sans','Lucida Grande',Arial,sans-serif;
 +
}
 +
 +
/* Поплавок четыре колонки бок о бок */
 +
.column {
 +
  float: left;
 +
  width: 25%;
 +
  padding: 0 10px;
 +
}
 +
 +
/* Удалите лишние левые и правые поля, из-за заполнения */
 +
.row {margin: 0 -5px;}
 +
 +
/* Очистить поплавки после столбцов */
 +
.row:after {
 +
  content: "";
 +
  display: table;
 +
  clear: both;
 +
}
 +
 +
/* Отзывчивые столбцы */
 +
@media screen and (max-width: 600px) {
 +
  .column {
 +
    width: 100%;
 +
    display: block;
 +
    margin-bottom: 20px;
 +
  }
 +
}
 +
 +
/* Стиль контейнера карточек */
 +
.card {
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
  padding: 16px;
 +
  text-align: center;
 +
  color: white;
 +
  background-color: #0968AD;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
<h1>Колонки адаптивных карточек</h1>
 +
 +
<p>Измените размер окна браузера, чтобы увидеть эффект.</p>
 +
 +
<div class="row">
 +
  <div class="column">
 +
    <div class="card">
 +
      <h3>Карточка 1</h3>
 +
      <p>Некоторый текст</p>
 +
      <p>Некоторый текст</p>
 +
    </div>
 +
  </div>
 +
 +
  <div class="column">
 +
    <div class="card">
 +
      <h3>Карточка 2</h3>
 +
      <p>Некоторый текст</p>
 +
      <p>Некоторый текст</p>
 +
    </div>
 +
  </div>
 +
 
 +
  <div class="column">
 +
    <div class="card">
 +
      <h3>Карточка 3</h3>
 +
      <p>Некоторый текст</p>
 +
      <p>Некоторый текст</p>
 +
    </div>
 +
  </div>
 +
 
 +
  <div class="column">
 +
    <div class="card">
 +
      <h3>Карточка 4</h3>
 +
      <p>Некоторый текст</p>
 +
      <p>Некоторый текст</p>
 +
    </div>
 +
  </div>
 +
</div>
 +
 +
</body>
 +
</html>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 
== Новости ==  
 
== Новости ==  
 
<html>
 
<html>

Версия 13:50, 2 марта 2022

Перейти: Управление инновационных технологий в обучении и научной работы
Студенческое исследовательское бюро
Научные мероприятия


<!DOCTYPE html>

Колонки адаптивных карточек

Измените размер окна браузера, чтобы увидеть эффект.

Карточка 1

Некоторый текст

Некоторый текст

Карточка 2

Некоторый текст

Некоторый текст

Карточка 3

Некоторый текст

Некоторый текст

Карточка 4

Некоторый текст

Некоторый текст





Новости

Новости


Источник — «https://yspu.org/index.php?title=Материалы_СИБ&oldid=132466»