1. Интересный способ верстки горизонтального меню. Своего рода аналог табличной верстки, но только на div. Применяются довольно редко используемые свойства display - table-row и table-cell.
    Однако, результат получается не менее качественный, нежели классическая верстка с помощью display:inline.
    Интересный пример верстки.

    Автор: http://webformyself.com/minikurs/5techniques/free.html

    # vimeo.com/64574043 Uploaded 81 Plays 0 Comments
  2. Верстка резинового шаблона сайта. Как создать блоки фиксированной ширины в резиновом шаблоне. Для каждого из блоков в отдельности используется дополнительная обертка, благодаря которой ширина блоков сохраняется фиксированной и выравнивается влево с помощью свойства float:left. Также, благодаря обертке, нивелируются отступы и поля для каждого из блоков.
    Удобная и лаконичная верстка.

    Автор: http://webformyself.com/minikurs/5techniques/free.html

    # vimeo.com/64572090 Uploaded 33 Plays 0 Comments
  3. Пример создания трехколоночного макета сайта с использованием абсолютного и относительного позиционирования. Левый и правый столбец располагаются по краям страницы с помощью абсолютного позиционирования. Средний столбец помещается точно по центру с помощью свойства margin.
    Все три блока имеют фиксированную ширину. Изменяется только расстояние между ними при изменении размеров окна браузера.
    При этом создается эффект наслоения столбцов друг на друга. Однако, тема перекрытия текста в столбцах не была раскрыта.
    Тем не менее, данный пример является очень интересным в качестве теории для создания гибкого шаблона сайта.

    # vimeo.com/64574919 Uploaded 82 Plays 0 Comments
  4. Пример создания пейджера страницы с произвольной длиной. Применяются css-свойства display: table и display: table-cell. С помощью которых блок навигации по страницам выравнивается по центру. И создается возможность произвольного увеличения длины списка страниц навигации.
    Между пунктами навигации сохраняется заданное расстояние при изменении размеров окна браузера.
    Еще один интересный пример придания блочным элементам свойств таблицы.

    Автор: http://webformyself.com/minikurs/5techniques/free.html

    # vimeo.com/64576442 Uploaded 219 Plays 0 Comments
  5. Интересный пример создания трехколоночного макета (и не только макета) с помощью css-свойства text-align: justify. Применяется свойство display: inline-block для возможности управления блоками при размещении их по горизонтали.
    Все три блока имеют фиксированную ширину, но расстояние между ними изменяется при изменении ширины окна браузера.
    В основе всей конструкции лежит свойство text-align.

    Автор: http://webformyself.com/minikurs/5techniques/free.html

    # vimeo.com/64577098 Uploaded 35 Plays 0 Comments

Практика верстки на HTML&CSS

Aaron

Рабочие и теоретические примеры верстки сайтов на HTML и CSS.

Browse This Channel

Shout Box

Heads up: the shoutbox will be retiring soon. It’s tired of working, and can’t wait to relax. You can still send a message to the channel owner, though!

Channels are a simple, beautiful way to showcase and watch videos. Browse more Channels.