Разработка подсистемы прогнозирования трудоемкости и стоимости создания программного продукта по методике CETIN

[140, 610], // 11 месяцев

[160, 670], // 12 месяцев

[180, 720], // 13 месяцев

[200, 770], // 14 месяцев

[230, 820], // 15 месяцев

[260, 870], // 16 месяцев

[290, 930], // 17 месяцев

[330, 990], // 18 месяцев

[370, 1040], // 19 месяцев

[420, 1090], // 20 месяцев

[470, 1150], // 21 месяц

[530, 1200], // 22 месяца

[600, 1250], // 23 месяца

[670, 1300], // 24 месяца

[750, 1350], // 25 месяцев

[830, 1400], // 26 месяцев

[900, 1450], // 27 месяцев

[970, 1500], // 28 месяцев

[1150, 1550], // 29 месяцев

[1230, 1600], // 30 месяцев

[1310, 1660], // 31 месяц

[1390, 1720], // 32 месяца

[1470, 1780], // 33 месяца

[1520, 1840], // 34 месяца

[1570, 1900], // 35 месяцев

[1620, 1960], // 36 месяцев

[1680, 2020] // 37 месяцев

];

/**

* Нормативные коэффициенты расхода разработчиков

*/

self.nkr = [71.5, 48, 25, 0.75, 15];

/* ПНР ПРП ПР L N */

/**

* Значения поправочных коэффициентов трудоемкости.

* По-умолчанию 1, т.е. всегда средние значения.

*/

self.k = [

1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1

];

/**

* Подсчет трудоемкости.

* @returns {Number} трудоемкость (человеко-месяц).

*/

self.peopleMonth = function() {

var calc = 0;

for (var j = 0; j < 6; j++) {

var kpj = 1;

for (var kk in self.kp[j]) {

kpj *= self.k [self.kp[j] [kk] - 1];

}

calc += self.sj[j] * kpj;

}

return calc;

};

/**

* Подсчет среднего срока разрабокти.

*

* @returns {Cetin.time.res} минимальное и максимально время разработки (месяцы).

*/

self.time = function() {

var pt = self.peopleMonth();

var res = {max: 0, min: self.terms.length - 1};

 // Если трудоемкость превышает минимум левой границы.

if (pt > 1680) {

res.min = 36; // Конец массива.

res.max = 31; // Начало массива, где начинается превышение.

 // Если трудоемкость не превышает известной правой границы.

if (pt < 2020) {

while (res.min >= 0 && self.terms [res.min] [1] > pt) {

res.min -;

}

res.min++;

res.max = Math.round (36 + (pt - 1680) / 40);

 // Если превышает известную правую границу.

} else {

res.min = Math.round (36 + (pt - 2020) / 40);

res.max = Math.round (36 + (pt - 1680) / 40);

}

 // Параметры срока можно расчитать на основании таблицы.

} else {

while (res.min >= 0 && self.terms [res.min] [1] > pt) {

res.min -;

}

res.min++;

while (res.max < self.terms.length && self.terms [res.max] [0] < pt) {

res.max++;

}

res.max -;

}

res.min++;

res.max++;

if (self.newTerm === 0)

self.newTerm = (res.min + res.max) / 2;

return res;

};

/**

* Новый срок разработки, введенный пользователем.

*/

self.newTerm = 0;

/**

* Расчитанная новая трудоемкость, на основании нового срока разработки.

*/

self.newPeopleMonth = 0;

/**

* Пересчет трудоемкости.

*/

self.recalcPeopleMonth = function() {

var terms = self.time();

var avgTerm = (terms.min + terms.max) / 2;

var incr = (avgTerm - self.newTerm) / avgTerm * 100;

self.newPeopleMonth = self.peopleMonth() + incr * self.nkr[3]; // Коэффициент элластичности.

};

/**

* Введенные параметры цены.

* cost - зарплата.

* inflation - нфляция за три года (указывается процент).

* psn - процент социальных выплат.

* pnds - процент НДС.

*/

