Поточний час:
Сьогодні 22 листопада, середа 2017 рік

Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 3 дня

Ваш ip адрес:54.80.169.119

Доброї ночі!
Ви обновили сторінку в 3 : 36

Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

 

Продолжаю на практике совершенствовать свои знания, сегодня напишу как создать красивое горизонтальное меню на сайте в виде кнопок. Подобная публикация на такую ​​тематику уже публиковалась ранее, как создать горизонтальное меню можно прочитать перейдя по этой ссылке..

Теперь беря за пример предыдущую публикацию “Как создать кнопки для сайта подключив стили CSS”, я создам подобное меню в виде кнопок у себя на тренировочном сайте, с целью сделать дизайн более красивым. Если взять предыдущую дизайн, вид меню там состоял из обычного слова, которая указывало на страницу.

Пользоваться таким меню можно, так как не имеет значения нажав на название страницы в виде слова или нажав на кнопку в которой размещено название страницы, так или иначе все равно вас перебросит по ссылке на нужную страницу.

Меню которое я собираюсь сейчас сделать на своем тренировочном сайте, будет уже более похоже на современное меню, оно будет похоже на меню присутствующих на большинстве сайтов. Каждый из вас согласится что меню в виде кнопки гораздо лучше смотрит, чем меню в виде обычных слов.

Post-75

Каждый из вас согласится что меню в виде кнопки гораздо лучше смотрит, чем меню в виде обычных слов.

3html

В принципе как я уже отмечал, в начале публикации что именно такие материалы, как создать красивое горизонтальное меню в виде кнопок, уже присутствуют на блоге. А на этой странице мной описаны практические занятия.

Давайте теперь обратим внимание на линию, расположенную между фото на header и кнопкам которая перекидують на страницы сайта. Именно кнопки я и хочу разместить на данной данной линии. Что это за линия, графический файл с расширением jpec размещен в папке imeges.

meniu1

⇑кнопки разместить на данной данной линии

Для того чтобы разместить конпку на линии на нужно в стилях scc прописать правило. А на странице html область в которой размещены ссылки на страницы сайта, собственно там страницы сайта зеднються между собой, нужно взять в блок div. и указать индентификатор.

Начинаем, создаем кнопки

1— копируем код который размещен по ссылке, открываем редактор, создаем файл размещаем скопирован код, сохраняем файл с расширением сss. Размещаем сохраненный файл в коренвий папке сайта.

2 — В месте, где у нас размещены ссылки на страницы сайта добавляем ”#” class=”button”>Кнопка</a> до <a href=”index.html”> добавляем указанное.

вместо<a href=”index.html”><strong>Главная</strong></a> добавляєм<a href=”index.html””#” class=”button blue”><strong>Главная</strong></a>

Те же действия в каждой ссылки страницы. Затем в области head перед закрывающим тегом </head> прописывается линк  

<link rel=”stylesheet” type=”text/css” href=”buttonize.min.css”>

название файла “buttonize.min.css” вы вписываете свою которую вы дали при создании файла. Если все сделано правильно тогда должны появиться кнопки.

3 — Теперь остается разместить кнопки на указанной линии. Что для этого нужно сделать,

  а) сначала прописать правило в папке где размещены файлы стилей css, в файле style, в вас может быть другое название, хотя как обычно именно так называется файл в котором размещают правила для шрифтов, изображений и т.д.

#header2{ background-image:url(../images/nav.png); }

  б) теперь область в которой размещены ссылки на страницы сайта, нужно взять в блок div в котором указываем на какому правилу должен руководствоваться данный блок. У меня правило “header2”, в конце всех ссылок закрываем блок </ div>.

meniu2

⇑посилання на сторінки сайту, потрібно взяти в блок div

<div id = “header2”> <a href=”index.html” “#” class=”button blue”><strong>Главная</strong></a> <a href=”video.html”“#” class=”button star”>Мои видео</a> <a href=”href.html”“#” class=”button “>Ссылки</a> <a href=”imagin.html”“#” class=”button “>Фото</a> <a href=”despre.html”“#” class=”button “>Обо мне</a> <a href=”contact.html”“#” class=”button “>Контакти</a> </div>

Если все сделано правильно, тогда должны появиться кнопки на строчке

meniu3

 До встречи !

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *