Направете сами хоризонтално меню за сайта

Хоризонталното меню е на почти всеки сайт - това е важна част, тъй като е в състояние да привлече или, напротив, да изплаши посетителите до неговия вид и удобство. Нека да научим как да създадем елементарно хоризонтално меню: ще го превърнем в "скелет" в HTML, ще овладеем основните умения за създаване. Можете, разбира се, да намерите готово меню, но е много по-приятно да научите как да го развиете сами. Това е доста вълнуваща дейност.

Научете се да направите меню

Ще се опитаме да не се отклоняваме от семантиката, която се придържа към корифея на оформлението. Първо трябва да направим "скелет" за менюто ни в HTML, за да овладеем основните умения, за да направим хоризонтално меню независимо. И след това го украсявайте с помощта на стил листове. Оставете нашето хоризонтално меню да съдържа 5 елемента. Първият елемент ще бъде пренасочен към главната страница. Вторият елемент е "За нас". Третият е Наградите ни. Четвърто - "Интересно е." Петият е "Свържете се с нас".

HTML кодът изглежда така:

Кой не знае: маркерът ul се използва за списъка с буквите, елементите му започват с ли. Маркерите "li" наследяват стиловете, които се прилагат към ул.

Ул е блоков елемент на списъка, той ще бъде опънат до ширината на страницата. Li също е блокиран.

Така че, създайте index.html. Набираме нашия код. В този момент браузърът ще покаже вертикално меню, а не хоризонтално. Но имаме цел - да направим хоризонтално меню за сайта. За това имаме нужда от CSS.

Защо CSS?

Ако все още просто усвоявате развитието на сайтове, трябва да се запознаете с концепцията за каскадни стилови листове. Всъщност това са правилата за форматиране, обработка, които се отнасят за различни елементи на страниците на уебсайта. Ако описвате свойствата на елементите в стандартен HTML, тогава трябва да повтаряте това многократно, ще дублирате същите парчета код. Времето, което се зарежда страницата на компютъра на потребителя, ще се увеличи. За да избегнете това, има CSS. Достатъчно е да опишем само един елемент веднъж, а след това просто да посочите къде да използвате свойствата на определен стил. Можете да направите описание не само в текста на самата страница, но и в друг файл. Това ще ви позволи да приложите описание на различни стилове на всяка страница на сайта. Също така е удобно да промените няколко страници, като коригирате CSS файла. Стиловете ви позволяват да работите с шрифтове на по-добро ниво от HTML, което помага да се избегнат по-тежките страници на сайта с графики.

Използване на стилови листа за развитие на менюто

CSS за менюто:

1. # My_1menu {style-style: none; Накладка: 6; Ширина: 800px; Маржин: автоматично;}
2. # My_1menu li {float: left; Шрифт: italic 18px Arial;}
3. # My_1menu a {цвят: # 756; Дисплей: блок; Височина: 55px; Линейна височина: 55px; Padding: 0px 15px 0px 15px; Предистория: #dfc; Текст-декорация: няма;}
4. # My_1menu а: задръжте {цвят: #foa; Background: # 788;}

Сега нека разгледаме полученото хоризонтално меню на CSS.

# My_1menu - така се приписва стила на UL елемента с id = my_1menu, style-list: none е командата за премахване на маркерите вляво от елементите в списъка.

Ширина: 800px - ширината на менюто ни е 800 пиксела.

Padding: 0 - това премахва вътрешностите.

Маржин: автоматично подравняване на хоризонталното меню в центъра на страницата ни.

# My_1menu li - присвояване на стилове на линейни елементи.

Височина: 55px - височината на менюто.

# My_1menu a: задръжте курсора на мишката - присвоите стилове на а елемент, когато мишката е над него.

Няма да описваме подробно всеки ред, тъй като всеки разработчик може да зададе свои собствени параметри тук. Това е основата за прилагане на стилове в менюто на сайта. Можете да го направите по-пълен и красив външен вид чрез прилагане на снимки. Задайте елемент a, например фон: url (img1.png) repeat-x. Нека да има фон: url (img2.png) repeat-x за: hover.

Използвайте вашите въображение, творчески предпочитания. После, въз основа на знанието как да създадете най-простото меню на сайта, можете да разработите страници със собствен уникален дизайн.