self.cost = {cost: 0, inflation: [0, 0, 0], psn: 0, pnds: 0};

/**

* Расчет стоимости разработки.

*

* @returns {Cetin.calcCost.res} включает в себя стоимость разработки и стоимость сопровождения.

*/

self.calcCost = function() {

var c = self.cost;

var isr = (c.inflation[0] + c.inflation[1] + c.inflation[2]) / 3;

var gsr = Math.floor (self.newTerm / 12) + 1;

var costs = [];

var csr = [];

costs[0] = c.cost * (1 + isr / 100);

for (var i = 1; i < gsr; i++) {

costs[i] = costs [i - 1] * (1 + isr / 100);

}

for (var i = 0; i < gsr; i++) {

csr[i] = costs[i] * (1 + (0.9 * c.psn + self.nkr[0] + self.nkr[1]) / 100) * (1 + self.nkr[2] / 100) * (1 + c.pnds / 100);

}

var res = {sppo: 0, ssppo: 0};

for (var i = 0; i < gsr; i++) {

res.sppo += self.newPeopleMonth / gsr * csr[i];

}

res.ssppo = res.sppo * self.nkr[4] / 100 * self.k[1] * self.k[2] * self.k[15];

return res;

};

};

/**

* Менеджер шагов.

*

* @param {type} containerId идентификатор контейнера для вставки отображаемых шагов.

* @param {type} stepManagerName название менеджера шагов для обращения при кликах на шаги.

*/

