Створення веб-сайту

Размещено на http://www.allbest.ru/

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

Житомирський державний технологічний університет

Факультет інформаційно-комп'ютерних технологій

Кафедра комп'ютерної інженерії

Галузь знань 0501 "Інформатика та обчислювальна техніка"

Спеціальність 6.050103 "Програмна інженерія"

КУРСОВИЙ ПРОЕКТ

на тему: Створення веб-сайту

з дисципліни "Програмування-Інтернет"

Керівник: Морозов Андрій Васильович

Житомир

2015



Зміст

Вступ

1. Теоретичні відомості

1.1 JavaScript(JS)

1.2 JQuery

1.3 PHP (Hypertext Preprocessor)

1.4 MySQL

2. Опис PSD макету

3. Керівництво користувача

3.1 Сторінка "Главная"

3.2 Сторінка "Регистрация"

3.3 Сторінка "О нас"

4. Керівництво веб-розробника

4.1 Оцінка макету

4.2 Виокремлення елементів дизайну

4.3 Верстка головної сторінки

4.4 Верстка сторінки registration.html

4.5 Верстка сторінки about.html

5. Програмування функціональної частини

6. Виправлення помилок

Висновок

Список використаної літератури

Додаток



Вступ

У цій роботі я створював веб-сайт з використанням HTML, CSS, JavaScript(JS), JQuery, MySQL та PHP. Якщо з HTML та СSS версткою я вже знайомий, то з JS, PHP, JQuery та MySQL я мав справу уперше. Тому й було поставлене завдання попрактикуватися у використанні цих засобів веб-розробки. JavaScript, JQuery, MySQL та PHP на сьогоднішній день є невід'ємною складовою веб-програмування. Саме через це виконання цієї роботи є доцільним та актуальним.



1. Теоретичні відомості

1.1 JavaScript(JS)

JavaScript (JS) - динамічна, об'єктно-орієнтованa мова програмування. Реалізація стандарту ECMAScript. Найчастіше використовується як частина браузера, що надає можливість коду на стороні клієнта (такому, що виконується на пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-сторінки. Мова JavaScript також використовується для програмування на стороні серверу (подібно до таких мов програмування, як Java і C#), розробки ігор, стаціонарних та мобільних додатків, сценаріїв в прикладному ПЗ (наприклад, в програмах зі складу Adobe Creative Suite), всередині PDF-документів тощо.

JavaScript має низку властивостей об'єктно-орієнтованої мови, але завдяки концепції прототипів підтримка об'єктів в ній відрізняється від традиційних мов ООП. Крім того, JavaScript має ряд властивостей, притаманних функціональним мовам, - функції як об'єкти першого класу, об'єкти як списки, каррінг (currying), анонімні функції, замикання (closures) - що додає мові додаткову гнучкість.

JavaScript має C-подібний синтаксис, але в порівнянні з мовою Сі має такі корінні відмінності:

· об'єкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів;

· функції як об'єкти першого класу;

· обробка винятків;

· автоматичне приведення типів;

· автоматичне прибирання сміття;

· анонімні функції;

JavaScript містить декілька вбудованих об'єктів: Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Крім того, JavaScript містить набір вбудованих операцій, які, строго кажучи, не обов'язково є функціями або методами, а також набір вбудованих операторів, що управляють логікою виконання програм. Синтаксис JavaScript в основному відповідає синтаксису мови Java (тобто, зрештою, успадкований від C), але спрощений порівняно з ним, щоб зробити мову сценаріїв легкою для вивчення. Так, приміром, декларація змінної не містить її типу, властивості також не мають типів, а декларація функції може стояти в тексті програми після неї:

· Відсутність кешування повторюваних елементів сайту браузером;

· Нераціональність використання каскадних таблиць стилів, що відбивається на дизайні;

1.2 JQuery

jQuery - популярна JavaScript-бібліотека з відкритим сирцевим кодом. Вона була представлена у січні 2006 року у BarCamp NYC Джоном Ресіґом (John Resig).

Згідно з дослідженнями організації W3Techs, JQuery використовується понад половиною від мільйона найвідвідуваніших сайтів. jQuery є найпопулярнішою бібліотекою JavaScript, яка посилено використовується на сьогоднішній день.

