Реализация навигационной панели

Горизонтальная панель навигации (рис. 2) выполнена с использованием списков. Элементы списка являются ссылками на соответствующие разделы сайта. Чтобы разместить элементы списка по горизонтали, к селектору li добавлен стилевое свойство display со значением inline, которое преобразует блочный элемент в строчный

Рисунок 2 - Внешний вид шаблона

Для разделения отдельных элементов панели используется пропуски с правой стороны. При наведении курсора мыши на пункты навигационной панели, цвет фона соответствующего пункта изменяется на более светлый. Это достигнуто изменением цвета фона ссылки при наведении мыши:

<div id="navibar">

<ul>

<li class="first"><a href="/">Главная</a></li><!-- class="active" -->

<li class="center"><a href="http://universemine.meximas.com/register.html">Регистрация</a></li>

<li class="center"><a href="http://universemine.meximas.com/noob.html">Как начать</a></li>

<li class="center"><a href="http://universemine.meximas.com/servers.html">О серверах</a></li>

<li class="center"><a href="http://universemine.meximas.com/donat.html">Донат</a></li>

<li><a href="http://universemine.meximas.com/comands.html">Команды</a></li>

</ul>

</div>