Като оформяте навигационната си лента по определен начин, можете да подсилите брандирането и дизайна за вашия бизнес. Използвайки комбинация от HTML и CSS (Cascading Style Sheet) код, за да диктувате външния вид на вашата навигационна лента, можете да създадете последователен външен вид и усещане в целия си сайт. Ако изберете да направите лентата за навигация прозрачна, това означава, че тя ще бъде със същия цвят като фона или фона на елемент, който го съдържа.
1
Създайте HTML секция за вашата навигационна лента. В HTML файла за страницата, с която работите, намерете раздела, към който искате да добавите лентата за навигация. Използвайте елемент, който да го съдържа, както следва:
Между отварящия и затварящия етикет можете да поставите вашите навигационни връзки.
2
Включете котва елемент за всяка навигационна връзка, от която се нуждаете. Вътре в елемента "nav" добавете котва елемент за всяка връзка, която искате потребителите да могат да разглеждат. По-долу е примерен котва елемент, свързващ към раздел на сайта:
относно
Това води до раздел в сайта, който се намира в папка с име „about“, която е в същата директория като страницата, в която се показва този код. За да се свърже към страница, а не към папка, маркировката трябва да се появи, както следва за HTML :
относно
3
Добавете раздел за стил към вашата страница. За да оформите лентата за навигация, се нуждаете от раздел за CSS код. В заглавната част на вашата страница, преди затварящия маркер, добавете един, както следва:
Вътре в това можете да добавите декларации за стилизиране на елементите на вашата страница.
4
Оформете котвите. В секцията CSS на вашата страница добавете декларации за стилизиране на котвите в лентата за навигация. Например, за да стилизирате всички котва елементи вътре с атрибут "nav" като негов ID атрибут, можете да използвате следните селектори:
/декларации за стил/
}
Това показва котвите във всички състояния. В този раздел можете да добавите декларации за стил, които искате да наложите, например:
декорация на текст: няма; ширина: 100px; дисплей: блок; плувка: ляво;
Това са стандартни свойства за показване на анкерите един до друг на хоризонтална линия. За да оформите самия елемент, използвайте следния синтаксис:
ширина: 800px; }
5
Оформете стила на фона. Ако не приложите свойство за фон към вашата навигационна лента в CSS, той ще се покаже с прозрачен фон по подразбиране. Възможно е обаче да се показва с фона на страницата или друг съдържащ елемент зад нея. Например, следната CSS декларация за елемента body ще доведе до появата на фоновото изображение зад лентата за навигация:
тяло {background-image: url ("bgpic.jpg"); }
Освен ако не посочите фоново изображение или цвят за лентата за навигация, тя трябва да се показва с прозрачен фон.
