Innholdsfortegnelse
Hva trenger vi?
En lokal server (jeg har allerede fortalt deg at jeg bruker Xampp)
·
EN kodeditor (bruk sublim tekst 3)
Trinn 1
Jeg vil begynne med å gå til katalogen til min lokale server og lage en ny mappe for å lagre dette prosjektet, jeg vil kalle det "menu_hover" inne i det og legge til en annen for å inneholde css -filene.
FORSTØRRE
FORSTØRRE
Steg 2
Nå i vår kodeditor begynner vi med å legge til en ny html5 -struktur som jeg vil legge til stilarkene som tilsvarer bootstrap fra CDN -adressene deres for ikke å ta plass på serveren vår, jeg vil også legge til et stilark, kalt "style .css "som vil bli lagret i vår" css "-mappe som ble opprettet tidligere …
Senere lagrer vi denne filen som "menu.html" i "menu_hover" -mappen som ble opprettet i trinn 1.
FORSTØRRE
Trinn 3
Nå legger vi til en etikett i vår "menu.html", og vi fastslår hvordan den vil vises på skjermen ved å angi egenskapene i filen style.css …
FORSTØRRE
FORSTØRRE
FORSTØRRE
Trinn 4
Jeg vil at menyen min skal bestå av 4 lenker, for å oppnå dette innenfor etiketten vil jeg legge til 4Med klassen "box_menu" for å identifisere dem vil jeg legge til en økende ID fra "en" til "fire".
FORSTØRRE
Trinn 5
I vår style.css -fil vil vi legge til egenskapene for "box_menu" -klassen og for "ett, to, tre og fire" lag.
Trinn 6
Vi vil begynne å definere oppførselen til "box_menu" klassen ved å etablere en relativ posisjon, husk at i dette tilfellet vil vi ha 4 lenker og at laget som inneholder dem, det vil si opptar 80% av skjermen, så vi vil trenger dem til 4 elementer med box_menu -klassen opptar 100% av tilgjengelig plass i den, for dette tar vi 100% og deler det med antall lenker eller elementer som vi vil plassere, som i dette tilfellet er det 4 da det ville være 100/4 = 25, for så bør klassen "box_menu" ha en bredde på 25%. Vi vil også gi den et 100% stopp og be den flyte til venstre slik at elementene blir sett side om side.
FORSTØRRE
Trinn 7
Senere vil vi definere bakgrunnsfargen som vi skal vise hvert av elementene, i trinn 4 legger vi til id fra en til fire nå i css vil vi definere hvordan hvert av disse lagene vil se ut. for dette vil vi gjøre følgende …
FORSTØRRE
FORSTØRRE
Trinn 8
La oss gå tilbake til dokumentet "menu.html" som vi forlot det i trinn 4, nå vil vi fortsette å legge til ikonene og teksten som menyen vår vil ha. For dette skal vi ikke bruke bilder, men vi skal for å hjelpe oss litt med bootstrap og Vi vil bruke ikoner fra “Font Awesome” -pakken, for dette går vi til nettleseren og får tilgang til nettet https: // fortawesome… .o / Font-Awesome / klikk på “Kom i gang ”-Menyen og gå ned til“ LETTST: BootstrapCDN -delen av MaxCDN ”.
FORSTØRRE
FORSTØRRE
FORSTØRRE
FORSTØRRE
FORSTØRRE
FORSTØRRE
FORSTØRRE
FORSTØRRE
FORSTØRRE
FORSTØRRE
Trinn 9
Ikonene er ganske små, jeg vil øke størrelsen 3 ganger, for dette vil jeg legge til en klasse "fa-3x".
FORSTØRRE
FORSTØRRE
Trinn 10
Nå vil jeg endre css -filen litt for å fullføre effekten, jeg vil begynne med å endre klassen "box_menu" slik at teksten blir justert i midten og gitt den et display = "block";
FORSTØRRE
Trinn 11
Senere skal jeg skrive en klasse for å kontrollere hvordan ikonene vil se ut, der jeg vil definere at de vises i hvitt, at de har en avrundet kant rundt seg og at de har en overgangsanimasjon …
FORSTØRRE
Trinn 12
Når det gjelder tekstene på etiketten
Jeg vil plassere dem i hvitt, og jeg vil redusere opasiteten litt ved å legge til en liten animasjonseffekt nedover også.
FORSTØRRE
Trinn 13
Nå vil jeg definere hvordan elementene våre vil oppføre seg når du svever over det, og jeg vil legge til en liten animasjon for å dempe effekten.
FORSTØRRE
Til slutt Jeg gir deg et .zip med kildekodenHvis du likte denne opplæringen, legg igjen kommentaren din. Hvis det var noe som ikke var klart, vennligst spør meg, hvis du vil ha en opplæring om et bestemt emne, gi meg beskjed …
Jeg håper dette er nyttig for deg, hilsen …
