Программы, игры, фильмы, музыка, книги, Portable, софт - Каталог статей
Развлекательно-познавательный портал softline2009.ucoz.ru
Главное меню
Разделы новостей
Новости Windows [0]
Новости НеWindows [2]
Всё о Windows Vista [0]
Вокруг софта [8]
Интернет [37]
Железо [2]
Мобильная жизнь [4]
Безопасность [8]
Игромания [2]
Общество/политика/в Мире [13]
Образование [8]
Разное [16]
Статьи не входящие в вышеперечисленные категории
Windows 7 [1]
Наука и технологии [6]
Случайная новость
из архива
Книги и Журналы
Серия - Личная библиотека приключений (58 книг)
Утилиты/Software
Polaris Office 8.1.605.28453 ML/Rus
Portable Софт
Coolutils Total PDF Converter 5.1.48 Portable (Ml/Rus/2015)
Музыка/MP3/WAV
America - Дискография (1971 - 1998)
Аудиокниги
Вольтер - Простодушный (Аудиоспектакль)
Программы
Icecream Ebook Reader 1.52 Ml|Rus
Мультимедиа
FormatFactory 3.6.0 RePack/Portable by Diakov
Книги и Журналы
Серия - Эпицентр. Ядерная фантастика (6 томов)
Игры/Games/PC
Эзотерика. Полая Земля. Русская версия (2014)
Аудиокниги
Сергей Донской - Дату смерти изменить нельзя (Аудиокнига)
Книги и Журналы
Лариса Абрикосова - Ишемическая болезнь сердца
Облако тегов
Главная » Статьи » Интернет

Делаем своё 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)
Просмотров: 1161 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини профиль
Московское время: 14:33
Сегодня 27 Ноя 2024 года.










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

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



Полезное
Случайная новость
МУЗЫКА
Самые Сливки Русского Шансона (2014)
МУЗЫКА
Русские Хиты Ретро FM (2013)
МУЛЬТФИЛЬМЫ
Холодное сердце / Frozen (2013/DVDScr)
СОФТ
Smith Micro Poser Pro 2014 SR1
ИНТЕРНЕТ
Muzabaza Player 1.0.8.5 + Portable Rus
ИНТЕРНЕТ
Яндекс.Браузер / Yandex.Browser 14.2.1700.8706 Beta
КНИГИ / ЖУРНАЛЫ
Черствое сердце
ПОРТАТИВНЫЙ СОФТ
AnyToISO Professional 3.5.1 Сборка 460 Portable
СОФТ
Alcohol 52% Rus Free
КНИГИ / ЖУРНАЛЫ
Сборник сочинений- Роберт Джордан (25 томов)
Статистика



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

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

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

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