Сейчас мы разберем тему создания шаблона сайта на html и css с правым сайдбаром. В основном сайдбар используется на сайтах-блогах, но также и находит применения и на других видах сайтов, поэтому будет полезно знать, как сделать такую структуру сайта.
Я сделал небольшой набросок нашего макета на онлайн инструменте для веб-дизайнеров - Marvel. Подробнее о инструментах и программах для веб-дизайна можете узнать в этой статье - Подборка программ для веб-дизайнера — M.Blogger.
Подобный набросок вы можете сделать даже на Paint.
Приступим к реализации нашего макета, я надеюсь вы уже открыли редактор кода, создали index.html и style.css, если вы этого еще не сделали, то вперед, никто не торопиться!
Для начала создадим в нашем index.html структуру html документа, пропишем теги <html>, <head>, <meta>, <title>, <body>, а также подключим к нашему сайту файл стилей:
А теперь нам надо прописать структуру нашего сайта в теге <body>:
В структуре нашего сайта мы выделили три основных класса: header, box и footer. Также в div класс box мы добавили еще два класса, а именно content и sidebar.
По сути, структура сайта, в пределах этого урока, сделана и можно направляться в файл style.css, но при желание вы можете добавить в каждый класс по заголовку h1 - h6 и отразить название блоков сайта, как я это делал на макете marvel, тем более так будет проще понять расположение блоков в браузере.
Без стилей наш сайт сейчас выглядит вот так:
Как же нам сделать его похожим на наш макет? Давайте добавим цвет каждому блоку, для этого в файле стилей для каждого класса надо прописать свойство background-color, цвет выбирайте сами.
Вот что у меня получилось, у вас должно быть также:
В самом начале кода CSS мы задаем margin: 0; для того, чтобы убрать отступы между блоками.
Вот результат в браузере:
Если у вас также, то вы сделали все правильно, поздравляю.
Теперь сделаем наш шаблон похожим на макет, для этого нам надо разделить блок div с классом box на две колонки.
Для разработки многоколончатых макетов в CSS существуют различные технологии, например - grid, float и flex. Не будем сейчас заходить в самые прекрасные уголки CSS, выберем вариант float, позже я сделаю обзор на все три варианта.
Давайте для начала растянем наши секции, чтоб наш шаблон был больше похож на сайт и поставим название секций по центру. Пропишите недостающие у вас строчки кода и посмотрите результат в браузере:
Результат:
А теперь разделим основную часть сайта на две колонки, для этого нам надо задать ширину колонок (width). Зададим width для content - 75%, а для sidebar - 25% используя float.
Кстати, CSS свойство float указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента.
- В самом верху добавляем box-sizing: border-box для изменения алгоритма расчета ширины и высоты элемента
- display: block; content: ""; clear: both - After определяет то, что будет выведено после данного элемента. Before и after без атрибута content вообще не работают. Так что content должен быть всегда. Content определяет текст, который будет выведен. В данном случае это пустая строка и не будет выведено ничего, но будут применены указанные свойства CSS.
- В классы content и sidebar добавляем float: left (прижимаем колони к левой стороне) и width со значениями 25% и 75% (указываем ширину колонок)
Посмотрим, что у нас получилось:
Ну вот, у нас получилась готовая структура сайта с правым сайдбаром, считаю данную задачу выполненной. Если у вас что-то не получилось, сравните еще раз свой код с моим.
Спасибо за внимание, впереди еще много интересного!
