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

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Каскадные таблицы стилей. Позиционирование, слайд №1Каскадные таблицы стилей. Позиционирование, слайд №2Каскадные таблицы стилей. Позиционирование, слайд №3Каскадные таблицы стилей. Позиционирование, слайд №4Каскадные таблицы стилей. Позиционирование, слайд №5Каскадные таблицы стилей. Позиционирование, слайд №6Каскадные таблицы стилей. Позиционирование, слайд №7Каскадные таблицы стилей. Позиционирование, слайд №8Каскадные таблицы стилей. Позиционирование, слайд №9Каскадные таблицы стилей. Позиционирование, слайд №10Каскадные таблицы стилей. Позиционирование, слайд №11Каскадные таблицы стилей. Позиционирование, слайд №12Каскадные таблицы стилей. Позиционирование, слайд №13Каскадные таблицы стилей. Позиционирование, слайд №14Каскадные таблицы стилей. Позиционирование, слайд №15Каскадные таблицы стилей. Позиционирование, слайд №16
Скачать
Вы можете ознакомиться и скачать презентацию на тему Каскадные таблицы стилей. Позиционирование. Доклад-сообщение содержит 16 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Позиционирование
Описание слайда:
Позиционирование

Слайд 2


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

Слайд 3


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

Слайд 4


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

Слайд 5


<DIV 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; PADDING-TOP: 10px; BORDER-BOTTOM: navy 2px solid; POSITION: absolute; TOP: 10px"> <DIV 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; PADDING-TOP: 10px; BORDER-BOTTOM: navy 2px solid; POSITION: absolute; TOP: 10px"> <P>Этот раздел отпозиционирован в абсолютной системе координат. Его верхний левый край расположен в точке (20px;10px). </P> </DIV>
Описание слайда:
<DIV 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; PADDING-TOP: 10px; BORDER-BOTTOM: navy 2px solid; POSITION: absolute; TOP: 10px"> <DIV 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; PADDING-TOP: 10px; BORDER-BOTTOM: navy 2px solid; POSITION: absolute; TOP: 10px"> <P>Этот раздел отпозиционирован в абсолютной системе координат. Его верхний левый край расположен в точке (20px;10px). </P> </DIV>

Слайд 6


… … <SCRIPT>function up(){if(window.document.all. block.style.pixelTop>-100) {window.document.all.block.style.pixelTop-=30; setTimeout("up();",500); }} </SCRIPT> … <BODY> <DIV> … </DIV> <P style="MARGIN-TOP: 120px; MARGIN-LEFT: 40px">[<A href="javascript:up();void(0);"> Поднять блок</A>]<BR> [<A href="javascript:window.document.all. block.style.pixelTop=10;void(0);">Вернуть блок</A>]<BR></P> <A class=allnews onclick="window.close(); return false;" href="example.htm#">Закрыть окно</A> </BODY>
Описание слайда:
… … <SCRIPT>function up(){if(window.document.all. block.style.pixelTop>-100) {window.document.all.block.style.pixelTop-=30; setTimeout("up();",500); }} </SCRIPT> … <BODY> <DIV> … </DIV> <P style="MARGIN-TOP: 120px; MARGIN-LEFT: 40px">[<A href="javascript:up();void(0);"> Поднять блок</A>]<BR> [<A href="javascript:window.document.all. block.style.pixelTop=10;void(0);">Вернуть блок</A>]<BR></P> <A class=allnews onclick="window.close(); return false;" href="example.htm#">Закрыть окно</A> </BODY>

Слайд 7


<DIV STYLE="border-width:1px; border-style:solid;width:100%; height:100px;"> <DIV STYLE="border-width:1px; border-style:solid;width:100%; height:100px;"> <DIV STYLE="position:relative;top:0px;left:0px;border-width:1px;"> Этот блок находится в точке отсчета относительных координат </DIV> <DIV STYLE="position:relative;top:0px;left:50px;border-width:1px;">А этот блок смещен вправо на 50px </DIV> </DIV>
Описание слайда:
<DIV STYLE="border-width:1px; border-style:solid;width:100%; height:100px;"> <DIV STYLE="border-width:1px; border-style:solid;width:100%; height:100px;"> <DIV STYLE="position:relative;top:0px;left:0px;border-width:1px;"> Этот блок находится в точке отсчета относительных координат </DIV> <DIV STYLE="position:relative;top:0px;left:50px;border-width:1px;">А этот блок смещен вправо на 50px </DIV> </DIV>

Слайд 8


<DIV STYLE="position:relative;top:0;left:50;border-width:1px;border-style:solid;width:200px;"><A HREF="javascript:if(flag==0){ window.document.layers[2].left=-50;flag=1; }else{ window.document.layers[2].left=50;flag=0; };void(0);">Сдвинуть слой</A> <DIV STYLE="position:relative;top:0;left:50;border-width:1px;border-style:solid;width:200px;"><A HREF="javascript:if(flag==0){ window.document.layers[2].left=-50;flag=1; }else{ window.document.layers[2].left=50;flag=0; };void(0);">Сдвинуть слой</A> </DIV>
Описание слайда:
<DIV STYLE="position:relative;top:0;left:50;border-width:1px;border-style:solid;width:200px;"><A HREF="javascript:if(flag==0){ window.document.layers[2].left=-50;flag=1; }else{ window.document.layers[2].left=50;flag=0; };void(0);">Сдвинуть слой</A> <DIV STYLE="position:relative;top:0;left:50;border-width:1px;border-style:solid;width:200px;"><A HREF="javascript:if(flag==0){ window.document.layers[2].left=-50;flag=1; }else{ window.document.layers[2].left=50;flag=0; };void(0);">Сдвинуть слой</A> </DIV>

Слайд 9


Explorer: <P STYLE="width:200px;height:100px;background-color:black;color:white;">...</P> Explorer: <P STYLE="width:200px;height:100px;background-color:black;color:white;">...</P> Netscape: <P STYLE="width:200px;height:100px;background-color:black;color:white;border-width:1px;border-color:white;"><SPAN STYLE="color:white;">...</SPAN></P>
Описание слайда:
Explorer: <P STYLE="width:200px;height:100px;background-color:black;color:white;">...</P> Explorer: <P STYLE="width:200px;height:100px;background-color:black;color:white;">...</P> Netscape: <P STYLE="width:200px;height:100px;background-color:black;color:white;border-width:1px;border-color:white;"><SPAN STYLE="color:white;">...</SPAN></P>

Слайд 10


function change() 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; }
Описание слайда:
function change() 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; }

Слайд 11


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

Слайд 12


function change() 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; }
Описание слайда:
function change() 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; }

Слайд 13


Каскадные таблицы стилей. Позиционирование, слайд №13
Описание слайда:

Слайд 14


Каскадные таблицы стилей. Позиционирование, слайд №14
Описание слайда:

Слайд 15


Каскадные таблицы стилей. Позиционирование, слайд №15
Описание слайда:

Слайд 16


<SCRIPT> <SCRIPT> 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); } } </SCRIPT>
Описание слайда:
<SCRIPT> <SCRIPT> 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); } } </SCRIPT>

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию