1 / 29

Internet rakenduste architektuur ja realiseerimine. 5. L.Joonas 2012

Internet rakenduste architektuur ja realiseerimine. 5. L.Joonas 2012. CSS.3. Управление позиционированием. Тип позиционирования Статическое позиционирование Относительное позиционирование Абсолютное позиционирование Фиксированное позиционирование. Тип позиционирования. <head>

lalo
Télécharger la présentation

Internet rakenduste architektuur ja realiseerimine. 5. L.Joonas 2012

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet rakenduste architektuur ja realiseerimine. 5. L.Joonas 2012

  2. CSS.3

  3. Управление позиционированием • Тип позиционирования • Статическое позиционирование • Относительное позиционирование • Абсолютное позиционирование • Фиксированное позиционирование

  4. Тип позиционирования • <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>

  5. Определение положения по отношению к левому верхнему углу • <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>

  6. Определение положения по отношению к правому нижнему углу <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>

  7. Элементы в порядке стека (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>

  8. Абсолютные элементы, встроенные в относительные <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>

  9. Относительные элементы, встроенные в абсолютные <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>

  10. Определение видимости элемента <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>

  11. Определение видимой части элемента <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>

  12. Определение 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>

  13. Объектная модель документа • DOM – Document object model

  14. Создание объекта • <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>

  15. Обработчики событий <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.

  16. Обработчики событий (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>

  17. Обнаружение события • <body> • <a href="#" onmouseover= "document.images.button1.src='b_on.gif'"><img src="b_off.gif" name="button1" border="0"></a> • </body>

  18. 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>

  19. 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>

  20. 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>

  21. Определение возможностей браузера • <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>

  22. Определение типа 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>

  23. Определение типа 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>

  24. Построение общей 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;} }}

  25. Построение общей 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]); } };} } }

  26. Построение общей 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>

  27. Построение общей 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>

  28. Использование общей для браузеров 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>

  29. Использование общей для браузеров 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>

More Related