HistoryOfGenerations.css

Структура веб-сайта

Требования:

• Приложение должно быть выполнено как функционирующий web-узел, взаимосвязанный с интернет-страницами

• Малое количество веб-станиц - 5.

• Интернет-страницы, объединенные общей темой и дизайном создаются на языках HTML, DHTML, JavaScript, XML и содержат гиперссылки для резвого перехода на другие странички


Итог:

Требования:

• Ко всему веб-сайту для форматирования текста/объектов должна HistoryOfGenerations.css применяться единая каскадная таблица стилей.

Итог:

Default.css

/* Menu

-------------------------------------------------------------- */

nav {

height: 40px;

background: black;

background: rgba(0, 0, 0, 0.9);

text-transform: uppercase;

}

navul {

padding: 0;

width: 800px;

margin: 0 auto;

}

navul li {

list-style: none;

font-size: 15px;

}

navul li a {

text-decoration: none;

float: left;

display: block;

padding: 10px 20px;

color: white;

}

navul HistoryOfGenerations.css li a:hover {

color: #2a70d9;

}

nav .logindiv {

display: none;

}

nav b{

color: coral;

text-decoration: none;

float: right;

display: block;

padding: 10px 20px;

}

/* Header

-------------------------------------------------------------- */

.site-header {

height: 500px;

margin: 0 0 50px 0;

background: url(images/header.jpg) no-repeat center;

}

.mnd-position {

position: relative;

max-width: 1100px;

height: 100%;

margin: 0 auto;

}

.site-branding {

position HistoryOfGenerations.css: absolute;

bottom: 50px;

left: 0;

text-transform: uppercase;

}

.site-title {

font: 700 50px/.8 'Open Sans Condensed', sans-serif;

margin: 0;

color: #fff;

}

.site-title span {

font-size: 30px;

font-weight: 300;

line-height: 41px;

display: inline-block;

margin: 5px 0 0 0;

padding: 0 1px 0 5px;

-webkit-transform: rotate(355deg);

-moz-transform: rotate(355deg);

-o-transform HistoryOfGenerations.css: rotate(355deg);

transform: rotate(355deg);

vertical-align: top;

letter-spacing: 5px;

background: #ec4c00;

}

.site-url {

font: 700 10px/2.5 'Open Sans Condensed', sans-serif;

letter-spacing: 5px;

color: #b8b8b8;

}

/* Content

-------------------------------------------------------------- */

.content {

margin: 0 auto;

max-width: 640px;

width: 94%;

}

.content img {

max-width: 800px;

height: auto;

z-index: 100000;

}

.contentLogo{

width HistoryOfGenerations.css: 900px;

height: 500px;

background: rgba(201, 201, 201, 0.35);

margin: auto;

}

.content h1 {

margin-top: 0;

}

.content p {

text-align: justify;

}

/* Footer

-------------------------------------------------------------- */

footer {

position: absolute;

background: #333333;

right: 0;

bottom: 0;

left: 0;

/*padding: 1rem;*/

/*background-color: #efefef;*/

text-align: center;

}

.footerLinks {

text-align: center;

}

.footerLinksul {

padding: 0;

list-style-type: none;

margin: 0;

}

.footerLinks li {

display: inline;

padding: 5px;

}

.footerLinks HistoryOfGenerations.css a {

color: #d9d9d9;

text-decoration: none;

font-size: 13px;

}

.copyright {

text-align: center;

}

.copyright p {

margin: 0;

color: #b3b3b3;

font-size: 11px;

}

/* Patterns

-------------------------------------------------------------- */

img {

max-width: 100%;

height: auto;

vertical-align: middle;

}

embed,

iframe,

object,

video {

max-width: 100%;

vertical-align: middle;

}

table {

border-spacing: 0;

border-collapse: collapse;

}

Требования:

• Авторизацию выполнить HistoryOfGenerations.css c пoмощью Javascript.

• Данные (логин, пароль), также ресурсные данные (видео-, звуковые файлы, изображения и т.д.) должны храниться в отдельном(ых) файле(ах).

Итог:


Набросок 1. Форма входа на веб-сайт

