01 од 06
Како да креирате навигација со јазичиња со CSS и без слики
Навигацијата на веб-страници е форма на листа, а навигацијата со јазичиња е како хоризонтална листа. Доволно е лесно да се креира хоризонтална навигација со CSS, но CSS 3 ни дава уште неколку алатки за да ги направиме уште поубави.
Ова упатство ќе ве однесе низ HTML и CSS потребни за да креирате мени со табови со CSS. Кликнете на таа врска за да видите како ќе изгледа.
Ова мени со јазичиња не користи слики , само HTML и CSS 2 и CSS 3. Тоа може лесно да се уредува за да додадете повеќе јазичиња или да го промените текстот во нив.
Поддршка на прелистувачот
Ова мени за јазичиња ќе работи во сите главни пребарувачи . Интернет-истражувачот нема да ги прикаже заоблените агли, но во спротивно ќе прикаже табулатори како Firefox, Safari, Opera и Chrome.
02 од 06
Напишете ја листата со менија
Сите мени за навигација и јазичиња се навистина неподреден список. Значи, првото нешто што сакате да направите е да напишете некоректна листа на линкови до местото каде што сакате вашата навигација со јазичиња да оди.
Ова упатство претпоставува дека пишувате HTML во текстуален уредувач и дека знаете каде да го поставите HTML за менито на вашата веб-страница.
Напишете ја Вашата неподредена листа вака:
- класа = "табела">
- CSS 3
- id = "current"> Tabs
- За
- Менија
Ќе забележите дека кодот повикува две работи: class = "tablist" и id = "current". Првиот е потребен . Ако не ја ставите класата на табела на вашата неподредена листа, јазичињата нема да работат. Вториот е опционален. Ставете го id = "актуелен" на кој било табут што сакате да го означите на таа страница. Обично го користам ова за да ја нагласам страницата на која сум вклучена, но можете да ја користите за да го потенцирате најважниот таб. Или можете да го отстраните целосно.
03 од 06
Започнете со уредување на вашиот стилски лист
Можете да користите или надворешен стилски лист или внатрешен лист за стил . Страницата со мени на примерок користи внатрешен стилски лист во
на документот.Прво ќе го стимулираме самиот Ул
Ова е местото каде што ние ги користиме табелата за класа во HTML. Наместо да го ставите UL тагот, кој ќе ги стимулира сите неподредени листи на вашата страница, треба да стилувате само UL класа. Табела Значи првиот запис во вашиот CSS треба да биде:
.tablist {}Сакам да ја ставам крајната завеса () пред време, па затоа не го заборавам подоцна.
Додека ние користиме неуредна таг листа за менито со мени на таблата, но не сакаме да се прилепиме куршуми или броеви. Така, првиот стил што треба да го додадете е. листа-стил: нема; Ова му кажува на прелистувачот дека додека е листа, тоа е листа без претходно определени стилови (како куршуми или бројки).
Потоа, можете да ја поставите висината на вашата листа да одговараат на просторот што сакате да го пополните. Избрав 2em за мојата висина, бидејќи тоа е двојно повеќе од стандардната големина на фонтот, и дава околу половина em над и под текстот на јазичето. висина: 2ем; Но, можете да ја поставите ширината на која било големина што сакате. UL-ознаките автоматски ќе заземаат 100% од ширината, па освен ако сакате да биде помала од тековната контејнер, можете да ја оставите ширината надвор.
Конечно, ако вашиот главен стилски лист нема претходно поставување за UL и OL таговите, ќе сакате да ги ставите. Ова значи дека треба да ги исклучите границите, маргините и пропагирање на вашиот UL. Соочи: 0; маргина: 0; граница: нема; Ако веќе ја ресетирате таг на UL, можете да ги промените маргините, базната рамка или границата на нешто што одговара со вашиот дизајн.
Вашата последна .tablist класа треба да изгледа вака:
.tablist {листа-стил: нема; висина: 2ем; Соочи: 0; маргина: 0; граница: нема; }04 од 06
Уредување на елементите на ЛИ листата
Откако сте ја опишале вашата непоправлива листа, треба да ги наместите ЛИ таговите во неа. Инаку, тие ќе дејствуваат како стандардна листа и секој чекор кон следната линија без правилно поставување на јазичињата.
Прво, поставете свој стил:
.tablist li {}Тогаш сакате да плови вашите јазичиња, така што тие линија на хоризонтална рамнина. плови: лево;
И не заборавајте да додадете малку маргина помеѓу табовите, така што тие не се спојат заедно. маргина-десно: 0.13em;
Вашите ли стилови треба да изгледаат вака:
.tablist li {float: лево; маргина-десно: 0.13em; }05 од 06
Изведба на јазичиња слични на таблата со CSS 3
За да го направите поголемиот дел од тешките кревети во овој стилски лист, ги насочувам линковите во рамки на неподреден список. Прелистувачите препознаваат дека линковите прават повеќе на веб-страница од другите ознаки, па затоа е полесно да постарите постари пребарувачи да се усогласат со нештата како што се државите за лебди ако ги прикачите на ознаката за сидро (линкови). Затоа, прво напишете ги својствата на стилот:
.tablist li a {} .tablist li a: hover {}Бидејќи овие јазичиња треба да дејствуваат како табови во некоја апликација, сакате целата област на јазичето да биде кликарана, а не само поврзаниот текст. За да го направите ова, треба да ја претворите ознаката А од нормалната " inline " состојба во блок елемент . дисплеј: блок; (Ако сте заинтересирани да дознаете повеќе за разликата, прочитајте Block-Level vs. Inline Elements .)
Потоа, лесен начин да ги натерате вашите јазичиња да бидат симетрични еден со друг, но сепак флекс за да се вклопи во ширината на текстот е да го направите десното и левото полнење исто. Го користев коморот за стенографија за да го поставам горниот и долниот дел на 0 и десно и лево до 1em. Соочи: 0 1ем;
Јас, исто така, избрав да ја отстранам врската подвлекува, така што јазичињата изгледаат помалку како линкови. Но, ако вашата публика може да биде збунета од тоа, оставете ја оваа линија. врска-декорација: нема;
Со ставање на тенка граница околу јазичиња, тоа ги прави да изгледаат како табови. Го користев граничното стенографско имотот за да ја ставам границата околу сите четири граници: 0.06м солидна # 000; И потоа го користеше имотот на граничниот дно за да го отстрани од дното. граничното дно: 0;
Потоа направив некои прилагодувања на фонтот, бојата и бојата на позадината на јазичињата. Поставете ги овие на стилови кои одговараат на вашиот сајт. фонт: задебелен 0.88em / 2em arial, geneva, helvetica, sans-serif; боја: # 000; боја на позадина: #ccc;
Сите горенаведени стилови треба да одат во селекторот .tablist li a, правило, така што тие ќе влијаат на ознаките за сидро воопшто. Потоа, за да ги направат јазичињата повеќе кликибилни, треба да додадете неколку правила на државата. Tabablist li a: hover.
Сакам да ја променам бојата на текстот и позадината за да го направам табулаторот кога ќе го глувчето над него. позадина: # 3cf; боја: #fff;
И јас вклучив уште еден потсетник на прелистувачите дека сакам врската да не остане подвлечена. текст-декорација: нема; Друг вообичаен метод е да го вклучите потсетникот кога ќе го глушете јазичето. Ако сакате да го направите тоа, промените го во текст-декорација: подвлечете;
Но, каде е CSS 3?
Ако сте биле обрнувајќи внимание, најверојатно сте забележале дека нема стихови од стилот CSS 3 што се користат во листот со стил. Ова ја има предноста да работи во секој модерен прелистувач, вклучувајќи го и Internet Explorer. Но, тоа не прави таблата да изгледаат како ништо повеќе од квадратни кутии. Со додавање на граничен радиус на повик во стилот CSS 3 (и неговите поврзани повици за специфични прелистувачи) можете да ги направите рабовите заоблени, да изгледаат повеќе како јазичиња во папката со манила.
Стилите што треба да ги додадете во. Правило се: -webkit-border-top-right-radius: 0.50em; -webkit-граница-врв-лев радиус: 0.50em; -moz-граница-радиус-topright: 0.50em; -moz-граница-радиус-долу: 0.50em; граница-горен десен-радиус: 0.50em; граница-горен лев радиус: 0.50em;
Ова се финалните правила што ги напишав:
.tablist li a {приказ: блок; Соочи: 0 1ем; текст-декорација: нема; граница: 0.06 солидна # 000; граничното дно: 0; фонт: задебелен 0.88em / 2em arial, geneva, helvetica, sans-serif; боја: # 000; боја на позадина: #ccc; / * CSS 3 елементи * / webkit-граница-горе-десен-радиус: 0.50em; -webkit-граница-врв-лев радиус: 0.50em; -moz-граница-радиус-topright: 0.50em; -moz-граница-радиус-долу: 0.50em; граница-горен десен-радиус: 0.50em; граница-горен лев радиус: 0.50em; } .tablist li a: hover {позадина: # 3cf; боја: #fff; текст-декорација: нема; }Со овие стилови, имате јазиче мени кое функционира во сите главни пребарувачи и изгледа како убаво отпечатено јазиче во прелистувачите во согласност со CSS 3. Следната страница ви дава уште една опција што можете да ја користите за да ја облекуваат уште повеќе.
06 од 06
Означете го тековниот лист
Во HTML што го создадов, UL имаше еден елемент од листата со лична карта. Ова ви овозможува да дадете еден LI поинаков стил од останатите. Најчестата ситуација е да се направи сегашниот таб на некој начин издвоен. Друг начин да се размислува за ова е дека сакате да ги избришете табулите што не се живеат. Потоа, променете каде е id на различни страници.
Јас ги стимулирам обележјата #Turrent A, како и #current A: лебдат sta, така што и двете се малку поинакви. Можете да ја промените бојата, бојата на позадината, дури и висината, ширината и дополнувањето на тој елемент. Направете какви било промени има смисла во вашиот дизајн.
.tablist li # тековно {background-color: # 777; боја: #fff; } .tablist li # струја a: hover {позадина: # 39C; }И ќе завршиш! Само што создадовте мени со јазичиња за вашиот веб-сајт.