Ajax Loader
×

Испытание: строим сетку

HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="ru">
3
    <head>
4
        <title>Испытание: строим сетку</title>
5
        <meta charset="utf-8">
6
    </head>
7
    <body>
8
        <div class="header">
9
            <div class="layout-positioner">
10
                <div class="layout-column-header">Header</div>
11
            </div>  
12
              
13
                <div class="layout-column-menu">Menu</div>
14
              
15
            <div class="layout-positioner">  
16
                <div class="layout-column-promo">Promo 1</div>
17
                <div class="layout-column-promo">Promo 2</div>
18
            </div>
19
        </div>
20
      
21
        <div class="features">
22
            <div class="layout-positioner">
23
                <div class="layout-column left">Left</div>
24
                <div class="layout-column main">Main</div>
25
                <div class="layout-column right">Right</div>
26
            </div>
27
        </div>
28
      
29
        <div class="footer">
30
            <div class="layout-positioner">
31
                Footer
32
            </div>
33
        </div>
34
      
35
    </body>
36
</html>
 
CSS 
html,
1
html,
2
body {
3
    margin: 0;
4
    padding: 0;
5
}
6
 
7
body {
8
    width: 450px;
9
    height: 335px;
10
    font-family: "Arial", sans-serif;
11
    font-size: 10px;
12
    color: white;
13
}
14
 
15
.layout-positioner {
16
    width: 350px;
17
    margin-left: auto;
18
    margin-right: auto;
19
 
20
}
21
 
22
.layout-positioner::after {
23
    display: table;
24
    content: "";
25
    clear: both;
26
}
27
 
28
.header .layout-positioner,
29
.features .layout-positioner {
30
    padding-top: 10px;
31
}
32
  
33
.header {
34
    background-color: #34495e;
35
}
36
 
37
.layout-column-header,
38
.layout-column-promo {
39
    background-color: #c0392b;
40
}
41
 
42
.layout-column-menu,
43
.features .layout-column {
44
    background-color: #3498DB;
45
}
46
 
47
.layout-column-header {
48
    height: 25px;
49
    padding: 5px;
50
    margin-bottom: 10px;
51
}
52
 
53
.layout-column-menu {
54
    height: 25px;
55
    padding: 5px 55px;
56
}
57
 
58
.layout-column-promo {
59
    float: left;
60
    width: 160px;
61
    height: 50px;
62
    padding: 5px;
63
    margin-right: 10px;
64
    margin-bottom: 10px;
65
}
66
 
67
.layout-positioner .layout-column-promo:last-child {
68
    margin-right: 0;
69
}
70
 
71
.features .layout-column {
72
    float: left;
73
    height: 100px;
74
    margin-right: 10px;
75
    margin-bottom: 10px;
76
}
77
 
78
.left, .right {
79
    width: 60px;
80
    padding: 5px;
81
}
82
 
83
.main {
84
    width: 180px;
85
    padding: 5px;
86
}
87
 
88
.right {
89
    margin-right: 0 !important;
90
}
91
 
92
.footer {
93
    background-color: #34495e;
94
    height: 25px;
95
    padding: 5px 55px;
96
    vertical-align: top;
97
}
98
 
99
/*
100
    Используемые цвета:
101
    #34495e – мокрый асфальт
102
    #c0392b – красный
103
    #3498DB – синий
104
*/
 

Испытание: строим сетку

CSSDeck G+