- •Модель визуального форматирования
- •Схемы позиционирования
- •Примеры
- •1. Макет. Абсолютное позиционирование. Шапка+подвал+2 колонки
- •<style>
- •body{margin:0px;}
- •#header{background:#fc0;
- •width:715px;
- •height:100px;}
- •#menu{background:#ccc;
- •width:190px;
- •height:300px;}
- •#content{background:#777;
- •width:525px;
- •height:300px;
- •position:absolute;
- •left:190px;
- •#news{background:yellow;
- •width:150px;
- •height:300px;
- •position:absolute;
- •right:0px;
- •#footer{background:#fc0;
- •width:715px;
- •height:30px;}
- •</style>
- •<body>
- •</body>
- •2. Макет. Абсолютное позиционирование. Шапка+подвал+3 колонки
- •<style>
- •body{margin:0px;}
- •#header{background:#0f0;
- •width:715px;
- •height:100px;}
- •#menu{background:#f00;
- •width:190px;
- •height:300px;}
- •#content{background:#777;
- •width:525px;
- •height:300px;
- •position:absolute;
- •left:190px;
- •#footer{background:#00f;
- •width:715px;
- •height:30px;}
- •</style>
- •<body>
- •3. Макет. Всплывающие блоки. Шапка+подвал+3 колонки с процентными размерами (1 вариант)
- •<head>
- •<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- •background: #ccc;
- •float: left; /* всплытие влево */
- •background: #ccf;
- •float: right; /* всплытие вправо */
- •background: #ccc;
- •clear: both; /* прерывание обтекания */
- •</style>
- •</head>
- •<body>
- •</html>
- •4. Макет (таблица стилей). Всплывающие блоки. Шапка+подвал+3 колонки (первая колонка фиксированный размер, две – с процентными размерами)
- •background: #ccc;
- •#menu {
- •float: left; /* всплытие влево */
- •background: #ccf;
- •float: right; /* всплытие вправо */
- •background: #eee;
- •margin: 0 20% 0 130px; /* боковые поля */
- •background: #ccc;
- •clear: both; /* прерывание обтекания */
- •</style>
- •Вывод изображений
- •Графические форматы
Модель визуального форматирования Позиционирование и всплывание Изображения Карты ссылок
Модель визуального форматирования
Элементы уровня блока
Инлайн-элементы
Схемы позиционирования
1.Нормальное расположение
2.Поплавки
Позиционирование
Свойство position позволяет определить способ позиционирования элемента на
странице:
статический − static
o(способ по умолчанию)
oПредполагает естественный поток отображения элементов страницы в соответствии с иерархией объектов документа.
относительный − relative
oопределяет смещение элемента относительно его естественного положения
в потоке отображения элементов. Относительно позиционированные элементы образуют непрерывный поток отображения. Каждый
последующий элемент позиционируется относительно конца предыдущегоабсолютный − absolute
oположение элемента определяется смещением по отношению к положению
содержащего его элемента. Абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и
позиционируются независимо. Возможно перекрытие.
фиксированный − fixed
oФиксированно позиционированный элемент позиционируется относительно окна ПА
Спомощью свойств left, right, top и bottom можно задавать позицию для
отображаемого элемента
left – смещение вправо левого края содержимого бокса относительно левого края
содержащего блока
right – смещение влево правого края содержимого бокса относительно левого края
содержащего блока
top - смещение вниз верхнего края содержимого бокса относительно верхнего края
содержащего блока
bottom - смещение вверх нижнего края содержимого бокса относительно верхнего края содержащего блока
Всплывание блока Свойство float
используется для выравнивания элемента по левой или правой стороне родительского блока Содержимое элементов, расположенных ниже будет обтекать его с противоположной стороны
Значения свойства float
left — элемент выравнивается влево right — элемент выравнивается вправо
none — перемещения элемента не происходит или он абсолютно позиционируется. inherit — наследует значение float от родительского элемента.
Поведение элемента со свойством float:
элемент максимально смещается к левой (правой) стороне родительского блока;
элемент максимально смещается к верхней границе строки, на которой находится (или нижней границе предыдущего блока, если такой строки нет) Примеры 7
блочные элементы находящиеся ниже в коде, «подныривают» под него, обтекают.
Свойство float может изменить ширину всплывающего элемента.
Если всплывающему элементу не будет хватать доступной ширины на текущей строке, то он будет смещаться ниже, пока ширины не станет достаточно.
Если float указан у нескольких элементов, и они всплывают в одну сторону, то каждый из них будет прижиматься к боку предыдущего.
Когда им перестанет хватать ширины родительского контейнера, часть их сместится на следующую строку и так далее.
Применяется: ко всем элементам.
если у элемента установлено свойство display со значением none или он абсолютно позиционируется, то значение float будет проигнорировано.
Наследования нет.
Clear используется для прерывания обтекания всплывающих элементов нижеследующими элементами Применяется: к блочным элементам.
Наследования нет.
Значения:
none — разрешено обтекание любых всплывающих элементов.
left — запретить обтекание элементов, которые всплывают влево.
right — запретить обтекание элементов, которые всплывают вправо.
both — запрет обтекания любых плавающих элементов.
inherit — наследует значение clear от родительского элемента.
Примеры
1. Макет. Абсолютное позиционирование. Шапка+подвал+2 колонки
<style>
body{margin:0px;}
#header{background:#fc0;
width:715px;
height:100px;}
#menu{background:#ccc;
width:190px;
height:300px;}
#content{background:#777;
width:525px;
height:300px;
position:absolute;
left:190px;
top:100px;}
#news{background:yellow;
width:150px;
height:300px;
position:absolute;
right:0px;
top:0px;}
#footer{background:#fc0;
width:715px;
height:30px;}
</style>
<body>
<div id="header">H E A D E R</div> <div id="menu">M E N U</div>
<div id="content">C O N T E N T <div id="news">N E W</div> </div>
<div id="footer">F O O T E R</div> </body>
2. Макет. Абсолютное позиционирование. Шапка+подвал+3 колонки
<style>
body{margin:0px;}
#header{background:#0f0;
width:715px;
height:100px;}
#menu{background:#f00;
width:190px;
height:300px;}
#content{background:#777;
width:525px;
height:300px;
position:absolute;
left:190px;
top:100px;}
#footer{background:#00f;
width:715px;
height:30px;}
</style>
<body>
<div id="header">H E A D E R</div> <div id="menu">M E N U</div>
<div id="content">C O N T E N T</div> <div id="footer">F O O T E R</div>
</body>
3.Макет. Всплывающие блоки. Шапка+подвал+3 колонки с процентными размерами (1 вариант)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>maket_1</title> <style type="text/css">
body { font_size:120%; margin: 0; color: #000; background: #fff;
}
#header { height: 110px;
background: #ccc;
}
#menu { width: 20%;
height: 400px; background: #ffc;
float: left; /* всплытие влево */
}
#sidebar { width: 20%; height: 400px;
background: #ccf;
float: right; /* всплытие вправо */
}
#content { height: 400px; width: 60%; background: #eee; float:left;
}
#footer { height: 90px;
background: #ccc;
clear: both; /* прерывание обтекания */
}
</style>
</head>
<body>
<div id="header">Header</div> <div id="menu">Col_1</div>
<div id="content">Col_2</div> <div id="sidebar">Col_3</div>
<div id="footer">Footer</div> </body>