Loginform.js

$(document).ready(function () {

logout();

$('#sendloginpass').bind('click', function () {

console.log('click');

auth($("input[name='username']").val(), $("input[name HistoryOfGenerations.css='password']").val());

});

});

Auth.js

var user = {

login : '',

pass : '',

load : function () {

varls = window.localStorage;

varlogin,pass;

login = ls.getItem('login');

pass = ls.getItem('pass');

auth(login, pass);

},

save : function () {

varls = window.localStorage;

var login, pass;

ls.setItem('login', this.login);

ls.setItem('pass', this.pass);

}

};

functionauth(login, pass) {

varloginnotsuccess = true;

$.getJSON("resourses/data HistoryOfGenerations.css/loginpass.json", function (data) {

$.each(data, function (jsonlogin, jsonpass) {

if ((jsonlogin == login) && (jsonpass == pass)) {

console.log('успешнаяавторизация');

user.login = login;

user.pass = pass;

user.save();

show_username(login);

loginnotsuccess = false;

return false;

}

});

if (loginnotsuccess) {

console.log('ошибкаавторизации');

window.location = "./loginform.html"

}

});

}

function logout() {

console.log('успешныйвыход HistoryOfGenerations.css');

user.login = '';

user.pass = '';

user.save();

}

varshow_username = function (userName) {

$('#userName').text(userName);

$('#logindiv').css("display", "block");

};

Loginpass.json

{

"test":"test",

"test1":"test1"

}

Вёрстка

Требования:

• Внедрение блочной вёрстки с внедрением 2-3 видов позиционирования и определения z-indexна разных страничках.

Итог:

Набросок 2. Блочная вёрстка веб-сайта

CSS

Требования:

• Использовать CSSReset.

Итог:

Reset.css

html {

height: 100%;

box-sizing: border HistoryOfGenerations.css-box;

/*border-box - В width входят padding-right, padding-left, border-right-width и border-left-width

ширина = width + margin-right + margin-left

В height входят padding-top, padding-bottom, border-top-width и border-bottom-width

высота = height + margin-top + margin-bottom*/

}

*,

*:before,

*:after {

box-sizing: inherit;/*наследуетзначениеродителя*/

}

ul {

list-style HistoryOfGenerations.css: square;

}

ol {

list-style: decimal;

}

table {

width: 100%;

}

td,

th {

padding: 10px;

border-bottom: 1px solid #ededed;

}

th {

font-weight: 700;

background: #ededed;

}

body {

position: relative;

margin: 0;

padding-bottom: 2rem;/*чтоб footer ненаезжалнатекст*/

min-height: 100%;

font-family: "Helvetica Neue", Arial, sans-serif;

}

Требования:

• Указаны стили для заголовков, текста, параграфов, картинок.

Итог:

Требования HistoryOfGenerations.css:

• Внедрение псевдоклассов для ссылок, дочерних частей, табличных частей, фокуса.

• Внедрение псевдоэлементов для дизайна стиля текста.

Итог:

Loginform.css

div.login-form, login-form.div:before, login-form.div:after {

box-sizing: content-box;

}

/*удалим все поля, отступы, границы и т.д. из частей,

которые мы будем использовать*/

.login-form,

.login HistoryOfGenerations.css-form h1,

.login-form span,

.login-form input,

.login-form label {

margin: 0;

padding: 0;

border: 0;

outline: 0;

}

/*зададим стили для контейнера формы.добавим относительное размещение,

фиксированную ширину и высоту, цвет фона, округленные углы и тени.*/

.login-form {

position: relative;

width: 200px;

height: 200px;

padding: 15px 25px 0 25px;

margin-top: 15px HistoryOfGenerations.css;

cursor: default;

background-color: #141517;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);

-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);

box-shadow: 0px 1px 1px 0px rgba HistoryOfGenerations.css(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);

}

/*Добавим некие стили для заголовка формы

(цвет, шрифт и размер, и т.д.)*/

.login-form h1 {

line-height: 40px;

font-family: 'Myriad Pro', sans-serif;

font-size: 22px;

font-weight: normal;

color: #e4e4e4;

}

