Web-miss: Vanessa (vensy)
Opened: 18.05.2010
Theme: Blake Lively
Orders: OPEN
Coming soon
Выберите пакет услуг *:

Ваше имя/ник *:
Ваш e-mail *:
Ссылка на ваш сайт *:
Опишите то,что хотите видеть в дизайне(блоки,шапка) *:
Ссылки на качественные фото для дизайна(по желанию):
Названия ссылок для нав. меню на лого *:
Если вам нужны доп. услуги,то перечислите какие:
Код безопасности *:

200
Главная » Статьи » Помощь с HTML,CSS и Ucoz » Изучение и написание CSS стилей

Рамка для картинки
Итак,я вас научу как делать рамку для картинки.

1. Возьмем к примеру аффилиат:

HTML код этой картинки выглядит так:
<img scr="http://time-inspire.org/BLJTM/mc.png" alt="">
2. Чтобы у аффа появилась рамка,нам нужно
прописать для этой картинки класс,пускай он называется 
.image(точка означает,что это класс),пропишем стиль рамки:

.image {
background-color: 
#cfc7e1;
padding: 5px;
border: 1px solid 
#9f9bab;
margin: 3px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
}

Расшифровка:
background-color-цвет фона внутри рамки
padding-расстояние в пикселях,насколько 
далеко рамка распологается от фона
border-обводка(размер и цвет)
остальное это закругленность углов у рамки,
последние три строчки можно убрать,если 
вам нужны прямые углы.

Чтобы заменить картинку в новостях на Юкозе к примеру,надо зайти в Панель HTML кодов(где поле Полный текст материала) и мы увидим тот самый код(среди кучи др. конечно):
<img scr="ссылка на вашу картинку" alt="">
Теперь перед scr пропишите class="название класса".
Название класса пишется без точки,у нас это image

Теперь в HTML коде картинки пропишем класс и готово:

Категория: Изучение и написание CSS стилей | Добавил: vensy (05/07/12) | Автор: Полина
Просмотров: 877 | Комментарии: 15 | Рейтинг: 5.0/2
Всего комментариев: 14
13 Helen5562   (05/06/13 14:43)
Скажите пожалуйста как сделать так что бы, вместо цвета было изображение?

14 vensy   (05/06/13 16:15)
В коде класса для картинки нужно прописать background-image: url('адрес на изображение');

12 Admin   (10/05/13 21:06)
Скажите как сделать что бы рамка автоматические появлялась вокруг картинок, модуль "Новости сайта", картинки добавляются не через сайт, а ссылкой на фотохостинг.

8 _mandarinka_   (23/08/12 15:23)
Shannen, а как сделать чтобы цвет при наведении менялся?

9 vensy   (23/08/12 17:33)
Возьми данный код:
.image {
background-color:
#cfc7e1;
padding: 5px;
border: 1px solid
#9f9bab;
margin: 3px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
}

И допиши:
.image:hover{
background-color:
#cfc7e1;
padding: 5px;
border: 1px solid
#9f9bab;
margin: 3px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
}
Но без пробелов,иначе код не заработает,измени цвет фона и готово:
background-color:
#твой цвет;
Оба кода нужно вставить в CSS,удачи)

+1   Спам
10 _mandarinka_   (23/08/12 19:24)
Спасибо огромное:)))

11 vensy   (23/08/12 19:55)
Пожалуйста,удачи тебе в твоих начинаниях)

7 Miley   (24/07/12 15:54)
у меня получилось, спасибо Полька

5 Sonikk   (18/07/12 15:44)
Куда вставлять стиль?

6 vensy   (20/07/12 20:23)
В Таблицу CSS стилей,в любое место wink

4 Summer-Girl   (17/07/12 19:01)
да

2 Summer-Girl   (16/07/12 22:01)
эх понять бы мне это,в деле это трудно! wacko

3 vensy   (17/07/12 00:36)
Получилось?

1 vensy   (14/07/12 19:21)
Класс прописывается вот так: <img scr="ссылка на картинку" alt="" class="image"(у вас может быть свое название)>

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]