jQuery є вільним програмним забезпеченням під ліцензією MIT (до вересня 2012 було подвійне ліцензування під MIT та GNU General Public License другої версії.

Синтаксис jQuery розроблений, щоб зробити орієнтування у навігації зручнішим завдяки вибору елементів DOM, створенню анімації, обробки подій, і розробки AJAX-застосунків. jQuery також надає можливості для розробників, для створення плагінів у верхній частині бібліотеки JavaScript. Використовуючи ці об'єкти, розробники можуть створювати абстракції для низькорівневої взаємодії та створювати анімацію для ефектів високого рівня. Це сприяє створенню потужних і динамічних веб-сторінок.

1.3 PHP (Hypertext Preprocessor)

PHP (англ. PHP: Hypertext Preprocessor - PHP: гіпертекстовий препроцесор), попередня назва: Personal Home Page Tools - скриптова мова програмування, була створена для генерації HTML-сторінок на стороні веб-сервера. PHP є однією з найпоширеніших мов, що використовуються у сфері веб-розробок (разом із Java, .NET, Perl, Python, Ruby). PHP підтримується переважною більшістю хостинг-провайдерів. PHP - проект відкритого програмного забезпечення.

PHP інтерпретується веб-сервером у HTML-код, який передається на сторону клієнта. На відміну від скриптової мовиJavaScript, користувач не бачить PHP-коду, бо браузер отримує готовий html-код. Це є перевага з точки зору безпеки, але погіршує інтерактивність сторінок. Але ніщо не забороняє використовувати PHP для генерування і JavaScript-кодів які виконуються вже на стороні клієнта.

1.4 MySQL

MySQL - вільна система керування реляційними базами даних.

MySQL був розроблений компанією "ТсХ" для підвищення швидкодії обробки великих баз даних. Ця система керування базами даних (СКБД) з відкритим кодом була створена як альтернатива комерційним системам. MySQL з самого початку була дуже схожою на mSQL, проте з часом вона все розширювалася і зараз MySQL - одна з найпоширеніших систем керування базами даних. Вона використовується, в першу чергу, для створення динамічних веб-сторінок, оскільки має чудову підтримку з боку різноманітних мов програмування.



2. Опис PSD макету

У PSD макеті, який я вибрав, має велику кількість елементів.

Очевидно, що це макет фіксованого типу. Видно розмежування між верхньою частиною (хедером), центральною частиною (контент) та нижньою частиною (футером).

Центральна частина поділена на три великі блоки (ліве меню, середня частина, праве меню). Кожен блок містить ще по декілька блоків з елементами.

Вагомим недоліком макету є відсутність відображення певних дій (наведення курсора на елементи, натискання на кнопки та посилання). Через це довелося імпровізувати і задавати власні параметри. Ще один, але незначний недолік це те, що у макеті наявні зайві слої, які візуально непомітні, але у слоях наявні.

Напевно, дизайнер перероблював макет, але не видаляв старий варіант слоїв. Хоча, це майже не ускладнює роботу з макетом.

Як висновок, можна сказати, що макет дуже зручний завдяки виду, який поширений серед сайтів, з наявним хедером, контентом й футером. Але відсутність відображення певних дій ускладнюють роботу.



3. Керівництво користувача

3.1 Сторінка "Главная"

Зайшовши на даний сайт ви відразу побачити головну сторінку, а саме шапку сайту, та основий блок, який вміщає ліву, центральну, та праву частину.

Рисунок 1: Головна сторінка: перша частина сторінки

Сайт поміщений у один блок, який розміщений по центру й фіксовано, відносно сторін браузера (Рис. 1).

Хедер починається з форми з трьома текстовими полями( пошукова система, поля введення логіна та пароля), кнопкою "входу" за своїм обліковим записом та посиланням "Регистрация", яке відкриває сторінку з формою реєстрації. Під хедером знаходяться 4 посилання. Після цього починається окремий блок, який вміщує три частини. Ліва частина має меню "Категории" з посиланнями, блок "Акція" з відображенням товару та ціни на нього, блок "Наши данные", який містить контактну інформацію. Центральна частина містить два блоки. Першим блоком є слайдер. Другим блоком є "Каталог", який містить три посилання у правій частині заголовку, й повторювані блоки з зображенням та назвою товару, посиланням у вигляді кнопки "Купить", ціною, посиланням на відгуки "Отзывы" й кнопкою-посиланням like.

Права частина містить також декілька блоків. Блок "Корзина" з кнопкою "Оплатить" та інформацією про додані до "корзини" товари. Далі блок "Варианты оплаты" з посиланням на різні банкові фірми, які можуть використовуватися для оплати. Наступний блок "Фильтры" , в якому можна встановити фільтри, за якими товар буде групуватися.

Прокрутивши сторінку донизу, ви побачите продовження лівого, центрального та правого блоків та нижній блок .

В лівій частині тут ще два блоки: "Лидеры продаж" й "Связь / О нас". У першому блоці інформація про популярні товари, їх назва, ціна та кнопка "Купить". У другому блоці - 5 посилань по'язаних з інформацією "о нас", зворотнім зв'язком, допомогою й політикою гарантії.

Центральний блок продовжується під блоками з товарами. Правий блок продовжується рекламним посиланням у вигляді банера, та блоком "Новости" з малюнками, новинами та посиланнями на них. Й останній блок, що знаходиться знизу сторінки - це блок футер з невеликою інформацією "О нас", переліком фірм-партнерів у вигляді малюнків з посиланнями (що розміщені в окремому блоці) та копірайтом (рис. 2).

Рисунок 2: друга частина сторінки



3.2 Сторінка "Регистрация"

Ми потрапляємо на цю сторінку при натисканні посилання "Регистрация" у хедері. На цій сторінці всі блоки такі ж самі, як на головній сторінці, крім центрального. У центральному блоці "Регистрация" є форма реєстрації на сайті з полями для ведення логіна, пароля, ім'я користувача, вибором статі, списком вибору міста проживання, прапорцями погодження з правилами ресурсу та отриманням оновлень новин, й, відповідно, кнопками відправки форми та скасування. На цій сторінці у хедері замість посилання "Регистрация" встановлене посилання "На главную", яке повертає нас на головну сторінку (рис.3).

Рисунок 3: Регістрація

3.3 Сторінка "О нас"

Сюди користувач потрапляє завдяки посиланню "О нас" у лівому нижньому меню-блоці "О нас / Связь". Ця сторінка так само, має незмінні усі блоки, окрім центрального. У центральному блоці розміщена інформація, різні зображення. В кінці статті присутнє посилання "На главную>>", яке повертає користувача на головну сторінку. Зі сторінки "О нас" теж можна перейти на сторінку "Регистрация" й навпаки, завдяки відповідним посиланням (рис. 4).

Рисунок 3: О нас



4. Керівництво веб-розробника

Етапи:

1. Оцінка PSD-макету

2. Виокремлення елементів дизайну з PSD-макету

3. Верстка сторінок

4. Програмування функціональної частини

5. Виправлення помилок

4.1 Оцінка макету

На даному етапі я провів аналіз дизайну макету та оцінив складність виконання завдання.

З самого верху була присутня частина (довгий чорний блок) з посиланнями на автора макету. Оскільки у дизайн ця частина не вписується навіть кольорами, очевидно, що вона не обов'язкова. Фон, вочевидь, фіксований блакитний блок зі смугою більш темного кольору знизу й градієнтом, який займає приблизно 40% від розміру екрану. Залишок місця заповнене світло-сірим кольором. Весь контент розміщений на білому блоці із заокругленими кутами, який розміщений по центру відносно сторін екрану й має певні відступи від них. Усі блоки розташовані на певній відстані один від одного. Увесь контент розташований на однакову відстань всередині від головного батьківсього блока властивістю padding. Спочатку розташований хедер з полями пошуку, логіна та пароля, кнопкою та посиланням. Під хедером є чотири блоки з градієнтом, малюнками та текстом.

Деякі блоки у заголовках мають однаковий дизайн. Це спрощує роботу тим, що можна сверстати лише один блок, а вже для інших задіяти раніше написані стилі. У лівій частині блоки заголовків мають градієнти, а деякі - малюнок у вигляді стрілки. Цей елемент, вочевидь, доведеться робити використовуючи властивість CSS3 псевдоелемент ::before.

Слайдер у центральній частині має дві стрілки-посилання для перемикання зображень. Але я зроблю його без стрілок але з навігацією у вигляді пунктів. У блоці "Каталог" присутні блоки, що повторюються. У правій частині знову є блоки, заголовки яких мають однакове форматування.

Однією з особливостей макета є те, що майже всі блоки мають заокруглені кути.

Футер, що розташований знизу, не має обтікання по бокам. Це досягається заданням блоку властивості clear:both.

4.2 Виокремлення елементів дизайну

На цьому етапі я відокремлював деякі слої. Оскільки макет має велику кількість однотонно зафарбованих блоків, то зручним було вирізання зображень декількох пікселів (так звані "слайси"), які потім можна "розтягувати" завдяки властивостям background-repeat у CSS.

Також, маленькі картинки приблизно однакового розміру зручно об'єднувати в спрайти. Це забезпечує бистрішу роботу сайту тому, що картинка загружається лише один раз у вигляді склеєного спрайта. А вже потім, ми можемо міняти позицію видимої частини цієї картинки.

Приклади деяких з таких елементів:

4.3 Верстка головної сторінки

Верстку я почав з того, що відокремив від макету фонове зображення та встановив його у тег body з властивістю background-size: 100% та background-attachment: fixed. Цим я задав розмір фоновому зображенню 100% (тобто, використання реального розміру зображення) й зробив його фіксованим, що при прокрутці сторінки залишає його у тому ж стані.

Далі я створив основний div-блок box якому задав наступні параметри:

width: 1000px;

margin: 0 auto;

margin-top: 50px;

background-color: #fff;

border-radius: 10px;

padding: 10px;

overflow: hidden;

Після цього створив блок header, у який помістив форму із текстовими полями, кнопкою та посиланням. Для нього я задав наступне форматування: border-radius: 5px;

padding: 5px;

background-image: url('img/menu-line.png');

background-repeat: repeat-x;

border: solid 1px #68abc5;

Для елементів форми всередині хедера створив необхідне форматування.

Наступний блок hbut (header button). Який є ніби другим хедером. Розташовується під header. В ньому є 4 посилання, які схожі на кнопки великого розміру з надписом та картинкою. Оскільки картинки по розміру невеликі й приблизно однакові, то я об'єднав їх у спрайт head-sprite. Задав необхідне форматування у середині кожного з 4-ьох блоків.

Наступний логічний блок #content. В ньому знаходяться всі інші елементи сайту. Для нього задане форматування:

width: 1000px;

overflow: hidden;

padding-top: 5px;

Після цього починаємо верстати ліву частину основного контенту. Створив блок #left-menu та задав йому наступне форматування:

float: left;

width: 210px;

margin-right: 10px;

display: block;

margin-bottom: 10px;

Створив блок-заголовок, який декілька разів повторюється .menu.

Застосував цей клас для заголовку меню "Категории". У самому блоці розташовані посилання.

У наступному блоці використовуваєтться у заголовку попереднє форматування, а одразу за ним блок .menu2. А в ньому ще декілька елементів, включаючи фонові зображення, зображення товару, надписи ціни.

Слідуючий блок з аналогічним форматуванням заголовку. Він у собі має блок з декількома елементами, включаючи спрайт зображення.

Наступний блок з аналогічним заголовком. Містить у собі 4 блока .price4 з картинкою, написами та кнопкою, для якої задано нестандартне форматування з використанням властивостей CSS3:

display: inline-block;

width: 94px;

height: 18px;

line-height: 18px;

vertical-align: middle;

text-align: center;

text-decoration: none;

text-shadow: 0 -1px 1px #777;

color: #fff;

outline: none;

border-radius: 7px;

box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800;

background: linear-gradient(#b95417, #d77b1b, #b95417);

Та форматування для натискання цієї кнопки шляхом використання псевдокласа active:

top: .1em;

left: .1em;

box-shadow: 0 0 0 60px rgba (0,0,0,.05) inset;

Для останнього блоку у лівій частині довелося створювати інше форматування заголовка тому, що дизайн відрізняється. В цьому блоці "О нас / Связь" є 5 посилань.

Наступний логічний блок центральної частини це #center, який має наступне форматування:

float: left;

background-color: white;

width: 550px;

margin: 10px 7px;

У цьому блоці є два блока. Перший блок це .slider, який описує слайдер із блоком навігації та чотирма картинками. Слайдер реалізований за допомогою JS Та JQuery (повний код у додатку):

function sliderJS (obj, sl) {

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); // слайдим

Другий блок це .center-content, який містить у собі: блок заголовок, форматування якому ми задавали раніше (але в цьому випадку довелося дещо змінити, бо він відрізняється розміром і наявністю посилань у кінці заголовку) та повторювані блоки .article, які містять надпис, картинку, посилання у вигляді кнопки, ціну, посилання на форум, та посилання Like.

До кінця центральна частина заповнена такими блоками.

Права частина зроблена блоком #right-menu для якого задане форматування:

float:right;

width: 202px;

margin-bottom: 10px;

Далі у цьому блоці створено ще 5 блоків, 4 з яких мають однаковий заголовок.

У першому блоці "Корзина" розміщений ще один блок, у якому є декілька надписів (останні три зробленні посиланнями), картинка та кнопка "Оплатить".

У другому блоці "Способы оплаты" є надпис та 8 картинок-посилань, які розміщені у свою чергу ще в одному блоці з білим фоном.

Третий блок "Фильтры" має декілька надписів з нижньою границею у вигляді точок (border-bottom: 1px dotted #9b9b9b), кольоровими кнопками-посиланнями у кількості 12 штук, та пронумерованими кнопками-посиланнями з позначенням розмірів одягу.

Четвертий блок .banner який містить у собі картинку з посиланням на ній.

Останній блок у правому меню "Новости" містить три однакових блоки з картинкою, надписами й посиланнями.

Останній логічний блок цієї сторінки це #footer, який має форматування:

clear: both;

background: linear-gradient(to top, #f9fbed, #ebedd3);

height: 200px;

margin-top: 10px;

border-radius: 7px;

padding: 10px;

В ньому є заголовок, текст, блок з білим фоном та картинками-посиланнями, які розтягнуті по ширині, й знову два рядки тексту.

На цьому верстка головної сторінки закінчена.

4.4 Верстка сторінки registration.html

Ця сторінка містить ті ж самі блоки, що й головна сторінка. Різниця лише у тому, що змінена центральна частина. Замість попередніх даних на цій сторінці в центральній частині розташована форма реєстрації на сайті, яка зверстана таблично. Відповідне форматування було додане у таблицю стилів. Посилання у хедері змінилося на "На главную".



4.5 Верстка сторінки about.html

Аналогічно й на сторінці "О нас". Змінилася лише центральна частина. У ній розташований один блок з заголовком та блоком у середині нього з текстом та картинками. Також, у кінці статті є посилання "На главную>>", яке повертає нас на головну сторінку.

Також було задане форматування для деяких посилання з використанням псевдокласів hover, active щоб забезпечити якісь візуальні ефекти при наведенні курсора миші, або натисканні. Але через те, що на макеті цих дій не було, довелося імпровізувати.



5. Програмування функціональної частини

При реєстрації на сторінці registration.html форма відправляє усі дані на reg2.php, де вони будуть оброблені, перевірені, та, у випадку, якщо вони коректні, занесені до бази даних Bd, яка підключається у файлі db.php. Якщо реєстрація вдалася, користувач буде пере направлений до сторінки regged.php й буде повідомлений про успішну реєстрацію (рис. 1). На усіх сторінках у хедері є форма для авторизації у системі. Дані, введені у цій форм, будуть відсилатися на login.php, де будуть перевірені на коректність та наявність у базі даних зареєстрованих користувачів. У випадку, якщо все коректно, користувач буде перенаправлений до сторінки logged.php і буде повідомлений про успішну авторизацію (рис. 2). Дані зберігаються у базі даних Bd у таблиці users (рис. 3). Паролі двічі кодуються за допомогою md5. Під час авторизації починає роботу сесія, де зберігається id та логін користувача, який авторизувався.

Рисунок 1: Реєстрація

Рисунок 2: Авторизація

Робота з OpenServer та MySQL

Для того, щоб запускати сайт потрібен сервер, а щоб зберігати дані на сервері - база даних. Запустив OpenServer та створив нового користувача. Потім створив базу даних Bd та таблицю users у ній (рис. 3). У таблиці створив ті стовбці, які будуть містити поля з форми та оброблятися: id, login, password, username, town. При реєстрації дані заносяться до таблиці (якщо коректні). При авторизації через запити до таблиці дані звіряються.

Рисунок 3: База даних MySQL



6. Виправлення помилок

На даному етапі усі сторінки php, html та таблиця стилів сss були провірені через валідатори стандартів. Після першої перевірки виправив декілька наявних помилок та перевірив ще раз. Html сторінки перевірялися на валідаторі http://validator.w3.org/check за стандартом HTML 4.01 Transitional. У кінцевому результаті не було виявлено жодної помилки. Сss таблиця стилів була перевірена на валідаторі http://jigsaw.w3.org/css-validator/ по стандарту CSS 3.0 тому, що у таблиці використовувалися деякі властивості з версії 3.0. Помилок не було виявлено. Отже, сторінки та таблиця стилів валідні.



Висновок

Було створено cайт із частковим функціонуванням. Дизайн майже на 100% співпадає із обраним дизайном макета. Замінені лише деякі незначні деталі. Сторінки відображаються вірно у останніх версіях браузерів Google Chrome й IE. Під час написання курсового проекту я попрактикувався та поглибив свої знання JavaScript, PHP, JQuery та MySQL. Цей проект можна надалі допрацювати та зробити сайт із повноцінним функціонуванням.



Список використаної літератури

· http://htmlbook.ru/

· http://habrahabr.ru/

· http://uk.wikipedia.org/

· http://github.com/



Додаток

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="main.css"> <meta name="description" content="Онлайн-магазин одежды"> <meta name="keywords" content="Одежда, магазин, женская одежда, мужская одежда"> <script src="jquery-2.1.3.min.js"></script> <title>Главная</title> </head> <body> <div class="box"> <div id="header"> <form action="login.php" method="POST"> <input class="search" type="text" value="Поиск" name="search1"> <input type="text" placeholder="Логин" name="login"> <input type="password" placeholder="Пароль" name="password"> <input type="submit" value="Вход" name="enter"> <a href="registration.html">Регистрация</a> </form> </div> <div class="hbut"> <div><a href=""><span class="head-sprite a1"></span>Доставка</a></div> <div><a href=""><span class="head-sprite a2"></span>Способы оплаты</a></div> <div><a href=""><span class="head-sprite a3"></span>VIP услуги</a></div> <div class="last"><a href=""><span class="head-sprite a4"></span>Новинки</a></div> </div> <div id="content"> <div id="left-menu"> <div class="menu"> <h2><strong>Категории</strong></h2> <ul> <li class="list1"><a href="">Мужская одежда</a></li> <li class="list1"><a href="">Женская одежда</a></li> <li class="list1"><a href="">Детская одежда</a></li> <li class="list1"><a href="">Аксессуары</a></li> <li class="list1"><a href="">Другое</a></li> </ul> </div> <div class="menu"> <h2><strong>Акция</strong></h2> <div class="menu2"> <div class="pictmenu"> <div class="pictmenu2"> <p id="first">$24.99</p> <p id="sec">( 3$ Ч 8 Взносов )</p> </div> </div> </div> </div> <div class="menu"> <h2><strong>Наши данные</strong></h2> <div class="menu3"> <div class="menu3in"> <div> <span class="sprite-icon i1"></span> <span class="icon-text">+38 (093) 425 97 08</span> </div> <div> <span class="sprite-icon i2"></span> <span class="icon-text">maxed95@mail.ru</span> </div> <div> <span class="sprite-icon i3"></span> <span class="icon-text">Украина, Житомир, ул. Киевская 9,кв. 10</span> </div> </div> </div> </div> <div class="menu"> <h2><strong>Лидеры продаж</strong></h2> <div class="menu4"> <div class="price4"> <img src="img/shirts.png" alt="shirts"> <div class="text-menu4">Футболка v-style с воротником на застёжке (хлопок) <del class="first">35 $</del> <span class="second">28 $</span> <a href="" class="button2">Купить</a> </div> </div> <div class="price4"> <img src="img/shirts.png" alt="shirts"> <div class="text-menu4">Футболка v-style с воротником на застёжке (хлопок) <del class="first">35 $</del> <span class="second">28 $</span> <a href="" class="button2">Купить</a> </div> </div> <div class="price4"> <img src="img/shirts.png" alt="shirts"> <div class="text-menu4">Футболка v-style с воротником на застёжке (хлопок) <del class="first">35 $</del> <span class="second">28 $</span> <a href="" class="button2">Купить</a> </div> </div> <div class="price4"> <img src="img/shirts.png" alt="shirts"> <div class="text-menu4">Футболка v-style с воротником на застёжке (хлопок) <del class="first">35 $</del> <span class="second">28 $</span> <a href="" class="button2">Купить</a> </div> </div> </div> </div> <div class="menu5"> <div id="header-menu5"> <h3>Связь / О нас</h3> </div> <div class="menu5-form"> <div class="menu5-text"> <ul> <li><a href="about.html">О нас</a></li> <li><a href="">Обратная связь</a></li> <li><a href="">Политика возврата и гарантии</a></li> <li><a href="">Возврат</a></li> <li><a href="">Помошь</a></li> </ul> </div> </div> </div> </div> <div id="center"> <div class="slider"> <ul> <li><img src="img/sl0.png" alt="slide1"></li> <li><img src="img/sl1.png" alt="slide2"></li> <li><img src="img/sl2.png" alt="slide3"></li> <li><img src="img/sl3.png" alt="slide4"></li> </ul> </div> <div class="center-content"> <div class="menu"> <h2><strong>Каталог</strong> <a href="#">Новое</a> <a href="#">Популярное</a> <a href="#">Скидки</a> </h2> </div> <div class="article"> <h4>Abercombie Polo Collared T-Shirt XXL Льняные ткани</h4> <img src="img/shirts2.png" alt="shirts2"> <span>99,00 $</span> <a class="buy" href="#">Купить</a> <a class="forum" href="#">Отзывы</a> <a class="like" href="#"></a> </div> <div class="article"> <h4>Abercombie Polo Collared T-Shirt XXL Льняные ткани</h4> <img src="img/shirts2.png" alt="shirts2"> <span>99,00 $</span> <a class="buy" href="#">Купить</a> <a class="forum" href="#">Отзывы</a> <a class="like" href="#"></a> </div> <div class="article back"> <h4>Abercombie Polo Collared T-Shirt XXL Льняные ткани</h4> <img src="img/shirts2.png" alt="shirts2"> <span>99,00 $</span> <a class="buy" href="#">Купить</a> <a class="forum" href="#">Отзывы</a> <a class="like" href="#"></a> </div> <div class="article"> <h4>Abercombie Polo Collared T-Shirt XXL Льняные ткани</h4> <img src="img/shirts2.png" alt="shirts2"> <span>99,00 $</span> <a class="buy" href="#">Купить</a> <a class="forum" href="#">Отзывы</a> <a class="like" href="#"></a> </div> <div class="article"> <h4>Abercombie Polo Collared T-Shirt XXL Льняные ткани</h4> <img src="img/shirts2.png" alt="shirts2"> <span>99,00 $</span> <a class="buy" href="#">Купить</a> <a class="forum" href="#">Отзывы</a> <a class="like" href="#"></a> </div> <div class="article back"> <h4>Abercombie Polo Collared T-Shirt XXL Льняные ткани</h4> <img src="img/shirts2.png" alt="shirts2"> <span>99,00 $</span> <a class="buy" href="#">Купить</a> <a class="forum" href="#">Отзывы</a> <a class="like" href="#"></a> </div> <div class="article"> <h4>Abercombie Polo Collared T-Shirt XXL Льняные ткани</h4> <img src="img/shirts2.png" alt="shirts2"> <span>99,00 $</span> <a class="buy" href="#">Купить</a> <a class="forum" href="#">Отзывы</a> <a class="like" href="#"></a> </div> <div class="article"> <h4>Abercombie Polo Collared T-Shirt XXL Льняные ткани</h4> <img src="img/shirts2.png" alt="shirts2"> <span>99,00 $</span> <a class="buy" href="#">Купить</a> <a class="forum" href="#">Отзывы</a> <a class="like" href="#"></a> </div> <div class="article back"> <h4>Abercombie Polo Collared T-Shirt XXL Льняные ткани</h4> <img src="img/shirts2.png" alt="shirts2"> <span>99,00 $</span> <a class="buy" href="#">Купить</a> <a class="forum" href="#">Отзывы</a> <a class="like" href="#"></a> </div> </div> </div> <div id="right-menu"> <div class="right-menu1"> <h2><strong>Корзина</strong></h2> <div class="shop"> <img src="img/shop.png" alt="shop-picture"> <span class="first-span">Количество товаров:</span> <span class="second-span">2 артикула</span> <span class="third-span">Сумма за все товары:</span> <span class="fourth-span">65.70 $ c учётом ПДВ</span> <a class="buy-button" href="#">Оплатить</a> </div> </div> <div class="right-menu1"> <h2><strong>Варианты оплаты</strong></h2> <div class="shop type2"> <span>Используйте следующие карточки и получите 12х месяцев рассрочки</span> <div class="pay"> <a href="#"><img src="img/pay1.png" alt="pay1"></a> <a href="#"><img src="img/pay2.png" alt="pay2"></a> <a href="#"><img src="img/pay3.png" alt="pay3"></a> <a href="#"><img src="img/pay4.png" alt="pay4"></a> <a href="#"><img src="img/pay5.png" alt="pay5"></a> <a href="#"><img src="img/pay6.png" alt="pay6"></a> <a href="#"><img src="img/pay7.png" alt="pay7"></a> <a href="#"><img src="img/pay8.png" alt="pay8"></a> </div> </div> </div> <div class="right-menu1"> <h2><strong>Фильтры</strong></h2> <div class="shop type3"> <span class="text-filter">Выберите цвет</span> <a href="#"><span class="color c1"></span></a> <a href="#"><span class="color c2"></span></a> <a href="#"><span class="color c3"></span></a> <a href="#"><span class="color c4"></span></a> <a href="#"><span class="color c5"></span></a> <a href="#"><span class="color c6"></span></a> <a href="#"><span class="color c7"></span></a> <a href="#"><span class="color c8"></span></a> <a href="#"><span class="color c9"></span></a> <a href="#"><span class="color c10"></span></a> <a href="#"><span class="color c11"></span></a> <a href="#"><span class="color c12"></span></a> <span class="text-filter">Выберите размер</span> <a href="#"><span class="color f">2</span></a> <a href="#"><span class="color f">3</span></a> <a href="#"><span class="color f">4</span></a> <a href="#"><span class="color f">5</span></a> <a href="#"><span class="color f">6</span></a> <a href="#"><span class="color f">7</span></a> <a href="#"><span class="color f">8</span></a> <a href="#"><span class="color f">9</span></a> <a href="#"><span class="color f">10</span></a> <a href="#"><span class="color f">11</span></a> <a href="#"><span class="color f">12</span></a> <a href="#"><span class="color f">13</span></a> <a href="#"><span class="text-filter">Cортировка по цене</span></a> <a href="#"><span class="text-filter">Сортировка по юзерам</span></a> <a href="#"><span class="last-filter">Сортировка по стилю</span></a> </div> </div> <div class="banner"> <a href="#"><img src="img/reklam.png" alt="reklam"></a> </div> <div class="right-menu1"> <h2><strong>Новости</strong></h2> <div class="shop type4"> <div class="shop-block"> <img src="img/shirts3.png" alt="shirts3"> <a href="">Заголовок новости</a> <span>Cодержание новости...</span></div> <div class="shop-block"> <img src="img/shirts3.png" alt="shirts3"> <a href="">Заголовок новости</a> <span>Cодержание новости...</span></div> <div class="shop-block last-block"> <img src="img/shirts3.png" alt="shirts3"> <a href="">Заголовок новости</a> <span>Cодержание новости...</span></div> </div> </div> </div> <div id="footer"> <h4>О нас</h4> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span> <div class="firm"> <div class="firm-block"><a href="#"><img src="img/firm1.png" alt="firm1"></a> <a href="#"><img src="img/firm2.png" alt="firm2"></a> <a href="#"><img src="img/firm3.png" alt="firm3"></a> <a href="#"><img src="img/firm4.png" alt="firm4"></a> <a href="#"><img src="img/firm5.png" alt="firm5"></a> <a href="#"><img src="img/firm6.png" alt="firm6"></a> <a href="#"><img src="img/firm7.png" alt="firm7"></a> </div> </div> <span class="end">© 2009 Все права защищены.</span> <span>Украина, Житомир, ул. Киевская 9, кв. 10 - maxed95@mail.ru</span> </div> </div> </div> </body> </html>

Script.js

$(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) {

var ul = $(sl).find("ul");

var bl = $(sl).find("li.slider"+obj);

var step = $(bl).width(); // ширина объекта $(ul).animate({marginLeft: "-"+step*obj}, 500); } $(document).on("click", ".slider .nav span", function() { var sl = $(this).closest(".slider"); $(sl).find("span").removeClass("on"); $(this).addClass("on"); var obj = $(this).attr("rel"); sliderJS(obj, sl); return false; }); дизайн cайт гіпертекстовий програмування

registration.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="main.css"> <meta name="description" content="Онлайн-магазин одежды"> <meta name="keywords" content="Одежда, магазин, женская одежда, мужская одежда"> <script src="jquery-2.1.3.min.js"></script> <title>Регистрация</title> </head> <body> <div class="box"> <div id="header"> <form action="login.php" method="POST"> <input class="search" type="text" value="Поиск" name="search1"> <input type="text" placeholder="Логин" name="login"> <input type="password" placeholder="Пароль" name="password"> <input type="submit" value="Вход" name="enter"> <a href="index.html">На главную</a> </form> </div> <div class="hbut"> <div><a href=""><span class="head-sprite a1"></span>Доставка</a></div> <div><a href=""><span class="head-sprite a2"></span>Способы оплаты</a></div> <div><a href=""><span class="head-sprite a3"></span>VIP услуги</a></div> <div class="last"><a href=""><span class="head-sprite a4"></span>Новинки</a></div> </div> <div id="content"> <div id="left-menu"> <div class="menu"> <h2><strong>Категории</strong></h2> <ul> <li class="list1"><a href="">Мужская одежда</a></li> <li class="list1"><a href="">Женская одежда</a></li> <li class="list1"><a href="">Детская одежда</a></li> <li class="list1"><a href="">Аксессуары</a></li> <li class="list1"><a href="">Другое</a></li> </ul> </div> <div class="menu5"> <div id="header-menu5"> <h3>Связь / О нас</h3> </div> <div class="menu5-form"> <div class="menu5-text"> <ul> <li><a href="about.html">О нас</a></li> <li><a href="">Обратная связь</a></li> <li><a href="">Политика возврата и гарантии</a></li> <li><a href="">Возврат</a></li> <li><a href="">Помошь</a></li> </ul> </div> </div> </div> </div> <div id="center" class="reg"> <div class="center-content"> <div class="menu"> <h2><strong>Регистрация</strong> </h2> </div> <form name="form" action="reg2.php" method="POST"> <table> <tr> <td><span class="reg">Login:</span></td> <td><input type="text" name="login" required placeholder="Введите Login" maxlength="30"></td> </tr> <tr> <td><span class="reg">Password:</span></td> <td><input type="password" maxlength="20" required placeholder="Введите пароль" name="password"></td> </tr> <tr> <td><span class="reg">Repeat password:</span></td> <td><input type="password" placeholder="Повторно введите пароль" maxlength="20" name="password2"></td> </tr> <tr> <td><span class="reg">Username:</span></td> <td><input type="text" placeholder="Введите имя" name="fname" maxlength="25"></td> </tr> <tr> <td><span class="reg">Gender:</span></td> <td> <label><input type="radio" checked="checked" name="gend" value="1">мужской</label> <label><input type="radio" name="gend" value="2">женский</label> </td> </tr> <tr> <td><span class="reg">Town:</span></td> <td><select name="town"> <option value="Kiyv">Киев</option> <option value="Paris">Париж</option> <option value="London">Лондон</option> </select></td> </tr> <tr> <td><span class="reg">Соглашения:</span></td> <td> <label><input checked="checked" type="checkbox" name="ch1" value="true">Уведомлять меня о всех новостях</label> <label><input type="checkbox" name="ch2" value="true">Соглашаюсь с правилами сайта</label> </td> </tr> <tr> <td></td> <td> <button type="submit" name="submit">Зарегестрироваться</button> <button type="reset" name="reset">Сброс</button> </td> </tr> </table> </form> </div> </div> <div id="right-menu"> <div class="banner"> <a href="#"><img src="img/reklam.png" alt="reklam"></a> </div> </div> <div id="footer"> <h4>О нас</h4> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span> <div class="firm"> <div class="firm-block"><a href="#"><img src="img/firm1.png" alt="firm1"></a> <a href="#"><img src="img/firm2.png" alt="firm2"></a> <a href="#"><img src="img/firm3.png" alt="firm3"></a> <a href="#"><img src="img/firm4.png" alt="firm4"></a> <a href="#"><img src="img/firm5.png" alt="firm5"></a> <a href="#"><img src="img/firm6.png" alt="firm6"></a> <a href="#"><img src="img/firm7.png" alt="firm7"></a> </div> </div> <span class="end">© 2009 Все права защищены.</span> <span>Украина, Житомир, ул. Киевская 9, кв. 10 - maxed95@mail.ru</span> </div> </div> </div> </body> </html>

registration.html

body { background: #ededed url('img/1.png') no-repeat center top; background-size: 100%; background-attachment: fixed; font: 12px Tahoma sans-serif; } .box { width: 1000px; margin: 0 auto; margin-top: 50px; background-color: #fff; border-radius: 10px; padding: 10px; overflow: hidden; } #header { border-radius: 5px; padding: 5px; background-image: url('img/menu-line.png'); background-repeat: repeat-x; border: solid 1px #68abc5; } #header input { margin-right: 10px; width: 160px; position: relative; border-radius: 7px; height: 25px; font-weight: bold; } #header form a { float: right; text-align: center; padding-right: 3px; color: #fff; line-height: 31px; margin-right: 10px; } #header form a:hover { color: black; } #header [type="submit"] { color: white; background: #fff url('img/login.png') no-repeat; width: 53px; height: 30px; border-style: none; border-radius: 7px; } #header .search { position: relative; height: 31px; width: 470px; } .hbut a { display: block; height: 43px; background-color: #dff1f1; text-indent: 20px; line-height: 43px; text-decoration: none; color: #aab0b0; border-radius: 5px; border: solid 2px #e1e1e1; } .hbut div { float: left; width: 232px; display: inline-block; margin-top: 8px; margin-right: 24px; } .hbut .last { margin-right: 0; float: right; } .hbut { margin: 0 auto; } .hbut .head-sprite { display: inline-block; height: 41px; width: 41px; float: left; background-image: url('img/head-sprite.png'); margin: 2px 0 2px 10px; } .hbut .head-sprite.a1{ background-position: 0 0; } .hbut .head-sprite.a2{ width: 47px; background-position: -41px 0; } .hbut .head-sprite.a3{ width: 48px; background-position: -88px 0; } .hbut .head-sprite.a4{ width: 39px; background-position: -136px 0; } .menu h2 { margin-top: 10px; margin-bottom: 0; height: 37px; border-top-left-radius: 7px; border-top-right-radius: 7px; background: linear-gradient(to top, #087098, #51c0ea); position: relative; color: white; font: normal 14pt 'Palatino Linotype'; } .menu { overflow: hidden; } .menu strong { text-align: left; padding-left: 18px; line-height: 37px; } .menu h2::before { position: absolute; content: ''; display: block; width: 15px; height: 18px; background: url('img/arrow.png'); top: 10px; left: 2px; } .menu ul { width: 180px; height: 156px; margin-left: -20px; list-style: none; } .menu .list1 { height: 29px; border-bottom: dotted 1px #cccccc; padding-left: 20px; margin-left: -19px; font: 11pt arial; } .menu .list1:hover { background-color: #9cd2d1; } .menu a { text-decoration: none; color: black; line-height: 29px; } .menu2 { background: url('img/stars.png'), linear-gradient(to right, #0d7095, #00bdd5, #0d7095) 50% 50% no-repeat; height: 235px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .pictmenu { background: url('img/grid.png') 50% 50% no-repeat; width: 100%; height: 100%; } .pictmenu2 { background: url('img/shapeshirt.png') 50% 15% no-repeat; width: 100%; height: 100%; } #first { font: arial; font-weight: bold; font-size: 20pt; color: white; text-align: center; padding-top: 65%; margin-top: 0; } #sec{ font-family: tahoma; font-size: 13pt; color: white; text-align: center; } .menu3 { background: linear-gradient(to right, #64a809, #d1f361, #64a809) no-repeat; height: 161px; overflow: hidden; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .menu3in { padding: 20px; padding-top: 30px; font: 14px arial; } .menu3in div { height: 35px; } .menu3in .icon-text { display: block; margin-left: 25px; } .menu3in .sprite-icon { display: inline-block; height: 21px; width: 21px; float: left; background-image: url('img/sprite-icon.png'); } .menu3in .sprite-icon.i1{ width: 21px; background-position: 0 0; } .menu3in .sprite-icon.i2{ width: 21px; background-position: -21px 0; } .menu3in .sprite-icon.i3{ width: 17px; background-position: -42px 0; } .menu4 { background-color: white; height:410px; width:208px; } .menu4 img { float: left; } .price4 { width: 198px; height: 100px; margin-top: 5px; margin-left: 5px; overflow: hidden; } .text-menu4 { font: 11pt 'Myriad Pro'; margin-left: 80px; } del.first{ color: #979797; text-decoration: line-through; } span.second { color: #b5430b; } a.button2 { position: relative; display: inline-block; width: 94px; height: 18px; line-height: 18px; vertical-align: middle; text-align: center; text-decoration: none; text-shadow: 0 -1px 1px #777; color: #fff; outline: none; border-radius: 7px; box-shadow: 0 0 0 60px rgba(0,0,0,0) inset, .1em .1em .2em #800; background: linear-gradient(#b95417, #d77b1b, #b95417); } a.button2:active { top: .1em; left: .1em; box-shadow: 0 0 0 60px rgba(0,0,0,.05) inset; } #header-menu5 { margin-top: 10px; width: 202px; height: 27px; border-top-left-radius: 7px; border-top-right-radius: 7px; background-image: url('img/line5.png'); background-repeat: repeat-y; color: white; font: normal 12px Tahoma; text-align: left; line-height: 27px; } .menu5 h3 { padding-left: 20px; } .menu5-form { background-color: #f6f6f6; height:190px; width:202px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .menu5-text { padding-top: 1px; } .menu5-text a:hover { text-decoration: underline; } .menu5-text a { font: 11pt bold Tahoma; text-decoration: none; color: black; } .menu5-text ul { margin-left: 10px; padding-left: 10px } .menu5-text li { list-style-type: none; line-height: 25px; } #left-menu { float: left; width: 210px; margin-right: 10px; display: block; margin-bottom: 10px; } #content { width: 1000px; overflow: hidden; padding-top: 5px; } #center { float: left; background-color: white; width: 550px; margin: 10px 7px; } .center-content { background-color: white; width: 550px; padding-left: 5px; overflow: hidden; } .center-content h2{ width: 550px; } .center-content .menu a { float: right; height: 19px; margin: 8px 5px 0px 5px; background-color: #fefefe; border-top-right-radius: 7px; border-top-left-radius: 7px; border-bottom: solid 1px #f6fbfd; font: 12px Tahoma; padding: 5px 5px 5px 5px; } .article { width: 153px; min-height: 265px; float: left; padding: 0px 10px 0 10px; border-right: solid 1px #ececec; margin-left: 7px; } .article span { margin-left: 10px; font: bold 15px arial; color: #955512; } .article .buy{ background: url('img/article-button.png') no-repeat center; float: right; height: 37px; width: 69px; margin: -7px 17px 0 0; text-align: center; line-height: 28px; text-decoration: none; color: white; font-weight: bold; } .article .forum{ background: url('img/forum.png') no-repeat; padding-left: 12px; margin-left: 10px; float: left; margin-top: 20px; text-decoration: none; color: #4ad9ca; } .article a.like { background: url('img/like.png') no-repeat; width: 65px; height: 29px; text-decoration: none; float: right; margin-right: 20px; } .article.back { border-right: none; } #right-menu { float:right; width: 202px; margin-bottom: 10px; } .right-menu1 h2 { width: 202px; height: 27px; background: linear-gradient(to right, #0776a1, #5baecf, #0776a1); border-top-right-radius: 7px; border-top-left-radius: 7px; margin-top: 10px; margin-bottom: 0; } .right-menu1 strong { margin-left: 10px; font: 11pt Tahoma; line-height: 27px; color: #fff; } .right-menu1 .shop { width: 190px; height: 150px; background-color: #f6f6f6; border: 1px solid #f4eaea; border-top: none; padding: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .shop img { margin-left: 20px; margin-top: 20px; float: left; } .shop .first-span { display: block; margin-top: 20px; margin-left: 70px; font: 10pt tahoma; } .shop{ overflow: hidden; } .shop .second-span { display: block; margin-left: 70px; color: #761919; font: bold 10pt tahoma; } .shop .third-span { display: block; margin-left: 15px; font: bold 10pt tahoma; margin-top: 10px; } .shop .fourth-span { display: block; margin-left: 15px; font: bold 12pt arial; color: #b12c0d; } .shop a.buy-button{ display: block; width: 73px; height: 22px; border-radius: 5px; border: solid 1px #878383; background: linear-gradient(to right, #939393, #aeaeae, #939393); text-align: center; line-height: 22px; text-decoration: none; color: #fff; margin: 10px auto; } .shop a.buy-button:active { box-shadow: inset 0 0 0 1px #000; } .shop.type2 { height: 247px; overflow: hidden; } .shop.type2 span{ font: 12pt 'Myriad Pro'; } .shop.type2 a{ float: left; display: block; width: 84px; height: 35px; margin: 5.5px; } .shop.type2 .pay { width: 190px; height: 190px; background-color: white; border-radius: 2px; } .shop.type2 img{ margin: 0; } .shop.type3 { height: 237px; } .shop.type3 .text-filter { display: block; border-bottom: 1px dotted #9b9b9b; font: 10pt tahoma; } .shop.type3 .color { width: 28px; height: 28px; display: block; float: left; margin: 3px 1.5px 2px 1.5px; border-radius: 3px; text-align: center; line-height: 28px; text-decoration: none; color: #717171; } .shop.type3 .color.c1 { background-color: white; } .shop.type3 .color.c2 { background-color: yellow; } .shop.type3 .color.c3 { background-color: #78eeff; } .shop.type3 .color.c4 { background-color: #ffc000; } .shop.type3 .color.c5 { background-color: #ff0000; } .shop.type3 .color.c6 { background-color: #e421e6; } .shop.type3 .color.c7 { background-color: black; } .shop.type3 .color.c8 { background-color: #7b7b7b; } .shop.type3 .color.c9 { background-color: #a38f71; } .shop.type3 .color.c10 { background-color: #9c00ff; } .shop.type3 .color.c11 { background-color: #008aff; } .shop.type3 .color.c12 { background-color: #54e621; } .shop.type3 .color.f { background: linear-gradient(to top, #d8d8d9, #eeeeee); } .shop.type3 .color:hover { box-shadow: inset 0 0 0 1px #000; } .shop.type3 a { display: block; text-decoration: none; color: black; margin-top: 5px; } .shop.type3 .last-filter { border-bottom: none; } .banner { margin-top: 10px; } .shop.type4 { height: 174px; } .shop.type4 img { margin: 0 5px 5px 0; float: left; } .shop.type4 a, .shop.type4 span { display: block; font: 10pt tahoma; color: #919191; } .shop.type4 a { font-weight: bold; text-decoration: none; } .shop.type4 .shop-block { width: 186px; height: 46px; display: block; margin: 10px 0 10px 0; border-bottom: dotted 1px #9b9b9b; } .shop.type4 .last-block { border-bottom: none; } #footer { clear: both; background: linear-gradient(to top, #f9fbed, #ebedd3); height: 200px; margin-top: 10px; border-radius: 7px; padding: 10px; } #footer h4{ color: #868770; } #footer span { font: 11px tahoma; display: block; margin-bottom: 10px; } #footer .firm { background-color: white; border-radius: 5px; height: 26px; padding: 8px; margin: 10px 0 10px 0; } #footer a{ margin: 0px 5px; } #footer .end{ font-weight: bold; } .firm-block { display: table; margin: auto; } #center { margin: 10px 5px; } #center.reg { margin: 0 3px; } .center-content form { background-color: #ebebeb; padding-top: 10px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } .center-content input { width: 310px; height: 35px; border-radius: 5px; } .center-content .reg { font-weight: bold; float: right; } .center-content td:first-child { width: 120px; } .center-content input[type='text'] { border: solid 2px #a3adad; background-color: #feffff; font-size: 17px; padding-left: 10px; font-weight: bold; } .center-content table { margin: auto; } .center-content input[type='password'] { border: solid 2px #a3adad; background-color: #feffff; font-size: 12pt; padding-left: 10px; font-weight: bold; } .center-content input[type='radio'] { width: 15px; height: 15px; } .center-content label { float: left; } .center-content select { width: 324px; height: 42px; border: solid 2px #a3adad; background-color: #feffff; font-size: 12pt; padding-left: 10px; border-radius: 5px; font-weight: bold; } .center-content textarea { height: 120px; width: 316px; border: solid 2px #a3adad; background: #feffff; border-radius: 5px; } .center-content input[type='checkbox'] { width: auto; height: auto; } .center-content button { font-size: 12pt; font-weight: bold; float: left; margin-left: 5px; border-radius: 5px; background: linear-gradient(to right, #47b7e0, #cbcff4, #47b7e0); } .menu5-text a:active { color: blue; } #center.about img { float: left; width: 60%; height: 60%; margin: 5px 5px 5px 0; } #center.about { font: 13pt 'Bookman Old Style'; } #center.about img.ig2 { float: right; margin-left: 2px; } #center.about a{ text-decoration: none; } #center.about a:hover{ text-decoration: underline; } .slider { z-index: 9; width: 550px; height: 372px; overflow: hidden; margin: 0 0 7px; position: relative; } .slider ul, .slider li { padding: 0; margin: 0; list-style-type: none; } .slider ul { width: 9999px; } .slider ul li { list-style-type: none; float: left; width: 550px; height: 372px; } .slider .nav { position: absolute; left: 15px; bottom: 12px; } .slider .nav span { opacity: 0.9; background: #fff; margin: 0 8px 0 0; width: 16px; height: 16px; border-radius: 8px; cursor: pointer; overflow: hidden; display: block; float: left; box-shadow: 0 1px 2px #000; } .slider .nav span.on { background: #2e9419; }

...