Horisontal stolpe med sveveeffekt i html5, css3 og bootstrap

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

Som du vil se i css har jeg lagt til en "bakgrunnsfarge: grønn", dette er bare for veiledning for å se størrelsen og posisjonen til overskriften på skjermen. Du kan leke med størrelser, skrift og andre i henhold til din preferanser … ja akkurat nå ser vi det i nettleseren vår, vi ville ha noe slikt …

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

Dette vil gi oss følgende resultat:

FORSTØRRE

Som du kan se har vi allerede avgrenset mellomrommene til hvert element og bakgrunnsfargen, du kan bruke fargekodene etter din smak, i dette tilfellet da det ikke er et nettsted med et bestemt tema, men en test jeg har brukt disse som en demonstrasjon …

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

Jeg vil kopiere CDN -lenken til Style Awesome -stilarket og lime det inn i overskriften på dokumentet "menu.html"

FORSTØRRE

Med dette kan vi nå bruke Font Awesome -ikonene i vårt design, men nå må vi velge hvilke ikoner vi skal plassere, for dette går vi tilbake til nettstedet deres og finner "Ikoner" -menyen.

FORSTØRRE

Vi søker i den omfattende listen etter ikonet som interesserer oss, og vi klikker på det.

FORSTØRRE

Når vi klikker, tar det oss til et annet vindu der vi kan se koden for å sette inn ikonet i designet vårt.

FORSTØRRE

Vi bare kopierer den og går til vår "menu.html" og limer den inn isom følger …

FORSTØRRE

FORSTØRRE

Vi vil også legge til et navn under det som er sentrert …

FORSTØRRE

La oss sjekke hvordan det ser ut i nettleseren vår …

FORSTØRRE

Vi ser at vi allerede har lagt til et ikon og en sentrert tekst, så vi gjentar dette trinnet for de resterende 3 elementene.

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

Når dette er gjort kan vi si at vi er ferdig med å designe effekten, nå trenger vi bare å legge til koblingene slik du vil, jeg kommenterer at denne effekten også kan brukes til å plassere bilder som har beskrivende tekst under seg, som f.eks. For eksempel, en profesjonell portefølje, et galleri eller en produktkatalog, alt er overlatt til fantasien din …
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 …

Fil med kildekoden … Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng