Основы CSS. Продолжение тренировки

Этот сайт-визитку сделал, продолжая изучение и тренировку по применению HTML+CSS для создания и веб-дизайна сайтов.

Использовал те же фоновые рисунки при дизайне страницы, что Вы могли видеть у её предшественницы. Именно поэтому она выглядит почти так же, как "Результат тренировок по CSS" (здесь откроется в новом окне).
Почти, т.к. ввёл в структуру HTML-каркаса страницы один из самых важных элементов - навигатор!
Кроме того, вставка ещё одного элемента - логотипа, потребовала дополнительного кода.

Принцип тот же: "вложенные слои", но здесь их побольше. Всего слоёв: четыре главных и четыре вспомогательных.

Таблицу стилей значительно доработал, поскольку добавился навигатор, состоящий из своих вложенных слоёв.

Файлы HTML+CSS очень подробно прокомментировал!

Сайт-визитка

Эта веб-страница - пример сайта-визитки.  Имеет абсолютно все атрибуты, присущие таким сайтам.

Желающим создать свой, красивый сайт-визитку, она будет весьма полезна, так как сменить оформление, и вставить другие, нужные картинки - "дело техники"!
Нужны лишь хорошие, уверенные знания HTML+CSS.

Не буду повторяться о позиционировании рисунков, а лучше напишу немного о структуре навигатора сайта-визитки.

Навигатор "плавает" в двух блоках.

Тип - список, прописанный в коде HTML.

Через его идентификатор он получает свои стили в CSS.

Там же он позиционируется, т.е. "узнаёт", как, и где ему располагаться. Вообще-то, навигатор - самый сложный элемент на этой странице. Но, чем читать об этом, гораздо проще посмотреть в исходных кодах HTML+CSS.  Всё подробно прокомментировал!

* * *

Ниже написал несколько слов о некоторых моментах, и которые желательно иметь ввиду.

Примечания

ПРИГОДИТСЯ!
Исходный код навигатора я взял со своего же сайта, на странице "Каркас сайта" (откроется в новом окне).
Кстати, его тоже можно использовать для создания сайтов-визиток.

УЧИТЫВАТЬ!
Размеры навигатора прописывал под определённую длину слов, в него входящих.
Поэтому, нужно либо подбирать длину слов, либо менять CSS-код навигатора.

ПОМНИТЬ!
Уменьшать длину навигатора нужно обязательно только вместе с фоновым рисунком блока.
И ещё. Я оставил в коде цвет фона. В данном же случае фоновый цвет - НЕ обязателен! Его можно удалить.

О ЛОГОТИПЕ
Логотип можно было (пробовал) вставить и только через HTML, но тогда немного сдвинется текст имени сайта (из-за атрибута hspace).
Конечно, так гораздо проще, но ... ... .

Применив обычное (как сейчас) позиционирование через CSS, с текстом и прочим - порядок!
Но(!) нужно обязательно прописать свойство z-index, хотя бы для блока operator, иначе он "ныряет" под шапку.

* * *

Создание сайта-визитки завершено успешно!

**P.S. Посмотреть пример более простого сайта-визитки можно, кликнув по кнопке верхнего навигатора "Исходная".
Желающим выгодно заказать сайт-визитку, будет полезна большая страница "Выбор".
Тем, кто хочет создать сайт-визитку своими руками, очень поможет не менее большой раздел "Полезное".

ВВЕРХ