HTML и CSS са езици за уеб програмиране, необходими за оформлението на сайта. Започвайки оформление, реших да науча основите на тази професия, трябва да започнем с тяхното проучване, защото на тяхна основа е възможно да се създаде прост сайт.
В HTML и CSS, хоризонталното меню за сайта е лесно за изграждане, като се започне с писането на рамката.
Създаване на рамка
За да започнете, трябва да направите HTML код. Менюто е по-просто за създаване на маркиран списък. Следователно Twin Tag изисква затваряне в края на списъка. По-добре е веднага да добавите клас за следващата стилизация. Те се добавят двойки елементи
по броя на точките с връзките. Пример:
Build frame
Хоризонтално меню
падащо меню
Фиксирано меню
Това е базата, която след това е хоризонтално меню на CSS, фиксирано или падащо.
Хоризонтално меню
След като кодът е маркиран, е време да започнете работа със стила. Трябва да се отбележи, че сдвоените тагове, използвани за рамката по подразбиране, са блокови и следователно трябва да промените типа на елемента на низа, за да създадете както нормалното, така и падащото хоризонтално CSS меню. Това може да се направи с помощта на свойството на дисплея. Добавя се към елемента:
.menu li {display: inline; } Така се превръща в хоризонтално. Ако има много под-точки, те могат да се преместят в нов ред без добавянето на посочените свойства. В този случай имотът се използваза показване на проходи и текстови предавания. Nowrap съхранява текст изцяло, без сричкопренасяне, а предварително опаковане съхранява пропуски в HTML и добавя автоматични. .menu li {дисплей: inline; бяло пространство: nowrap; }
За да се избегне запушване на низ с твърд текст, можете да създадете информация в групи и да създадете допълнително подменю, което ще отразява точно всичко, което е необходимо. Подменюто може да бъде отхвърлено или отворено.
падащо меню
След овладяването на основите на конструирането на хоризонталното меню, CSS излиза от него, подменютата могат да бъдат подредени във вертикален списък. Списъкът с маркиране трябва да бъде многостепенно, да добавя допълнителни маркери за етикетирани списъци в желания елемент. Следните елементи в списъка трябва да бъдат затворени в етикета:
1
1.1
1.2
2
3
4
] В css .menu li се заменя с ".menu", така че вътрешните елементи да станат вертикални. Към родителския селектор се добавя относително позициониране, при което елементът се измества от границите на родителския блок, а на детето - абсолютен (напълно премахва се от потока и се координира от най-близкия елемент, а ако не, то от границите на браузъра). Елементи с относително позициониране могат да съдържат детски елементи с абсолютно позициониране вътре. Това означава, че при преместване на блок от позиция: относителна, фиксираните части ще останат на местата си вътре в нея.
Отпадащата по подразбиране част винаги остава отворена, освен ако не я добавите към елемента на дисплея само когато задържите курсора. За да направите товапо подразбиране е скрит допълнителен списък: .menu & gt; li {дисплей: inline; позиция: относителна; } menu.second {position: absolute; (подменю на snap за родителски блок) дисплей: няма; (скрий)} .menu & gt; li: hover .second {(псевдокласната hover се използва за показване на списъка чрез зависване) дисплей: блок; } Резултатът ще бъде малко, чисто меню.
Fixed menu
Фиксирано меню
За да запазите създаденото на открито, свойството на дисплея с блоковата стойност е подобно на падащото меню, но без да се крие картата. Ако желаете, можете да заключите не само отворения списък, но и лентата с менюта, когато превъртате страницата. Когато потребителят завърти текста надолу, менюто винаги може да остане на върха, което улеснява навигацията на сайта. Подобен елемент има редица характеристики. Той е много подобен на абсолютния, но е свързан само с браузъра, който изпада от потока. Координирайте такъв елемент удобно с обичайните свойства отгоре /отдолу, ляво /дясно. Пример за хоризонтално меню с падащи елементи, фиксирани в браузъра:
Добавя свойство на позиция със стойност фиксирана, след което менюто остава на място при превъртане. С създаването на такова меню ще се справи дори и начинаещ. HTML маркирането е лесно и удобно. За да се показват правилно CSS стиловете в браузъра, си струва да запомните дизайна на елементи в блоков изглед, добавяне на граници и координиращи елементи, вътрешен и външен отстъп, така че описаните параграфи да не се налагатедин на друг. Често се забравя да се добави ширината и височината на елемента. Можете да използвате свойството float, като го "притиснете" към лявата или дясната страна (float: right;), за да изведете желаната позиция извън видимата част за по-нататъшна обработка.
