|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Инспектор
Вы можете этот курс.
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 10:
Размеры элементов в CSS
- Пример показывает, как создать страницы без таблиц.
<html> <head> <style type="text/css"> div.block { width:100%; margin:0px; border:1px solid orange; line-height:150%; } div.top,div.bottom { padding:0.5em; color:white; background-color:orange; clear:left; } h1.top { padding:0; margin:0; } div.move { float:left; width:160px; margin:0; padding:1em; color: blue; } div.body { margin-left:190px; border-left:1px solid orange; padding:1em; } </style> </head> <body> <div class="block"> <div class="top"><h1 class="top">www.Intuit.ru</h1></div> <div class="move"><p>"Сущности, необходимые для объяснения чего-либо, не следует умножать без необходимости." Уильям Оккам (1285-1349)</p></div> <div class="body"> <h2>Свободно доступные пособия по созданию Web</h2> <p>В Интернет можно найти все необходимые для создания Web пособия, начиная от основ HTML и XHTML и заканчивая XML, XSL, Multimedia и WAP.</p> <p>Intuit -- Сайт для разработчиков Web!</p></div> <div class="bottom">©Copyright</div> </div> </body> </html> -
В примере показано, как позиционировать элемент относительно его обычного положения.
<html> <head> <style type="text/css"> p.left_plus { position:relative; left:15px } p.left_minus { position:relative; left:-15px } p.right_plus { position:relative; right:35px } p.right_minus { position:relative; right:-35px } </style> </head> <body> <h2>Это заголовок в обычном положении</h2> <p class="left_plus">Параграф имеет смещение относительно своего обычного положения</p> <p class="left_minus">Параграф имеет смещение относительно своего обычного положения</p> <p class="right_plus">Параграф имеет смещение относительно своего обычного положения</p> <p class="right_minus">Параграф имеет смещение относительно своего обычного положения</p> </body> </html> -
В примере показано, как позиционировать элемент с помощью абсолютного значения.
<html> <head> <style type="text/css"> p.ab { position:absolute; left:50px; top:50px } </style> </head> <body> <p class="ab">Параграф позиционируется с абсолютным значением</p> <pre>С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы. Параграф имеет смещение - на 50px от левого края страницы и на 50px от верхнего края страницы.</pre> </body> </html> -
В примере показано, как сделать элемент невидимым.
<html> <head> <style type="text/css"> p.off {visibility:hidden} p.on {visibility:visible} </style> </head> <body> <p class="on">Параграф виден</p> <p class="off">Параграф не виден</p> </body> </html> -
В примере показано, как изменить курсор.
<html> <head> </head> <body> <h4 style="color:blue">Курсоры:</h4> <div style="cursor:auto"> Auto</div> <div style="cursor:crosshair"> Crosshair</div> <div style="cursor:default"> Default</div> <div style="cursor:pointer"> Pointer</div> <div style="cursor:move"> Move</div> <div style="cursor:text"> text</div> <div style="cursor:wait"> wait</div> <div style="cursor:help"> help</div> <h4 style="color:blue">Курсоры типа resize:</h4> <div style="cursor:e-resize"> e-resize</div> <div style="cursor:ne-resize"> ne-resize</div> <div style="cursor:nw-resize"> nw-resize</div> <div style="cursor:n-resize"> n-resize</div> <div style="cursor:se-resize"> se-resize</div> <div style="cursor:sw-resize"> sw-resize</div> <div style="cursor:s-resize"> s-resize</div> <div style="cursor:w-resize"> w-resize</div> </body> </html>
