Полосатые div:
На самом деле всё просто как дважды два, для начало в нашу страницу сайта мы установим основную ячейку div (class="spiski_dm") в которую поместим ещё одни ячейки div, с нужной нам информацией:
HTML-Code
<div class="spiski_dm">
<div>Зачем вам создавать сайт</div>
<div>О чем будет ваш сайт</div>
<div>Что это будет</div>
<div>Отличие от сайтов с такой же тематикой</div>
</div>
в css стилях прописываем фон чётной и не четной ячейки, для выше предоставленных ячеек div:
CSS-Code
.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;
}
теперь, чтобы наши полосатые div-ы заработали, следует установить на странице сайта, после тега body, следующий скрипт:
JS
<script language="javascript">
$(document).ready(function() {
$('.spiski_dm div:odd').addClass('spiski_1');
$('.spiski_dm div:even').addClass('spiski_2');
});
</script>
как вы видите, мы прописали в скрипте класс основной ячейки div (spiski_dm) и указали, что в этой ячейки следует менять фон именно у второстепенных ячеек div, а чтобы фон чётных и нечетных полей отображался как и задумано, в конце скрипта мы прописываем классы,spiski_1 и spiski_2.
Полосатые списки:
Для создания полосатых списков:
- мы создадим основную ячейку div (class="spiski_dm") и поместим в неё наши списки
- в скрипте название div меняем на li
- в стилях уберём как и полагается символы в начале списков
HTML-Code
<div class="spiski_dm">
<ul>
<li>Зачем вам создавать сайт</li>
<li>О чем будет ваш сайт</li>
<li>Что это будет </li>
<li>Отличие от сайтов с такой же тематикой </li>
</ul>
</div>
CSS-Code
.spiski_dm {
border:1px solid #CCCCCC;
margin: 20px 0px 0px 0px;
border-top: none;
}
.spiski_dm ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.spiski_dm li {
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 li:odd').addClass('spiski_1');
$('.spiski_dm li:even').addClass('spiski_2');
});
</script>
Вот в принципе и всё, а если вы захотите использовать полосатость у div-aх и списках одновременно на своём сайте, то чтобы не прописывать каждый раз разные скрипты, установите все значения в один файл, а именно:
JS
<script language="javascript">
$(document).ready(function() {
$('.spiski_dm li:odd').addClass('spiski_1');
$('.spiski_dm li:even').addClass('spiski_2');
$('.spiski_dm div:odd').addClass('spiski_1');
$('.spiski_dm div:even').addClass('spiski_2');
}); </script>
Я уже использую данный вариант на своём блоге, можно взглянуть в Популярные темы и увидеть полосатые списки.
Хочу сказать, что данное готовое решение, работает благодаря заранее установленной библиотеке jQuery в системе uCoz, поэтому устанавливать какие либо библиотеки, дополнительно, не надо.
· 
07:57
