Создание горизонтального меню

Лабораторная работа №5

Создание горизонтального меню

Урок посвящен созданию горизонтального меню на основе неупорядоченного списка и визуального оформления с помощью CSS-стилей. Неупорядоченный список вместо буквенной или цифровой нумерации предполагает использование различных символов, называемых маркерами. Список располагается внутри контейнера <UL>. Каждый пункт списка начинается стандартным тегом <LI>.

К чему стремимся:

Ниже приведен HTML-код неупорядоченного списка:

<ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">About us</a></li>

    <li><a href="#">Portfolio</a></li>

    <li><a href="#">Contact us</a></li>

    <li><a href="#">FAQ</a></li>

</ul>

В данном примере меню располагается по центру страницы. Данный параметр будет зависеть от ширины внешнего блока, т.к. ширина меню составляет 100%.

С помощью CSS стилей придадим создаваемому меню желаемый вид.

*{

        margin:0;

        padding:0;

}

.page{

        margin:0 auto;

        width:995px;

}

ul{

        list-style:none;

        width:100%;

        height:40px;

        background:#000 url(images/bg-nav.gif) top left repeat-x;

}

ul li{

        float:left;

        border-right:1px solid #333;

}

ul li a{

        display:block;

        height:40px;

        padding:0 35px;

        float:left;

        text-transform: uppercase;

        font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;

        color:#fff;

        text-decoration:none;

        text-align:center;

}

ul li a:hover,

ul li.active a{

        background:url(images/bg-button.gif) top left repeat-x;

}

Скачано с www.znanio.ru