var StepManager = function (containerId, stepManagerName) {

var self = this;

self.containerId = containerId;

self.stepManagerName = stepManagerName;

self.steps = [];

/**

* Текущий шаг.

*/

self.currentStep = «empty»;

/**

* Переход к шагу с номеров stepNum.

* @param {type} stepNum номер шага для перехода.

*/

self.goStep = function(stepNum) {

/*

* При переходе к другому шагу необходимо сделать следующее:

* - проверить правильность заполнения полей.

* - снять активность с текущего шага.

* - выполнить дейстивя по сохранения данных введенных с формы в объект.

* - установаить активным шаг stepNum.

* - выполнить действия по обновлению отображаемых полей.

*

* - прокрутить экран к текущему шагу.

*/

if (self.currentStep!== «empty») {

$(«#error» + self.currentStep).html(«»);

if (self.steps [self.currentStep].validators)

{

var validators = self.steps [self.currentStep].validators;

if (validators) {

for (var i = 0; i < validators.length; i++) {

var c = validators[i].validate();

if (c.error)

{

$(«#» + c.id).addClass («error»);

$(«#error» + self.currentStep).html (c.error);

return;

} else {

$(«#» + c.id).removeClass («error»);

}

}

}

}

$(«#step» + self.currentStep).removeClass («active»);

self.steps [self.currentStep].onCloseFunction();

for (var qq = self.currentStep + 1; qq < stepNum; qq++) {

self.steps[qq].onOpenFunction();

self.steps[qq].onCloseFunction();

}

}

self.currentStep = stepNum;

$(«#step» + self.currentStep).addClass («active»);

self.steps [self.currentStep].onOpenFunction();

$('html, body').animate({

scrollTop: $(«#step» + self.currentStep).offset().top - (stepNum === 0? 100: 0)

}, 480);

};

/**

* Переход к предыдущему шагу.

*/

self.goPrev = function() {

self.goStep (self.steps [self.currentStep].prevStep);

};

/**

* Переход к следующему шагу.

*/

self.goNext = function() {

self.goStep (self.steps [self.currentStep].nextStep);

};

};

/**

* Шаг.

* @param onOpenFunction функция, вызываемая при открытии шага.

* @param onCloseFunction функция, вызываемая при закрытии шага.

* @param prevStep номер предыдущего шага.

* @param nextStep номер следующего шага.

* @param validators список валидаторов.

*/

var Step = function (onOpenFunction, onCloseFunction, prevStep, nextStep, validators) {

var self = this;

/**

* Функция при открытии шага (обновление параметров формы).

*/

self.onOpenFunction = onOpenFunction;

/**

* Функция при закрытии шага (сохранение параметров формы).

*/

self.onCloseFunction = onCloseFunction;

/**

* Номер предыдущего шага.

*/

self.prevStep = prevStep;

/**

* Номер следущего шага.

*/

self.nextStep = nextStep;

/**

* Проверки правильности введенных данных.

*/

self.validators = validators;

};

/**

* Функция установки значения в селект.

*

* @param {type} selectName название селекта.

* @param {type} value новое значение.

*/

function setSelected (selectName, value) {

$(«select [name=» + selectName +»] option:selected»).attr («selected», «»);

$(«select [name=» + selectName +»] option [value=\"» + value + «\»]»).attr («selected», «selected»);

}

/**

* Функция получения значения текущего селекта.

*

* @param {type} selectName навзвание селекта.

* @returns значение селекта.

*/

function getSelectedValue(selectName) {

return $(«input [name=» + selectName + «Text]»).val();

}

/**

* Смена значения поля Коэффициент у выбранного селекта.

*

* @param {type} selectName

* @returns {undefined}

*/

function changeSelected(selectName) {

$(«input [name=» + selectName + «Text]»).val($(«select [name=» + selectName +»] option:selected»).val());

}

/**

* Валидатор.

*

* @param {type} id поле для валидации.

* @param {type} regexp регулярное выражение валидации.

* @param {type} errorMessage сообщение при ошибке.

*/

var Validator = function (id, regexp, errorMessage)

{

var self = this;

self.id = id;

self.regexp = regexp;

self.errorMessage = errorMessage;

/**

* Функция для валидации.

* @returns {Validator.validate. Anonym$50|String}

*/

self.validate = function() {

if (!$(«#» + self.id).val().match (self.regexp)) {

return {«id»: self.id, «error»: self.errorMessage};

}

return {«id»: self.id};

};

};

Приложение 6

Текст файла CSS

body

{

padding: 0; margin: 0;

width: 209mm;

}

h1 {

font: bold 8mm 'Arial';

color: #00688B;

}

step {

border-radius: 7px;

background-color: #00688B;

margin: 5px;

}

step.active {

background-color: #ecf5ff;

}

step.active.title {

background-color: #1dacd6;

color: #F0FFFF;

border-radius: 7px 7px 0 0;

}

step.active.footer {

background-color: #e0efff;

color: #393939;

border-radius: 0 0 7px 7px;

display: block;

}

step.active.content {

display: block;

}

step.title {

padding: 2mm;

font: bold 7mm 'Arial';

color: #E0EEEE;

cursor: pointer;

}

step.content {

padding: 3mm;

font: 5mm 'Arial';

color: #36648B;

display: none;

}

step.content.error {

background-color: #ff7f7f;

color: #7f0000;

}

step.content p.step.content.p {

text-indent: 1cm;

line-height: 1.5;

margin: 0.5mm 0;

}

step.content.p {padding: 8px 0;}

step.content.p {

border-width: 1px 0;

border-color: #cccccc;

border-style: solid;

}

step.content.p.error {

background-color: #ff7f7f;

}

step.content.hint {

color: #797979;

font: 3mm 'Arial';

line-height: 1.0;

}

step.content p input.step.content.p input {float: right;}

step.content p.select.step.content.p.select {text-align: center;}

step.content.p.select.hint {margin-top: 5px; margin-left: 1cm;}

step.content.p.select input {float: none; width: 1.5cm;}.step.footer {

padding: 2mm;

font: bold 7mm 'Arial';

color: #797979;

margin: 0 auto;

display: none;

text-align: center;

}

step.footer.button {

background-color: #00CD00;

border-radius: 5px;

padding: 2mm;

cursor: pointer;

width: 5cm;

margin: 0 2px;

text-align: center;

color: #ffffff;

display: inline-block;

}

step.footer.button:hover {

background-color: #7FFF00;

color: #3f7f3f;

}

step.footer.button:pressed {

background-color: #5da130;

color: #393939;

}

td {text-align: center; border-width: 0;}

td input {width: 40px; text-align: center;}

step.legend {

font-size: 12px;

}

#saveButton {

margin-left: 657px;

width: 100px;

height: 26px;

}

Приложение 7

Код страницы инициализации.

<%@page import= «java.util. Map»%>

<%@page import= «ru.cetin. InitForm»%>

<%@page contentType= «text/html» pageEncoding= «UTF-8»%>

<%@ taglib uri= «http://struts.apache.org/tags-html» prefix= «html»%>

<%@ taglib uri= «http://struts.apache.org/tags-tiles» prefix= «tiles»%>

<html>

<head>

<title>Инициализация</title>

<meta charset= «UTF-8»>

<meta name= «viewport» content= «width=device-width»>

</head>

<body style= «background-image:url (1.jpg)» >

<font color= "#008B8B»>

<h1 align= «center» >Методика оценки трудоемкости программного продукта CETIN</h1>

<h2>Выбор сохраненных парамтеров</h2>

<%

InitForm form = (InitForm) pageContext.getAttribute («InitForm», PageContext.REQUEST_SCOPE);

for (Map. Entry<Integer, String> entry: form.getIndexToName().entrySet())

{

%> <a class= «info» href= «cetin.do? id=<% out.append (Integer.toString (entry.getKey()));%>»>

<% out.append (entry.getValue());%>

</a><br> <%

%>

<a class= «info» href= «cetin.do? type=zakaz&id=<% out.append (Integer.toString (entry.getKey()));%>»>

<br></br>

<br></br>

<% out.append (entry.getValue());%> (заказчик)

</a><br> <%

}

%>

<a href= «cetin.do» class= «info»>Добавить новые параметры</a><br>

<a href= «cetin.do? type=zakaz» class= «info»>Добавить новые параметры (заказчик)</a>

</body>

</html>

Код страниц Сайта-Визитки

1 страница.

<html>

<head>

<title>CETIN</title>

<link href= «default.css» rel= «stylesheet» type= «text/css» />

</head>

<body>

<! - start header ->

<div id= «header»>

<div id= «logo»>

<h1>CETIN</a></h1>

<h2><a>прогнозирование трудоемкостии </a></h2>

<h2><a>стоимости создания</a></h2>

<h2><a>программного продукта</a></h2>

</div>

<div id= «menu»>

<ul>

<li><a href= «1.html»>Назначение методики</a></li>

<li><a href= «2.html»">Принципы расчета трудоемкости и стоимости</a></li>

<li><a href= «3.html»">Основные процессы разработки</a></li>

<li><a href= «4.html»">Функциональный размер ИС</a></li>

<li><a href= «5.html»">Процесс расчета разработки ППО</a></li>

<li><a href= «6.html»">Демонстрация программы</a></li>

</ul>

</div>

</div>

<! - end header ->

<! - start page ->

<div id= «page»>

<! - start content ->

<div id= «content»>

<! - start latest-post ->

<div id= «latest-post» class= «post»>

<h1 class= «title»>Назначение методики</h1>

<hr>

<ul>

<li>Расчет трудоемкости разработки ИС</li>

<li>Расчет стоимости разработки ИС</li>

<li>Расчет срока разработки ИС</li>

<li>Расчет трудоемкости развития ИС</li>

<li>Расчет стоимости развития ИС</li>

<li>Расчет стоимости годового сопровождения ИС</li>

</ul>

<hr>

</div>

</body>

</html>

2 страница.

<html>

<head>

<title>CETIN</title>

<link href= «default.css» rel= «stylesheet» type= «text/css» />

</head>

<body>

<! - start header ->

<div id= «header»>

<div id= «logo»>

<h1>CETIN</a></h1>

<h2><a>прогнозирование трудоемкостии </a></h2>

<h2><a>стоимости создания</a></h2>

<h2><a>программного продукта</a></h2>

</div>

<div id= «menu»>

<ul>

<li><a href= «1.html»>Назначение методики</a></li>

<li><a href= «2.html»">Принципы расчета трудоемкости и стоимости</a></li>

<li><a href= «3.html»">Основные процессы разработки</a></li>

<li><a href= «4.html»">Функциональный размер ИС</a></li>

<li><a href= «5.html»">Процесс расчета разработки ППО</a></li>

<li><a href= «6.html»">Демонстрация программы</a></li>

</ul>

</div>

</div>

<! - end header ->

<! - start page ->

<div id= «page»>

<! - start content ->

<div id= «content»>

<! - start latest-post ->

<div id= «latest-post» class= «post»>

<h1 class= «title»>Принципы расчета трудоемкости и стоимости</h1>

<hr>

<ul>

<li>Принцип поддержки жизненого цикла</li>

<li>Принцип измерения функционального размера</li>

<li>Принцип универсальности</li>

<li>Принцип улучшающейся оценки</li>

<li>Принцип учета технологии производства программного обеспечения</li>

</ul>

<hr>

</div>

</body>

</html>

3 страница.

<html>

<head>

<title>CETIN</title>

<link href= «default.css» rel= «stylesheet» type= «text/css» />

</head>

<body>

<! - start header ->

<div id= «header»>

<div id= «logo»>

<h1>CETIN</a></h1>

<h2><a>прогнозирование трудоемкостии </a></h2>

<h2><a>стоимости создания</a></h2>

<h2><a>программного продукта</a></h2>

</div>

<div id= «menu»>

<ul>

<li><a href= «1.html»>Назначение методики</a></li>

<li><a href= «2.html»">Принципы расчета трудоемкост и стоимости</a></li>

<li><a href= «3.html»">Основные процессы разработки</a></li>

<li><a href= «4.html»">Функциональный размер ИС</a></li>

<li><a href= «5.html»">Процесс расчета разработки ППО</a></li>

<li><a href= «6.html»">Демонстрация программы</a></li>

</ul>

</div>

</div>

<! - end header ->

<! - start page ->

<div id= «page»>

<! - start content ->

<div id= «content»>

<! - start latest-post ->

<div id= «latest-post» class= «post»>

<h1 class= «title»>Основные процессы разработки</h1>

<hr>

<ul>

<li>Бизнес моделирование</li>

<li>Управление требованиями</li>

<li>Проектирование</li>

<li>Реализация</li>

<li>Тестирование</li>

<li>Развертывание</li>

</ul>

<hr>

</div>

</body>

</html>

4 страница.

<html>

<head>

<title>CETIN</title>

<link href= «default.css» rel= «stylesheet» type= «text/css» />

</head>

<body>

<! - start header ->

<div id= «header»>

<div id= «logo»>

<h1>CETIN</a></h1>

<h2><a>прогнозирование трудоемкостии </a></h2>

<h2><a>стоимости создания</a></h2>

<h2><a>программного продукта</a></h2>

</div>

<div id= «menu»>

<ul>

<li><a href= «1.html»>Назначение методики</a></li>

<li><a href= «2.html»">Принципы расчета трудоемкости и стоимости</a></li>

<li><a href= «3.html»">Основные процессы разработки</a></li>

<li><a href= «4.html»">Функциональный размер ИС</a></li>

<li><a href= «5.html»">Процесс расчета разработки ППО</a></li>

<li><a href= «6.html»">Демонстрация программы</a></li>

</ul>

</div>

</div>

<! - end header ->

<! - start page ->

<div id= «page»>

<! - start content ->

<div id= «content»>

<! - start latest-post ->

<div id= «latest-post» class= «post»>

<h1 class= «title»>Функциональный размер ИС</h1>

<hr>

<ul>

<li>Колличество вариантов использования (Case) - C</li>

<li>Колличество типов объектов (бизнес объектов) (Entity) - E</li>

<li>Колличество свойств типов объектов(Yool) - T</li>

<li>Колличество взаимодействий между типами объектов (Interaction) - I</li>

<li>Колличество типов узлов(Node) - N</li>

</ul>

<hr>

</div>

</body>

</html>

5 страница.

<html>

<head>

<title>CETIN</title>

<link href= «default.css» rel= «stylesheet» type= «text/css» />

</head>

<body>

<! - start header ->

<div id= «header»>

<div id= «logo»>

<h1>CETIN</a></h1>

<h2><a>прогнозирование трудоемкостии </a></h2>

<h2><a>стоимости создания</a></h2>

<h2><a>программного продукта</a></h2>

</div>

<div id= «menu»>

<ul>

<li><a href= «1.html»>Назначение методики</a></li>

<li><a href= «2.html»">Принципы расчета трудоемкости и стоимости</a></li>

<li><a href= «3.html»">Основные процессы разработки</a></li>

<li><a href= «4.html»">Функциональный размер ИС</a></li>

<li><a href= «5.html»">Процесс расчета разработки ППО</a></li>

<li><a href= «6.html»">Демонстрация программы</a></li>

</ul>

</div>

</div>

<! - end header ->

<! - start page ->

<div id= «page»>

<! - start content ->

<div id= «content»>

<! - start latest-post ->

<div id= «latest-post» class= «post»>

<h1 class= «title»>Процесс расчета разработки ППО</h1>

<hr>

<ul>

<li>Оценка функционального размера разрабатываемой ИС</li>

<li>Оценка базовой трудоемкости разработки ППО</li>

<li>Определение значений поправочных коэффициентов трудоемкости</li>

<li>Расчет трудоемкости разработки ППО с учетом поправочных коэффициентов</li>

<li>Оценка срока разработки ППО</li>

<li>Корректировка трудоемкости разработки ППо при уменьшении срока разработки</li>

<li>Оценка стоимости разработки ППО</li>

</ul>

<hr>

</div>

</body>

</html>

6 страница.

<html>

<head>

<title>CETIN</title>

<link href= «default.css» rel= «stylesheet» type= «text/css» />

</head>

<body>

<! - start header ->

<div id= «header»>

<div id= «logo»>

<h1>CETIN</a></h1>

<h2><a>прогнозирование трудоемкостии </a></h2>

<h2><a>стоимости создания</a></h2>

<h2><a>программного продукта</a></h2>

</div>

<div id= «menu»>

<ul>

<li><a href= «1.html»>Назначение методики</a></li>

<li><a href= «2.html»">Принципы расчета трудоемкости и стоимости</a></li>

<li><a href= «3.html»">Основные процессы разработки</a></li>

<li><a href= «4.html»">Функциональный размер ИС</a></li>

<li><a href= «5.html»">Процесс расчета разработки ППО</a></li>

<li><a href= «6.html»">Демонстрация программы</a></li>

</ul>

</div>

</div>

<! - end header ->

<! - start page ->

<div id= «page»>

<! - start content ->

<div id= «content»>

<! - start latest-post ->

<div id= «latest-post» class= «post»>

<h1 class= «title»>Демонстрация программы</h1>

<hr>

<div class= «gallery»>

<a tabindex= «1»><img src= «11.jpg»></a>

<a tabindex= «2»><img src= «12.jpg»></a>

<a tabindex= «3»><img src= «13.jpg»></a>

<a tabindex= «4»><img src= «14.jpg»></a>

<a tabindex= «5»><img src= «15.jpg»></a>

<a tabindex= «6»><img src= «16.jpg»></a>

<a tabindex= «7»><img src= «17.jpg»></a>

<a tabindex= «8»><img src= «18.jpg»></a>

<a tabindex= «9»><img src= «19.jpg»></a>

<a tabindex= «10»><img src= «110.jpg»></a>

<a tabindex= «11»><img src= «111.jpg»></a>

</div>

<hr>

</div>

</body>

</html>

Файл CSS

body {

margin: 0;

padding: 0;

background: #FFFFFF url (images/img01.jpg) repeat-x;

font-family: «Trebuchet MS», Arial, Helvetica, sans-serif;

font-size: 13px;

color: #666666;

}

form {

margin: 0;

padding: 0;

}

fieldset {

margin: 0;

padding: 0;

border: none;

}

input, textarea, select {

font: normal 1em «Trebuchet MS», Arial, Helvetica, sans-serif;

}

h1, h2 {

font-weight: normal;

color: #7CD300;

}

h1 {

letter-spacing: -1px;

font-size: 2.6em;

}

h2 {

font-size: 1.8em;

}

h3 {

font-size: 2em;

font-weight: bold;

}

p, ul, ol {

}

p {

}

blockquote {

font-style: italic;

}

ul {

}

ol {

}

a {

color: #7CD300;

}

a:hover {

text-decoration: none;

}

small {

}

hr {

display: none;

}

img {

border: none;

}

img.left {

float: left;

margin: 0 15px 0 0;

}

img.right {

float: left;

margin: 0 0 0 15px;

}

/* Header */

#header {

width: 920px;

height: 160px;

margin: 0 auto;

}

/* Logo */

#logo {

float: left;

}

#logo h1, #logo h2 {

margin: 0;

text-transform: lowercase;

}

#logo h1 {

padding-top: 52px;

font-size: 4em;

color: #554D49;

}

#logo h1 a {

color: #554D49;

}

#logo h2 {

margin-top: -10px;

padding-left: 1px;

letter-spacing: -1px;

font-size: 1.8em;

color: #7F7772;

}

#logo h2 a {

color: #7F7772;

}

#logo a {

text-decoration: none;

}

/* Menu */

#menu {

float: right;

}

