[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Навигация
Статистика
Страница 1 из 11
Форум » Веб-мастеру » Увлекательный html+css » Меню с помощью списка (sml[hammer])
Меню с помощью списка
Dosug Дата: Пятница, 2009-Июль-03, 21:45:39 | Сообщение # 1
Admin™
Группа: Всевышние
Сообщений: 191
Репутация: 9
Статус:
Code
<ul>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
</ul>

У нас получился вот такой простой маркированный список:

Итак, дальше нам предстоит работа только с CSS. Начнём её, запишем в css файл такой код:

Code
ul {
list-style:none;
}

li a {
color:#fff;
text-decoration:none;
padding: 4px 7px;
width:120px;
background:#0076ba;
display:block;
border:1px solid #fff;
font-weight:bold;
}

Мы задали сразу стили для всего списка и его элементов в случае, если они – ссылки. Должно получиться так:

Теперь добавим эффектов при наведении мыши на кнопку:

Code
li a:hover {
background:#d36800;
}

Вот, и всё. Наше меню готово.
Прикрепления: 3769417.png(0Kb) · 1159428.png(1Kb) · 8329017.png(1Kb)


Если враг не сдается, его перезагружают.
 
Форум » Веб-мастеру » Увлекательный html+css » Меню с помощью списка (sml[hammer])
Страница 1 из 11
Поиск:


Copyright © 4user. При копировании материалов с сайта, обязательна ссылка на 4user.org Хостинг от uCoz