Вучымся рабіць макет

Першая задача, як вярстальшчыка – разбіць малюнак на галоўныя блокі. Напрыклад тут header, тут галоўная секцыя, справа сайд-бар, знізу footer. Для таго каб нам навучыцца ставіць блокі як нам хочацца, азнаёмімся з асноўнымі css уласцівасцямі. Position – усталёўвае як пазыцынаяваць элемент адносна браўзера ці іншых элементаў. Можа прымаць значэнні: absolute – адносна браўзера. fixed – тое ж, што аbsolute, толькі скрол не ўплывае на пазыцыю(пазыцыянаванне адносна кропкі экрану) relative – адносна першапачатковага месца. Position указвае адносна чаго мы рухаем элемент. Самі зрухі задаем праз уласцівасці top, left. Каб усё стала проста разбяромся на прыкладах. Будзем пазыянаваць жоўты блок 200х200. Змяняйце значэнні top, left.Прыклад 1. Absolute. Увага на class layer1.

 <head> 
    <style> 
        .yellow-box { 
            background: yellow; 
            height: 200px;
            width: 200px;
        } 
        .layer1 {
            position: absolute; /* адносна браўзера */
            top: 100px; /* зрух зверху */
            left: 150px; /* зрух злева */ 
        }
   </style> 
</head>
<body>
    <div class="layer1 yellow-box"></div>
</body>

Далей, размесцім блакінтны блок у жоўты блок, . Зірнеце дзе знаходзіцца блакітны без пазыцыянавання.

<head> 
    <style> 
        .yellow-box { 
            background: yellow; 
            height: 200px;
            width: 200px;
        } 
        .blue-block {
            background: blue;
            height: 25px;
            widht: 25px;
        } 
        .layer1 {
            position: absolute; /* адносна браўзера */
            top: 100px; /* зрух зверху */
            left: 150px; /* зрух злева */ 
        }
    .layer2 {
    /* тут будзем пазыцыянаваць блакітны блок*/
    }
   </style>
    </head>
    <body>
    <div class="layer1 yellow-box">
       <div class="layer2 blue-box"></div>
        </div>
        </body>

Дадзім блакітнаму блоку position:relative і пазмяняем значэнні top, left. Убачым зрух адносна свайго першапачатковага месца і зразумеем relative. Прыклад 2. Relative.

<head> 
    <style> 
        .yellow-box { 
            background: yellow; 
            height: 200px;
            width: 200px;
        } 
        .blue-block {
            background: blue;
            height: 25px;
            widht: 25px;
        } 
        .layer1 {
                position: absolute; /* адносна браўзера */
                top: 100px; /* зрух зверху */
                left: 150px; /* зрух злева */
            }
        .layer2 {
        position: relative; /* адносна першапачатковага месца */
        top: 50px;
        left: 70px;
        }
   </style>
    </head>
    <body>
    <div class="layer1 yellow-box">
       <div class="layer2 blue-box"></div>
        </div>
        </body>

Рушым далей. Пазыцыянаваць будзем header. Каб зразумець адрозненне fixed ад absolute створым вертыкальны скрол. Для гэтага паставім вышыню галоўнага кантэйнера 2000px; header атрымаў fixed пазыцыю і будзе бачны, нават калі мы праскролім старонку ўніз. То бок пазыянуецца адносна кропкі экрана.

<head> 
    <style> 
        .header {
            background: yellow;  
            position: fixed; /* адносна кропкі экрана */         
        } 
        .main-section {
            background: blue;
            height: 2000px;
            margin-top: 50px; /* водступ зверху */
        }
          </style> 
</head>
<body>
    <header class="header">Я галоўная шапка старонкі</header>
    <section class="main-container"> Я асноўны кантэйнер</section >
</body>

Змяніце на absolute, праскрольце і адчуйце розніцу. Навошта дарэчы дадалі margin-top? Паспрабуйце выдаліць margin-top. І блок накладзецца адзін на адзін. Вынік – іншыя блокі паводзяць сябе так, што пазыцыянаваных блокаў проста няма, ігнаруюць іх. Таму мы павінны самастойна прадуглядзець водступ margin-top для галоўнага кантэйнера.

Крутая ўласцівасць float

float – робіць элемент “плывучым”. Можа прымаць значэнне left(элемент “прыплыве” да левага краю), right – да правага. У той жа момант, астатнія элементы абцекаюць яго. Спрабуем float: right;

 <head>
    <style>
    .pull-right {
    float:right; /* элемент паплыве ў правы бок */
    }
        .yellow-box {
    height 50px;
    width: 50px;
    background: yellow;
    }
       </style>
    </head>
    <body>
          <div class="pull-righ yellow-box">Я прыплыў да правага боку</div>
        Я тэкст абцекаю блок злева.
    </body>

