Каскадные таблицы стилей. Позиционирование презентация

Содержание

1. Каскадные таблицы стилей. Позиционирование
2. Position: Absolute Absolute – при использовании этого
3. Position:Relative, Static, Fixed Relative – смещает блок
4. position:absolute; left:200px; top:50px; position:relative; left:250px При
5. Абсолютные координаты Этот
6. … function up(){if(window.document.all. block.style.pixelTop>-100) {window.document.all.block.style.pixelTop-=30; setTimeout("up();",500);
7. Примеры относительных координат
8. Относительные координаты Сдвинуть слой
9. Линейные размеры: width и height Explorer: ... Netscape: ...
10. Visibility:hidden Visibility:visible function change() { next=current+1; if(next>1)
11. Предназначен для отображения или скрытия элемента, включая
12. Visibility:hidden Visibility:visible function change() { next=current+1; if(next>1)
13. Порядок наложения блоков - z-index
14. Порядок наложения блоков - z-index
15. Пример z-index
16. Пример z-index function change() { if(window.document.all.first.style.zIndex>

Главная
Разное
Каскадные таблицы стилей. Позиционирование

Слайд 1Каскадные таблицы стилей
Позиционирование

Слайд 2Position: Absolute
Absolute – при использовании этого значения, вы можете разместить элемент

в произвольном месте страницы, указав абсолютные значения сдвига блока.
Координаты указываются относительно левого верхнего угла (чаще всего) окна, либо относительно левого верхнего угла охватывающего блока, для которого задано свойство Position: Relative
Блок со свойством Position: Absolute выбивается из общего потока и размещается поверх блоков идущих в общем потоке

Слайд 3Position:Relative, Static, Fixed
Relative – смещает блок относительно того места, в котором

он находился бы без указания этого атрибута.
Static – оставляет блок в том месте, в котором его разместили в соответствии со стандартными тегами HTML.
Fixed – фиксирует блок в заданном месте экрана и при скроллинге страницы остается на месте

Слайд 4position:absolute; left:200px; top:50px; position:relative; left:250px
При задании абсолютного или относительно (absolute и

relative) размещении блока используются четыре свойства:
Top – расстояние элемента от верхнего края окна браузера при использовании абсолютного смещения, или от верхнего края какого-либо элемента страницы при относительном размещении.
Right – расстояние элемента от правого края браузера при абсолютном размещении. Для относительного размещения свойство не используется.
Bottom – расстояние элемента от нижнего края браузера для абсолютного размещения. Для относительного размещения свойство не используется.
Left – расстояние элемента от левого края окна браузера при абсолютном размещении, или сдвиг влево от какого-либо элемента страницы при относительном размещении.

Слайд 5Абсолютные координаты

solid; PADDING-LEFT: 10px; LEFT: 20px; PADDING-BOTTOM: 10px; BORDER-LEFT: navy 2px solid; PADDING-TOP: 10px; BORDER-BOTTOM: navy 2px solid; POSITION: absolute; TOP: 10px">

Этот раздел отпозиционирован в абсолютной системе координат. Его верхний левый край расположен в точке (20px;10px).

Слайд 6…
function up(){if(window.document.all. block.style.pixelTop>-100) {window.document.all.block.style.pixelTop-=30; setTimeout("up();",500); }}

…

…

120px; MARGIN-LEFT: 40px">[ Поднять блок]

[Вернуть блок]

Закрыть окно

style="BORDER-RIGHT: navy 2px solid; PADDING-RIGHT: 10px; BORDER-TOP: navy 2px solid; PADDING-LEFT: 10px; LEFT: 20px; PADDING-BOTTOM: 10px; BORDER-LEFT: navy 2px solid; WIDTH: 200px; PADDING-TOP: 10px; BORDER-BOTTOM: navy 2px solid; POSITION: absolute; TOP: 10px; HEIGHT: 100px">

Этот раздел отпозиционирован в абсолютной системе координат.

Слайд 7Примеры относительных координат

STYLE="position:relative;top:0px;left:0px;border-width:1px;">
Этот блок находится в точке отсчета относительных координат

А этот блок смещен вправо на 50px

Слайд 8Относительные координаты
Сдвинуть слой

Слайд 9Линейные размеры: width и height
Explorer: ...

Netscape:

STYLE="color:white;">...

Слайд 10Visibility:hidden Visibility:visible
function change()
{
next=current+1; if(next>1) next=0;
window.document.all.item("list",
current).visibility="hidden";
window.document.all.item("list",
next).visibility="visible";
current=next; }
Последовательность "list" -

значение атрибута ID раздела.
Вызов функции при этом помещен в гипертекстовую ссылку со схемой URL "javascript":

далее...

Вот как данный атрибут записывается в CSS:

...

Слайд 11Предназначен для отображения или скрытия элемента, включая рамку вокруг него и

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

Visibility:visible Visibility:hidden

Слайд 12Visibility:hidden Visibility:visible
function change()
{
next=current+1; if(next>1) next=0;
window.document.all.item("list",
current).visibility="hidden";
window.document.all.item("list",
next).visibility="visible";
current=next; }
Последовательность "list" -

...

Слайд 13Порядок наложения блоков - z-index

Слайд 14Порядок наложения блоков - z-index

Слайд 15Пример z-index

Слайд 16Пример z-index

function change()
{ if(window.document.all.first.style.zIndex> window.document.all.second.style.zIndex)
{ window.document.all.second.style.zIndex=window.document.all. first.style.zIndex; window.document.all.first.style.zIndex--; }
else

{ window.document.all.first.style.zIndex=window.document.all. second.style.zIndex; window.document.all.second.style.zIndex--; }
}
function move_down()
{
flag=0; if(window.document.all.second.style.pixelTop<0)
{ flag=1; window.document.all.second.style.pixelTop+=10; setTimeout("move_down();",100); }
if(flag==0)
{ change(); move_up(); }
}
function move_up()
{ if(window.document.all.second.style.pixelTop>-120)
{ window.document.all.second.style.pixelTop-=10; setTimeout("move_up();",100); }
}

[ Переложить]

Скачать презентацию

Каскадные таблицы стилей. Позиционирование презентация

Содержание

Слайд 1Каскадные таблицы стилей
Позиционирование

Слайд 2Position: Absolute
Absolute – при использовании этого значения, вы можете разместить элемент

Слайд 3Position:Relative, Static, Fixed
Relative – смещает блок относительно того места, в котором

Слайд 4position:absolute; left:200px; top:50px; position:relative; left:250px
При задании абсолютного или относительно (absolute и

Слайд 5Абсолютные координаты

Слайд 6…
function up(){if(window.document.all. block.style.pixelTop>-100) {window.document.all.block.style.pixelTop-=30; setTimeout("up();",500); }}

…

…

Слайд 7Примеры относительных координат

Слайд 8Относительные координаты
Сдвинуть слой

Слайд 9Линейные размеры: width и height
Explorer: ...

Netscape:

Слайд 10Visibility:hidden Visibility:visible
function change()
{
next=current+1; if(next>1) next=0;
window.document.all.item("list",
current).visibility="hidden";
window.document.all.item("list",
next).visibility="visible";
current=next; }
Последовательность "list" -

Слайд 11Предназначен для отображения или скрытия элемента, включая рамку вокруг него и

Слайд 12Visibility:hidden Visibility:visible
function change()
{
next=current+1; if(next>1) next=0;
window.document.all.item("list",
current).visibility="hidden";
window.document.all.item("list",
next).visibility="visible";
current=next; }
Последовательность "list" -

Слайд 13Порядок наложения блоков - z-index

Слайд 14Порядок наложения блоков - z-index

Слайд 15Пример z-index

Слайд 16Пример z-index

function change()
{ if(window.document.all.first.style.zIndex> window.document.all.second.style.zIndex)
{ window.document.all.second.style.zIndex=window.document.all. first.style.zIndex; window.document.all.first.style.zIndex--; }
else

Обратная связь

Что такое ThePresentation.ru?

Каскадные таблицы стилей. Позиционирование презентация

Содержание

Слайд 1Каскадные таблицы стилейПозиционирование

Слайд 2Position: AbsoluteAbsolute – при использовании этого значения, вы можете разместить элемент

Слайд 3Position:Relative, Static, FixedRelative – смещает блок относительно того места, в котором

Слайд 4position:absolute; left:200px; top:50px; position:relative; left:250px При задании абсолютного или относительно (absolute и

Слайд 5Абсолютные координаты

Слайд 6…function up(){if(window.document.all. block.style.pixelTop>-100) {window.document.all.block.style.pixelTop-=30; setTimeout("up();",500); }}… …

Слайд 7Примеры относительных координат

Слайд 8Относительные координатыСдвинуть слой

Слайд 9Линейные размеры: width и height Explorer: ... Netscape:

Слайд 10Visibility:hidden Visibility:visiblefunction change(){next=current+1; if(next>1) next=0;window.document.all.item("list", current).visibility="hidden";window.document.all.item("list", next).visibility="visible";current=next; }Последовательность "list" -

Слайд 11Предназначен для отображения или скрытия элемента, включая рамку вокруг него и

Слайд 12Visibility:hidden Visibility:visiblefunction change(){next=current+1; if(next>1) next=0;window.document.all.item("list", current).visibility="hidden";window.document.all.item("list", next).visibility="visible";current=next; }Последовательность "list" -

Слайд 13Порядок наложения блоков - z-index

Слайд 14Порядок наложения блоков - z-index

Слайд 15Пример z-index

Слайд 16Пример z-indexfunction change(){ if(window.document.all.first.style.zIndex> window.document.all.second.style.zIndex) { window.document.all.second.style.zIndex=window.document.all. first.style.zIndex; window.document.all.first.style.zIndex--; }else

Похожие презентации

Обратная связь

Что такое ThePresentation.ru?

Слайд 1Каскадные таблицы стилей
Позиционирование

Слайд 2Position: Absolute
Absolute – при использовании этого значения, вы можете разместить элемент

Слайд 3Position:Relative, Static, Fixed
Relative – смещает блок относительно того места, в котором

Слайд 4position:absolute; left:200px; top:50px; position:relative; left:250px
При задании абсолютного или относительно (absolute и

Слайд 6…
function up(){if(window.document.all. block.style.pixelTop>-100) {window.document.all.block.style.pixelTop-=30; setTimeout("up();",500); }}

…

…

Слайд 8Относительные координаты
Сдвинуть слой

Слайд 9Линейные размеры: width и height
Explorer: ...

Netscape:

Слайд 10Visibility:hidden Visibility:visible
function change()
{
next=current+1; if(next>1) next=0;
window.document.all.item("list",
current).visibility="hidden";
window.document.all.item("list",
next).visibility="visible";
current=next; }
Последовательность "list" -

Слайд 12Visibility:hidden Visibility:visible
function change()
{
next=current+1; if(next>1) next=0;
window.document.all.item("list",
current).visibility="hidden";
window.document.all.item("list",
next).visibility="visible";
current=next; }
Последовательность "list" -

Слайд 16Пример z-index

function change()
{ if(window.document.all.first.style.zIndex> window.document.all.second.style.zIndex)
{ window.document.all.second.style.zIndex=window.document.all. first.style.zIndex; window.document.all.first.style.zIndex--; }
else