Пятница, 29.03.2024, 08:11


Главная
Регистрация
Вход
Всё о консольных играх Приветствую Вас Гость | RSS  
Категории раздела
Мои статьи [29]
ВХОД В РАЗДЕЛ СТАТЬИ [2]
ВХОД В РАЗДЕЛ СТАТЬИ
Lineage II [47]
СКРИПТЫ [25]
Скрипты для сайтов
MMORG другие [3]
ЖЕЛЕЗО [4]
Железоводство
КОНСОЛИ [3]
УРОКИ ВИДЕО [10]
УРОКИ ФОТО [14]
БИЗНЕС ИДЕИ [107]
Идеи малого бизнеса
ПРОГРАММЫ [1]
СВОЙ САЙТ [9]
САД, ОГОРОД [3]

Рекомендуем
оплата за показы

Наш опрос
Как часто вы обновляете ОС?
Всего ответов: 72

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » Статьи » Мои статьи

Красивая рамочка с помощью CSS для всех изображений сайта

Есть один интересный дизайнерский трюк, который делает все изображения на вашем сайте более стильными и придает ощущение, что ваш сайт оформлен в едином стиле. Давайте рассмотрим, в чем же он заключается.

На каждом сайте есть область, где находится основное содержание, текстовая информация и определенные изображения к этой текстовой информации. Давайте назовем эту область «область сайта с основным содержанием». Кроме того, есть и другие части сайта: навигационное меню, где располагаются ссылки для перехода в другие разделы и область логотипа, где располагается изображение – логотип для сайта.

На следующем изображении вы можете наглядно увидеть, что это конкретно за области сайта.

Хорошо, допустим, что с этим мы разобрались. Теперь давайте вернемся к той теме, с которой мы начинали. Дизайнерский трюк будет заключаться в том, что все изображения, которые будут появляться в «области сайта с основным содержанием», должны автоматически обрамляться вот в такую красивую рамочку:

Как добиться такого эффекта? Ответ на этот вопрос, вы можете найти, если дочитаете эту статью до конца.

Делается это все с помощью стилей CSS. Нужно прописать всего лишь несколько строк кода и все изображения на вашем сайте, в определенной области (в которой вы только захотите) сразу же будут обрамлены в красивую рамку. Для этого нам понадобится сделать всего два шага.

Шаг №1.

Итак, первое, что для этого нужно сделать, это заключить область сайта, в которой изображения должны иметь такую рамку в специальную конструкцию:

<div id="content">
….
Здесь будет html-код и рисунки
….

</div>

Шаг №2.

Откройте файл style.css, который содержит стили CSS для вашего сайта и пропишите туда следующие строки:

#content img {
border: 1px solid #C3D9FF;
padding: 5px;
}

Это выражение обозначает, что всем тэгам <img> (они отвечают за отображение рисунков), которые находятся внутри конструкции <div id="content">, будет присвоена рамочка размером в 1 пиксель, сплошная и светло-голубого цвета (border: 1px solid #C3D9FF;) и сделан отступ со всех сторон в 5 пикселей (padding: 5px;).

Вот и все. Как видите, нет ничего сложного. Проделав два этих простых шага, вы придаете вашему сайту эффект стильности и аккуратности.

Удачи и пусть ваши сайты будут красивыми и полезными!

Категория: Мои статьи | Добавил: Ardoz (30.11.2008)
Просмотров: 1442 | Рейтинг: 5.0/1 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Форма входа

Поиск

Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Copyright MyCorp © 2024Хостинг от uCoz