• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Чередование цвета строк таблицы на CSS (Создает чередующийся список с оттенками при помощи CSS)
Чередование цвета строк таблицы на CSS
Kosten
Дата: Воскресенье, 2019-06-02, 02:12 | Сообщение 1
Онлайн
Администраторы
Сообщений:25246
Награды: 57


В этом материале показано вам, как создать чередующийся список с помощью 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
Дата: Воскресенье, 2019-06-02, 02:18 | Сообщение 2
Онлайн
Администраторы
Сообщений:25246
Награды: 57


Как сделать полосатый список с помощью 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)
Форум » Web-Раздел » Начинающему вебмастеру » Чередование цвета строк таблицы на CSS (Создает чередующийся список с оттенками при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: