01 от 06
Как да създадете навигация с табла с CSS и без изображения
Навигацията в уеб страниците е форма на списък и навигацията с табове е като хоризонтален списък. Това е доста лесно да се създаде хоризонтална табулационна навигация с CSS, но CSS 3 ни дава още няколко инструмента, за да изглеждат още по-хубави.
Този урок ще ви преведе през HTML и CSS, необходими за създаване на CSS меню. Кликнете върху тази връзка, за да видите как ще изглежда.
Това меню с раздели не използва изображения , а само HTML и CSS 2 и CSS 3. Тя може лесно да бъде редактирана, за да добавите още раздели или да промените текста в тях.
Поддръжка на браузъра
Това меню на раздел ще работи във всички основни браузъри . Internet Explorer няма да покаже закръглените ъгли, но в противен случай ще покаже разделите точно като Firefox, Safari, Opera и Chrome.
02 от 06
Напишете вашия списък с менюта
Всички навигационни менюта и табулатори са наистина просто неорганизиран списък. Така че, първото нещо, което искате да направите, е да напишете неопределен списък с връзки към мястото, където искате да отидете навигацията с табове.
Този урок предполага, че пишете вашия HTML в текстов редактор и че знаете къде да поставите HTML за менюто си на вашата уеб страница.
Напишете своя неорганизиран списък по следния начин:
- клас = "маса на">
- CSS 3
- id = "текущи"> разделите
- За
- Менюта
Ще забележите, че кодът извиква две неща: class = "tablist" и id = "current". Първата е задължителна . Ако не поставите класа на таблицата в неопределения ви списък, разделите няма да работят. Втората е по избор. Поставете id = "current" на този, който искате да бъде откроен на тази страница. Обикновено използвам това, за да подчертая страницата, на която се намирам, но можете да го използвате, за да подчертаете най-важния раздел. Или можете да го премахнете напълно.
03 от 06
Започнете да редактирате стила си
Можете да използвате външен стилов лист или вътрешен лист с стилове . Страницата с примерни менюта използва вътрешен лист с стилове в
на документа.Първо ще оформят самата UL
Тук използваме табличния списък в HTML. Вместо да оформяте UL етикета, който би оформял всички неопределени списъци на страницата ви, трябва да оформявате само UL класа. tablist Така че първият запис във вашия CSS трябва да бъде:
.tablist {}Обичам да поставя в края на къдрава скоба (*) предсрочно, така че не го забравям по-късно.
Докато използваме неразреден таг на списъка за списъка с менюта на раздел, но ние не искаме да се вмъкват куршуми или числа. Така че първият стил, който трябва да добавите, е. списък стил: няма; Това казва на браузъра, че докато е списък, това е списък без предварително определени стилове (като куршуми или числа).
След това можете да зададете височината на списъка си така, че да съответства на мястото, което искате да запълни. Избрах 2х за моята височина, тъй като това е двойно по-голямо от стандартния размер на шрифта и дава около половин ем над и под текста на раздела. височина: 2 дм; Но можете да настроите ширината си до какъв размер искате. UL таговете автоматично ще заемат 100% от ширината, така че ако не искате тя да бъде по-малка от текущия контейнер, можете да оставите ширината.
И накрая, ако вашият главен стилов лист няма предварително настроени UL и OL маркери, вие ще искате да ги поставите. Това означава, че трябва да изключите границите, маржовете и подложките на вашия UL. подложка: 0; марж: 0; граница: няма; Ако вече сте нулирали маркера UL, можете да промените полетата, подложката или границата с нещо, което пасва на вашия дизайн.
Вашият последен клас .tablist трябва да изглежда така:
.tablist {style-style: none; височина: 2 дм; подложка: 0; марж: 0; граница: няма; }04 от 06
Редактиране на елементите от списъка на LI
След като сте оформени нерегистрирания си списък, трябва да оформите етикетите на LI в него. В противен случай те ще действат като стандартен списък и всяко преместване в следващия ред без правилно поставяне на раздели.
Първо, настройте собствеността си на стил:
.tablist li {}След това искате да плавате вашите раздели, така че да се подреждат в хоризонталната равнина. плаваш: ляв;
И не забравяйте да добавите известна разлика между разделите, така че да не се слеят заедно. марж-надясно: 0.13em;
Вашите стилове ли трябва да изглеждат така:
.tablist ли {плува: наляво; марж-надясно: 0.13em; }05 от 06
Създаването на разделите изглежда като разделите с CSS 3
За да направите по-голямата част от тежкото повдигане в този стилов лист, насочвам към връзките в несъответстващия списък. Браузърите разпознават, че връзките правят повече на уеб страница, отколкото други тагове, затова е по-лесно да получат по-стари браузъри, за да се съобразят с неща като състоянието на хоста, ако ги прикрепите към етикета за котва (връзки). Затова първо напишете свойствата на вашия стил:
.tablist ли а {}. табл а ли: hover {}Тъй като тези раздели трябва да действат като раздели в приложение, искате цялата област на раздела да бъде кликван, а не само свързаният текст. За да направите това, трябва да преобразувате маркера А от нормалното му " inline " състояние в блоков елемент . езика: блок; (Ако сте заинтересовани да научите повече за разликата, прочетете блок-ниво срещу вградени елементи .)
После, лесен начин да принудите вашите раздели да бъдат симетрични един с друг, но все пак да се подпирате по ширината на текста, е да направите правилната и лявата подложка същата. Използвах свойството за вмъкване на стенография, за да задам горната и долната част на 0 и десния и левия на 1ем. подложка: 0 1ем;
Също така избрах да премахна линка подчертава, така че разделите изглеждат по-малко като връзки. Но ако вашата публика може да бъде объркана с това, оставете тази линия. връзка-декорация: няма;
Чрез поставянето на тънка граница около раздели, това ги прави да изглеждат като раздели. Използвах граничната стенограма за поставяне на границата около четирите страни граница: 0.06м твърдо # 000; След това използвахме собствеността на долната граница, за да я премахнем отдолу. граница дъно: 0;
След това направих някои корекции на шрифта, цвета и фоновия цвят на разделите. Задайте ги на стиловете, които съответстват на вашия сайт. шрифт: удебелен 0.88em / 2em arial, генва, helvetica, sans-serif; цвят: # 000; фон-цвят: #ccc;
Всички гореспоменати стилове трябва да отидат в селектора. Tablist li a, правилото, така че те да повлияят на котвените маркери като цяло. След това, за да направите разделите да изглеждат по-лесни за кликване, трябва да добавите няколко правило .tablist li a: hover.
Харесва ми да променя цвета на текста и фона, за да направите раздела поп, когато мишката над него. фон: # 3cf; Цвят: #fff;
И аз включих още едно напомняне на браузърите, че искам връзката да не остане подчертана. текстови декорация: няма; Друг често използван метод е да включите подчертаната линия, когато сте натиснали мишката върху раздела. Ако искате да направите това, променете го на текст-декорация: подчертайте;
Но къде е CSS 3?
Ако сте обръщали внимание, вероятно сте забелязали, че в стиловия лист не са използвани стилове на CSS 3. Това има предимството да работи във всеки модерен браузър, включително в Internet Explorer. Но това не прави разделите да изглеждат като нещо повече от квадратни кутии. Чрез добавяне на CSS 3 стил на радиус на повикване (и свързаните с него браузъри), можете да направите краищата закръглени, за да изглеждате по-скоро като раздели в папката manila.
Стилът, който трябва да добавите към .tablist li едно правило, е: -webkit-border-top-right-radius: 0.50em; -webkit гранично-горния ляв радиус: 0.50em; -moz гранично-радиус-topright: 0.50em; -moz гранично-радиус-topleft: 0.50em; гранично-горния десен радиус: 0.50em; гранично-горния ляв радиус: 0.50em;
Това са последните правила за стил, които написах:
.tablist li a {дисплей: блок; подложка: 0 1ем; текстови декорация: няма; граница: 0.06м твърдо # 000; граница дъно: 0; шрифт: удебелен 0.88em / 2em arial, генва, helvetica, sans-serif; цвят: # 000; фон-цвят: #ccc; / * CSS 3 елемента * / webkit-border-top-right-radius: 0.50em; -webkit гранично-горния ляв радиус: 0.50em; -moz гранично-радиус-topright: 0.50em; -moz гранично-радиус-topleft: 0.50em; гранично-горния десен радиус: 0.50em; гранично-горния ляв радиус: 0.50em; } .tablist li a: задръжте {background: # 3cf; Цвят: #fff; текстови декорация: няма; }С тези стилове имате меню с табове, което работи във всички основни браузъри и прилича на хубави отпечатани раздели в браузърите, съвместими със CSS 3. Следващата страница ви дава още една опция, която можете да използвате, за да я обличате още повече.
06 от 06
Маркирайте текущия раздел
В HTML, който създадох, UL имаше един елемент от списъка с идентификатор. Това ви позволява да дадете на един LI различен стил от останалите. Най-честата ситуация е да направите текущия раздел да се отличава по някакъв начин. Друг начин да се замислите за това е, че искате да зачеркнете раздели, които не са на живо. Тогава променяте къде е идентификационният номер на различните страници.
Стилът и на #current маркера, така и на #current A: задръжте, така че и двата да са малко по-различни. Можете да промените цвета, цвета на фона, дори и височината, ширината и подложката на този елемент. Направете каквито и да са промени в дизайна.
.tablist li # текущ a {background-color: # 777; цвят: #fff; } .tablist li # текущ a: hover {background: # 39C; }И сте готови! Току-що сте създали меню с табове за уебсайта си.