Css верстка сайту - блокова верстка за допомогою css

Попередня ◈ Наступна

Атрибути і значення

  • background-color: - визначає колір фону.
  • margin: 0 auto - визначає центрування блоку.
  • width: - визначає ширину в пікселях або у відсотках.
  • height: - визначає висоту.
  • float: left - визначає обтікання зліва.
  • border-right: - визначає властивості правої межі.
  • clear: both - скасовує обтікання з обох сторін.

Зверніть увагу на пунктирну кордон лівої колонки, яка чомусь не доходить до низу. Подібні нюанси легко усуваються за допомогою атріцательного значення атрибута margin. Наприклад, margin-bottom: -15px обріже зайве (дивіться наступний приклад).

жорстка HTML CSS верстка блоками в три колонки

Приклад жорсткої блокової верстки сайту в три колонки.

Блокова верстка краще табличної верстки. Верстка сайту блоками надає більше можливостей для форматування і дизайну. Верстка блоками вимагає вміння працювати з атрибутами margin, padding, float, clear.

Наприклад, атрибут float дозволяє розташувати кілька, наступних один за одним, блоків по горизонталі, щоб розділити web-сторінку по вертикалі.

гумова HTML CSS верстка блоками

Приклад гумової верстки сайту з допомогу блоків.

Ми бачимо, що права колонка сповзла вниз → додамо до селектору div.right_col параметр margin-top: -20px.

Атрибути і значення

  • padding-left: - визначає внутрішній відступ зліва.
  • margin-top: - визначає зовнішній відступ зверху.
  • margin-left: - визначає зовнішній відступ зліва.
  • min-width: - визначає мінімальну ширину.
  • max-width: - визначає максимальну ширину.

Ліва колонка з параметром float: left фактично накриває собою праву, так як права не містить атрибут обтікання. У свою чергу, параметр margin-left: 200px визначає відступ правої колонки, тому вона не перекривається. Ми не можемо поставити обтікання для правої колонки, тому що в такому випадку будуть недійсні min-width і max-width.

Зверніть увагу на значення padding. на ширину пунктирною кордону, на розміри.

Гумова + жорстка HTML CSS верстка блоками

Приклад блочної CSS верстки сайту.

Помістимо ліву і праву колонку в контейнер

. Отцентріруем його за допомогою margin: 0 auto. Приберемо простір внизу блоку параметром margin-bottom: -16px.

Параметр padding: 10px додає по 10 пікселів до кожної зі сторін, тому контейнеру

була задана висота в 420 пікселів, а потім його низ був обрізаний на 16 пікселів.

Виявляється не так все і складно. Йдемо далі.

Приклад жорсткої CSS верстки сайту за допомогою таблиці.

vertical-align вирівнює вміст комірки по верху, застосовується тільки для осередків.

гумова HTML CSS верстка таблицями

Приклад гумової CSS верстки сайту за допомогою таблиці.

З ьогодні блокова верстка, жорстка або гумова є найбільш поширеним видом верстки серед професійних сайтів.

Урок 23. CSS позиціювання CSS верстка сайту CSS довідка: шрифт

Зберегти в сервіси і закладки

Схожі статті

Попередня ◈ Наступна