Satura rādītājs
Kas mums vajadzīgs?
Vietējais serveris (es jau teicu, ka izmantoju Xampp)
·
A koda redaktors (izmantojiet cildenu tekstu 3)
1. darbība
Es sākšu, dodoties uz sava vietējā servera direktoriju un izveidojot jaunu mapi šī projekta glabāšanai, es to saucu par "menu_hover" un pievienoju citu, lai saturētu css failus.
PALIELINĀT
PALIELINĀT
2. solis
Tagad mūsu koda redaktorā mēs sāksim, pievienojot jaunu html5 struktūru, kurai no viņu CDN adresēm pievienošu stila lapas, kas atbilst bootstrap, lai neaizņemtu vietu mūsu serverī, es pievienošu arī stila lapu ar nosaukumu "style" .css ", kas tiks saglabāts iepriekš izveidotajā mapē" css "…
Vēlāk mēs šo failu saglabāsim kā "menu.html" mapē "menu_hover", kas izveidota 1. darbībā.
PALIELINĀT
3. solis
Tagad mēs pievienosim iezīmi mūsu "menu.html" un noskaidrosim, kā tas tiks parādīts ekrānā, iestatot tā īpašības failā style.css …
PALIELINĀT
PALIELINĀT
PALIELINĀT
4. solis
Es vēlos, lai mana ēdienkarte sastāv no 4 saitēm, lai to panāktu, pievienojot 4Ar klasi "box_menu", lai tos identificētu, es katram pievienošu pieaugošu ID no "viens" līdz "četri".
PALIELINĀT
5. solis
Failā style.css mēs pievienosim rekvizītus klasei "box_menu" un slāņiem "viens, divi, trīs un četri".
6. darbība
Mēs sāksim definēt "box_menu" klases uzvedību, nosakot relatīvo pozīciju, atcerieties, ka šajā gadījumā mums būs 4 saites un ka slānis, kas tās satur, tas ir, aizņem 80% no ekrāna, tāpēc mēs tie ir nepieciešami 4 elementiem ar box_menu klasi, kas tajā aizņem 100% pieejamās vietas, šim nolūkam mēs ņemsim 100% un dalīsim to ar saišu vai elementu skaitu, ko mēs vēlamies izvietot, jo šajā gadījumā ir 4 tas būtu 100/4 = 25, tāpēc mūsu klases "box_menu" platumam vajadzētu būt 25%. Mēs arī 100% apstāsimies un liksim peldēt pa kreisi, lai elementi būtu redzami blakus.
PALIELINĀT
7. solis
Vēlāk mēs definēsim fona krāsu, ar kādu mēs parādīsim katru no elementiem, 4. solī mēs pievienojam id no viena līdz četriem tagad mūsu css, mēs definēsim, kā izskatīsies katrs no šiem slāņiem. šim nolūkam mēs darīsim sekojošo …
PALIELINĀT
PALIELINĀT
8. solis
Atgriezīsimies pie dokumenta "menu.html", kā mēs to atstājām 4. darbībā, tagad mēs pievienosim ikonas un tekstu, kas būs mūsu izvēlnē. Šim nolūkam mēs neizmantojam attēlus, bet mēs turpinām lai nedaudz palīdzētu sev ar bootstrap un mēs izmantosim ikonas no “Font Awesome” pakotnes, lai to izdarītu, mēs ejam uz pārlūkprogrammu un piekļūstam tīmeklim https: // fortawesome… .o / Font-Awesome / noklikšķiniet uz “Sākt darbu ”Izvēlnē un dodieties uz sadaļu“ VIEGLĀKĀ: MaxCDN sadaļa BootstrapCDN ”.
PALIELINĀT
PALIELINĀT
PALIELINĀT
PALIELINĀT
PALIELINĀT
PALIELINĀT
PALIELINĀT
PALIELINĀT
PALIELINĀT
PALIELINĀT
9. solis
Ikonas ir diezgan mazas, es to palielināšu 3 reizes, šim nolūkam es pievienošu klasi "fa-3x".
PALIELINĀT
PALIELINĀT
10. solis
Tagad es nedaudz modificēšu css failu, lai pabeigtu efektu, es sākšu ar klases "box_menu" modificēšanu, pielīdzinot tekstu centram un piešķirot tam displeju = "bloks";
PALIELINĀT
11. solis
Vēlāk es uzrakstīšu klasi, lai kontrolētu, kā izskatīsies ikonas, un es definēšu, ka tās tiek attēlotas baltā krāsā, ka tām ir noapaļota mala un ka tām ir pārejas animācija …
PALIELINĀT
12. solis
Attiecībā uz tekstiem uz etiķetes
Es ievietošu tos baltā krāsā un nedaudz samazināšu necaurredzamību, pievienojot arī nelielu lejupvērstu animācijas efektu.
PALIELINĀT
13. solis
Tagad es definēšu, kā mūsu elementi uzvedīsies, virzot kursoru virs tā, un pievienošu tam nelielu animāciju, lai mīkstinātu efektu.
PALIELINĀT
Beigās Es atstāšu jums .zip ar avota koduJa jums patika šī apmācība, atstājiet savu komentāru, ja kaut kas nebija skaidrs, jautājiet man, vai vēlaties pamācību par konkrētu tēmu, dariet man zināmu …
Es ceru, ka tas jums noderēs, ar cieņu…
