16:51 Окно с информацией для сайта uCoz | |
Окно,в которое Вы можете поместить любую информацию,окно исчезнет через 10 секунд (по умолчанию ).Применить его для информирования о новых материалах на сайте,но можно использовать для любых целей.Скрипт полностью настроен для работы на сайте юКоз,можно использовать добавив весь код прямо в материал.В каждом материале могут быть окна с различным содержимым.При добавлении в материал используйте "Панель html кодов" ( там где "Панель bb кодов" ).Для более детальной настройки используйте регулировки выделенные в коде комментариями.На сайте есть все применяемые свойства и теги,для детального ознакомления введите название в поиске сайта.В этом материале применяется окно для демонстрации. ПРИМЕР Code
<style>
#dsinfobox { /* -- Окно зафиксировано -- */ position:fixed; /* -- Ширина окна -- */ width: 220px; /* -- Положение от левой части страницы -- */ left:5px; /* -- Положение от нижней части страницы -- */ bottom:5px; /* -- Бордюра нет -- */ border: 0; /* -- Цвет фона внутри окна -- */ background-color: #fff; /* -- Отступ внутри окна -- */ padding: 4px; /* -- Окно над всем контентом -- */ z-index: 100; /* -- Видимость окна -- */ visibility:hidden; } #dsinfolinkborder { margin:7px 5px; padding:3px; border:1px solid rgba(0,0,0,0.2); border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; } #dsinfobox { /* -- Тени окна -- */ -o-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); /* -- Закругление углов окна -- */ border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; /* -- Тени окна,медленное появление -- */ -webkit-transition:box-shadow 0.3s ease-in-out; -moz-transition:box-shadow 0.3s ease-in-out; -o-transition:box-shadow 0.3s ease-in-out; transition:box-shadow 0.3s ease-in-out; } #dsinfobox:hover { /* -- Тени окна при наведении -- */ -o-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); } #dsnew1 {/* -- Заголовок в окне --*/ /* -- Отступ заголовка --*/ padding:5px; /* -- Размер и и тип шрифта заголовка --*/ font: 18px 'Georgia'; /* -- Жирный шрифт заголовка --*/ font-weight:bold; /* -- Цвет в заголовке -- */ color:#222; } .dsinfolink a:link { /* -- Цвет ссылок в окне -- */ color:blue; /* -- Размер и и тип шрифта ссылок --*/ font: 17px 'Georgia'; /* -- Убираем подчёркивание у ссылок --*/ text-decoration:none; /* -- Отступы у ссылок у ссылок --*/ padding:5px 7px; } .dsinfolink a:hover { /* -- Цвет ссылок в окне при наведении мышки -- */ color:green; /* -- Размер и и тип шрифта ссылок --*/ font: 17px 'Georgia'; } #dsifobox-off { position:absolute; top:1px; right:5px; font: 19px 'Georgia'; font-weight:bold; } #dsifobox-off a:link { color:red; text-decoration:none; } </style> <script type="text/javascript" src="http://www.novickiy.ru/demo/styleoknobok/dsinfobox.js"> </script> <div id="dsinfobox"> <strong id="dsnew1">Новые материалы</strong> <div id="dsinfolinkborder"> <div class="dsinfolink"> <a href="#">Это Ваша ссылка</a><br> <a href="#">Это Ваша ссылка</a><br> <a href="#">Это Ваша ссылка</a><br> <a href="#">Это Ваша ссылка</a><br> <a href="#">Это Ваша ссылка</a><br> <a href="#">Это Ваша ссылка</a><br> <a href="#">Это Ваша ссылка</a><br> <a href="http://artnov.ucoz.com/" target="_blank"><img src="http://artnov.ucoz.com/logo/LOGOGN.png" border="0" alt="Галерея картин"></a><br> </div> </div> <div id="dsifobox-off"> <a href="#" onClick="hidefadebox();return false">X</a> </div> </div> | |
|
Категория: Веб дизайн |
Просмотров: 2134 |
2 голоса
| |
| Всего комментариев: 0 | |