Общий гороскоп на сайт
Искал решение по размещению общего гороскопа на всю страницу сайта. Нашёл подходящий вариант и подправил стили. Гороскоп имеет навигацию по нескольким дням. Вот как он выглядит
Итак, в страницу сайта вставляем:
1 2 |
<div id="ignio-bigdaily-com"><a href="http://www.ignio.com/">Загрузка гороскопа от Ignio</a></div> <script type="text/javascript" charset="utf-8" src="//ignio.com/r/export/utf/bigjs/daily/com.js"></script> |
В стили копируем следующий код:
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 |
/////////////////////////////////////////////////////////////////////////////////////////////////*ГОРОСКОП*/////////////////////////////////////////////////////////////////// .ignioBigInformer { /* Глобальные установки */ /*width: 300px;*/ /* Ширина информера - если надо */ /*border: 1px solid blue;*/ /* Если хочется сделать рамку вокруг информера... */ margin: 10px 0px 10px 0px; /* Отступы снаружи от рамки с краёв: сверху, справа, снизу, слева */ padding: 5px 10px 5px 10px; /* Отступы внутри от рамки с краёв: сверху, справа, снизу, слева */ font-family: Tahoma, Verdana, Geneva, Helvetica; /* Шрифт основного текста */ color: #000000; /* Цвет основного текста и цвет заголовка */ background: #ffffff; /*Цвет фона */ } .ignioBigInformer * { /* Не обращаем внимания */ padding: 0; margin: 0; } .ignioBigInformer a { /* Ссылки */ color: #0000ff; /* Цвет ссылок */ text-decoration: none; /* Не подчёркивать ссылки */ } .ignioBigInformerTitle { /* Заголовок */ padding: 5px 0px 5px 0px; /* Отступ около заголовка: сверху, справа, снизу, слева */ text-align: left; /* Выровнять заголовок влево */ /* color: red; */ /* Если хочется цвет заголовка сделать отличным от цвета текста */ } .ignioBigInformerTitle h2 { font-size: 38px; /* Размер текста заголовка */ text-align: center; color: red; } .ignioBigInformerDates { /* Даты */ font-size: 22px; /* Размер текста дат */ font-weight: bold; /* Жирность: да */ padding: 15px 10px 15px 10px; /* Отступы: сверху, справа, снизу, слева */ text-align: center; } .ignioBigInformerDates span { padding-right: 20px; /* Отступ между датами по горизонтали */ } .ignioBigInformerDates span a { /* Даты - ссылки (не текущие даты) */ text-decoration: underline; /* Подчёркивать ссылки на датах */ } .ignioBigInformerTexts { /* Блок - все знаки Зодиака - названия + тексты */ padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */ } .ignioBigInformerSign { /* Блок для одного знака Зодиака: Название + текст */ padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */ } .ignioBigInformerSign h3 { /* Названия знаков Зодиака */ font-size: 24px; /* Размер текста */ font-weight: bold; /* Жирность: да */ color: red; } .ignioBigInformerSign p { /* Текст */ padding: 5px 0; /* Отступы между абзацами если вдруг текст одного знака состоит из нескольких абзацев */ font-size: 17px; /* Размер шрифта текста */ text-align: justify; /* Сделать разрядку текста */ } .ignioBigInformerTail { /* Подпись */ padding: 5px; /* Отступы */ font-size: 0px; /* Размер шрифта */ text-align: right; /* Выровнять по центру */ } |
