28 lines
No EOL
1.6 KiB
Markdown
28 lines
No EOL
1.6 KiB
Markdown
# HTML/CSS
|
||
Лента изображений должна быть оформлена как список, согласно принципам семантической вёрстки.
|
||
|
||
Нужно стилизовать его так, чтобы он был длинной лентой, из которой внешний `DIV` вырезает нужную часть для просмотра:
|
||
|
||
<img src="carousel1.png">
|
||
|
||
Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам, соответственно, `float:left`.
|
||
|
||
[warn header="Не используйте display:inline"]
|
||
Элементы с `display:inline` имеют дополнительные отступы для возможных "хвостов букв".
|
||
|
||
В частности, для `img` нужно поставить в стилях явно `display:block`, чтобы пространства под ними не оставалось.
|
||
[/warn]
|
||
|
||
При прокрутке UL сдвигается назначением `margin-left`:
|
||
|
||
<img src="carousel2.png">
|
||
|
||
У внешнего `DIV` фиксированная ширина, поэтому "лишние" изображения обрезаются.
|
||
|
||
Снаружи окошка находятся стрелки и внешний контейнер.
|
||
|
||
Реализуйте эту структуру, и к ней прикручивайте обработчики, которые меняют `ul.style.marginLeft`.
|
||
|
||
# Полное решение
|
||
|
||
[edit src="solution"]Открыть в песочнице[/edit] |