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

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

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

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

Меню сайта

Теги HTML

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

CSS

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

Реклама

Все для сайта

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

Плавный zoom изображения


Плавный zoom изображения Код CSS #main { min-height:100%; margin: 0 auto; position: relative; width: 900px; font-size:.8125em; } ul { list-style-type:square; list-style-position:outside; margin:0 0 1.5em 1.5em; } #slide { height:600px; width:900px; position:relative; overflow:hidden; z-index:2} .slider { width:900px; margin:0 auto; position:relative; z-index:2 } .items { display:none; } .pagination { position:absolute; top:551px; left:369px; display:inline-block; height:20px; width:140px; border:1px solid #000; background:url(../image/pagination-bg.gif) left top repeat-x; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; padding:5px 0 0 20px; z-index:60; } .pagination li { float:left; padding:0 3px 0 0; font-size:0; line-height:0; margin:0; color:#252525; background:none !important; } .pagination a { display:block; width:15px; height:15px; background:url(../image/pagination-a-bg.gif) left 0px no-repeat; font-size:0; line-height:0; text-decoration:none; } .pagination li.current a { background:url(../image/pagination-a-active.gif) left 0px no-repeat; } .prev { display:block; width:25px; height:22px; background:url(../image/pagination-bg.gif) left top repeat-x; position:absolute; z-index:15; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; top:552px; left:359px; padding:2px 0 0 0; font-weight:bold; text-align:center; color:#fff; text-decoration:none; } .prev:hover { color:#999 } .next { display:block; width:25px; height:22px; background:url(../image/pagination-bg.gif) left top repeat-x; position:absolute; z-index:15; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; top:552px; left:553px; padding:2px 0 0 0; font-weight:bold; text-align:center; color:#fff; text-decoration:none; } .next:hover { color:#999 } .play { display:block; width:45px; height:22px; background:url(../image/pagination-bg.gif) left top repeat-x; position:absolute; z-index:15; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; top:552px; left:823px; padding:2px 0 0 0; text-align:center; color:#fff; text-decoration:none; } .play span { display:none; } .play em { font-style:normal; display:block; } .paused span { display:block; } .paused em { display:none; } .banner{ width:260px; overflow:hidden; position:absolute; top:200px; color:#fff; right:0px; z-index:15; background:url(../image/png.png) left top repeat; padding:0px; border-radius:10px 0 0 10px; -moz-border-radius:10px 0 0 10px; -webkit-border-radius:10px 0 0 10px; } .banner span { display:block; padding:20px; } .progbar { background:#000; width:100%; height:2px; position:absolute; top:0px; left:0px; z-index:999; } .numStatus { display:block; width:45px; height:22px; background:url(../image/pagination-bg.gif) left top repeat-x; position:absolute; z-index:15; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; top:551px; left:583px; padding:2px 0 0 0; text-align:center; color:#fff; text-decoration:none; } /-------- end slider -----------/ .col-1 { float:left; width:400px; padding-right:50px } * + html .min { min-height:45px; } .col-2 { float:left; width:400px; } <!--[if lt IE 7]> <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen"> <![endif]--> <!--[if lt IE 9]> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen"> <!--[endif]----> JAVASCRIPT <script type="text/javascript" src="../jquery-1.7.min.js"></script> <script type="text/javascript" src="../jquery.easing.1.3.js"></script> <script type="text/javascript" src="../tms-0.4.1.js"></script> <!-- demo --> <script type="text/javascript" src="../demo.js"></script> <!-- end demo --> <script src="../highlight.js"></script> <script src="../html5.js"></script> <script src="../html-xml.js"></script> <script src="js/css.js"></script> <script src="../javascript.js"></script> Листинг <div id="main"> <div id="slide"> <!-- slider --> <div class="slider"> <ul class="items"> <li><img src="../image/slide-1.jpg" alt=""><div class="banner"><span> Ваш текст </span> </div> </li> <li><img src="../image/slide-2.jpg" alt=""><div class="banner"><span> Ваш текст </span> </div> </li> <li><img src="../image/slide-3.jpg" alt=""><div class="banner"><span> Ваш текст </span> </div> </li> <li><img src="../image/slide-4.jpg" alt=""><div class="banner"><span> Ваш текст </span> </div> </li> <li><img src="../image/slide-5.jpg" alt=""><div class="banner"><span> Ваш текст </span> </div> </li> <li><img src="../image/slide-6.jpg" alt=""><div class="banner"><span> Ваш текст </span> </div> </li> <li><img src="../image/slide-7.jpg" alt=""><div class="banner"><span> Ваш текст </span> </div> </li> </ul> </div> <a href="#" class="prev"></a> <a href="#" class="play"> <em stop </em><span> play </span></a> <a href="#" class="next"></a> <!-- slider end --> </div> </div> Предпросмотр Скачать

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

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

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

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

Друзья сайта

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

Хостинг от uCoz

Avon

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