Основное меню

Создание и оформление системы рейтинга

Для того чтобы создать данный блок, нам понадобится HTML-документ, в который нужно разместить код со списком ссылок:

<ul id="rating">
<li><a href="#">Очень плохо</a></li>
<li><a href="#">Плохо</a></li>
<li><a href="#">Удовлетворительно</a></li>
<li><a href="#">Хорошо</a></li>
<li><a href="#">Отлично</a></li>
</ul>

Чтобы вся система начала полноценно функционировать, нужно подключить все необходимые скрипты:

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

Следующий шаг это создание стилей и подключение их к HTML-документу. Создайте CSS-файл style.css и поместите туда вот этот код:

/* Базовые стили */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML элементы */
body { background-image:url("../images/bg.jpg"); font-family:Georgia, Times, Serif;; }
a { outline:none; }
h1 { font: bold 50px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif; text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }

/* Исполяющий класс */
.break { clear:both; }

/* Блок WRAPPER */
#wrapper { width:100%; margin:40px auto; }

/* Блок CONTENT */
#content { }
.info { padding:10px 20px; font-size:16px; color:#eee; }
.info a { color:#eee; }

/* Блок RATING */
#rating { list-style:none; width:460px; margin:20px auto; }
#rating li { display:inline; float:left; }
#rating li a { display:block; width:80px; height:80px; margin:5px; border:1px solid #888; background-color:#333; text-indent:-9999px;
-moz-box-shadow:0 0 5px #888; -moz-border-radius:40px; -webkit-box-shadow:0 0 5px #888; -webkit-border-radius:40px; -o-box-shadow:0 0 5px #888; -o-border-radius:40px; }

#ratinginfo { clear:left; width:350px; margin:120px auto; }
#ratinginfo p { text-align:center; background-image:url("../images/textbg.png"); font:20px Georgia,'Times New Roman',serif; padding:10px;
 -moz-box-shadow:0 0 5px #888; -moz-border-radius:40px; -webkit-box-shadow:0 0 5px #888; -webkit-border-radius:40px; -o-box-shadow:0 0 5px #888; -o-border-radius:40px; }

Теперь подключаем его, разместите между тегами <head></head> строку подключения стилей:

<link rel="stylesheet" type="text/css" href="css/style.css"/>

Теперь система рейтинга должна работать. На этом создание и оформление системы рейтинга окончено. Исходные файлы доступны для скачивания ниже.

Скачать файл
размер файла: 35,16 Kb
cкачиваний: 43

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.