бесплатные списки прокси

VisitTime Лайфхак для парней: как добавить 💰 своей девушке?
Находка для тех, чьи девушки и супруги работают в сфере услуг: маникюр, брови, ресницы и так далее
🤔 Вы же наверняка задумывались, как помочь своей половинке зарабатывать больше? Но что делать, если во всех этих маркетингах и процедурах не разбираешься от слова «совсем»? Мы нашли выход — это сервис VisitTime
Чат-бот для мастеров и специалистов, который упрощает ведение записей:
— Сам записывает клиентов и напоминает им о визите
— Персонализирует скидки, чаевые, кешбек и предоплаты
— Увеличивает доходимость и помогает больше зарабатывать
А еще там первый месяц бесплатно, поэтому лучшее, что вы можете сделать сейчас — установить или показать его своей принцессе Всё интуитивно понятно и просто, достаточно нажать на этот текст и запустить чат-бота

[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Оформленные изображения в новостях
Оформленные изображения в новостях
worldname Дата: Суббота, 2011-10-29, 23:15 | Сообщение # 1
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
 На примере простого оформления, мы разберем на примерах с пояснениями все стили и HTML код, участвующий в этом. И научимся просто и красиво оформлять изображения в материалах и шаблонах сайта
Для разбора возьмем такой вид


Сначала берем простую конструкцию стилей
Цитата
<style type="text/css">
div.w
{
margin: 3px;
border: 1px solid #0D0E0E;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.w img
{
display: inline;
margin: 2px;
border: 1px solid #F7FCFC;
}
div.w a:hover img {border: 1px solid #0D0E0E;}
div.a
{
text-align: center;
font-weight: normal;
width: 100px;
margin: 2px;
}
</style>


Эти стили нужно подключать непосредственно к материалу, в котором мы хотим задать стилизацию картинкам

Далее сам HTML код

Код
<div class="w">
<a href="адрес картинки в полном размере или URL того места куда картинка должна вести"><img src="изображение 1.jpg" alt="" width="100" height="100" /></a>
<div class="a">подпись к картинке</div>
</div>
<div class="w">
<a href="адрес картинки в полном размере или URL того места куда картинка должна вести"><img src="изображение 2.jpg" alt="" width="100" height="100" /></a>
<div class="a">подпись к картинке</div>
</div>
<div class="w">
<a href="адрес картинки в полном размере или URL того места куда картинка должна вести"><img src="изображение 1.jpg" alt="" width="100" height="100" /></a>
<div class="a">подпись к картинке</div>
</div>
<div class="w">
<a href="адрес картинки в полном размере или URL того места куда картинка должна вести"><img src="изображение 1.jpg" alt="" width="100" height="100" /></a>
<div class="a">подпись к картинке</div>
</div>

Как мы видим простота метода заключается в подключении классов с помощью DIV-ов

Теперь разберем все стили по косточкам:

div.w - описание стиля самой картинки
margin: 2px; отступы
border: 1px solid #0D0E0E; обводка и цвет обводки
height: auto;
width: auto;
float: left; автоматическое определение размеров (размеры заданы в HTML части)
text-align: center; позиция по центру

div.w img уточнение: верхний отступ
div.w a:hover img {border: 1px solid #0D0E0E;} описание при наведении мыши. Обводка цвет
div.a задаем стиль описанию или подписи к картинке
если хотите чтобы подпись к изображению не вылазила за края и была посередине, то
width: 100px; должно совпадать с размерами прописанными в HTML коде к img и позиционирование по центру прописывать обязательно
Код
text-align: center;


Итак, мы пока задали простенькие стили. Получилось следующее



Для скругления краев к обводке в стиле нужно прописать border-radius: Хpx; где Х - это величина скоса. Её можно настраивать по усмотрению
Для того чтобы задать обводку описанию картинки, а так же задать фон нужно прописать следующее
Цитата
border: 1px solid #89A0BD;border-radius: Хpx;
text-align: center; background:#0191C8;


Если вы стилизуете изображения в материалах, особенно если у вас подключено краткое описание - есть проблема с ограничением количества символов. Тогда стили полностью расписывать в коде не представляется возможности. Это поправимо. Стили можно подключить из файла.
Создаем на компьютере текстовый документ, туда прописываем стили и сохраняем с любым названием и расширением css, далее заливаем в файловый менеджер и в самом материале подключаем следующей строчкой
Цитата
<link type="text/css" rel="StyleSheet" href="http:/адрес сайта/nazvanie.css">

Так мы экономим драгоценные символы
Прикрепления: 9635039.jpg(87.8 Kb) · 2149373.jpg(21.3 Kb)
 
worldname Дата: Воскресенье, 2011-10-30, 00:00 | Сообщение # 2
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
 Примечания:

border-radius: Хpx; в Firefox начал поддерживаться начиная с 4-ой версии.
Для троек нужно было прописывать -moz-border-radius:Хpx;

Начиная с 9-ой версии border-radius начал поддерживать и Internet Explorer

Цвета при наведении лучше задавать более темными, так формируется так называемая иллюзия "объема". При наведении, изображение обведенное темным border-ом даже в 1 пиксель сможет придать объем

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

В примере все картинки кликабельные - то есть при нажатии на изображение пользователь как по ссылке перейдет на заданную страницу.
Если картинки ссылками вам не нужны, то меняем этот участок кода

Quote
<a href="адрес картинки в полном размере или URL того места куда картинка должна вести"><img src="изображение 1.jpg" alt="" width="100" height="100" /></a>

удаляем выделенное красным цветом
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Оформленные изображения в новостях
  • Страница 1 из 1
  • 1
Поиск: