Урок 11. Назначение DIV контейнеров

Наконец мы добрались до этой темы! Сегодня мы рассмотрим тег “DIV” которым вы будете пользоваться в каждой своей работе. Это основа основ! Вся структура сайта состоит с них. Сейчас попытаюсь доступно показать как их применить.
Допустим у нас есть такой кусок кода:

<!doctype html>
<html>
<head>
	<title>Назначение DIV</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<h1>Заголовок текста</h1>
	<p>Немножко текста для примера</p>
	<img src="image.jpg" />
</body>
</html>

Выглядит это так:
Картинка в html
Всё прижато к левому краю (по умолчанию), ведь мы не применили никакого форматирования. Если нам нужно сдвинуть заголовок вправо на 50 пикселей, мы допишем в файл “style.css” вот такое:

 h1 {
	margin-left: 50px;
} 

Ну и заголовок сдвинулся вправо на 50 пикселей конечно же.
заголовок сдвинут вправо html
Но что если нам нужно сдвинуть не только заголовок, а все элементы страницы? Не будем же ми прописывать для каждого из них отступ вправо, или создавать мультиклас и дописывать туда каждый появившийся элемент, вот так:

 h1, p, img {
	margin-left: 50px;
} 

Это глупо и не правильно! Нужно создать div!

 <!doctype html>
<html>
<head>
	<title>Назначение DIV</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div>
		<h1>Заголовок текста</h1>
		<p>Немножко текста для примера</p>
		<img src="image.jpg" />
	</div>
</body>
</html> 

И укажем для него отступ 50 пикселей вправо.

 div {
	margin-left: 50px;
} 

Давайте посмотрим результат:
div с отступом
Как мы видим, всё сместилось вправо. И далее, каждый элемент который вы будете помещать внутрь тега div, будет смещаться вправо автоматически.
Думаю следует показать почему всё так. Давайте зададим этому div ширину, высоту,и цвет фона.

 div {
	margin-left: 50px;
	width: 500px;
	height: 350px;
	background-color: red;
} 

Вот что получилось:
div с фоном
Как вы видите, div это такой контейнер с которых собственно и состоит разметка сайта. Их можно создавать сколько угодно и с разными параметрами.
Покажу еще один пример применения этого тега.

Разметка сайта тегом div

Классический вид сайта, это наверное колона з контентом, которая размещена по центру. Давайте попробуем сделать так же.
Зададим этому контейнеру ширину 960 пикселей (есть такой стандарт ширины сайта) и выравнивание “авто”.

 div {
	margin: auto;
	width: 960px;
	height: 350px;
	background-color: red;
} 

Ну и смотрим какие изменения.
div по центру
Текста не много, потому он только с левой стороны, но мы видим что “оно” стало похоже на сайт.
Еще хочу сказать, что для того чтобы создать несколько div контейнеров с разными параметрами, нужно задать им отдельные классы, но об этом уже в следующем уроке!
Как всегда, вопросы можно задавать в комментарии! До скорых встреч :)

Pin It

2 thoughts on “Урок 11. Назначение DIV контейнеров

  1. спс… очень интерессно ) но вот мне нужно создать контейнер чтобы внутри него было еще три… и они равномерно размещались… ответ если можно на email спс

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>