Чередование цвета строк таблицы на CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Форум » Web-Раздел » Начинающему вебмастеру » Чередование цвета строк таблицы на CSS (Создает чередующийся список с оттенками при помощи CSS)

Чередование цвета строк таблицы на CSS

Kosten

Воскресенье, 02 Июня 2019 | Сообщение 1

Администраторы

Сообщений:44342

Награды: 70

« 555 »

В этом материале показано вам, как создать чередующийся список с помощью css, это сделать список с цветом зебры, хорошо, давайте начнем с кода списка. Чередующийся список с чередующимися фоновыми цветами, что полезно для различения, которых разбросано по широкой строке.

HTML

Код

<ul>
  <li>
ZorNet.Ru — сайт для вебмастера 01</li>
  <li>
ZorNet.Ru — сайт для вебмастера 02</li>
  <li>
ZorNet.Ru — сайт для вебмастера 03</li>
  <li>
ZorNet.Ru — сайт для вебмастера 04</li>
  <li>
ZorNet.Ru — сайт для вебмастера 05</li>
</ul>

CSS

Код

li:nth-child(odd) {
background-color: #f1f1f1;
}

1. Используйте псевдокласс :nth-child(odd) или, :nth-child(even) чтобы применить другой цвет фона к элементам, которые соответствуют на основе их положения.

Обратите внимание, что вы можете использовать его для применения различных стилей к другим элементам HTML, таким как div, tr, p, ol и так далее.

Демонстрация

Прикрепления: 0130614.png (8.2 Kb) · desakib.zip (1.4 Kb)

Страна: (RU)

Kosten

Воскресенье, 02 Июня 2019 | Сообщение 2

Администраторы

Сообщений:44342

Награды: 70

« 555 »

Как сделать полосатый список с помощью CSS

Код

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur</li>
    <li>Vestibulum ante ipsum primis in faucibus</li>
    <li>Interdum et malesuada fames ac ante</li>
    <li>Duis in elit elementum, fermentum ante quis</li>
</ul>

CSS

Код

ul li{
    list-style:none;
    padding:5px 10px;
}
ul li:nth-child(odd){
    color:#f5f0f0;
    background:#444242;
}

Демонстрация

Прикрепления: 2390289.png (8.4 Kb)

Страна: (RU)

Страница 1 из 1
1