На этот раз мы будем учиться верстать div`ами. В отличии от прошлого урока (Табличной верстки), в нашем уроке у нас появится больше возможностей и позволит избавиться от лишнего кода
Вспомним недостатки табличной верстки:
1. Довольно большой исходный код в результате готовой работы, в дальнейшем можно запутатся, и будет трудно искать нужное значение для его изменения.
2. При расстановке параметра height (высота) например к нашему столбцу, высоту меняет не только 1 столб, но и 2 столбВерстка div`ами позволяет нам не только сократить код, но и дает больше возможностей для работы со слоями.С помощью неё, мы можем накладывать слой друг на друга.
Рассмотрим самый обычный пример нашей верстки:
Наши стили можно размещать внутри нашего шаблона, но я вам советую поступать так как я и многие другие люди. Рассмотрим на примере: d-ragon.ru@import url(/наш_шаблон/css/style.css);наша шапканаш контентнижняя часть нашего сайта
где тег style отвечает за подключение наших стилей
@import url(/наш_шаблон/css/style.css);
/наш_шаблон/css/style.css:
html, body { background: #00000; margin:0; padding:0; #header { height:100px; min-width:500px; background:#ededed; } #content { width:300px; background:#FFFFFF; } #footer{margin-top: 10px;
}
#перед нашим названием элемента-id
в случае если мы будем использовать «class» вместо # будет .Добавлю еще пару советов, в случае если используем картинку в качестве фонового изображения (background), то будем использовать следующее в стилях: body {background: #313131 url(наш_шаблон/images/fon.png) repeat-x;
}
В данном случае, браузер покажет нам фон указанный url(наш_шаблон/images/fon.png), растянет его по оси x, и в том случае когда у нас закончится изображение он будет использовать цвет #313131
С вами был DragoN
Источник: http://d-ragon.ru/
Информация будет пополняться со временем
В случае возникновения вопросов, пишите в комментариях ниже или же на нашем форуме