Блочная структура сайта и применение тега DIV

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Форматирование текста в HTML
  4. Создание списков
  5. Гиперссылки
  6. Создание таблиц в блокноте
  7. Цвета в HTML
  8. Как создать форму в HTML?
  9. Табличная верстка сайта
  10. Теги в HEAD
  11. Изображения в html
  12. CSS
  13. Работа с текстом и изображениями в CSS
  14. Блочная верстка

Если в языке html использовали табличную верстку сайта, то в языке css для разметки и верстки страницы используют блочные элементы (div). Блочный элемент служит для разметки страницы, в который помещают содержание страницы (контент). Блочные элементы могут вкладываться друг в друга (также как и таблицы в html).

Блок (div) имеет форму прямоугольника с такими свойствами:

Высота (height), ширина (width).Эти параметры можно задавать в пикселях (рх), процентах (%) или в условных единицах (em).

Кроме этого можно задать видимость границы блока с помощью параметра border.

Описывается этот параметр так:

border : толщина_границы вид_границы цвет_границы;

Например:

border:2px solid white;

Т.е. мы задали толщину границы в 2 пикселя, тип заливки- сплошная линия, цвет границы — белый. Более подробно как задавать границы блока можно посмотреть в различных справочниках по css.

Также блок имеет свойства разметки : padding и margin.

Padding- это отступ от границы блока до контента.

Margin – это отступ от границы блока до границы внешнего блока.

Эти свойства могут иметь такие атрибуты:

Left (margin-left, padding-left) — отступ слева

Right (margin-right, padding- right) – отступ справа

Top (margin-top, padding- top)- отступ сверху

Bottom (margin-bottom, padding- bottom)- отступ снизу.

Если отступы используются без атрибутов, то это значит, что они применимы для всех сторон блока.

Давайте для примера создадим блок шапки нашего сайта.

В файле style.css добавим такую запись:

#header {
width: 100%;
height: 100px;
border :2px solid white;
}

Теперь создадим новый файл site2.html

Разместим там наш блок хедера:

<html>
<head>
<title>Site2</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
</body>
</html>

Блоки разметки можно позиционировать на странице с точностью до пикселя. Позиционирование бывает относительное и абсолютное. При абсолютном позиционировании точка отсчета начинается в левом верхнем углу экрана. Ось х идет слева направо, ось у сверху вниз. При относительном позиционировании точка отсчета начинается относительно родительского элемента. Позиционирование задается командой  position.

Давайте внутри хедера сделаем блок для логотипа. В файле style.css напишите код:

#logo {
position:absolute;
width: 156px;
height: 35px;
left: 28px;
top: 65px;
border :2px solid white;
}

А в файле site2.html вложим в блок header блок logo

<body>
<div id="header">
<div id="logo">
</div>
</div>
</body>

Сохраните и посмотрите в браузере что получилось. У нас внутри блока хедера разместился блок логотипа. В следующем уроке мы научимся верстать страницы на основе блоков.

 

Оставить ответ

Ваш email не будет показан.