Навигација на веб страницама представља облик листе, а навигација са картицама је као хоризонтална листа. Прилично је лако направити хоризонталну навигацију помоћу ЦСС-а, али ЦСС 3 нам даје још неколико алата како би их изгледали још лепшим.
Овај туторијал ће вас одвести кроз ХТМЛ и ЦСС потребне за креирање ЦСС менија са картицама. Кликните на везу да видите како ће изгледати.
Овај табулаторски мени користинема слика, само ХТМЛ и ЦСС 2 и ЦСС 3. Може се лако уредити како би додали више картица или променили текст у њима.
Бровсер Суппорт
Овај мени картице ће радитисве главне прегледаче. Интернет Екплорер неће приказивати заобљене углове, али у супротном ће приказати картице као Фирефок, Сафари, Опера и Цхроме.
Напишите листу менија
Сви навигациони менији и табулатори заиста су само неуређена листа. Дакле, прва ствар коју желите да урадите је да напишете неуређену листу веза до места на коме желите да идете навигацијом на картици.
Овај туторијал претпоставља да пишете свој ХТМЛ у текстуалном едитору и да знате гдје да поставите ХТМЛ за свој мени на вашој веб страници.
Напишите своју неуређену листу овако:
цласс = "таблиц">ЦСС 3ид = "тренутна"> ТабсЗаМенији
цласс = "таблица"иид = "тренутна".Прва је потребан. Ако не ставитетабелакласе на вашој неуређеној листи, табови неће радити. Други је необавезан. Ставиид = "тренутна"на било ком картици коју желите да означите на тој страници. Обично ово користимо да истакнемо страницу на којој се налазимо, али можете је користити да истакнете најважнију картицу. Или га можете потпуно уклонити.
Почните да уређујете свој стил лист
Можете користити спољашњи стилски стил или интерни стилски лист. На страни менија за узорке користи се интерни стилски стил
документа.Прво ћемо стилирати УЛ
Овде користимо класетабела у ХТМЛ-у. Уместо да обликујете УЛ ознаку, која би стила све неуређене листе на вашој страници, требало би да стишете само УЛ класу.табела Дакле, први унос у ЦСС-у би требао бити:
.таблист {}
Желимо да ставимо завршну завојну групу (}) унапред, па нећемо заборавити касније.
Док користимо неуређену листу са листом за листу табова, али не желимо да се сви меци или бројеви крећу. Дакле, први стил који треба додати јесте.лист-стиле: ноне; Ово говори прегледачу да је то списак без претходно дефинисаних стилова (попут метака или бројева).
Затим, можете подесити висину ваше листе тако да одговара простору који желите да попуните. Изабрали смо 2ем за нашу висину, јер је дупло више од стандардне величине слова, и даје око пола ем изнад и испод текста таб. -висина: 2ем; Али можете подесити ширину на било коју величину коју желите. УЛ ознаке ће аутоматски преузети 100% ширине, па ако не желите да буде мањи од тренутног контејнера, можете оставити ширину.
Најзад, ако ваша главна табела за стил нема унапред подешене ознаке за УЛ и ОЛ ознаке, то ће вам бити потребно. Ово значи да бисте искључили границе, маргине и паддинг на вашем УЛ-у. паддинг: 0; маржа: 0; граница: нема; Ако већ поништите УЛ ознаку, можете променити маргине, паддинг или границу на нешто што одговара вашем дизајну.
Ваша последња класа класе би требала изгледати овако:
.таблист {лист-стиле: ноне; висина: 2ем; паддинг: 0; маржа: 0; граница: нема; }
Уређивање ставки листе ЛИ
Када сте стиснули своју неуређену листу, морате у њега обликовати ознаке ЛИ. У супротном, они ће се понашати као стандардна листа и сваки ће се померити до следеће линије без правилног постављања табова.
Прво, подесите свој стил својства:
.таблист ли {}
Онда желите да пливате своје картице тако да се крећу на хоризонталној равни. флоат: лефт;
И не заборавите да додате неку маргину између табова, тако да се не спајају заједно. маргин-ригхт: 0.13ем;
Ваш стилови би требали изгледати овако:
.таблист ли {флоат: лефт; маргин-ригхт: 0.13ем; }
Прављење Табс-ова табса са ЦСС-ом 3
Да бисмо направили већи део тешког дизања на овом стилесхеету, циљали смо на линкове унутар неуређене листе. Бровсери препознају да линкови учине више на веб страници него друге ознаке, тако да је лакше старијим претраживачима да се придржавају ствари попут стања лебдења ако их прикључите на сидрену ознаку (линкове). Зато прво напишите свој стил својства:
.таблист ли а {} .таблист ли а: ховер {}
Зато што би ове картице требале деловати као табови у апликацији, желите да се читава област картице може кликнути, а не само повезан текст. Да бисте то урадили, морате претворити ознаку А из њеног нормалног "инлине" стања у блок елемент. дисплеј блок; (Ако сте заинтересовани да знате више о разлици, прочитајте Блоцк-Левел вс. Инлине Елементс.)
Затим, једноставан начин да се ваше табице симетрично међусобно, али и даље је флексибилно да се прилагоди ширини текста, да се десно и лево облагање подесе на исти начин. Користили смо обележје за скрипте за постављање горње и доње стране на 0 и десно и лево на 1ем. паддинг: 0 1ем;
Такође смо одлучили да уклонимо везу која је наглашена, тако да табови изгледају мање као везе.Али, ако се ваша публика може збунити тиме, оставите ову линију. линк-декорација: нема;
Постављањем танке ивице око табова, чини их да изгледају као табови. Користили смо граничну скраћену имовину да поставимо границу на све четири стране граница: 0.06ем солид # 000; И онда је користио својство граничног дна како би га уклонио са дна. бордер-боттом: 0;
Затим смо направили одређена подешавања фонта, боје и боје позадине картица. Поставите их на стилове који одговарају вашој веб локацији. фонт: болд 0.88ем / 2ем ариал, генева, хелветица, санс-сериф; боја: # 000; бацкгроунд-цолор: #ццц;
Сви горе наведени стилови би требали ићи у селектор.таблист ли а, правило тако да они утичу на ознаке сидра уопште. Затим, како би се табулатори појавили на више кликова, требало би додати неколико државних правила.таблист ли а: ховер.
Желимо да променимо боју текста и позадине како би се језичак појавио када га превучете мишем. бацкгроунд: # 3цф; боја: #ффф;
И укључили смо још један подсећај на претраживаче да желимо да линк не буде подвучен. текст-декорација: нема; Још један уобичајени метод је да поново подесите подвлачење када померите мишем преко картице. Ако желите то учинити, промените то текст-декорација: подвлачи;
Али где је ЦСС 3?
Ако сте обраћали пажњу, вероватно сте приметили да у стилу не постоји стил ЦСС 3. Ово има предност у раду у било ком модерном претраживачу, укључујући и Интернет Екплорер. Али то не чини да табови изгледају ништа више од квадратних кутија. Додавањем стуба за позив у стилу ЦСС 3 (и повезаним позивима за претраживаче) можете направити округле, да бисте више изгледали као табови у фолдеру манила.
Стилес које треба додати у .таблист ли а правило су: -вебкит-гранични-топ-десни-радијус: 0.50ем; -вебкит-гранични-топ-лијеви радијус: 0.50ем; -моз-граница-радиус-топригхт: 0.50ем; -моз-граница-радиус-топлефт: 0.50ем; гранични топ-десни-радијус: 0.50ем; гранични горњи леви радијус: 0.50ем;
То су правила финалног стила коју смо написали:
.таблист ли а {дисплаи: блоцк; паддинг: 0 1ем; текст-декорација: нема; граница: 0.06ем солид # 000; бордер-боттом: 0; фонт: болд 0.88ем / 2ем ариал, генева, хелветица, санс-сериф; боја: # 000; бацкгроунд-цолор: #ццц; / * ЦСС 3 елементи * / вебкит-гранични-топ-десни-радијус: 0.50ем; -вебкит-гранични-топ-лијеви радијус: 0.50ем; -моз-граница-радиус-топригхт: 0.50ем; -моз-граница-радиус-топлефт: 0.50ем; гранични топ-десни-радијус: 0.50ем; гранични горњи леви радијус: 0.50ем; } .таблист ли а: ховер {бацкгроунд: # 3цф; боја: #ффф; текст-декорација: нема; }
Са овим стиловима имате таббед мени који ради у свим главним претраживачима и изгледа као лепо одштампане картице у ЦСС 3 компатибилним претраживачима. Следећа страница вам даје још једну опцију коју можете користити да бисте је додатно обучили.
Означите тренутну картицу
У ХТМЛ-у који смо креирали, УЛ је имао један елемент листе са ИД-ом. Ово вам омогућава да један ЛИ дода другачији стил од осталих. Најчешћа ситуација је да се тренутни таб се издваја на неки начин. Други начин размишљања о томе је то што желите сивати табс који нису живи. Затим промените где је ид на различитим страницама.
Стајамо и ознаку #туррент А, као и #цуррент А: ховер ста тако да су обоје мало другачије. Можете промијенити боју, боју позадине, чак и висину, ширину и падање тог елемента. Учините све промене у вашем дизајну.
.таблист ли # тренутна а {бацкгроунд-цолор: # 777; боја: #ффф; } .таблист ли # цуррент а: ховер {бацкгроунд: # 39Ц; }
И готови сте! Управо сте направили таббед мени за вашу веб страницу.
