Блочная верстка (верстка блоками DIV)

21.02.2012
Шпаргалка по дивовой верстке.

Блочная верстка основывается на двух CSS свойствах float и clear.
Свойство float может принимать значения

  • left - элемент страницы принудительно выравнивается по левому краю;
  • right - элемент страницы принудительно выравнивается по правому краю;
  • none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).

Свойство clear может принимать значения

  • left - элемент страницы устанавливается ниже любого предыдущего, перемещенного влево блока;
  • right - элемент страницы устанавливается ниже любого предыдущего, перемещенного вправо блока;
  • both - элемент страницы устанавливается ниже любого предыдущего перемещенного блока;
  • none - ограничений на положение блока относительно перемещаемых блоков не накладывается.
1 Шапка
Левая колонка
Содержимое страницы
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_1">
        <div id="t_blk_header">1 Шапка</div>
        <div id="t_blk_left">Левая колонка</div>
        <div id="t_blk_content">Содержимое страницы</div>
        <div id="t_blk_footer">Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
.t_blk_full_body
{
    width                : 250px;
}

span.hr_clear
{
    clear                : both;
}

#t_blk_header
{
    background-color    : #C0C000;
}

#t_blk_left
{
    background-color    : #00C0C0;
}

#t_blk_right
{
    background-color    : #C000C0;
}

#t_blk_content
{
    background-color    : #8080FF;
}

#t_blk_footer
{
    background-color    : #FFC0FF;
}
2 Шапка
Левая колонка
Содержимое страницы
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_2">
        <div id="t_blk_header">2 Шапка</div>
        <div id="t_blk_left">Левая колонка</div>
        <div id="t_blk_content">Содержимое страницы</div>
        <div id="t_blk_footer">Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
 
#test_2 #t_blk_left
{
    width                : 80px;
}
3 Шапка
Левая колонка
Содержимое страницы
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_3">
        <div id="t_blk_header">3 Шапка</div>
        <div id="t_blk_left">Левая колонка</div>
        <div id="t_blk_content">Содержимое страницы</div>
        <div id="t_blk_footer">Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
 
#test_3 #t_blk_left
{
    width                : 80px;
    float                : left;
}
3 1 Шапка
Левая
колонка
Левая
Содержимое страницы
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_3_1">
        <div id="t_blk_header">3 1 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая</div>
        <div id="t_blk_content">Содержимое страницы</div>
        <div id="t_blk_footer">Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
 
#test_3_1 #t_blk_left
{
    width                : 80px;
    float                : left;
}
4 Шапка
Левая
колонка
Левая
Содержимое
страницы
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_4">
        <div id="t_blk_header">4 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая</div>
        <div id="t_blk_content">Содержимое<br/>страницы</div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
 
#test_4 #t_blk_left
{
    width                : 80px;
    float                : left;
}
5 Шапка
Левая
колонка
Левая
Содержимое
страницы
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_5">
        <div id="t_blk_header">5 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая</div>
        <div id="t_blk_content">Содержимое<br/>страницы</div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
6
7
8
9
10
 
#test_5 #t_blk_left
{
    width                : 80px;
    float                : left;
}

#test_5 #t_blk_footer
{
    clear                : left;
}
5 1 Шапка
Левая
колонка
Левая
Содержимое
страницы
Содержимое
страницы
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_5_1">
        <div id="t_blk_header">5 1 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая</div>
        <div id="t_blk_content">Содержимое<br/>страницы<br/>Содержимое<br/>страницы<br/></div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
6
7
8
9
10
 
#test_5_1 #t_blk_left
{
    width                : 80px;
    float                : left;
}

#test_5_1 #t_blk_footer
{
    clear                : left;
}
6 Шапка
Левая
колонка
Левая
Содержимое
страницы
Содержимое
страницы
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_6">
        <div id="t_blk_header">6 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая</div>
        <div id="t_blk_content">Содержимое<br/>страницы<br/>Содержимое<br/>страницы<br/></div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
 
#test_6 #t_blk_left
{
    width                : 80px;
    float                : right;
}
6 1 Шапка
Левая
колонка
Левая
Содержимое
страницы
Содержимое
страницы
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_6_1">
        <div id="t_blk_header">6 1 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая</div>
        <div id="t_blk_content">Содержимое<br/>страницы<br/>Содержимое<br/>страницы<br/></div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
