Форма входа
Интересно
Наши флудеры
Партнёры
Статистика
|
Шаг 1. HTML-конструкция меню. Да, если Вы уже заметили наше меню будет напоминать меню с сайта Apple.com. Как и всегда, сначала мы должны составить HTML-конструкцию нашего будущего меню. Она будет конечно же очень простой. Вы и сами могли ее, в принципе, сделать, однако я уже позаботился об этом и разместил специально для для Вас нижеприведенный код: Code ul id="menu"> <li><a href="http://ruseller.com/index.php" title="Главная"><img src="images/home.png" alt="Home" class="home" /></a></li> <li><a href="http://evgeniypopov.ru" title="Форум поддержки">Форум поддержки</a></li> <li><a href="http://evgeniypopov.com" title="Блог">Блог</a></li> <li><a href="http://ruseller.com/goodies.php" title="Товары">Товары</a></li> <li><a href="http://ruseller.com/about.php" title="О нас">О нас</a></li> </ul> Шаг 2. Дизайн меню Теперь приступим к заключительной фазе разработки нашего меню. Т. к. наше меню сделано только лишь с помощью CSS, то нам остается всего вставить между тегами <head> и </head> следующий css-код: Code <style type="text/css"> body {font: 11px Arial, Helvetica, sans-serif; } #menu {font: 11px Arial, Helvetica, sans-serif; background-image:url('images/bc_bg.png'); background-repeat:repeat-x; height:30px; line-height:30px; color:#9b9b9b; border:solid 1px #cacaca; width:100%; overflow:hidden; margin:0px; padding:0px; } #menu li {list-style-type:none; float:left; padding-left:10px; } #menu a {height:30px; display:block; background-image:url('images/bc_separator.png'); background-repeat:no-repeat; background-position:right; padding-right: 15px; text-decoration: none; color:#454545; } .home {border:none; margin: 8px 0px; } #menu a:hover{color: gray; } </style> Также вы сможете скачать исходники картинок
Автор: FRAZZY73
Источник: http://frazzy73.do.am
|
Счётчики
Сегодня нас посетило
|
Показано 2 последних комментария из 20.
|
Мини-статистика
Всего зарегистрировано: 40
Файлов всего: 32 Тем на форуме: 39 |