ПЗ Караулова В.С. (1231750), страница 15

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 15)

height:170px;

background:#C7C9BE;

border-radius:15px 15px 0 0;

/*box-shadow:0px 1px 5px #000;*/

color:#FFF;

margin-top:30px;

}

.footercontacts img {

position:relative;

top:10px;

left:780px;

width:175px;

height:20px}

.footercontacts p {

position:relative;

left:370px;

top:0px;

color:#FFF;

font-size:10pt;

font-family:'Exo 2';

font-weight:lighter;

text-align:center;

}

.footermenu a {

position:relative;

left:70px;

bottom:130px;

color:#DC4E00;

font-size:14pt;

font-family:'Exo 2';

font-weight:lighter;

text-align:left;

text-decoration:none;

}

.footermenu a:hover {text-decoration:underline; color:#FFF;}

.footermenu_2 a {

position:relative;

left:115px;

bottom:130px;

color:#DC4E00;

font-size:14pt;

font-family:'Exo 2';

font-weight:lighter;

text-align:left;

text-decoration:none;

}

.footermenu_2 a:hover {text-decoration:underline; color:#FFF;}

footer p {

position:relative;

bottom:120px;

right:200px;

color:rgba(0,0,0,0.6);

text-shadow:2px 2px 3px rgba(255,255,255,0.1);

font-family:'Lobster';

text-align:center;

}

.breadcrumb {

float:left;

margin-left:20px;

margin-bottom:22px;

font-family:'Lobster';

}

.img {position:relative; left:40px; top:20px;}

.row {

position:relative;

font-size:14pt;

font-family:'Didact Gothic';

text-align:left;

}

.row a {

position:relative;

left:180px;

bottom:70px;

font-size:16pt;

text-decoration: none;

}

.row p {position:relative; bottom:70px; left:180px;}

.price {

position:relative;

right:160px;

float:right;

font-size:16pt;

text-align:right;

}

.oldprice {

position:relative;

left:28px;

font-size:16pt;

text-align:right;

}

.btn {position:relative; left:70px; bottom:13px;}

.pagination {font-family:'Exo 2'; font-weight:lighter;}

.pagination li {

display:inline;

padding:10px 10px;

font-size:16pt;

font-family:'Exo 2';

font-weight:lighter;

}

.span5 {position:relative; float:left; top:70px; right:180px;}

h1 {

font-size:18pt;

font-family:'Exo 2';

text-align:left;

}

.span7 {font-size:14pt; font-weight:bold;}

.checkbox {font-weight:bold;}

.col-sm-2 {width:110px; float:left; text-align:right;}

.col-sm-3 {display:inline; margin-left:50px;}

#product_price {width:40px;}

.intro {font-family:'Exo 2';font-weight:lighter; font-size:14pt; text-align:justify;}

.nal {color:#89CEDE; font-weight:normal;}

.emp_bas {

padding-top:100px;

padding-bottom:320px;

font-size:20pt;

font-family:'Lobster';

text-align:justify;

}

.btnb {float:right;}

.header_b {font-family:'Lobster'; font-size:12pt; background:#89CEDE;}

.footer_b {font-family:'Lobster'; font-size:12pt; background:#89CEDE;}

td {font-size:14pt; font-family:'Didact Gothic';}

input, select {

padding:5px 5px 5px 10px;

border:1px solid;

border-color:#929487;

border-radius:3px;

}

textarea {

padding:5px 18px 5px 10px;

border:1px solid;

border-color:#929487;

border-radius:3px;

}

.span6 {font-size:14pt;}

h4 {font-family:'Lobster';}

.col-sm-4 {float:left; width:170px; text-align:right;}

.col-sm-6 {display:inline; margin-left:40px;}

.row_b {position:relative; font-size:14pt; font-family:'Didact Gothic';}

#payments {position:relative; bottom:252px; left:500px;}

.opl {float:left; width:200px; text-align:left;}

.paym {display:inline; margin-left:0px;}

#deliveries {position:relative; bottom:100px;}

.vart {float:left; width:170px; text-align:right;}

.delv{ position:relative; bottom:20px; left:217px;}

#address {position:relative; bottom:315px; left:500px;}

#street {margin-left:50px;}

#building {margin-left:50px;}

#room {margin-left:50px;}

.adr {position:relative; right:45px;}

.btno {position:relative; float:right; bottom:275px;}

.well2 {position:relative; bottom:230px;}

.suc {float:left; font-size: 16pt;}

.comm{width:100%;}

.ticket-comment-author {font-family:'Lobster';}

.carousel {

width:100%;

max-width:980px;

margin:50px auto;

background:#F4F5ED;

border-radius:15px;

}

.carousel-wrapper {

position:relative;

margin:10px 30px;

overflow:hidden;

}

.carousel-items {

position:relative;

width:10000px; /* устанавливаем большую ширину для набора элементов */

}

.carousel-block {

position:relative;

display:block;

}

.carousel-block div {

position:relative;

float:left;

width:230px;

height:280px;

padding:25px 0 20px;

font-size:12pt;

font-family:'Didact Gothic';

text-align:center;

}

.carousel-button-left a, .carousel-button-right a {

position: relative;

width: 28px;

height: 230px;

cursor: pointer;

text-decoration:none;

}

.carousel-button-left a {float:left; background: url(../images/left2.png);}

.carousel-button-right a {float:right; background: url(../images/right2.png);}

#recom {text-align:left}

.tplsearch {position:relative; top:48px; right:150px;}

.inf h3 {text-align:left; color:#89CEDE;}

.inf p {font-size:16pt; font-family:'Exo 2'; font-weight:lighter; text-align:left; color:#000000;}

.inf td {font-size:16pt; font-family:'Exo 2'; font-weight:lighter; color:#000000;}

td.output {color:#89CEDE; font-size:16pt; font-family:'Exo 2'; font-weight:lighter;}

.norm {font-weight:normal;}

.bttn{position:absolute; bottom:0; right:15px;}

.bttrec{position:absolute; bottom:0; right:35px; margin-bottom:25px;}

ПРИЛОЖЕНИЕ Б

(рекомендуемое)

Исходный код на языке Java Script

Анимация меню каталога товаров

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

$(function() {

var menu_ul = $('.menu > li > ul'),

menu_a = $('.menu > li > a');

menu_ul.hide();

menu_a.click(function(e) {

e.preventDefault();

if(!$(this).hasClass('active')) {

menu_a.removeClass('active');

menu_ul.filter(':visible').slideUp('normal');

$(this).addClass('active').next().stop(true,true).slideDown('normal');

} else {

$(this).removeClass('active');

$(this).next().stop(true,true).slideUp('normal');

}

});

});

</script>

<script type="text/javascript" src="/jquery-latest.js"></script>

<script>

$("#accordion > li > div").click(function(){

if(false == $(this).next().is(':visible')) {

$('#accordion ul').slideUp(280);

}

$(this).next().slideToggle(280);

});

$('#accordion ul:eq(0)').show();

</script>

Анимация перелистывания слайдов в промо-блоке

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$(".slider").each(function () { // обрабатываем каждый слайдер

var obj = $(this);

$(obj).append("<div class='nav'></div>");

$(obj).find("li").each(function () {

$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации

$(this).addClass("slider"+$(this).index());

});

$(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню

});

});

function sliderJS (obj, sl) { // slider function

var ul = $(sl).find("ul"); // находим блок

var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока

var step = $(bl).width(); // ширина объекта

$(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки

}

$(document).on("click", ".slider .nav span", function() { // slider click navigate

var sl = $(this).closest(".slider"); // находим, в каком блоке был клик

$(sl).find("span").removeClass("on"); // убираем активный элемент

$(this).addClass("on"); // делаем активным текущий

var obj = $(this).attr("rel"); // узнаем его номер

sliderJS(obj, sl); // слайдим

return false;

});

</script>

Анимация прокрутки товаров в блоке сопутствующих товаров

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="/carousel.js"></script>

<script>

//Обработка клика на стрелку вправо

$(document).on('click', ".carousel-button-right",function(){

var carusel = $(this).parents('.carousel');

right_carusel(carusel);

return false;

});

//Обработка клика на стрелку влево

$(document).on('click',".carousel-button-left",function(){

var carusel = $(this).parents('.carousel');

left_carusel(carusel);

return false;

});

function left_carusel(carusel){

var block_width = $(carusel).find('.carousel-block').outerWidth();

$(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items"));

$(carusel).find(".carousel-items").css({"left":"-"+ 240 +"px"});

$(carusel).find(".carousel-items .carousel-block").eq(-1).remove();

$(carusel).find(".carousel-items").animate({left: "0px"}, 200);

}

function right_carusel(carusel){

var block_width = $(carusel).find('.carousel-block').outerWidth();

$(carusel).find(".carousel-items").animate({left: "-"+ 240 +"px"}, 200, function(){

$(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items"));

$(carusel).find(".carousel-items .carousel-block").eq(0).remove();

$(carusel).find(".carousel-items").css({"left":"0px"});

});

}

$(function() {

//Раскомментируйте строку ниже, чтобы включить автоматическую прокрутку карусели

//auto_right('.carousel:first');

})

// Автоматическая прокрутка

function auto_right(carusel){

setInterval(function(){

if (!$(carusel).is('.hover'))

right_carusel(carusel);

}, 3000)

}

// Навели курсор на карусель

$(document).on('mouseenter', '.carousel', function(){$(this).addClass('hover')})

//Убрали курсор с карусели

$(document).on('mouseleave', '.carousel', function(){$(this).removeClass('hover')})

</script>

ПРИЛОЖЕНИЕ В

(рекомендуемое)

Исходный код шаблонов страниц сайта

Шаблон главной страницы

<!DOCTYPE html>

<html>

<head>

[[$Head_Str]]

</head>

<body>

[[$Header_Str_Main]]

<section id="container">

[[$Nav_Str]]

[[*content]]

</section>

[[$Footer_Str_Main]]

</body>

</html>

Шаблон страницы каталога

<!DOCTYPE html>

<html>

Характеристики

Список файлов ВКР