Бачым як тэкст абцекае блок з левага боку? На гэтай уласцівасці float будуецца вельмі шмат. Давайце зробім 2 блокі. Звычайна яны ідуць адзін за аднім з новага радка, так?

<head>
    <style>
        .yellow-box {
    height 500px;
    width: 400px;
    background: yellow;
    }
    .blue-box {
    height: 350px;
    width: 150px;
    }
   </style> 
    </head>
<body>
      <div class="yellow-box">Верхні блок</div>
    <div class="blue-box">Ніжні блок</div>
</body>

Звычайныя 2 блокі пачынаюцца з новага радку. Дададзім float:left і нашыя блокі, перастануць пачынацца з новага радку! Яны паплывуць да левага краю.

<head>
    <style>
    .pull-left {
    float: left;
    }
    .yellow-box {
    height: 500px;
    width: 400px;
    background: yellow;
    }
    .blue-box  {
    height: 350px;
    width: 150px;
    }
    </style>
    </head>
<body>
      <div class="pull-left yellow-box"></div>
    <div class="pull-left blue-box"></div>
</body>

Давайце зробім першы макет на float. Галоўны кантэйнер будзе float:left. Cайд бар таксама – float:left.Footer будзе знізу.

<head>
    <style>
        .main-container {
    float: left;
    height: 500px;
    width: 400px;
    background: yellow;
    }
    aside {
    float:left;
    height: 350px;
    width: 150px;
    background: blue;
    }
    footer {
    height: 200px;
    background: grey;
    }
   </style> 
    </head>
<body>
      <section class="main-container"></section>
    <aside></aside>
    <footer></footer>
</body>

Усё ок, але дзе ж наш footer. Чаму ён не ўнізе? Таму что астатнія элементы абцекаюць float элементы. Каб спыніць абцеканне, трэба проста дадаць элемент з уласцівасцю clear:both; Спрабуем і атрымоўваем наш першы макет.

<head>
    <style>
        .main-container {
    float: left            height: 500p            width: 400px            background: yellow;
    }
    aside {
    float:right;
    height: 350px;
    widht: 150px;
    background: blue;
    }
    footer {
    height: 200px;
    background: grey;
    }
    .clear {
    clear:both;
    }
   </style> 
    </head>
<body>
      <section></section>
    <aside></aside>
    <div class="clear"></div>
    <footer></footer>
</body>

Крута! Паспрабуйце зрабіць шырыню браўзера менш і пабачыце як сайд бар пераскочыць уніз. Мы зрабілі першы макет дык яшчэ з элементамі адаптацыя пад шырыню браўзера.

Першы сапраўдны макет!

Мы зараз знаёмы з margin, position, float што дазваляе стварыць паўнавартасны макет старонак. Давайце зробім старонку з header, footer на ўсю шырыню. Кантэйнер фіксаванай шырыні 900px. У кантэйнере галоўную секцыю(600px) з сайд баром(300px). Пачнем.

    <head>
    <style>
    header {
    background: grey;
    height: 150px;
    }
        .container-wrapper {           
            width: 900px;
    }

    .main-section {
    width:600px;
    height: 700px;
    background: yellow;
    }
       aside {
    height: 350px;
    widht: 300px;
    background: blue;
    }
    footer {
    height: 200px;
    background: grey;
    }
    .clear {
    clear:both;
    }
   </style> 
</head>
<body>
    <header></header>
    <div class="container-wrapper">
    <section class="main-section"></section>
    <aside></aside>
    </div>
      <div class="clear"></div>
    <footer></footer>
</body>

Каб выраўняць кантэйнер па цэнтру проста дадазім водступы (margin: 0 auto); Дададзім ужо знаёмыя float:left галоўнай сецыі. Сайд бару паставім водступ злева(margin-left: 600px) для карэтнай пазыцыі і каб ён не пераносіўся пры сужэнні браўзtра. Вось і ўсё.

<head>
    <style>
    header {
    background: grey;
    height: 150px;
    }
        .container-wrapper {           
            width: 900px;
    margin: 0 auto; /* зверху 0 водступ, справа, злева, знізу - аўтаматычна */
    }

    .main-section {
    float:left;
    width:600px;
    height: 700px;
    background: yellow;
    }
       aside {
    margin-left: 600px;
    height: 350px;
    widht: 300px;
    background: blue;
    }
    footer {
    height: 200px;
    background: grey;
    }
    .clear {
    clear:both;
    }
   </style> 
</head>
<body>
    <header></header>
    <div>
    <section></section>
    <aside></aside>
    </div>
      <div></div>
    <footer></footer>
</body>
Хатняе заданне.
Зрабіць усе макеты адсюль.

Наступны занятак