Там где будет меню
<div class="main_menu"> <ul class="menu"> <li class="selected"><a href="#">Главная</a></li></h3> <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> <li class="rss"><a href="#">RSS</a></li> </ul> </div>
А теперь необходимо оформить наше меню для его более красивого отображения, для этого пропишем CSS стили:
в css
/* Глобальные стили */ * { margin: 0; padding: 0; }
/* Стили главного, внешнего блока меню */ .main_menu { width: 100%; height: 239px; background: url(img/menu_bg.gif) repeat-x; } /* Слити внутреннего блока меню */ .menu { margin-left: 20px; list-style-type: none; float: right; } .menu li { display: inline-block; } /* Слити внутренних блоков меню */ .menu a, .selected a, .rss a{ width: 77px; height: 30px; display: block; padding: 50px 0 0 0; background: url(img/link/link.png) no-repeat; font: 11px Verdana, Geneva, sans-serif; text-decoration: none; text-align: center; color: #FFF; } .menu a:hover { background: url(img/link/link_hover.png) no-repeat; color: #CCC; }
.rss a { width: 55px; display: block; margin: 0 20px 0 0; background: url(img/rss/rss.png) no-repeat; } .rss a:hover { background: url(img/rss/rss_hover.png) no-repeat; }
.selected a,.selected a:hover { background: url(img/link/link_selected.png) no-repeat; }
Скачайте и вставьте архив в файловый менеджер:
| +1 |
|
Простая ссылка: |
|
Html ссылка: |
|
ВВ ссылка: |
|
|