Горизонтальная панель навигации на основе списка с использованием цвета

Воспользовавшись объявлением display: inline, можно сделать так, чтобы списки являлись плоскими, то есть отображались горизонтально, как в примере.

<HTML>

<HEAD>

<TITLE>факультеты МИЭМП</TITLE>

<STYLE>

body{font: 14px "Times New Roman"; color: black}

ul#navlist{margin-left: 0; padding-left: 0; white-space: nowrap}

#navlist li{display: inline; list-style-type: none}

#navlist a{padding: 3px 10px}

#navlist a:link{color: red; background-color: orange; text-decoration: none}

#navlist a:visited{color: blue; background-color: yellow; text-decoration: none}

#navlist a:hover {color: orange; background-color: red; text-decoration: none}

</STYLE>

</HEAD>

<BODY>

</UL>

</DIV>

</BODY>

</HTML>

В результате будет получена очень красивая горизонтальная панель навигации, как показано на рисунке.

Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных