Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 10:

Размеры элементов в CSS

< Лекция 9 || Лекция 10: 1234 || Лекция 11 >
  1. Пример показывает, как создать страницы без таблиц.
    <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">&copy;Copyright</div>
    </div>
    
    </body>
    </html>
  2. В примере показано, как позиционировать элемент относительно его обычного положения.
    <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>
  3. В примере показано, как позиционировать элемент с помощью абсолютного значения.
    <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>
  4. В примере показано, как сделать элемент невидимым.
    <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>
  5. В примере показано, как изменить курсор.
    <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>
< Лекция 9 || Лекция 10: 1234 || Лекция 11 >
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?