списък Html хоризонтална или хоризонтално меню с помощта на CSS

Предишен ◈ Следващото

Приветствия към вас, скъпи читатели webcodius блог! Задължително елемент от почти всеки уеб сайт е в менюто. Ето защо, ако сайтът ви има повече от една страница, то вероятно не може без менюто за навигация. В крайна сметка, без потребителското меню ще бъде трудно да се намерят подходящите страници в него.







Тъй като всяко меню е списък от връзки, които водят към вътрешни страници на сайта. обикновено се използват списъците за създаване на менюта. които са създадени с помощта на HTML тагове

    и
  • . Но както знаете елементите на списъка по подразбиране са подредени вертикално един над друг, и че ако трябва да се направи хоризонтална меню. Използване на CSS не е голям проблем.

    Първо, създаване на редовен списък с водещи символи, съдържащ елементи от нашето меню:

    За да се идентифицират в списъка и да поиска за него необходимите стилове CSS, съм добавил към нея Идентификационният атрибут с "меню" идентификатор.

    По подразбиране, без каквито и да било правила CSS, той ще бъде, както следва:

    Както можете да видите списък на елементите, подредени вертикално една под друга, а ако имаме нужда от вертикално меню, ако е необходимо, позоваване на стил (добавите цвят на фона, граници, граници, промените шрифта) може да бъде привлекателна навигационна лента.

    Ако искате да се появи хоризонтална меню, просто трябва да се организира елементи в хоризонтална списъка. За тази цел LI селектор трябва да добави стойност стилистично дисплей имот с вградени или инлайн блок. Ще използвам дисплей правило: инлайн блок. Така че, за да се изброят предмети наредени хоризонтално просто добавете CSS код:

    Сега в списъка на елементите са в хоризонтално положение:

    Както можете да видите елементите на менюто са подредени в хоризонтален ред. Но докато в менюто не изглежда много. Сега, за да се получи пълноправен навигационна лента, да организира менюта с помощта на CSS стилове. За да започнете, добавете фон за връзките на панела да се простират на цялата работа Ли, премахване на подчертаването на връзките, създадени маржове и др.:

    Това ще има такова атрактивно меню:

    Общ вид на менюто по-долу зависи само от вашето въображение и познаване на СГО свойства. По-нататък, например, ето няколко варианта за меню.

    Хоризонтална центриран меню

    Научете как да създадете професионални двигатели в PHP и MySQL

    Изравнете центъра на менюто, можете да направите следното:







    Хоризонтално меню с елементи от една и съща ширина

    Научете как да създадете професионални двигатели в PHP и MySQL

    За да направите всички елементи на едно и също меню размер, посочете желания размер за тях. Само най-важното, че в сумата на позициите, не надвишава размера на целия панел. Можете да го направите:

    Ако добавите малко трансформация:

    В менюто ще получите с скосени ъгли:







Предишен ◈ Следващото