6
7
8
9
10
 
#test_6_1 #t_blk_left
{
    width                : 80px;
    float                : right;
}

#test_6_1 #t_blk_content
{
    margin-right        : 80px;
}
6 2 Шапка
Левая
колонка
Левая
колонка
Содержимое
страницы
Содержимое
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_6_2">
        <div id="t_blk_header">6 2 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая<br/>колонка</div>
        <div id="t_blk_content">Содержимое<br/>страницы<br/>Содержимое</div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
6
7
8
9
10
 
#test_6_2 #t_blk_left
{
    width                : 80px;
    float                : right;
}

#test_6_2 #t_blk_content
{
    margin-right        : 80px;
}
6 3 Шапка
Левая
колонка
Левая
колонка
Содержимое
страницы
Содержимое
1
2
3
4
5
6
7
8
9
 
<div class="t_blk_full_body">
    <div id="test_6_3">
        <div id="t_blk_header">6 3 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая<br/>колонка</div>
        <div id="t_blk_content">Содержимое<br/>страницы<br/>Содержимое</div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
#test_6_3 #t_blk_left
{
    width                : 80px;
    float                : right;
}

#test_6_3 #t_blk_content
{
    margin-right        : 80px;
}

#test_6_3 #t_blk_footer
{
    clear                : both;
}
7 Шапка
Левая
колонка
Левая
колонка
Правая колонка
Содержимое
страницы
Содержимое
1
2
3
4
5
6
7
8
9
10
 
<div class="t_blk_full_body">
    <div id="test_7">
        <div id="t_blk_header">7 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая<br/>колонка</div>
        <div id="t_blk_right">Правая колонка</div>
        <div id="t_blk_content">Содержимое<br/>страницы<br/>Содержимое</div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
#test_7 #t_blk_left
{
    width                : 60px;
    float                : left;
}

#test_7 #t_blk_right
{
    width                : 80px;
    float                : right;
}

#test_7 #t_blk_content
{
    margin-right        : 80px;
    margin-left            : 60px;
}

#test_7 #t_blk_footer
{
    clear                : both;
}
7 1 Шапка
Левая
колонка
Левая
колонка
Правая колонка Меню Меню Меню Меню
Содержимое
страницы
Содержимое
1
2
3
4
5
6
7
8
9
10
 
<div class="t_blk_full_body">
    <div id="test_7_1">
        <div id="t_blk_header">7 1 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая<br/>колонка</div>
        <div id="t_blk_right">Правая колонка Меню Меню Меню Меню</div>
        <div id="t_blk_content">Содержимое<br/>страницы<br/>Содержимое</div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
#test_7_1 #t_blk_left
{
    width                : 60px;
    float                : left;
}

#test_7_1 #t_blk_right
{
    width                : 80px;
    float                : right;
}

#test_7_1 #t_blk_content
{
    margin-right        : 80px;
    margin-left            : 60px;
}

#test_7_1 #t_blk_footer
{
    clear                : both;
}
7 2 Шапка
Левая
колонка
Левая
колонка
Правая колонка Меню Меню
Содержимое
страницы
Содержимое
страницы
Содержимое
1
2
3
4
5
6
7
8
9
10
 
<div class="t_blk_full_body">
    <div id="test_7_2">
        <div id="t_blk_header">7 2 Шапка</div>
        <div id="t_blk_left">Левая<br/>колонка<br/>Левая<br/>колонка</div>
        <div id="t_blk_right">Правая колонка Меню Меню</div>
        <div id="t_blk_content">Содержимое<br/>страницы<br/>Содержимое<br/>страницы<br/>Содержимое</div>
        <div id="t_blk_footer">Подвал<br/>Подвал<br/>Подвал<br/>Подвал</div>
    </div>
    <hr class="hr_clear"/>
</div>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
#test_7_2 #t_blk_left
{
    width                : 60px;
    float                : left;
}

#test_7_2 #t_blk_right
{
    width                : 80px;
    float                : right;
}

#test_7_2 #t_blk_content
{
    margin-right        : 80px;
    margin-left            : 60px;
}

#test_7_2 #t_blk_footer
{
    clear                : both;
}
Категории: CSS
Яндекс.Метрика