Разработка сайта автоматизированного тестирования: оформление сайта с использованием CSS
Дипломная работа - Компьютеры, программирование
Другие дипломы по предмету Компьютеры, программирование
enter;top:80px;
}
Тут стоит упомянуть только свойство padding, которое помогает переместить текст ссылки в самый низ блока.
Добавляем круглые углы (не будут работать в Internet Explorer) и прозрачность (значение filter) :
ul#navigation li a {: block;:left;top: -2px;: 100px;: 25px;color:#E7F2F9;repeat:no-repeat;position:50% 10px;:1px solid #BDDCEF;decoration:none;align:center;top:80px;
moz-border-radius:0px 0px 10px 10px;
webkit-border-bottom-right-radius: 10px;
webkit-border-bottom-left-radius: 10px;
khtml-border-bottom-right-radius: 10px;
khtml-border-bottom-left-radius: 10px;: 0.7;:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
Теперь позаботимся о красивых иконках:
ul#navigation .home a{image: url(../images/home.png);
}#navigation .about a {image: url(../images/user_accept.png);
}#navigation .search a {image: url(../images/lit.png);
}#navigation .photos a {image: url(../images/test.png);
}
Установим изменение фонового цвета при наведении мыши:
ul#navigation li a:hover{
background-color:#d1a6c4;
}
Первым делом необходимо сделать, так чтобы элементы списка были спрятаны (похоже на клавиши рояля). Виден только текст ссылки. При наведении на элемент, запускается анимация и показывается полностью блок с иконкой.
$(function() {d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(() {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},() {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
Скрипт устанавливает marginTop на -80 пикселей. Эффект для первого элемента должен продолжаться 300+150 миллисекунд и каждый следующий элемент должен исчезать с задержкой 150 миллисекунд.
После того, как мышку пользователь убирает - все возвращается на свои места.
В результате получилось следующее меню:
Рисунок 2.1.1 - Верхнее меню
При наведении курсора мыши:
Рисунок 2.1.2 - Верхнее меню при наведении курсора мыши
2.2 Дизайн web-сайта
Устанавливаем фон сайта, вид полосы прокрутки, основные свойства html и body:
html {scrollbar-face-color:#f964a1;shadow-color: #ffffff;highlight-color: #ffffff;dlight-color: #f964a1;darkshadow-color: #f964a1;track-color: #7b538f;arrow-color: #7b538f;}{:#aff url(333.jpg) no-repeat top center;family:Arial;:1200px;
}
2.3 Создание бокового меню
Боковое меню будет отражать последние добавленные новости.
HTML
Его, как и предыдущее создаем при помощи списков:
CSS
Устанавливаем ширину меню, фоновое изображение, величину отступов, размер шрифта элемента, межстрочный интервал, задаем свойства для ссылок и изменение цвета при наведении курсора мыши:
#recentposts { width:205px;:url(../images/postitBack.gif);
}
#recentposts ul {:0;:0;
}
#recentposts ul li {size:11px;height:18px;style:none;:0;:0;
}
#recentposts ul li a {:#21565E;top:1px solid #ffffbe;:block;:170px;:0 auto;:4px 0 4px 25px;:url(../images/bullet-postit.gif) no-repeat 5px 8px;
}
#recentposts ul li a:hover {decoration:none;:#000;:url(../images/bullet-postit-on.gif) no-repeat 5px 8px #ff5092;
В результате, меню выглядит следующим образом:
css дизайн сайт верстка
Рисунок 2.3.1 - Боковое меню
При наведении курсора мыши:
Рисунок 2.3.2 - Боковое меню при наведении курсора мыши
2.4 Создание всплывающего модального окна при выходе
Суть заключается в том, что как только посетитель наводит мышку на верхний край сайта (то есть пересекает его в попытке нажать на крестик для закрытия окна) запускается скрипт и выводит окно на экран.
Прописываем следующие строчки между тегами :
Данный код просто инициализирует jQuery и пару вспомогательных скриптов.
Далее в документе вставляем текст всплывающей подсказки:
Прощай, но обещай вернуться!!!
Суть данного метода заключается в том, что в файле init.js находится инструкция, которая вызывает всплывающее окно как только пользователь достигает последних 5 пикселей сайта. Значение "5" можно заменить на любое произвольное.
Рисунок 2.4 - Модальное окно при выходе
2.5 Создание эффекта для изображения на странице О нас
Под изображением находится необходимый текст, и при наведении мышкой на изображений, этот текст красиво занимает место изображения.
Все проделано благодаря фреймворку jQuery и CSS. В самом верху документа подключаем фреймворк и другие скрипты.
$(function() {
$(".slideBox").hover(function(){
$(this).find("img").stop().animate({:-325
}, 500);
}, function(){
$(this).find("img").stop().animate({
top:0
}, 500);
});
});
Теперь в теле документа в слой с классом "slideBox" помещаем изображение и текст под ним. Текст в свою очередь должен находится вну