Перейти к публикации

Отображение кратких новостей зеброй


Рекомендованные сообщения

Здравствуйте. Вот столкнулся с такой задачей. Друг попросил сделать шаблон для сайта.

Он хочет чтобы краткие новости на странице отображались в виде горизонтальных полос без описания новости (это я могу сделать), и чтобы эти полосы чередовались двумя цветами. То есть одна полоса новости пусть будит белой, другая - серой, потом опять белой и потом серой и т. дальше.

Как такое можно сотворить? Вот например как на этом сайте http://www.telderi.ru/

Это можно сделать через html и ccs, или нужно что то делать в коде php?

Ссылка на сообщение
Поделиться на других сайтах

На примере бутстрапа, http://twitter.github.io/bootstrap/base-css.html#tables

в стили...


.table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th {

    background-color: #F9F9F9;

}

и нужной таблице добавить класс "table-striped"

Ссылка на сообщение
Поделиться на других сайтах

На примере бутстрапа, http://twitter.githu...css.html#tables

в стили...


.table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th {

	background-color: #F9F9F9;

}

и нужной таблице добавить класс "table-striped"

Отлично. Спасибо! А как такое же можно сделать для тега <div></div> ?

Ссылка на сообщение
Поделиться на других сайтах


.ves_spisok .odna_novost:nth-child(2n+1){background: #ddd;}


<div class="ves_spisok">

<div class="odna_novost">новость</div>

<div class="odna_novost">новость</div>

<div class="odna_novost">новость</div>

</div>

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...