/*Поначалу зададим главные стили для input-ов HistoryOfGenerations.css.*/

.login-form input[type=text],

.login-form input[type=password],

.login-form input[type=submit] {

line-height: 14px;

margin: 10px 0;

padding: 6px 15px;

border: 0;

outline: none;

font-family: Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

text-shadow: 0px 1px 1pxrgba(255,255,255, .2);

-webkit-border-radius: 26px;

-moz-border-radius: 26px HistoryOfGenerations.css;

border-radius: 26px;

-webkit-transition: all .15s ease-in-out;

-moz-transition: all .15s ease-in-out;

-o-transition: all .15s ease-in-out;

transition: all .15s ease-in-out;

}

/*Потом зададим стили для полей ввода логина и пароля.

добавим градиентный сероватый фон и тени.

также добавим фиксированную HistoryOfGenerations.css ширину, равную 170px, и цвет для текста.*/

.login-form input[type=text],

.login-form input[type=password],

.js .login-form span {

color: #686868;

width: 170px;

-webkit-box-shadow: inset 1px 1px1px 0px rgba(255,255,255, .6);

-moz-box-shadow: inset 1px 1px1px 0px rgba(255,255,255, .6);

box-shadow: inset 1px 1px1px HistoryOfGenerations.css 0px rgba(255,255,255, .6);

background: #989898;

background: -moz-linear-gradient(top, #ffffff 0%, #989898 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#989898));

background: -webkit-linear-gradient(top, #ffffff 0%,#989898 100%);

background: -o-linear-gradient(top, #ffffff 0%,#989898 100%);

background: -ms-linear-gradient(top, #ffffff 0%,#989898 100%);

background: linear-gradient(top, #ffffff 0%,#989898 100%);

}

/*При наведении курсора мыши на HistoryOfGenerations.css эти поля будем изменять их тени.*/

.login-form input[type=text]:hover,

.login-form input[type=password]:hover {

-webkit-box-shadow: inset 1px 1px1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);

-moz-box-shadow: inset 1px 1px1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);

box-shadow: inset 1px HistoryOfGenerations.css 1px1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);

}

/*Для активного состояния мы изменим CSS3 градиент

на малость более светлый*/

.login-forminput[type=text]:фокус,

.login-form input[type=password]:фокус {

background: #e1e1e1;

background: -moz-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);

background: -webkit-gradient(linear, left top, left HistoryOfGenerations.css bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));

background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);

background: -o-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);

background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);

background: linear-gradient(top, #ffffff 0%,#e1e1e1 100%);

}

/*Расположимкнопкупоцентру*/

.login-form input[type HistoryOfGenerations.css=submit] {

float: left;

padding: 6px 20px;

margin: 15px 60px;

cursor: pointer;

color: #445b0f;

-webkit-box-shadow: inset 1px 1px1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);

-moz-box-shadow: inset 1px 1px1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);

box-shadow: inset 1px 1px1px 0px rgba(255,255,255, .45), 0px 1px HistoryOfGenerations.css 1px 0px rgba(0,0,0, .3);

}

/*При наведении мыши изменим тени, а в активном состоянии - удалим их.*/

.login-form input[type=submit]:hover {

-webkit-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);

-moz-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);

box HistoryOfGenerations.css-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);

}

.login-form input[type=submit]:active { /*псевдокласс :active*/

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}

/*Добавим зеленоватый градиент для кнопки.*/

.login-form input[type=submit],

.js .login-form:before {

background: #a HistoryOfGenerations.css5cd4e;

background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));

background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: -o-linear-gradient(top, #a5cd HistoryOfGenerations.css4e 0%,#6b8f1a 100%);

background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);

}

/*Все стили, которые имеют класс "js" сначала,

будут применяться только если включена поддержка JavaScript. */

body {

background:url(images/bg.png) center;

margin: 0 auto;width HistoryOfGenerations.css: 960px;

padding-top: 50px

}

.login-form {

margin: 50px auto;

}

HistoryOfGenerations.css

.HistoryOfGenerations span {

color: gray;

font-size: 70%;

font-style: normal;

text-align:center;

}

