Сегодня мы рассмотрим структуру вёрстки для одного колоночного сайта
Для начала на нужен html код:

<div id="main">
    <div id="header">Шапка</div>
    <div id="content">Контенет</div>
    <div id="footer">Футер</div>
</div>

Теперь нам нужно добавить css

#main{
    width:1020px;
    margin: 0 auto;
}  
     
#header{
    height:120px;
    border:1px solid #000;
}  
     
#content{
    min-height:100px;
    border:1px solid #000;
    border-top:0;
}  
 
#footer{
    height:40px;
    border:1px solid #000;
    border-top:0;
}

Для примера я добавил обводу во все три элемента.
В #main мы укажем ширину(width) и выравнивания по центру(margin).
В #content мы укажем минимальную ширину(min-height) чтобы придать вид.
А #footer просто укажем ширину(height)
Вот так просто выглядит структура вёрстки для одного колоночного сайт

Добавлено: 20 Мая 2018 21:27:08 Добавил: Андрей Ковальчук Нравится 0

Добавить