Web-miss: Vanessa (vensy)
Opened: 18.05.2010
Theme: Blake Lively
Orders: OPEN
Coming soon
Выберите пакет услуг *:

Ваше имя/ник *:
Ваш e-mail *:
Ссылка на ваш сайт *:
Опишите то,что хотите видеть в дизайне(блоки,шапка) *:
Ссылки на качественные фото для дизайна(по желанию):
Названия ссылок для нав. меню на лого *:
Если вам нужны доп. услуги,то перечислите какие:
Код безопасности *:

200
Главная » Статьи » Помощь с HTML,CSS и Ucoz » Изучение HTML

Как сделать резиновое меню?
Первое с чего мы начнем,это с HTML,он намного проще чем CSS на первый взгляд,CSS вам покажется трудным из-за большого количества стилей и из-за пристутствия новых стилевых атрибутов,возможно,даже неизвестных вам на данный момент.Но я постараюсь вам не только объяснить как сделать резиновое меню,но и объясню значение многих атрибутов,что повсит ваш уровень знаний в CSS.

Шаг первый
Открываем блокнот и прописываем каркас нашей страницы:

<html>
<head>
<title>Резиновое меню</title>
<link type="text/css" rel="StyleSheet" href="ссылка на ваши стили" />
</head>
<body>
</body>
</html>

Шаг второй.

Теперь нам нужно создать контейнер при помощи тегов <div></div> - эта пара тегов задает контейнер,стиль к котрому можно прописать в CSS.Пропишем эту пару тегов в контейнере <body></body>:

<div class="menu">

</div>

К элементу div добавим атрибут class,под названием menu,где мы при помощи списков создадим наше меню.

Шаг третий.

Создать списки-самое простое в html,мне кажется.Более сложным для новичка может показаться прописывание стилей к этим спискам.Итак,пропишем списки между парой тегов <div class="menu"></div>:

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Графика</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Заказать дизайн</a></li>
</ul>

Для тех,кто впервые знакомится со списками:

<ul></ul> - эта пара тегов означает,что список будет неупорядоченным,т.е. непронумерованным(нумерованный список задается парой тегов <ol></ol>)
<li></li> - эта пара тегов задает элементы списка,к ним можно задать стили(по умолчанию стиль элементов списка задается кружочками,или дисками,но в этом уроке они нам ни к чему)

Напоминаем:

<a href="ссылка"></a> - ссылка задает при помощи пары тегов <a></a> и ее атрибута href=""

Теперь каждый элемент списка <li></li> содержит ссылку,т.ею мы создали обыкновенное меню из списков ;)

Шаг четвертый.

Теперь у вас появилась полноценная веб-страница с меню,основанным на списках.Сам код страницы я не выложу,учимся сами ;D [Вопросы в комментариях].Приступим к CSS:

*{
padding: 0px; margin:0px; /* Убрали отступы */
}

P.S. В /* */ мы заключаем комментарии,они никак не влияют на наш код,я просто комментирую вам проделанные шаги ;)

Шаг пятый.

Пропишем стиль самого меню:

.menu{
min-width:400px; max-width:1000px; margin:20px auto;
}

Подсказка:

min и max width - означают минимальную и максимальную ширину нашего меню
margin - это отступ от внутренней границы внешнего элемента до внешней границы внутреннего элемента [пример]

Пропишем стиль для списка меню:

.menu ul{
background: url('http://www.time-inspire.org/3ehjr/fon_menju.png') repeat-x; display: table-row;
}

Подсказка(2):

repeat-x  - это сокращенный вид написания background-repeat: repeat-x; что означает,наш фон будет повторяться по горизонтали

display: table-row - значит,списки нашего меню будут по горизонтали,т.е. вести себя как строки таблицы(tr)

Пропишем стиль для элементов списка меню:


.menu ul li{
display:table-cell; width: auto;height:50px; text-align:center; vertical-align:bottom;
}

Подсказка(3):

display: table-cell - значит,что элементы нашего меню будут вести себя как ячейки таблицы,т.е. о подробных свойствах,прочитайте здесь

Теперь пропишем стиль ссылок:

.menu ul li a{
color:#ffffff; font: bold 14px Verdana; text-decoration: none; height: 50px;display:table-cell; width:1000px;
vertical-align: middle;
}

Думаю тут вам должно быть все понятно ;)
А теперь задание,как сделать так,чтобы при наведении,на списки меню,они подсвечивались?Результат на картинке,если вы внимательно читали урок,то наверняка без проблем сможете прописать нужный стиль ;)

Категория: Изучение HTML | Добавил: vensy (28/07/13) | Автор: Полина
Просмотров: 1450 | Комментарии: 2 | Рейтинг: 0.0/0
Всего комментариев: 2
+1   Спам
1 Amanda   (30/07/13 00:32)
У меня всё получилось. Большое спасибо.

2 vensy   (30/07/13 01:20)
Я рада,что смогла помочь)

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]