На этом шаге мы подготовим внешний вид страницы.
Как всегда, начнем с создания разметки HTML и правил CSS, чтобы пользователи, не обладающие поддержкой JavaScript, могли получать информацию в привлекательном и функциональном представлении:
<div id="featured-books">
<div class="covers">
<a href="images/pic01large.jpg" title="Ассемблер на примерах">
<img src="images/pic01large.jpg" width="120" height="148"
alt="Ассемблер на примерах" />
<span class="price">180 руб</span>
</a>
<a href="images/pic02large.jpg" title="Сборник задач по программированию">
<img src="images/pic02large.jpg" width="120" height="148"
alt="Сборник задач по программированию" />
<span class="price">166 руб</span>
</a>
<a href="images/pic03large.jpg" title="Обучающий курс Excel 2007">
<img src="images/pic03large.jpg" width="120" height="148"
alt="Обучающий курс Excel 2007" />
<span class="price">171 руб</span>
</a>
<a href="images/pic04large.jpg" title="Взломы PDF">
<img src="images/pic04large.jpg" width="120" height="148"
alt="Взломы PDF" />
<span class="price">184 руб</span>
</a>
<a href="images/pic05large.jpg" title="Изучаем Windows Vista">
<img src="images/pic05large.jpg" width="120" height="148"
alt="Изучаем Windows Vista" />
<span class="price">173 руб</span>
</a>
<a href="images/pic06large.jpg" title="Разумный Web-дизайн">
<img src="images/pic06large.jpg" width="120" height="148"
alt="Разумный Web-дизайн" />
<span class="price">148 руб</span>
</a>
</div>
</div>
Каждое изображение заключено в якорный тег, ссылающийся на увеличенную версию изображения обложки книги. У нас также имеется цена каждой книги; она пока скрыта, но мы будем отображать ее с помощью JavaScript в соответствующие моменты времени.
Для экономии места на главной странице мы будем отображать одновременно только три изображения обложек книг. Без применения JavaScript этого можно добиться установкой свойства overflow контейнера в значение scroll и соответствующей ширины:
#featured-books {
position: relative;
background: #ddd;
width: 440px;
height: 186px;
overflow: auto;
margin: 1em auto;
padding: 0;
text-align: center;
z-index: 2;
}
#featured-books .covers {
position: relative;
width: 840px;
z-index: 3;
}
#featured-books a {
float: left;
margin: 10px;
height: 146px;
}
#featured-books .price {
display: none;
}
Данные стили стоят того, чтобы рассмотреть их поближе. Самый внешний элемент должен иметь значение свойства z-index большее, чем у вложенного в него; это позволит в браузере Internet Explorer скрыть части внутреннего элемента, которые выступают за пределы содержащего его контейнера. Мы установили ширину внешнего элемента равной 440рх, что позволяет вместить три изображения с учетом поля шириной 10рх, окружающего каждое из них, и дополнительных 20рх для полосы прокрутки.
С применением этих стилей уже можно просматривать изображения, используя стандартную полосу прокрутки, как показано на рисунке 1.
Рис.1. Первоначальный вид области просмотра изображений с полосой прокрутки
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим исправление стилей с помощью JavaScript.
