Embed Size (px)
DESCRIPTION
Â
Citation preview
«Резиновый» сайт. Работа со
слоями
Урок IV
Создание слоя, тег <div>
Тег <div> … </div>
<div> … </div> - тег предназначенный для создания слоя. Это контейнер в
который можно поместить практически любое содержимое, и вирируя
размерами и позиционированием которого можно реализовать достаточно
гибкую верстку.
<div>
…
некое содержимое контейнера
…
</div>
В данное время является основным инструментом для верстки страниц, заменив
уже устаревшие таблицы.
Слой
• <body>
• <div style=" background-color:Yellow">Этот текст
находится в контейнере</div>
• <div style=" background-color:Red">Этот текст находится
в контейнере</div>
• <div style=" background-color:Green">Этот текст
находится в контейнере</div>
• </body>
Основные особенности верстки
слоямиПреимущества верстки дивами
Верстка с помощью тега <div>
имеет определенные преимущества над версткой таблицами.
• 1.Нет зависимости от размерностей соседних элементов.
• 2.Не зависимости соседних элементов от размерности текущего.
• 3.Можно реализовать необходимый уровень вложенности, что в таблицах не допускается.
• 4.Верстка реализованная слоями грузится быстрее.
5.Доступны все богатства CSS.
• 6.Возможность работать с DOM деревом.
Задание стилей в слоях
<title>Тег style</title>
<style type="text/css">
p
{
font-family:Segoe UI;
font-size:18pt;
color:Green;
}
</style>
</head>
<body>
<p>Простой параграф</p>
<p>Еще один простой параграф</p>
<div>
<p>Также Еще один простой параграф который находится в блочном элементе</p>
</div>
Задание размеров слоя
<div style=" background-color:Yellow; width:200px;
height:200px;">Этот текст находится в контейнере</div>
Содержимое слоя
В качестве содержимого слоя, может выступать любой элемент:
1.Таблица
2.Список
3.Другой слой
4.Определенная конструкция <JavaScript>
5.Любое текстовое содержимое
6.Изображения
По умолчанию все слои позиционируютсядруг за другом, каждый следующийначинается с новой строки.
При этом все элементы пытаются разместитсямаксимально ближе к верхнему левому углу.
Отступов и рамок между ними по умолчаниюнету.
Размер по вертикали определяетсясодержимым, а по горизонтали максимальнодоступным значением согласно размерамэлемента-родителя.
Размещение слоев
Свойство float указывает что элемент будет обтекаем, и следывательно размещает его максимально прижатым в указануюстрону.
Может принимать 3 значения:
left - элемеент прибьется влево и будет обтекаем справа
right - элемеент прибьется вправо и будет обтекаем слева
none - для избежания какого либо обтекания, но не всегдасрабатывает
-->
<html>
<head>
<title>Свойство Float</title>
</head>
<body>
<div style="background-color: LightBlue; float: left"> Container </div>
</html>
Свойство «обтекание»
<body>
<div style=" width:200px; height:200px; background-
color:Yellow; padding:30px;">
содержимое дива которое будет отступать от его
границ на 30px
</div>
Отступи внутри слоя Padding
Свойство margin отвечает за отступы от границ элемента до границ соседнихлибо родительских элементов.
-->
<html>
<head>
<title>Свойство margin</title>
</head>
<body style=" background-color:Blue">
<div style=" width:200px; height:200px; background-color:Yellow; margin:30px">
содержимое дива которое будетотступать от его границ на 30px
</div>
</body>
</html>
Отступи внутри слоя Margin
Свойство margin может принимать от одного до 4 параметров:
1 - этот отступ будет установлен для всех сторон одинаково
2 - первый будет устанавливать отступы по вертикали(сверху и с низу), второй по горизонтали(слева справа)
3 - первый устанавливает отступ сверху, второй снизу , третий слева и справа
4 - первый устанавливает отступ сверху, второй - справа, третий - снизу, четвертый - слева
-->
<div style=" background-color:Blue; width:400px; height:400px;">
<div style=" width:200px; height:200px; background-color:Yellow; margin:0px auto">
содержимое дива
</div>
</div>
<div style=" background-color:Blue; width:400px; height:400px;">
<div style=" width:200px; height:200px; background-color:Yellow; margin:10px 20px 30px">
содержимое дива
</div>
</div>
<div style=" background-color:Blue; width:400px; height:400px;">
<div style=" width:200px; height:200px; background-color:Yellow; margin:10px 20px 30px 40px">
содержимое дива
</div>
</div>
Сложные отступи Margin
Пример отступов
Также можно задать отступы для конкретной стороны, с помощьюсоответствующих свойств:
padding-top
padding-bottom
padding-left
padding-right
-->
<html>
<head>
<title>Тег div</title>
</head>
<body>
<div style=" background-color:Green; padding-top:10px; padding-bottom:20px; padding-left:30px; padding-right:40px; float:left">
Содержимое дива
</div>
</body>
</html>
Задание отступов для отдельной
стороны
Свойство float
Для того чтобы разместить элементы по горизонтали используется свойство float.
Свойство float указывает что элемент будет обтекаем, и следовательно размещает его максимально прижатым в указанную строну.
Может принимать 3 значения:
1. left - элемент прибьется влево и будет обтекаем справа
2. right - элемент прибьется вправо и будет обтекаем слева
3. none - для избегания какого либо обтекания, но не всегда срабатывает
<!--
Если разместить все элементы подряд и задать им свойство float, то онивыстроятся в одну линию.
-->
<html>
<head>
<title>Свойство Float</title>
</head>
<body>
<div style=" background-color:Yellow; width:200px; height:200px; float: right">Этоттекст находится в контейнере</div>
<div style=" background-color:Green; width:200px; height:200px; float: right">Этоттекст находится в контейнере</div>
<div style=" background-color:Red; width:200px; height:200px; float: right">Этот текст находится в контейнере</div>
</body>
</html>
Float-right
Right
<html>
<head>
<title>Свойство Float</title>
</head>
<body>
<div style=" background-color:Yellow; width:200px; height:200px; float: left">Этот текст находится в контейнере</div>
<div style=" background-color:Green; width:200px; height:200px; float: left">Этот текст находится в контейнере</div>
<div style=" background-color:Red; width:200px; height:200px; float: left">Этот текст находится в контейнере</div>
</body>
</html>
Left
• Свойство clear - некая панацея, если ваши элементы наследуют обтеканию
которого быть не должно.
• Свойство может принимать несколько значений, но наиболее используемое
both, убирает обтекания с обоих сторон.
Clear
Создание блоков в блоке
Элемент <div> является блочным элементом и предназначен для выделенияфрагмента документа с целью изменения вида содержимого.
-->
<div>
<div style="width:400px; height:200px;">
<div style="width:200px; height:200px; background-color:Green; float:left"></div>
<div style="width:200px; height:200px; background-color:Yellow; float:left"></div>
</div>
<div style="width:400px; height:200px;">
<div style="width:200px; height:200px; background-color:Yellow; float:left"></div>
<div style="width:200px; height:200px; background-color:Green; float:left"></div>
</div>
</div>
Блочная верстка
Задание цвета
Задание цвета в разметке (будь то цвет фона, рамки
или текста) можно тремя способами:
1. <body style=“background-color: Blue”>
2. Указав цвет через его RGB значения
насыщенности:
<body style=“background-color: rgb(123, 12, 0)”>
3. Указав шестнадцатеричный код цвета:
