Не нравятся результаты поиска? Попробуйте другой поиск!

Цвета строк


     20.08.2013    Шаблоны (TPL), Стили (CSS)    1352

вопрос
как сделать в краткой новости чтоб цвета строки менялись? Вот пример!
Цвета строк

Ответил: web4ik


HTML

<div class="spiski_dm">
  <div>Зачем вам создавать сайт</div>
  <div>О чем будет ваш сайт</div>
  <div>Что это будет</div>
  <div>Отличие от сайтов с такой же тематикой</div>
</div>


CSS

.spiski_dm {  
  border:1px solid #CCCCCC;
  margin: 20px 0px 0px 0px;
  border-top: none;  
}

.spiski_dm div {  
  border-top: 1px solid #CCCCCC;  
}

.spiski_1 {
  background: #fff;
  padding: 10px 5px 10px 5px;
}

.spiski_2 {
  background: #F0F0F0;
  padding: 10px 5px 10px 5px;
  }


JS

<script language="javascript">
  $(document).ready(function() {
  $('.spiski_dm div:odd').addClass('spiski_1');
  $('.spiski_dm div:even').addClass('spiski_2');  
  });  
</script>


Подробнее - http://www.center-dm.ru/news/sozdajom_chjotnye_stroki_div_i_li/2011-03-08-124

Комментарии пользователей (6)

kprod
6

113 | 20

kprod - 20 августа 2013 12:06 - Юзер

У тебя не всегда все поля заполняются, и соответственно иногда некоторых строк не бывает вообще?

Maxic_unrelax
2

41 | 8

Maxic_unrelax - 20 августа 2013 14:12 - Юзер

Глупо решать такие вопросы на jQuery. Гуглите "CSS полосатые таблицы" - решаются добавлением в CSS 2 строк

Sander
1125

1637 | 1204

Sander - 20 августа 2013 23:22 - Эксперт

Кроссбраузерность учитывать тоже глупо?

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

ПафНутиЙ
1064

3394 | 2433

ПафНутиЙ - 21 августа 2013 00:17 - Админ

.spiski_dm div:nth-child(2n) {background: #f0f0f0;}

Кроссбраузерность вполне нормальная, а то что в говнобраузере ie<8 будет одинаковый цвет - ничего страшного.

Каков вопрос - таков и ответ. Просто помните об этом.

TheImDim
18

327 | 291

TheImDim - 21 августа 2013 01:00 - Юзер

ie<8


У вас знак бесконечности покосился :)

ПафНутиЙ
1064

3394 | 2433

ПафНутиЙ - 21 августа 2013 01:23 - Админ

:-D

Каков вопрос - таков и ответ. Просто помните об этом.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы