Направете хоризонтално мени за себе сајт

Хоризонтално мени има речиси секој сајт - тоа е важен дел, како што може да се со својот изглед и употребливост за привлекување или, обратно, заплашувачки посетители. Да научат како да се создаде основни хоризонтално мени: Направете го тоа "костурот" на HTML, да го совладате основните вештини за креирање. Сигурно може да се најде подготвени менито, но многу поубаво да се научат како да се развие себе. Тоа е прилично забавно.

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

Ние се обидуваме да не се отстапува од семантика, кои се придржуваат на водечките фигури на изгледот. Прво треба да се направи "костурот" за нашите менија во HTML, ги научат основните вештини за да ги направат своите сопствени хоризонтални менија. И тогаш тоа ќе ги красат, со користење на стилови. Нека нашите хоризонтално мени содржи 5 предмети. Првиот елемент, ќе бидете пренасочени на почетната страница. Втората точка - "За нас". Третиот - "Нашите награди". Четврто - "Тоа е забавно." Петто - "Контакт".

HTML код изгледа вака:

Кој не знае: ул таг се користи за куршум, неговите елементи започне со Ли. Ли тагови наследат стилови кои се применуваат на ул.

Ul - блок елемент од листата, ќе се протегала на ширина. Ли е, исто така, еден блок.

Значи, се создаде index.html. Ние собираме нашиот код. Во овој момент, на екранот вертикално наместо хоризонтално мени. Но, ние со вас цел - да се направи хоризонтално мени за сајт. За ова треба CSS.

Што е CSS?

Ако имаш уште да се справат со развој на веб-сајтови, потребно е да се запознаат со концептот на Cascading Style Sheets. Всушност, овие се правилата за форматирање, обработка, која се применува на различни елементи на страниците на веб-сајт. Ако ние ја опишуваат својствата на елементите во HTML стандардот, ќе мора да се повтори ова неколку пати, ќе добие дуплирање на истите парчиња на код. страница оптоварување време на компјутерот на корисникот ќе се зголеми. За да се избегне ова, постои CSS. Доволно е да се опише само еднаш одреден елемент, а потоа едноставно да се посочи каде да ги користите својствата на посебен стил. Тоа е можно да се направи опис на не само на текстот на самата страница, но исто така и во друга датотека. Ова ќе ви овозможи да се применуваат опис на различните стилови на сите страници на сајтот. Тоа е исто така погоден за да модифицирате некои страници, менување на CSS-датотека. Стилови ви овозможи да работат со фонтови на подобро ниво од HTML, помагајќи да се избегне влошување на страниците графика на сајтот.

Користење Style Sheets за развој на менито

CSS-код за мени:

1. # My_1menu {листа стил: ништо; баласт: 6; ширина: 800px; маргина: авто;}
2. # My_1menu li {плови: лево; на фонтот: закосени 18px Arial;}
3. # My_1menu на {color: # 756; дисплејот: блок; висина: 55px; линија Висина: 55px; padding: 0px 15px 15px 0px; позадина: #dfc; текст-декорација: ништо;}
4. # My_1menu на: лебдиш {боја: #foa; background: # 788;}

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

# My_1menu - така што е стил задача за UL- елемент со id = my_1menu, листа стил: нема - оваа команда за да се отстрани ознаките оставени од страна на закажани предмети.

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

баласт: 0 - ова отстранува баласт внатре.

маргина: авто - vyravnivnie хоризонтално мени во центарот на нашата страница.

# My_1menu li - доделување стилови Li-елементи.

висина: 55px - висина мени.

# My_1menu на: лебдиш - доделување на стилови за да елемент и кога е предизвикана глувчето.

Ние нема да се опише во детали секој линија, како што секој програмер да наведете нивните параметри тука. Оваа основа за користење на стилови во менито на веб страната. Можете да го даде повеќе готови и прекрасен изглед, со користење на слики. Доделување елемент, но, на пример, позадина: URL (img1.png) се повторува-x. Нека биде позадина: URL (img2.png) се повторува-X за: лебдиш.

Користете ја вашата имагинација, креативни параметри. Потоа, врз основа на тоа знаење за тоа како да се создаде едноставен мени на веб-сајтот, може да се развие на страницата со свој уникатен дизајн.