Как создать меню навигации html с использование CSS.

Как создать меню навигации html с использование CSS.

Меня тоже интересовало как создать меню навигации со ссылками на страницы сайта.Ведь всем хочется чтобы блок со ссылками был красивым.И это делается очень просто,с использованием фоновой картинки background.

Создаём список с помощью тегов <ul><li></li></ul> .Потом вставляем тег самой ссылки <a href="#"></a>,ну пока что с заглушкой #вместо ссылки на реальный адресс страницы сайта.

Чтобы получилось как на картинке к уроку Как создать меню навигации html с использование CSS.

html1

Потом создаём стили CSS,подключаемый с помощью тега <link>,прописав путь к таблице CSS-href="/my.css" ,который у меня назван href="/new4.css" .

стиль CSS меню навигации

margin: 0; даёт отступ от внешнего блока отступ. paddin: 0; делает отступ от внутренней рамки .list-style-image: none; убирает маркеры списка,по умолчанию-точки.

Ну а теперь поясню что применяется к ссылкам. )) Чтобы ссылка похожа на кнопку присваиваем свойству display значение block display: block; и присваиваем ширину и высоту,желательно равную фоновой картинки.Убираем подчеркивание ссылок text-decoration: none;

Назначаем фоновое изображение background: #94b8t9 url(gas.gif);

фоновое изображение ссылки

и отводим текст от края блока,чтобы было видно указатель text-indent: 50px;

Присваиваем псевдоклассу hover ссылки,то есть при наведении курсора произойдёт подгрузка другого изображения-gas1.gif, фоновое изображение a:hover { background: url(gas1.gif); фоновое изображение при наведении курсора

Ну курсоры у меня не одинаковы,не очень старался. )) Осваиваю бесплатный редактор картинок gimp.И вот что видно в браузере.

что видно в браузере

И что видно при наведении курсора на ссылку,как меняется картинка ссылки.

ссылка при наведении курсора

Комментарии  

 
+2 #1 Gestein 26.06.2011 13:45
Хороший урок. Как раз осваиваю менюшку и картинки! Спасибо!
Цитировать
 

Добавить комментарий


Защитный код
Обновить