Блочная верстка
Блочная вёрстка в HTML с помощью тега div
Существует несколько способов для верстки элементов HTML страницы и задания их дизайна. Наиболее современных способом верстки является блочная верстка с помощью тегов <div>
Тег <div> используется для задания блока, фрагмента документа. Для каждого такого блока можно задать свой стиль. Для каждого элемента div можно задать свой id и описать все стили в файле таблицы стилей
Синтаксис задания элемента <div> и его стилей
<div class="имя класса">Пример использования div 1</div>
В файле таблицы стилей
.имя класса {
Свойство 1: значение 1;
Свойство 2: значение 2;
...
}
Основные свойства для стилей тега <div>
width - ширина блока
height - высота блока
background - фон
padding - поля
float : left | right | none | inherit - стиль обтекания
font-size - размер шрифта
position: absolute | fixed | relative | static | inherit - позиционирование блока
absolute - отсчёт ведется от краев браузера
Координаты задаются с помощью top, left, right, bottom
relative - позиционирует блок относительно границ родительского блока
Пример блочной вёрстки. Зададим два блока, первый блок позиционируется относительно краёв экрана, второй блок позиционируется относительно границ первого блока. Второй блок вложен в первый блок.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Тег DIV</title>
</head>
<body>
<div class="block1">Блок 1
<div class="block2">Блок 2</div>
</div>
</body>
</html>
Таблица стилей файл style.css
.block1 {
width: 500px;
background: #ccc;
padding: 5px;
padding-right: 20px;
border: solid 10px black;
height : 500px;
position: absolute;
left : 50px;
top : 50px;
}
.block2 {
width: 200px;
height : 200px;
background: #fc0;
padding: 5px;
border: solid 1px black;
position: relative;
left : 50px;
top: 50px;
}
Вёрстка шаблона сайта с помощью блоков <div>
Большинство шаблонов современных сайтов имеют стандартные области. Верхняя область шапка сайта header, левая колонка левый сайдбар, центральная колонка main, правая колонка правый сайдбар, нижняя область футер footer.
В шапке размещается логотип, в сайдбарах размещаются меню и рекламные блоки, в футере размещается контактная информация и дополнительные ссылки.
Опишем пример верстки шаблона простейшего сайта, у которого есть шапка, основной блок и футер.
Каждому блоку зададим свой уникальный id
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Шаблон простейшего сайта</title>
</head>
<body>
<div id="header">Шапка сайта</div>
<div id="main">Основное содержимое</div>
<div id="footer">Футер</div>
</body>
</html>
В файле таблицы стилей для каждого id зададим свой стиль
Синтаксис файла таблицы стилей
body{
Свойства для всей страницы
}
div{
Общие свойства для всех блоков
}
#id блока 1{
Свойства блока 1
}
#id блока 2{
Свойства блока 2
}
...
Пример таблицы стилей для шаблона простейшего сайта файл style.css Подробнее о работе с файлами CSS
body{
background:#D3D3D3;
}
div{
margin: 5px;
border: 1px solid black;
font-size: 40px;
margin-right: 10%;
margin-left: 10%;
}
#header{
background-color: #0000CD;
color: #FFFFFF;
height: 100px;
}
#main{
background-color: #FFFFFF;
height: 800px;
}
#footer{
background-color: #000000;
color: #FFFFFF;
height: 400px;
}
Вернуться к содержанию курса по HTML Перейти к теме Горизонтальное и вертикальное меню >>
Полезно : Регистрация домена и размещение сайта на хостинге
Поделиться
Нет комментариев. Ваш будет первым!