table.HistoryOfGenerations {

margin: 1em 1em1em 0;

background: #f9f9f9;

border: 1px #aaa solid;

border-collapse: collapse;

font-size: 90%;

}

table.HistoryOfGenerations, table.HistoryOfGenerations td {

border-color: #aaa HistoryOfGenerations.css;

padding-left: 0.2em;

padding-right: 0.2em;

}

table.HistoryOfGenerations {

background: #B0C4DE;

}

table.HistoryOfGenerations td:nth-child(2) { /*использованиепсевдокласса :nth-child*/

text-align:center;

}

.entered { /*длядемонстрациисобытийmouseentermouseleave*/

color: #ca1f27;

}

.content img {

z-index: 2000;

}

Внедрение библиотек:

Требование:

• Использовать библиотеку jQuery, Dojo либо Prototype (по выбору).

• Применить фильтры контента, фильтры видимости, форм и атрибутов.

• Внедрение HistoryOfGenerations.css динамических частей на страничке (динамическое меню, текст либо меню с всплывающей подсказкой, динамический выпадающий перечень).

• На одной из страничек расположить интерактивную анимацию

• Интерактивное удаление и добавление частей (картинок, списков, полей).

Реализация:

Применена библиотека jQuery

auth.js

varshow_username = function (userName) {

$('#userName').text(userName);

$('#logindiv').css("display", "block");

};

Внедрение Ajax

Требование:

• Загрузка данных в HistoryOfGenerations.css формате json(более 8 видов разных данных с неотклонимым наличием массива, к примеру, массива оценок либо предметов) из html-файла.

• Привязка(bind) 3 любыхсобытийвида: фокус(), .focusin(), .focusout(), .load(), .resize(), .scroll(), .unload(), .click(), .dblclick(), .mousedown(), .mouseup(), .mousemove(), .mouseover(), .mouseout(), .mouseenter(), .mouseleave(), .change(), .select(), .submit(), .keydown(), .keypress(), .keyup(), .error().

Итог:

Filmography HistoryOfGenerations.css.js

$.getJSON("resourses/data/HistoryOfGenerations.json", function (data) {

varresultitems = [];

$.each(data, function (rowindex, items) {

resultitems.push("");

if (rowindex == 0) {

$.each(items, function (colcount, item) {

resultitems.push("" + item + "");

});

} else {

$.each(items, function (colcount, item) {

resultitems.push("" + item + "");

});

}

resultitems.push("");

});

$("

", {

"class": "HistoryOfGenerations ",

"rules": "all",

"cellpadding": "4",

html: resultitems.join("")

}).appendTo("article");

$(".HistoryOfGenerations td HistoryOfGenerations.css").bind("mouseentermouseleave", function () {

$(this).toggleClass("entered");

});

});

Loginform.js

var user = {

login : '',

pass : '',

load : function () {

varls = window.localStorage;

varlogin,pass;

login = ls.getItem('login');

pass = ls.getItem('pass');

auth(login, pass);

},

save : function () {

varls = window.localStorage;

var login, pass;

ls.setItem('login', this.login);

ls.setItem('pass', this.pass);

}

};

functionauth(login HistoryOfGenerations.css, pass) {

varloginnotsuccess = true;

$.getJSON("resourses/data/loginpass.json", function (data) {

varresultitems = [];

$.each(data, function (jsonlogin, jsonpass) {

if ('test' == login && 'test' == pass) {

console.log('успешнаяавторизация');

// hide_form(login);

user.login = login;

user.pass = pass;

user.save();

loginnotsuccess = false;

return false;

}

});

});

if (loginnotsuccess) {

console.log('ошибкаавторизации');

window.location = "./loginform.html"

}

}

function logout() {

console.log HistoryOfGenerations.css('успешныйвыход');

user.login = '';

user.pass = '';

user.save();

}

Снимки экрана

Набросок 3. Основная страничка

Набросок 4. О номерах отеля

Набросок 5. Прайс лист


hisheniya-v-rossijskom-ugolovnom-prave-referat.html
hishnie-rasteniya-referat.html
historical-review-of-british-and-american-english.html