Блочная верстка сайта. Позиционирование блоков div
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Что же, я продолжаю…
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Что же, я продолжаю свой Видео блог и его раздел Как создаются шаблоны сайтов HTML и CSS. Мы продолжаем рассматривать вопрос: как создать HTML шаблон сайта из PSD макета. В предыдущем видео мы немного ознакомились с блочной версткой div, расположив контент нашего будущего сайта, как было показано на PSD макете. В данном видео я предлагаю вам посмотреть: как создать правую колонку сайта. В данном случае правая колонка сайта состоит из двух блоков: первый блок предназначен для отображения последней статьи на сайте, второй – информационный блок. Каждый из блоков создавался отдельным блочным HTML элементом div.
У каждого из блоков правой колонки сайта был заголовок, соответственно, я использовал HTML заголовок 4 уровня – h4. Сами блоки в данном видео мы не заполняли, это будет сделано в одном из следующих видео. После того, как был создан каркас правой колонки сайта, мы оформили блоки, находящиеся в правом сайдбаре при помощи CSS стилей. Для них мы задали: ширину при помощи CSS свойства width, цвет при помощи CSS правила background, рамки при помощи стиля border и несколько других незначительных свойств.
//
//
Кроме того, в данном видео были оформлены заголовки для блоков правого сайдбара. Был задан шрифт HTML заголовков и размер шрифта для заголовка, для этого были использованы CSS свойства: font-family и font-weight.
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч. Не забываем комментировать и делиться с друзьями;)
Выберете удобный для себя способ, чтобы оставить комментарий