В предния урок стигнахме до създаването на този layout. Да го запълним, като сложим едно меню. Всяко меню ще свърши работа в 99% от случаите. Затова в контейнера на меню, ще сложа , директно линкове. към разни страници вътрешни или външни на сайта. На тях ще им сложа class="menulink". Вътре ще им сложа заглавие. Например "About me". Синтаксиса за създаване на линк е този. Ще копирам няколко пъти. Ще направя промяна тук. Може да сложа и един Home бутон. Когато искаме да сочим към друг сайт, използваме пълния URL адрес с http,А когато искаме да сочим към страница от сайта,например, ако тя се казва в случая Services. html, то тя трябва да е в същата директория, където е и файла в който се намира. Ако той е в друга директория, например някоя вътрешна директория, тотогава ще използваме този slash. Пътят ни ще изглежда така. Ако той е в предна директория, ще използваме път от сорта на този. По този начин излизаме от тази директория в която смеи в предната директория ще търсим services. html . Ще запиши файла и ще влезна в stylizerTова което имаме тук сa тези линкове, съвсем прости. Със Space ще избера един от тях, за да мога да създамтова правило - menulink, create. Ще му сложа фон, например червено и ще се опитам да сложа width. Например: 100 пиксела. НО не става!Същото и за Height. 100 пикселa. Не става понеже елемента е тип Inline. На inline елементите не можем да слагаме Height и Width. Те могат да се слагат само на блок елементи. Затова ще сложа първо display, block. НО пък всеки блок елемент е на отделен ред. Затова ще трябва да сложа и float left. Сега вече и Height и Width работят. Ще сложа малко Margin, за да се виждат къде се разделят бутоните. Имаме два пиксела тук,както виждате те са в лявата част. Затова ще сложа text-align center или може да използваме този бутон тук. Oт друга страна пък са прилепени отгоре. Има два варианта единия да сложа padding,като променя top отгоре. И след това намаля Height, понеже "padding" увеличава Height и Width. Другия вариант e да използвамLine Height, t. e. височина на реда 43 пиксела. Да ползваме товаPadding не ми трябва вече. Сега цвета на текстаще го променя от тук. Това което не ми харесва е долната подчерта. Това може да се смени сfont-style:Tрябва да е text-decoration. Отдолу са опциите, които мога да избера. Underline е по подразбиране, избирам non. Съответно изчезна. Може би ще трябва да сменя и шрифта, в момента е "Тimes". Както и font size. Тези CSS правила, които се ползват, в повечето случаи са към 20. Вече видях всичките. Не са сложни за запаметяване. Не ми харесва това, че когато отида върху бутоните, няма никакъв ефект. Затова ще натисна на . menulink отново и ще избера makerule. Tози път два пъти ще натисна тук, след него слaгам :hover . Сега ще видите какво ще стане когато сложим фон в този hover. Когато мина отгоре, стила който съм сложил тук, ще бъде вкаран в стила на бутоните. Това правило тук задава на браузъра, че при hover ще се изпълни този стил. Тук може да поставя какво искам. Например: Color. Не се вижда добре в случая. или да променя височината на бутоните. Както се вижда не ви трябва javascript, за да правите такива бутони. Те се подържат директно от CSS. Да ги направим още по-добре. Това е по-добре да го направите първо на Photoshop , за да видите кои цветове и ефекти ви харесват повече. Сега отстоянието може да се направи по-добре. Слагаме margins = 0 пиксела, отляво понеже беше преместеноа пък от дясно ще сложа 1 пиксел или пък 2 пиксела. С това поставихме тези бутони. В следващия урок ще сложим нещо в content.