Embed Size (px)
DESCRIPTION
Internet rakenduste architektuur ja realiseerimine. 5. L.Joonas 2012. CSS.3. Управление позиционированием. Тип позиционирования Статическое позиционирование Относительное позиционирование Абсолютное позиционирование Фиксированное позиционирование. Тип позиционирования. - PowerPoint PPT Presentation
Citation preview
Internet rakenduste architektuur ja realiseerimine.5.
L.Joonas2012
CSS.3
Управление позиционированием
• Тип позиционирования– Статическое позиционирование– Относительное позиционирование– Абсолютное позиционирование– Фиксированное позиционирование
Тип позиционирования
<head><style media="screen" type="text/css"><!--.stat {position: static; font: bold 28pt courier; color: #cccccc;}.abs {position: absolute; top: 25px; left: 375px; width: 100px; font: bold 35pt
helvetica; color: #666666;}.rel {position: relative; top: 70px; left: 25px; font: bold 12pt times; color:
#000000;}--></style>
</head><body>
<div class="stat">'Oh my ears and whiskers, how late it's getting!'</div><div class="abs">'Oh my ears and whiskers, how late it's getting!'</div><div class="rel"> 'Oh my ears and <span class="rel">whis<span сlass="rel">kers</span></span>, how late it's getting!'</div></body>
Определение положения по отношению к левому верхнему
углу<head><style media="screen" type="text/css"><!--#object1 {
position: absolute;top: 125px;left: 12em;border: silver solid 2px; }
.changeplace {position: relative;top: 1cm;left: 1cm;background-color: #ffcccc;}
--></style></head><body>
<div id="object1"><img src="alice27.gif" width="250" height="225" border="0" align="left"><p>'I want a<span class="changeplace"> clean cup</span>,' interrupted the Hatter: 'let's all move one place on.'</p><p>He moved.</p>
</div></body>
Определение положения по отношению к правому нижнему углу
<head><style media="screen" type="text/css"><!--
#object1 {position: absolute;bottom: 125px;right: 12em;border: silver solid 2px; }
.changeplace {position: relative;bottom: 1cm;right: 1cm;background-color: #ffcccc;}
--></style></head><body>
<div id="object1"><img src="alice27.gif" width="250" height="225" border="0" align="left"><p>'I want a<span class="changeplace"> clean cup</span>,' interrupted the Hatter: 'let's all move one place on.'</p><p>He moved.</p>
</div></body>
Элементы в порядке стека (3d-позиционирование)
<head><style media="screen" type="text/css"><!--#element1 { position: absolute; z-index: 3; top: 175px; left: 255px }#element2 { position: absolute; z-index: 2; top: 100px; left: 170px }#element3 { position: absolute; z-index: 1; top: 65px; left: 85px }#element4 { position: absolute; z-index: 0; top: 5px; left: 5px }--></style></head><body>
<span id="element1"><img src="alice22.gif" width="100" height="147"><br clear="all">Element 1 </SPAN><span id="element2"><img src="alice32.gif" width="140" height="201"><br clear="all">Element 2 </SPAN><span id="element3"><img src="alice15.gif" width="150" height="198"><br clear="all">Element 3 </SPAN><span id="element4"><img src="alice29.gif" width="200" height="236"><br clear="all">Element 4 </span></body>
Абсолютные элементы, встроенные в относительные<head><style media="screen" type="text/css"><!--
.relElement {position:relative;top: 75px;}
.absElement {position: absolute;z-index: 0;top: 0px;left: 0px;font-size: 36pt;color: #cccccc; }
p {position:relative;z-index: 100}
--></style></head><body>
<div class="relElement"><div class="absElement">Alice In Wonderland<br><img src="alice03.gif" width="300" height="284" border="0"></div><p>Alice opened the door you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible.</p><p>However, this bottle was <i>not</i> marked 'poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry-tart, custard,.</p></div>
</body>
Относительные элементы, встроенные в абсолютные
<head><style media="screen" type="text/css"><!--
.absElement{position: absolute;left: 100px;border-style: none none none solid;border-width: 0px 0px 0px 1px;border-color: #000000;padding: 10px;}
.relElement {position: relative;float: right;font-weight: bold;padding: 1em;width: 275px; }
--></style></head><body>
<div class="absElement"><p class="relElement"><img src="alice37.gif" width="100" height="136" align="right">One of the jurors had a pencil that squeaked. This of course, Alice could not stand, and she went round the court and got behind him, and very soon found an opportunity of taking it away.</p><p>The King and Queen.</p>
</div></body>
Определение видимости элемента
<head><style media="screen" type="text/css"><!--
.hide {position: relative;visibility: hidden;}
--></style></head><body>
<span class="hide"><img SRC="alice24.gif" WIDTH="350" HEIGHT="238" ALIGN="right"></span>'I thought it would,' said the Cat, and vanished again.<p>Alice waited a little.</p><p>'Did you say pig, or fig?' said the Cat.</p></body>
Определение видимой части элемента
<style type="text/css">.clipInHalf {
position: absolute;clip: rect(15 350 195 50);top: 0px;left: 0px;}
</style><body> <div class="clipInHalf">
<img src="alice31.gif" width="379" height="480" align="left"></div></body>
Определение overflow
<head><style media="screen" type="text/css"><!--
.illustration{width: 200px;height: 200px;overflow: auto;float: right;margin: 5px;}
--></style></head><body>
<div class="illustration"><img src="alice35.gif" width="401" height="480"></div><h3>CHAPTER IX<br>The Mock Turtle's Story</h3><p>'You can't think how glad I am to see you again, you dear old thing!' said the Duchess, as she tucked her arm affectionately into Alice's, and they walked off together.</p></body>
Объектная модель документа
• DOM – Document object model
Создание объекта
<head><style media="screen" type="text/css"><!--
#object1 {position: absolute;top: 100px;left: 150px;visibility: visible;width:210px; }
--></style></head><body>
<div id="object1"><h3>This is Object 1</h3><img src="alice04.gif" width="200" height="298" border="0"></div>
</body>
Обработчики событий
<head><script> var omm=0; var of=0; </script></head><body onLoad="alert('onLoad: The document has loaded.'); var i=0;"
onUnLoad="alert('onUnLoad: The document is now gone.')" onMove="alert('onMove: The window has been moved.')" onResize="alert('onResize: The window has been resized.')" onMouseMove="if (omm==0) { alert('onMouseMove: You moved your mouse.'); omm= 1}">
<h1>Event Handlers</h1><form name="FormName" action="#" method="get"><input onFocus="if (of==0) {alert('onFocus: This form field has been selected.');of = 1;}" type="text" value="Click in Me"><br><br><input onBlur="alert('onBlur: This form field has been deselected.')" type="text" value="Click in me and then out"></form><a href="#" onMouseOver="alert('onMouseOver: Your mouse passed over this link')">
Pass Your Mouse Over Me.</a><br><br><a href="#" onMouseOut="alert('onMouseOut: Your mouse moved away from this link')">
Pass Your Mouse Over Me and then move away.
Обработчики событий (2)
</a><br><br><a href="#" onClick="alert('onClick: You have clicked this link')">
Click Me!</a><br><br>
<a href="#" onMouseDown="alert('onMouseDown: You pressed your mouse button down.')">Click Me!
</a><br><br><a href="#" onMouseUp="alert('onMouseUp: You have released your mouse button.')">
Click Me!</a>
<form name="FormName" action="#" method="get"><input onKeyPress="alert('onKeyPress: You pressed a key.')" type="text" value="Type in Me!"><br><br><input onKeyDown="alert('onKeyDown: You pressed a key down.')" type="text" value="Type in Me!"><br><br><input onKeyUp="alert('onKeyUp: You pressed a key and then released it.')" type="text" value="Type in Me!" tabindex="5"><br><br></form>
</body>
Обнаружение события
<body><a href="#" onmouseover= "document.images.button1.src='b_on.gif'"><img src="b_off.gif" name="button1" border="0"></a>
</body>
Netscape Layer DOM<head>
<script>function NAVmoveElement (objectID) {document.layers[objectID].left = 120;document.layers[objectID].top = 200;
}</script><style media="screen" type="text/css"><!--
#object1 {position: absolute;
top: 10px;left: 10px;visibility: visible }
--></style></head><body>
<div id="object1"><a href="#" onmouseOver="NAVmoveElement('object1')">This script will run in Netscape 4 and compatible browsers only.<br><img src="alice04.gif" width="200" height="298" border="0"></a></div>
</body>
Internet Explorer ALL DOM
<head><script>
function IEmoveElement () {document.all['object1'].style.left = 120;document.all['object1'].style.top = 200;}
</script><style media="screen" type="text/css"><!--
#object1 {position: absolute;top: 50px;left: 10px;visibility: visible }
--></style></head><body>
<div id="object1"><a href="#" onmouseOver="IEmoveElement()">This script will run in Internet Explorer 4, 5 and compatible browsers only.<br><img src="alice04.gif" width="200" height="298" border="0"></a></div>
</body>
W3C ID DOM
<head><script>function W3CmoveElement () {
document.getElementById('object1').style.left = 120;document.getElementById('object1').style.top = 60;
}</script><style media="screen" type="text/css"><!--
#object1 {position: absolute;top: 10px;left: 10px;visibility: visible }
--></style></head><body>
<div id="object1"><a href="#" onmouseOver="W3CmoveElement()">This script will run in any browser that uses the W3C's standard<br> for DOM, including Internet Explorer 5 and Netscape.<br><img src="alice04.gif" width="200" height="298" border="0"></a></div>
</body>
Определение возможностей браузера
<body><script language="JavaScript">if (document.images) {document.writeln('Yes, I can change images.');}else {document.writeln('Sorry. I can not change
images.');}
</script></body>
Определение типа DOM
<head><SCRIPT>var isDHTML = 0;var isLayers = 0;var isAll = 0;var isID = 0;if (document.getElementById) {isID = 1; isDHTML = 1;}else {if (document.layers) {isLayers = 1; isDHTML = 1;}else {if (document.all) {isAll = 1; isDHTML = 1;}}}// --></script></head>
Определение типа DOM (2)
<body><script><!--
if (isDHTML) {document.write('This is a DHTML capable browser using ');}if (isID) {document.write('The World Wide Web Consortium\'s "ID" DOM.');}else {if (isLayers) {document.write('Netscape\'s "Layer" DOM.');}else {if (isAll) {document.write('Internet Explorer\'s "all" DOM.');}else {document.write('This is not a DHTML capable browser...so what are you
waiting for?');}}}// --></script></body>
Построение общей DOM
<head><script><!--var isDHTML = 0;var isLayers = 0;var isAll = 0;var isID = 0;if (document.getElementById) {isID = 1; isDHTML = 1;}else {if (document.all) {isAll = 1; isDHTML = 1;}else {browserVersion = parseInt(navigator.appVersion);if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion ==
4)) {isLayers = 1; isDHTML = 1;}}}
Построение общей DOM (2)
function findDOM(objectID,withStyle) {if (withStyle == 1) {
if (isID) { return (document.getElementById(objectID).style) ; }else { if (isAll) { return (document.all[objectID].style); }
else {if (isLayers) { return (document.layers[objectID]); }
};}}else {
if (isID) { return (document.getElementById(objectID)) ; }else { if (isAll) { return (document.all[objectID]); }
else {if (isLayers) { return (document.layers[objectID]); }
};}}
}
Построение общей DOM (3)
function whoAmI(objectID) {domStyle = findDOM(objectID,1)dom = findDOM(objectID,0);if (domStyle.pixelTop != null) { alert(domStyle.pixelTop); }else { alert(domStyle.top); }alert(dom.id);
}// --></script>
Построение общей DOM (4)
<style media="screen" type="text/css"><!--#object1 {
position: absolute;visibility: show;top: 10px;left: 10px; }
--></style></head><body onLoad="whoAmI('object1')">
<div id="object1">This is an Object<br><img src="alice14.gif" width="407" height="480" border="0"></div>
</body>
Использование общей для браузеров DOM
<head><script src="findDOM.js"></script><script>function moveObject (objectID) {
domStyle = findDOM(objectID,1);domStyle.left = 120;domStyle.top = 200;
}</script>
<style media="screen" type="text/css"><!--#object1 {
position: absolute;visibility: show;top: 10px;left: 10px }
--></style></head>
Использование общей для браузеров DOM(2)
<body onLoad="moveObject('object1')"><div id="object1">This script will run in any Netscape 4 and
above, Internet Explorer 4 and above, or W3C compatible browsers.<br>
<img src="alice04.gif" width="200" height="298" border="0">
</div></body>
