Результат тренировок по 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. Посмотреть создание расширенного сайта-визитки можно, кликнув по нижней зелёной стрелке ВПЕРЁД.

ВВЕРХ

На учебные сайты Сайт-визитка

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check

Яндекс.Метрика
Рейтинг@Mail.ru