Новые уроки CSS: Современные уроки CSS | Коллекция CSS меню

Среда, 05 Января 2011 г. 20:40 + в цитатник

или как сделать красивое меню с помощью CSS атрибутов

Содержание страницы

или как создать простейшее CSS меню из HTML списка

HTML код меню:

                                                               <title>Простейшее CSS меню</title>

            </head>

            <body>

            <ul class="css-menu-1">

            <li><a href="#">Главная</a></li>

            <li><a href="#">HTML уроки</a></li>

            <li><a href="#">CSS уроки</a></li>

            <li><a href="#" class="selected">CSS меню</a></li>

            <li><a href="#">Справочник</a></li>

            </ul>

Посмотреть CSS код меню

или как сделать CSS меню без использования изображения

HTML код меню:

                                                               <title>Горизонтальное CSS меню</title>

            </head>

            <body>

            <ul class="css-menu-2">

            <li><a href="#">Главная</a></li>

            <li><a href="#">CSS уроки</a></li>

            <li><a href="#" class="selected">CSS меню</a></li>

            <li><a href="#">Справочник</a></li>

            </ul>

Посмотреть CSS код меню

или как сделать CSS меню без использования изображения (часть 2-ая)

HTML код меню:

                                                               <title>Создаем горизонтальное CSS меню без изображения</title>

            </head>

            <body>

            <div id="css-menu">

            <ul>

            <li><a href="#">

            <span class="text-top">Главная</span>

            <span class="text-bottom">О нашем проекте</span>

            </a></li>

            <li><a href="#">

            <span class="text-top">Справочник</span>

            <span class="text-bottom">CSS справочник</span>

            </a></li>

            <li><a href="#">

            <span class="text-top">CSS уроки</span>

            <span class="text-bottom">Для начинающих</span>

            </a></li>

            <li><a href="#">

            <span class="text-top">CSS меню</span>

            <span class="text-bottom">Коллекция CSS меню</span>

            </a></li>

            </ul>

            </div>

Посмотреть CSS код меню

или как сделать CSS меню без использования изображения (часть 3-я)

HTML код меню:

                                                               <title>Как сделать горизонтальное CSS меню без изображения</title>

            </head>

            <body>

            <ul class="css-menu-3">

            <li><a href="#">Главная</a></li>

            <li><a href="#">HTML уроки</a></li>

            <li><a href="#">CSS уроки</a></li>

            <li><a href="#" class="selected">CSS меню</a></li>

            <li><a href="#">Справочник</a></li>

            </ul>

Посмотреть CSS код меню

ab-w.net

Рубрики:

Полезное
Уроки CSS