Как да създадете менюта с CSS в стил Windows Vista

Този пример показва как да създадете меню в стил Windows Vista с минимални усилия, необходимо е само малко въображение. Екранната снимка показва лентата с инструменти на Windows Vista и ние ще се опитаме да създадем същото меню с помощта на HTML и CSS.

Лента с инструменти на Windows Vista

Меню в стил Windows Vista

Менюто ще бъде създадено с помощта на списъка (таг

). Поставяме списъка в блок с > Получаваме следния код:

Сега нека дефинираме стилове за тези елементи. Първо за нашия контейнер -

След това за елемент

, който е вътре в контейнера:

Височината на менюто се определя от свойството "line-height:32px;", ширината - "width:500px;", задаваме и padding, така че бутоните да не "залепват" за границите на менюто.

Сега е ред на бутоните - контейнерът за тях ще бъде тагът

left.png - и right.png -

HTML код на бутон:

Ако искате да добавите изображение преди текста, просто добавете вътре в тага

Пример за HTML код за бутон с изображение:

---