|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Инспектор
Вы можете этот курс.
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 12:
Позиционирование в CSS
Аннотация: Подробно рассматриваются методы определения положения элемента.
Данные параметры позволяют определить положение элемента.
Примеры:
- В примере показано, как позиционировать элемент относительно его обычного положения.
<html> <head> <style type="text/css"> p.left { position:relative; left:-20px } p.right { position:relative; right:20px } </style> </head> <body> <p>Параграф</p> <p class="left">Параграф смещен влево относительно обычного положения </p> <p class="right">Параграф смещен вправо относительно обычного положения</p> </body> </html> - В примере показано, как позиционировать элемент с помощью абсолютного значения.
<html> <head> <style type="text/css"> p.ab { position:absolute; left:75px; top:200px } </style> </head> <body> <p class="ab">Параграф имеет абсолютное местоположение и смещен на 75px от левого края страницы и на 200px от верха страницы</p> <p>Параграф</p> </body> </html> - В примере показано, как задать форму элемента, по которой он обрезается и выводится.
<html> <head> <style type="text/css"> p { position:absolute; clip:rect(2px 250px 250px 0px) } </style> </head> <body> <p>Обрезается параграф параграф параграф:</p> <p></p> </body> </html> - В примере показано, как использовать параметр overflow для определения действий,
когда содержимое элемента не помещается в указанной области.
<html> <head> <style type="text/css"> div { background-color:yellow; width:175px; height:70px; overflow: auto } </style> </head> <body> <p>Если содержимое элемента превышает заданные значения ширины и высоты необходимо использовать параметр overflow который определяет, что делать в этой ситуации.</p> <div> В данном случае переполняется бокс элемента и overflow определяет, что делать - установлено значение auto. </div> </body> </html> - В примере показано, как выровнять в тексте изображение по вертикали.
<html> <head> <style type="text/css"> img.first {vertical-align:text-bottom} img.second {vertical-align:text-top} </style> </head> <body> <p> Пара- <img class="second" border="0" src="image.gif" width="100" height="100" /> граф. </p> <p> Пара- <img class="first" border="0" border-color="blue" src="image.gif" width="100" height="100" /> граф. </p> </body> </html> - В примере показано, как можно использовать Z-index для размещения элемента "позади" другого элемента.
<html> <head> <style type="text/css"> img.index { position:absolute; left:10px; top:40px; z-index:-1; } </style> </head> <body> <h4>Пример использования Z-index</h4> <img class="index" src="image.gif" width="120" height="150" border="1"> <p>Изображение с z-index равным -1 имеет меньший приоритет, поэтому расположено "позади".</p> </body> </html> - В примере показано, что произойдет если элементы из предыдущего примера изменят свои значения Z-index.
<html> <head> <style type="text/css"> img.index { position:absolute; left:10px; top:40px; z-index:1 } </style> </head> <body> <h4>Пример использования Z-index</h4> <img class="index" src="image.gif" width="120" height="150" border="3"> <p>Изображение с z-index равным 1 имеет более высокий приоритет, поэтому расположено "спереди".</p> </body> </html>
