Преглед садржаја
Шта нам је потребно?
Локални сервер (већ сам вам рекао да користим Ксампп)
·
А. уређивач кода (користите узвишени текст 3)
Корак 1
Почећу тако што ћу отићи у директоријум свог локалног сервера и креирати нову фасциклу за складиштење овог пројекта, назваћу је "мену_ховер" унутар ње и додати другу да садржи цсс датотеке.
ЕНЛАРГЕ
ЕНЛАРГЕ
Корак 2
Сада ћемо у нашем уређивачу кода почети додавањем нове хтмл5 структуре у коју ћу додати стилске листове који одговарају боотстрапу са њихових ЦДН адреса како не би заузели простор на нашем серверу, додаћу и стилски лист, назван „стил .цсс "који ће бити ускладиштен у нашој раније креираној фасцикли" цсс "…
Касније ћемо ову датотеку сачувати као "мену.хтмл" у фасцикли "мену_ховер" креираној у 1. кораку.
ЕНЛАРГЕ
Корак 3
Сада ћемо додати ознаку у наш "мену.хтмл" и установит ћемо како ће бити приказана на екрану постављањем њених својстава у датотеци стиле.цсс …
ЕНЛАРГЕ
ЕНЛАРГЕ
ЕНЛАРГЕ
Корак 4
Желим да се мој мени састоји од 4 везе, да бих то постигао унутар ознаке додаћу 4Са класом "бок_мену" да их идентификујем, сваком ћу додати све већи ИД са "један" на "четири".
ЕНЛАРГЕ
Корак 5
У нашој датотеци стиле.цсс додаћемо својства за класу "бок_мену" и за слојеве "један, два, три и четири".
Корак 6
Почећемо да дефинишемо понашање класе "бок_мену" успостављањем релативног положаја, запамтите да ћемо у овом случају имати 4 везе и да слој који их садржи, односно заузима 80% екрана, па ћемо потребно их је да 4 елемента са класом бок_мену заузимају 100% расположивог простора у њој, за то ћемо узети 100% и поделити га са бројем веза или елемената које желимо да поставимо, јер у овом случају постоје 4 тада било би 100/4 = 25, јер би зато наша класа "бок_мену" требало да има ширину од 25%. Такође ћемо му дати 100% заустављање и рећи му да плута лево тако да се елементи виде један поред другог.
ЕНЛАРГЕ
Корак 7
Касније ћемо дефинисати боју позадине са којом ћемо приказати сваки од елемената, у кораку 4 додајемо ид од један до четири, сада ћемо у нашем цсс -у дефинисати како ће сваки од ових слојева изгледати. за ово ћемо урадити следеће …
ЕНЛАРГЕ
ЕНЛАРГЕ
Корак 8
Па, вратимо се на документ "мену.хтмл" који смо оставили у кораку 4, сада ћемо наставити са додавањем икона и текста који ће имати наш мени. За ово нећемо користити слике, већ идемо да бисмо себи мало помогли при покретању система и користићемо иконе из пакета „Фонт Авесоме“, за то идемо у прегледач и приступамо вебу хттпс: // фортавесоме… .о / Фонт-Авесоме / кликните на „Започни ”И спустите се до„ НАЈПЛАШНИЈЕ: БоотстрапЦДН одељак МакЦДН -а ”.
ЕНЛАРГЕ
ЕНЛАРГЕ
ЕНЛАРГЕ
ЕНЛАРГЕ
ЕНЛАРГЕ
ЕНЛАРГЕ
ЕНЛАРГЕ
ЕНЛАРГЕ
ЕНЛАРГЕ
ЕНЛАРГЕ
Корак 9
Иконе су прилично мале, повећаћу њихову величину 3 пута, за ово ћу додати класу "фа-3к".
ЕНЛАРГЕ
ЕНЛАРГЕ
Корак 10
Сада ћу мало изменити цсс датотеку да бих довршио ефекат, почећу тако што ћу изменити класу "бок_мену" поравнавајући текст према центру и дајући му дисплаи = "блоцк";
ЕНЛАРГЕ
Корак 11
Касније ћу написати час за контролу изгледа икона, у којем ћу дефинисати да су приказане у белој боји, да имају заобљену ивицу око себе и да имају анимацију преласка …
ЕНЛАРГЕ
Корак 12
Што се тиче текстова на етикети
Поставит ћу их у бијело и мало ћу смањити непрозирност додавањем благог ефекта анимације према доље.
ЕНЛАРГЕ
Корак 13
Сада ћу дефинисати како ће се наши елементи понашати приликом преласка курсором преко њега и додаћу му малу анимацију да ублажи ефекат.
ЕНЛАРГЕ
На крају Оставићу вам .зип са изворним кодомАко вам се допао овај водич, оставите свој коментар, ако нешто није јасно, питајте ме, ако желите туторијал о одређеној теми, јавите ми …
Надам се да вам је ово корисно, поздрав…