#menu ul {

margin: 0;

padding: 40px 0 0 0;

list-style: none;

}

#menu li {

display: inline;

}

#menu a {

display: block;

float: left;

width: 184px;

height: 100px;

padding-top: 30px;

background: #73D000 url (images/img02111.jpg) no-repeat;

text-align: center;

text-decoration: none;

text-transform: lowercase;

font-size: 1.5em;

color: #FFFFFF;

}

/* Page */

#page {

width: 980px;

margin: 0 auto;

padding-top: 20px;

}

#latest-post {

float: left;

width:1000px;

}

post.title {

margin: 0;

}

post.meta {

margin: 0;

padding-bottom: 10px;

line-height: normal;

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

color: #BABABA;

}

post.meta a {

color: #BABABA;

}

post.entry {

margin-bottom: 10px;

padding-bottom: 5px;

}

gallery a img {

/* округления старт */

- webkit-border-radius: 25px;

- moz-border-radius: 25px;

border-radius: 25px;

/* округления конец */

/* transition старт */

- webkit-transition: All 1s ease;

- moz-transition: All 1s ease;

- o-transition: All 1s ease;

transition: all 1.0s ease;

/* transition конец */

/* Тень старт */

- webkit-box-shadow: 0px 2px 4px 1px #DFDFDF;

- moz-box-shadow: 0px 2px 4px 1px #DFDFDF;

box-shadow: 0px 2px 4px 1px #DFDFDF;

/* Тень конец */

/* Прозрачнсоть старт */

- moz-opacity: 0.70;

opacity: 0.70;

- ms-filter: «progid:DXImageTransform. Microsoft. Alpha» (Opacity=70);

/* Прозрачнсоть конец */

margin-right:5px; /* Отступ справа */

padding:10px; /* Внутренние отступы */

display:inline-block; /* отображение */

height:150px; /* Высота */

}

gallery a img:hover {

- moz-opacity: 1;

opacity: 1;

- ms-filter: «progid:DXImageTransform. Microsoft. Alpha» (Opacity=100);

}

gallery a:focus img {

position: relative; /* Позиционирование */

height:500px; /* Высота */

cursor: pointer; /* Вид курсора */

/* transition старт */

- webkit-transition: All 1s ease;

- moz-transition: All 1s ease;

- o-transition: All 1s ease;

transition: all 1.0s ease;

/* transition конец */

/* Тень старт */

- webkit-box-shadow: 0px 4px 4px 1px #DFDFDF;

- moz-box-shadow: 0px 4px 4px 1px #DFDFDF;

box-shadow: 0px 4px 4px 1px #DFDFDF;

/* Тень конец */

}

Размещено на Allbest.ru