Предлагаю Вашему вниманию несколько цветовых решений дизайна рекламных блоков.
Для чего это нужно?
Лично я разработала этот рекламный блок для удобства работы с биржами ссылок.
Например, Вы зарабатываете на GoGetLinks, размещая на страницах своего сайта краткие заметки о других сайтах. Или Вы работаете с автоматической биржей Sape и также можете помещать ссылки в стилизованный рекламный блок.
Размещение кратких заметок или ссылок внутри специального блока делает сайт привлекательнее как для вебмастеров, которые размещают рекламу на вашем сайте, так и для пользователей.
На моем сайте такой блок выглядит так:
ТЕКСТ РЕКЛАМЫ и ссылка
Чтобы разместить такой блок на своем сайте прежде всего скопируйте себе CSS стили рекламного блока:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
/*Advertise*/ /* GREY */ .grey {border: 2px solid #f0ebeb;} .grey div span.block {background: #f0ebeb; color: #817e7e;} .grey div span.out {background: #f0ebeb;} .grey a {color: #0066cc;} /* BLUE */ .blue {border: 2px solid #dcfcff;} .blue div span.block {background: #dcfcff; color: #1f6362;} .blue div span.out {background: #dcfcff;} .blue a {color: #0066cc;} /* ROSE */ .rose {border: 2px solid #eddadc;} .rose div span.block {background: #eddadc; color: #a6424e;} .rose div span.out {background: #eddadc;} .rose a {color: #ff0000;} /* GREEN */ .gree {border: 2px solid #a5f9a5;} .gree div span.block {background: #a5f9a5; color: #035603;} .gree div span.out {background: #a5f9a5;} .gree a {color: #000000;} /* ORANGE */ .orange {border: 2px solid #fdb960;} .orange div span.block {background: #fdb960; color: #a85f00;} .orange div span.out {background: #fdb960;} .orange a {color: #a85f00;} /*block styles*/ .advert { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 5px;} .advert a {text-decoration: underline!important;} .advert a:hover {text-decoration: none!important;} .advert div { height: 19px; } .advert div span.block {display:block; float:left; padding-right: 20px; margin-left: -6px; margin-top: -6px; padding: 5px; font-weight: bold; font: Impact, fantasy; font-size: 8pt; border-radius: 0px 0px 10px; -webkit-border-radius: 0px 0px 10px; -moz-border-radius: 0px 0px 10px;} .advert div span.out, .advert div span.inner { display:block; width: 15px; height: 18px; } .advert div span.out { float: left; margin-top: -5px; } .advert div span.inner { border-top-left-radius: 15px 10px; -webkit-border-top-left-radius: 15px 10px; -moz-border-radius-topleft: 15px 10px; background: #ffffff; } /*END-Advertise*/ |
Далее выберите место, где должен размещаться рекламный блок и вставьте следующий HTML:
|
1 2 3 4 5 6 7 8 9 |
<div class="advert grey"> <div><span class="block"> ЗАГЛАВИЕ БЛОКА </span> <span class="out"><span class="inner"></span></span></div> <div style="clear:both;" ТЕКСТ БЛОКА <a href="">ссылка блока</a> </div> |
Это HTML код серого блока. Вы видите в самом начале написан стиль advert grey. Если Вы хотите использовать другие цвета, тогда слово grey Вам нужно поменять на соответствующий цвет.
Голубая палитры – blue
Розовая палитра – rose
Зеленая палитра – gree
Оранжевая палитра – orange
При знании стилей CSS вы сами можете создавать собственную палитру цветов, это совсем не сложно.
