Достаточно ли хорош код?
> <!DOCTYPE html> > <html lang="ru"> > <head> > <title>Испытание: строим сетку</title> > <meta charset="utf-8"> > </head> > <body> > <!--ХЭДЕР--> > <div class="header"> > <div class="layout-positioner"> > <div class="layout-box">Header > </div> > </div> > </div> > <!--МЕНЮ--> > <div class="menu"> > <div class="layout-positioner"> > <div class="layout-box">Menu > </div> > </div> > </div> > <!--ПРОМО--> > <div class="promo"> > <div class="layout-positioner"> > <div class="layout-box layout-box1">Promo 1</div> > <div class="layout-box layout-box2">Promo 2</div> > </div> > </div> > <!--ГЛАВНЫЙ--> > <div class="main"> > <div class="layout-positioner"> > <div class="layout-box layout-box1">Left</div> > <div class="layout-box layout-box2">Main</div> > <div class="layout-box layout-box3">Right</div> > </div> > </div> > <!--ПОДВАЛ--> > <div class="footer"> > <div class="layout-positioner"> > <div class="layout-box">Footer > </div> > </div> > </div> > > </body> > </html>
> html,
> body {
> margin: 0;
> padding: 0;
> }
> body {
> width: 450px;
> height: 335px;
> font-family: "Arial", sans-serif;
> font-size: 10px;
> color: white;
> }
> .layout-positioner {
> margin-left: auto;
> margin-right: auto;
> width: 350px;
> }
> .layout-positioner::after {
> display: table;
> clear: both;
> content: "";
> }
> /*Это про хэдер*/
> .header {
> background-color: #34495e;
> padding-top: 10px;
> padding-bottom: 10px;
> }
> .header .layout-box {
> background-color: #c0392b;
> min-height: 25px;
> padding: 5px;
> }
> /*Это про меню*/
> .menu {
> background-color: #3498DB;
> }
> .menu .layout-box {
> background-color: #3498DB;
> min-height: 25px;
> padding: 5px;
> }
> /*Это про промо*/
> .promo {
> background-color: #34495e;
> padding-top: 10px;
> padding-bottom: 10px;
> }
> .promo .layout-box {
> background-color: #c0392b;
> width: 160px;
> min-height: 50px;
> }
> .promo .layout-box1 {
> float: left;
> padding: 5px;
> }
> .promo .layout-box2 {
> float: right;
> padding: 5px;
> }
> /*Это про основное*/
> .main {
> background-color: #FFFFFF;
> padding-top: 10px;
> padding-bottom: 10px;
> }
> .main .layout-box {
> background-color: #3498DB;
> min-height: 100px;
> padding: 5px;
> }
> .main .layout-box1 {
> float: left;
> width: 60px;
> margin-right: 10px;
> }
> .main .layout-box2 {
> float: left;
> margin-right: 10px;
> width: 180px;
> }
> .main .layout-box3 {
> float: right;
> width: 60px;
> }
> /*ФУТЕР*/
> .footer {
> background-color: #34495e;
> }
> .footer .layout-box {
> background-color: #34495e;
> min-height: 25px;
> padding: 5px;
> }
> /*
> Используемые цвета:
> #34495e – мокрый асфальт
> #c0392b – красный
> #3498DB – синий
> */