Программы, игры, фильмы, музыка, книги, Portable, софт - Каталог статей
Развлекательно-познавательный портал softline2009.ucoz.ru
Главное меню
Разделы новостей
Новости Windows [0]
Новости НеWindows [2]
Всё о Windows Vista [0]
Вокруг софта [8]
Интернет [37]
Железо [2]
Мобильная жизнь [4]
Безопасность [8]
Игромания [2]
Общество/политика/в Мире [13]
Образование [8]
Разное [15]
Статьи не входящие в вышеперечисленные категории
Windows 7 [1]
Наука и технологии [6]
Случайная новость
из архива
Книги и Журналы
Иностранная литература. Современная классика (53 книги)
Аудиокниги
Леонид Млечин - Самая большая тайна фюрера (Аудиокнига)
Музыка/MP3/WAV
Shakira - MP3 Play (2014)
Книги и Журналы
Е.Ю. Бруннер - Лучше, чем супервнимание. Методики диагностики и психокоррекции
Мультимедиа
PowerISO 6.2 DC 21.05.2015 RePack by D!akov
Книги и Журналы
У. Бейджхот - Естествознание и политика. Мысли о применении начал естественного отбора и наследственности к политическому обществу
Аудиокниги
Тамерлан. Правитель и полководец (Аудиокнига)
Книги и Журналы
Серия - Коллекция Фантастика (10 томов)
Книги и Журналы
Э.Д. Фролов - Античный полис. Проблемы социально-политической организации и идеологии античного общества
Книги и Журналы
Серия Алиса (5 книг)
Аудиокниги
Наталья Нестерова - Целую ручки (Аудиокнига)
Облако тегов
Главная » Статьи » Интернет

Делаем своё css меню

И так, начнем.

1. Для начала, нам потребуется основа css меню.Пропишем перед нашим скриптом:

<style type="text/css">

2. Придадим нашему меню форму.
Для это пропишем следущее:

#vmenu ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}

Сейчас я расскажу какой параметр за что отвечает.

Margin – это внутренний отступ в элементе.
Padding – это внешнее пространство (отступ).

Font-family – название шрифта использованного в данном меню.
(обычно пишется несколько шрифтов, компьютер автоматически читает первый шрифт, если такого не имеется на компьютере, берется за следующий. Шрифты следует писать через запятую.)
Font-size – размер шрифта, пишется в пикселях.
Font-style – определяет начертание шрифта. (используют italic, oblique, normal)
Font-weight – устанавливает насыщенность шрифта. (используют bold, bolder, lighten, normal)
Text-decoration - добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.(используют blink , line-through , overline , underline , none)
3. Придадим нашему меню границы.
Для этого пропишем следующее:

#vmenu {
width: 150px;
margin: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #84ac46;
border-right-color: #84ac46;
border-bottom-color: #84ac46;
border-left-color: #84ac46;
}

width – ширина меню.
border-top-width – устанавливает толщину границы сверху
border-right-width –справа
border-bottom-width – снизу
border-left-width – слева

border-top-style – устанавливает стиль границы сверху
border-right-style – справа
border-bottom-style –снизу
border-left-style – слева

border-top-color – устанавливает цвет обводки сверху
border-right-color – справа
border-bottom-color – снизу
border-left-color – слева

4. Далее придадим границу, цвет и все остальное кнопкам.

#vmenu li a {
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #84ac46;
}

Тут думаю вам все понятно.

5. Сейчас добавим стиля для ссылок, когда на них не навели.

#vmenu li a:link, #vmenu li a:visited {
color: #8f8f8f;
display: block;
background-color: #ffffff;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}

Color – цвет ссылки, до наведения на нее.
Background-color – фон под ссылкой, когда на нее не навели.
Далее идут отступы. Читать про них выше.

6. Сейчас добавим стиля для ссылок, когда на них навели.

#vmenu li a:hover {
color: #000000;
background: #b1e264;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}

Все параметры остались те же, только заменяем их на то, что вы хотите увидеть при наведении на ссылку(цвет ссылки, фон под ссылкой, отступы)


Источник: http://extezy-soft.net.ru
Категория: Интернет | Добавил: admin (05 Фев 2010)
Просмотров: 1141 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини профиль
Московское время: 17:41
Сегодня 02 Май 2024 года.










Гость!
Полное имя Гость
Ваша группа Гости сайта;
Ваш IP: 3.135.200.211;
Вы с нами день
Мы рады вам ГОСТЬ! Чтобы не видеть рекламу, получить личный профиль и неограниченный доступ на сайте, пожалуйста, зарегистрируйтесь или авторизуйтесь!
Правила сайта!
Правила добавления
новостей!

Логин:
Пароль:

Поиск по сайту



Полезное
Случайная новость
ФИЛЬМЫ / СЕРИАЛЫ
Эротицист / All'onorevole piacciono le donne (1972) DVDRip
КНИГИ / ЖУРНАЛЫ
Серия Осирис (15 томов)
АУДИОКНИГИ
Шокирующие истории 2 (Splatterpunk stories 2) (Аудиокнига)
АУДИОКНИГИ
Сказки Страны Утренней Свежести. Корейские сказки (2013) Аудиокнига
АУДИОКНИГИ
Смирнов Виктор - Тревожный месяц вересень (Аудиокнига)
ПОРТАТИВНЫЙ СОФТ
Photomizer Pro 2.0.14.110 Portable by Valx
МУЗЫКА
Русский Сборник Дискотеки 90-х (2014)
КНИГИ / ЖУРНАЛЫ
Потолки своими руками. Плотникова Татьяна
КНИГИ / ЖУРНАЛЫ
Легко худеем №1-2 (январь-февраль 2014)
КНИГИ / ЖУРНАЛЫ
Дети будут! Разреши себе стать мамой
Статистика



Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Кто on-line?
Нас посетили:
Последние статьи
партнерка за смс, заработок на смс-партн...
Как попасть на первую страницу поисковой...
Что делать если наступил страховой случа...
Что нужно знать о независимой экспертизе...
Карта Квартира+ ПИК
Как разблокировать доступ к сайту
ошибки синего экрана смерти
Как выбрать сейф и какие они бывают
Как выбрать мебель в офис
Как завязывать галстук, шарф и платок. П...
Как правильно целоваться

Сайт адаптирован для просмотра с разрешением монитора 1280х1024 1024х768 в браузерах Mozilla Firefox и Opera. ВАШ браузер: , а
Файлы для обмена и ознакомления предоставлены пользователями сайта. Администрация не несёт ответственности за их содержание. На сервере хранятся только ссылки на файлы. Это значит, что мы не храним и не распространяем никаких нелегальных материалов, а так же материалов охраняемых авторским правом.
Для правообладателей!