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

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

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

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

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

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

Ul е блок елемент на списъка, той ще бъде опънат до ширината на страницата. 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; подложка: 0px 15px 0px 15px; фон: # dfc-text-decoration: няма;}
4. # my_1menu a: задържи {цвят: # фоаза: # 788-}

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

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

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

подложка: 0 - това премахва вътрешностите.

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

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

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

# my_1menu a: hover - присвояване на стилове на a-елемент, когато мишката се движи над него.

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

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