Скрипты для сайта

Скрипты для сайта

Главная | Регистрация | Вход

Приветствую Вас Гость | RSS

Меню сайта

Теги HTML

Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим

CSS

Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы

Реклама

Все для сайта

Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

Выезжающая панель


Выезжающая панель JAVASCRIPT <script type="text/javascript" src="http://samouchka-html.ucoz.ru/dlya-grafiki/table/vyezd_panel/js/pngfix/supersleight-min.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/dlya-grafiki/table/vyezd_panel/js/jquery.min.js"></script> <script src="http://samouchka-html.ucoz.ru/dlya-grafiki/table/vyezd_panel/js/slide.js" type="text/javascript"></script> Код CSS /* Name: Nice Login and Signup Panel using Mootools 1.2 Tutorial URI: http://web-kreation.com/demos/login_form_mootools_1.2/ Author: Jeremie Tisseau Author URI: http://web-kreation.com/ Date: August 2008 The CSS, XHTML and design is released under Creative Common License 2.5: http://creativecommons.org/licenses/by-sa/2.5/ / html, body {border: 0; margin: 0; padding: 0;} body { font: 85%/0.9 arial, helvetica, sans-serif; background: #99A989 url('../image/fon.jpg') repeat 0 0; line-height: 130%; width: 100%; min-width: 970px; color: black; } a { color: #0099CC; text-decoration: none; } a:hover { color: #00CCFF; } a img { border: none;/remove border for linked images/ } h1 { font-size: 1.6em; height: 20px; padding-top: 0; } h2{ font-size: 1.2em; height: 20px; padding-top: 0; } .highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px} /** Main Layout */ #container { width: 100%; height: 100%; text-align: center;/ IE fix to center the page / } #content { width: 740px; margin: 0 auto;/ center the page in Firefox / text-align: left; padding: 20px; } / Name: Sliding Login Panel with jQuery 1.3.2 Author: Jeremie Tisseau Author URI: http://web-kreation.com/ Date: March 26, 2009 Version: 1.0 / /** clearfix **/ .clear {clear: both;height: 0;line-height: 0;} .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix {display: inline-block;} / Hides from IE-mac \/ html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac / .clearfix {height: 1%;} .clearfix {display: block;} / Panel Tab/button / .tab { background: url('../image/tab_b.png') repeat-x 0 0; height: 42px; position: relative; top: 0; z-index: 999; } .tab ul.login { display: block; position: relative; float: right; clear: right; height: 42px; width: auto; font-weight: bold; line-height: 42px; margin: 0; right: 150px; color: white; font-size: 80%; text-align: center; } .tab ul.login li.left { background: url('../image/tab_l.png') no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li.right { background: url('../image/tab_r.png') no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 42px; background: url('../image/tab_m.png') repeat-x 0 0; } .tab ul.login li a { color: #15ADFF; } .tab ul.login li a:hover { color: white; } .tab .sep {color:#414141} .tab a.open, .tab a.close { height: 20px; line-height: 20px !important; padding-left: 30px !important; cursor: pointer; display: block; width: 100px; position: relative; top: 11px; } .tab a.open {background: url('../image/bt_open.png') no-repeat left 0;} .tab a.close {background: url('../image/bt_close.png') no-repeat left 0;} .tab a:hover.open {background: url('../image/bt_open.png') no-repeat left -19px;} .tab a:hover.close {background: url('../bt_close.png') no-repeat left -19px;} / sliding panel / #toppanel { position: absolute; top: 0; width: 100%; z-index: 999; text-align: center; margin-left: auto; margin-right: auto; } #panel { width: 100%; height: 270px; color: #999999; background: #272727; overflow: hidden; position: relative; z-index: 3; display: none; } #panel h1 { font-size: 1.6em; padding: 5px 0 10px; margin: 0; color: white; } #panel h2{ font-size: 1.2em; padding: 10px 0 5px; margin: 0; color: white; } #panel p { margin: 5px 0; padding: 0; } #panel a { text-decoration: none; color: #15ADFF; } #panel a:hover { color: white; } #panel a-lost-pwd { display: block; float: left; } #panel .content { width: 960px; margin: 0 auto; padding-top: 15px; text-align: left; font-size: 0.85em; } #panel .content .left { width: 280px; float: left; padding: 0 15px; border-left: 1px solid #333; } #panel .content .right { border-right: 1px solid #333; } #panel .content form { margin: 0 0 10px 0; } #panel .content label { float: left; padding-top: 8px; clear: both; width: 280px; display: block; } #panel .content input.field { border: 1px #1A1A1A solid; background: #414141; margin-right: 5px; margin-top: 4px; width: 200px; color: white; height: 16px; } #panel .content input:focus.field { background: #545454; } / BUTTONS / / Login and Register buttons / #panel .content input.bt_login, #panel .content input.bt_register { display: block; float: left; clear: left; height: 24px; text-align: center; cursor: pointer; border: none; font-weight: bold; margin: 10px 0; } #panel .content input.bt_login { width: 74px; background: transparent url('../image/bt_login.png') no-repeat 0 0; } #panel .content input.bt_register { width: 94px; color: white; background: transparent url('../image/bt_register.png') no-repeat 0 0; } #panel .lost-pwd { display: block; float:left; clear: right; padding: 15px 5px 0; font-size: 0.95em; text-decoration: underline; } Листинг* <!-- Panel --> <div id="toppanel"> <div id="panel"> <div class="content clearfix"> <div class="left"> <h1>Добро пожаловать</h1> <h2>Демка выезжающей панели</h2> <p class="grey">Тут поместится всё что угодно: видео, аудио, картинки, формы...</p> </div> <div class="left"> <!-- Login Form --> <form class="clearfix" action="#" method="post"> <h1>Панель входа</h1> <label class="grey" for="log">Логин:</label> <input class="field" type="text" name="log" id="log" value="" size="23"> <label class="grey" for="pwd">Пароль:</label> <input class="field" type="password" name="pwd" id="pwd" size="23"> <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever"> Запомнить</label> <div class="clear"></div> <input type="submit" name="submit" value="Войти" class="button normal white"> <a class="lost-pwd" href="#">Забыли пароль?</a> </form> </div> <div class="left right"> <!-- Register Form --> <form action="#" method="post"> <h1>Присоединяйтесь!</h1>Логин: <input class="field" type="text" name="signup" id="signup" value="" size="23"> <label class="grey" for="email">Почта:</label> <input class="field" type="text" name="email" id="email" size="23"> <label>Пароль будет отправлен вам по почте.</label> <input type="submit" name="submit" value="Зарегистрироваться" class="button normal white"> </form> </div> </div> </div> <!-- /login --> <!-- The tab on top --> <div class="tab"> <ul class="login"> <li class="welcome">Добро пожаловать!</li> <li class="sep">\|</li> <li id="toggle"> <a id="open" class="open" href="#">Зарегиться</a> <a id="close" style="display: none;" class="close" href="#">Закрыть панель</a> </li> </ul> </div> <!-- / top --> </div> <!--panel --> Предпросмотр Скачать

Заработай сейчас!

Заработай сейчас

Навигация по сайту

Поиск по сайту

Друзья сайта

Самоучитель html
Все для веб-мастера
Музыка для души
Мир развлечений
Скачать кино бесплатно!
Видеоклипы online

Хостинг от uCoz

Avon

Присоединяйтесь
к Avon