Результат тренировок по CSS
Повторение. Ещё раз основы!
Здесь представил наглядный результат изучения и тренировок по практическому применению HTML+CSS для веб-дизайна сайта.
Повторение основ этих базовых технологий интернета позволяет создавать сайты разной сложности, с любым дизайном.
Использовал рисунок камней и цветов, имеющийся на сервере. Из него вырезал декоративную боковую "отделку" страницы.
Для создания каркаса сайта взял за основу принцип: "вложенные слои". Означает - несколько "обёрток", вложенных одна в другую. Всего их: три главных и одна вспомогательная.
Таблица стилей в процессе работы (добавления новых слоёв) постоянно изменялась.
Подключённый файл CSS подробнейше прокомментировал!
Позиционирование рисунков
Позиционирование рисунков, имеющихся на этой нарядной, декоративной веб-странице, проводил разными способами.
Картинка слева имеет "двойную прописку".
Означает - она прописана и в коде HTML, и также через её идентификатор в CSS.
Иначе, она "уползала" на фоновый рисунок слева.
Само собой, картинку можно спозиционировать с помощью CSS абсолютно в любое место этой
страницы. Дело вкуса.
Моя цель была - повторить освоенное, и потренироваться.
Результат тренировок - этот сайт.
Простой, одностраничный сайт-визитка, сделанный по технологии блочной вёрстки.
Ниже дал несколько важных замечаний, возникших при работе по созданию такого сайта.
Примечания
ПОМНИТЬ!
Без ПОЛНОГО прописания служебной шапки <!DOCTYPE> в
коде HTML, ограничители
min-width и max-width НЕ РАБОТАЮТ!!!
ПРОВЕРЕНО НЕОДНОКРАТНО!!!
Использовать фоновые рисунки лучше для слоёв, имеющих ограничители, типа wrapper. Картинки, которые лежат на их фоне НЕ "отклеиваются" от страницы.
ПОМНИТЬ!
Свойство background-position, используемое в позиционировании фоновых рисунков,
может повести себя ОЧЕНЬ СТРАННО! Так они могут просто-напросто НЕ появиться (если их несколько).
Напротив, в случае применения для техники sprite - всё отлично!
УЧЕСТЬ!
Рисунки, вставленные напрямую в код HTML, БЕЗ таблицы CSS,
нужно обязательно(!) подбирать, или подгонять по размеру.
**Пример: нижняя картинка разделителя имеет реальную длину 625px, но в коде HTML я указал ей 575. Иначе, она "заползает" на правый фоновый рисунок.
* * *
Результат тренировок по основам CSS - создание простого сайта-визитки своими руками!
**P.S. Посмотреть создание расширенного сайта-визитки можно, кликнув по нижней зелёной стрелке ВПЕРЁД.
