Как разделить рабочую область на столбцы в виде зигзага

Как разделить рабочую область на столбцы в виде зигзагаСегодня мы рассмотрим с вами альтернативный способ разделения макета шаблона на несколько столбцов. Технология очень проста, мы задействуем следующее свойства списка — nth-child(N)

Так выглядит наш макет, который мы хотим закодировать.макет, который мы хотим закодировать

1. Опишем наш список

<ul class="prodlist">
    <!--List #1 Большой/Располагается справа-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #2~13 Маленький/Располагается слева-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
    <!--List #14 Большой/Располагается слева-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #15~26 Маленький/Располагается слева-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
    <!--List #27 Большой/Располагается справа-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #28~39 Маленький/Располагается слева-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
</ul>

2. Создадим стили для наших колонок, основываясь на свойстве списка nth-child(N). класс nth-child(N).

ul.prodlist {
	margin: 0; padding: 0;
	list-style: none;
}
ul.prodlist li {
	margin: 10px; padding: 0;
	float: left;
}
ul.prodlist li img {float: left;}
ul.prodlist li:nth-child(26n+1) {float: right;}

3. Если вы хотите быть уверены в том, что этот эффект работает во всех браузерах, сделайте добавления последней строки стиля при помощи javascript.
В документ html внесите следующую строку
[/html]

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

$(document).ready(function() {
	$('ul.prodlist li:nth-child(26n 1)').css({'float' : 'right'});
});

4. Урок написан Сохтанака



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *