01 од 06
Како креирати навигацијску таббеду са ЦСС и без слика
Навигација на веб страницама представља облик листе, а навигација са картицама је као хоризонтална листа. Прилично је лако направити хоризонталну навигацију помоћу ЦСС-а, али ЦСС 3 нам даје још неколико алата како би их изгледали још лепшим.
Овај туторијал ће вас одвести кроз ХТМЛ и ЦСС потребне за креирање ЦСС менија са картицама. Кликните на везу да видите како ће изгледати.
Овај табулаторски мени не користи слике , само ХТМЛ и ЦСС 2 и ЦСС 3. Лако се може уређивати да би додали више картица или променили текст у њима.
Бровсер Суппорт
Овај мени картице ће радити у свим главним претраживачима . Интернет Екплорер неће показивати заобљене углове, али у супротном ће показати табулаторе као што су Фирефок, Сафари, Опера и Цхроме.
02 од 06
Напишите листу менија
Сви навигациони менији и табулатори заиста су само неуређена листа. Дакле, прва ствар коју желите да урадите је да напишете неуређену листу веза до места на коме желите да идете навигацијом на картици.
Овај туторијал претпоставља да пишете свој ХТМЛ у текстуалном едитору и да знате гдје да поставите ХТМЛ за свој мени на вашој веб страници.
Напишите своју неуређену листу овако:
- цласс = "таблиц">
- ЦСС 3
- ид = "тренутна"> Табс
- За
- Менији
Приметили сте да код назива две ствари: цласс = "таблист" и ид = "цуррент". Први је потребан . Ако не ставите класу таблица на неуређену листу, табови неће радити. Други је необавезан. Ставите ид = "тренутна" на било који картици коју желите да означите на тој страници. Обично ово користим за означавање странице на којој се налазим, али можете га користити да истакнете најважнију картицу. Или га можете потпуно уклонити.
03 од 06
Почните да уређујете свој стил лист
Можете користити спољашњи стилски стил или интерни стилски лист . На страници менија узорка користи се интерни стилски стил у <хеад> документа.
Прво ћемо стилирати УЛ
Овде користимо таблицу класе у ХТМЛ-у. Уместо да обликујете УЛ ознаку, која би стила све неуређене листе на вашој страници, требало би да стишете само УЛ класу. табела Дакле, први унос у ЦСС-у би требао бити:
.таблист {}Волео бих да ставим завршну завојну групу (}) унапред, па не заборавим касније.
Док користимо неуређену листу са листом за листу табова, али не желимо да се сви меци или бројеви крећу. Дакле, први стил који треба додати јесте. лист-стиле: ноне; Ово говори прегледачу да је то списак без претходно дефинисаних стилова (попут метака или бројева).
Затим, можете подесити висину ваше листе тако да одговара простору који желите да попуните. Одабрао сам 2ем за моју висину, јер је дупло више од стандардне величине слова, и даје око пола ем изнад и испод текста таб. висина: 2ем; Али можете подесити ширину на било коју величину коју желите. УЛ ознаке ће аутоматски преузети 100% ширине, па ако не желите да буде мањи од тренутног контејнера, можете оставити ширину.
Коначно, ако ваш мастер стилски стил нема претходно подешене ознаке за УЛ и ОЛ ознаке, онда ћете их желети ставити. То значи да бисте искључили границе, маргине и паддинг на вашем УЛ-у. паддинг: 0; маржа: 0; граница: нема; Ако већ поништите УЛ ознаку, можете променити маргине, паддинг или границу на нешто што одговара вашем дизајну.
Ваша последња класа класе би требала изгледати овако:
.таблист {лист-стиле: ноне; висина: 2ем; паддинг: 0; маржа: 0; граница: нема; }04 од 06
Уређивање ставки листе ЛИ
Када сте стиснули своју неуређену листу, морате у њега обликовати ознаке ЛИ. У супротном, они ће се понашати као стандардна листа и сваки ће се померити до следеће линије без правилног постављања табова.
Прво, подесите свој стил својства:
.таблист ли {}Онда желите да пливате своје картице тако да се крећу на хоризонталној равни. флоат: лефт;
И не заборавите да додате неку маргину између табова, тако да се не спајају заједно. маргин-ригхт: 0.13ем;
Ваш стилови би требали изгледати овако:
.таблист ли {флоат: лефт; маргин-ригхт: 0.13ем; }05 од 06
Прављење Табс-ова табса са ЦСС-ом 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 компатибилним претраживачима. Следећа страница вам даје још једну опцију коју можете користити да бисте је додатно обучили.
06 од 06
Означите тренутну картицу
У ХТМЛ-у сам створио, УЛ је имао један елемент листе са ИД-ом. Ово вам омогућава да један ЛИ дода другачији стил од осталих. Најчешћа ситуација је да се тренутни таб се издваја на неки начин. Други начин размишљања о томе је то што желите сивати табс који нису живи. Затим промените где је ид на различитим страницама.
Ја обликујем ознаку #туррент А као и #туррент А: ховер ста тако да су обоје мало другачије. Можете променити боју, боју позадине, чак и висину, ширину и падање тог елемента. Учините све промене у вашем дизајну.
.таблист ли # тренутна а {бацкгроунд-цолор: # 777; боја: #ффф; } .таблист ли # цуррент а: ховер {бацкгроунд: # 39Ц; }И готови сте! Управо сте направили таббед мени за вашу веб страницу.