Naredite CSS meni, ki pade iz glavnega
Večina ljudi, ki imajo računalnike, se vedno poskuša povezati z internetom. Po tem lahko vsak uporabnik obišče različne strani kot uporabnik. To je lahko iskanje informacij, zabava, trening, igre, klepet na forumih in še več.
Z dostopom do strani spletnega mesta uporabnik vidi njegovo vsebino. To je kot vsebina knjige, ki jo boste prebrali. Vsebina je sestavljena iz različnih nizov povezav, ki uporabnika prevajajo na druge strani vira ali celo na druga spletna mesta. Takšne povezave uporabnikom pomagajo pri krmarjenju po internetu. Povezave so združene v ločene bloke, ki predstavljajo meni mesta.
Funkcionalnost katerega koli vira je v veliki meri odvisna od tega, kateri meni je uporabljen. Meni menija ima lahko drugačno obliko, ima vodoravno ali navpično usmeritev, ki se nahaja na dnu, zgoraj ali ob strani, je skrit, odprt, spusten, raztegnjen.
Horizontalni CSS spustni meni
Horizontalni spustni meni se uporablja za organiziranje navigacije. strukturo mesta. Ne smete zlorabiti števila ravni za vlaganje, ne sme biti več kot dva. Z več ravneh uporabnikov bo veliko težje najti potrebne informacije. Nato podrobneje preučimo način ustvarjanja menija.
Predstavljajte si CSS meni, ki pade iz glavnega horizontalnega bloka. Otežimo nalogo in naredimo CSS spustni meni med lebdenjem. Obstajati mora nekakšen glavni horizontalni blok s povezavami, ki predstavljajo elemente menija. Po premikanju miške nad te točke se morajo odpreti dodatne navigacijske točke.
Za ustvarjanje spustnega menija CSS potrebujete:
- Datoteka HTML;
- CSS datoteka;
- sliko za ozadje.
Slika za ozadje je pomožni element za izboljšanje oblikovanja in eleganten meni.
Ustvarite datoteko html
Strani katere koli strani so lahko statične ali dinamične. Statična stran spletnega mesta, prikazana v brskalniku, je prikazana v obliki, v kateri je bila prvotno ustvarjena. Dinamična stran se ustvari, ko se odpre v brskalniku iz ločenih strani vtičnika in dodatnega izpisovanja podatkov iz baze podatkov. Toda v vsakem primeru, če odprete stran z izvorno kodo prek brskalnika, se prikaže HTML stran označbe hiperteksta. Če želite ustvariti meni, morate razviti stran HTML in jo shraniti v datoteko HTML. Ustvarite c-meni, ki na ta način pade iz glavnega. HTML strani je mogoče ustvariti v vseh urejevalnikih besedila, vendar je bolje uporabiti specializirane: Notepad ++ ali Adobe Dremweaver CSS. Odprite prazno stran v urejevalniku, vnesite potrebno kodo in jo shranite pod imenom myindex.html. Komentarje lahko dodate neposredno v kodo, med posebne oznake. ki se v ta namen uporabljajo v HTML-ju.
Postavitev strani pri ustvarjanju spustnega horizontalnega menija CSS se bo razlikovala od običajnega standardnega menija, saj so potrebni elementi seznama
- ali
- .
HTML koda
Opozoriti je treba, da se v HTML vse konstrukcije med <> oklepaji imenujejo oznake. Oznake so lahko enojne in parne. Oznaka para mora vsebovati dva para oklepajev <>, v drugem pa strukturo, ki se začne z poševnico /. Pri seznanjeni oznaki je prva oznaka prva, druga pa zaprta.
Ustvari kodo:
Tako lahko ustvarite neskončno število predmetov in podmeni. Na samem koncu zaprite vse seznanjene oznake.
Ustvarjanje datoteke CSS
Datoteka je bila povezana z datoteko HTML. styles style.css potreben ne samo za pravilno pozicioniranje menija na spletni strani, temveč tudi za lep izgled menija, ustvarjanje edinstvene spletne strani. Datoteka CSS se ustvari v istem urejevalniku kot datoteka HTML, vendar bo za razliko od strani HTML uporabnik videl samo rezultat slogne datoteke na strani, ki jo gledate. Poleg tega se pri dodajanju komentarjev na CSS uporablja oznaka / * Comment ... * / construct.
Koda CSS
Ustvari kodo:
/ * Spustni meni za CSS * /
telo {/ * Slog za telo spletnega mesta * /
ozadje: # 0814da; / * Barva ozadja * /
margin: 0; / * Zunanja podloga * /
oblazinjenje: 0; / * Notranje polnilo * /
družina pisav: "Trebuchet MS", Arial, Helvetica, sans-serif; / * Družina pisav * /
}
.primer {/ * celotnega menijskega bloka * /
položaj: relativna; / * Pozicioniranje glede na izvor * /
ozadje: # ebecf7 url (../ images / vanbackground.jpg); / * Ozadje s sliko za celoten meni * /
širina: 525px; / * Širina celotnega menijskega bloka * /
višina: 384px; / * Višina celotnega menijskega bloka * /
meja: 1px # 000 trdna; / * Debelina in slog obrobe celotnega menijskega bloka * /
margin: 21px auto;
oblazinjenje: 16px;
}
/ * slogov za meni * /
.navigator, .navigator ul {/ * Slog bloka z neprebranim seznamom * /
list-style: noben; / * Prekliči oznake za seznam * /
margin: 0;
oblazinjenje: 0;
}
.navigator {/ * Slog bloka za navigacijo * /
položaj: relativna;
}
.navigator ul {/ * Neoštevilčen slog seznama * /
višina: 0; / * Višina * /
levo: 0; / * Levo * /
overflow: hidden; / * Del bloka je skrit, če se ne prilega popolnoma v predvideni prostor * /
položaj: absolutno; / * Popolno pozicioniranje * /
vrh: 47px; / * Zgoraj * /
}
.navigator li {/ * Slog neizvedenih elementov * /
plovec: levo; / * Zavijanje na levi strani * /
položaj: relativna;
}
.navigator li a {/ * Slog seznama elementov seznama * /
barva ozadja: # 7c75b7; / * Barva ozadja * /
meja: 1px trdna # 7c75b7;
barva: #fbfbff;
prikaz: blok; / * Prikaži po blokih. * /
velikost pisave: 15px; / * Nastavite velikost pisave * /
line-height: 34px; / * Razmik med vrsticami * /
oblazinjenje: 6px 21px;
dekoracija besedila: nobena; / * Besedilo brez oblikovanja * /
prehod: 0,6s;
}
.navigator li: hover> a {/ * Slog elementov na neoštevilčnem seznamu med lebdenjem * /
ozadje: # 8fcb38;
border-color: # 7c75b7;
barva: #fbfbff;
}
.navigator li: hover ul.vipadnoe {/ * Spustni meni s stilom Hover * /
višina: avto;
širina: 181px;
}
.navigator ul li {/ * Seznam in elementi sloga * /
-moz-prehod: 0,7s;
}
.navigator li ul li {/ * Style-list-item-item * /
-moz-prehod-zakasnitev: 1s;
}
.navigator li: hover ul li {/ * slog miške *
}
.navigator ul li {/ * Seznam slog-element-link * /
ozadje: # 7c75b7;
border-color: # 7c75b7;
barva: #fbfbff;
višina vrstice: 2px;
-moz-prehod: 1.7s;
-o-prehod: 1.7s;
-webkit-prehod: 1.7s;
prehod: 1.7s;
}
.navigator li: hover ul li a {/ * Seznam elementov-list-item-link *
line-height: 36px;
}
.navigator ul li a: hover {/ * Seznam-element slog in hover povezava * /
ozadje: # 8fcb39;
ozadje-slika: rgba (41,137,216,0.5);}
Ko so datoteke myindex.html in style.css ustvarjene, jih je treba namestiti v ločeno mapo. Za lažje delo v mapi »Moji dokumenti« ustvarimo ločeno predstavitveno mapo, v njej pa mapo CSS, kjer postavimo datoteko style.css in mapo slik, kjer postavimo sliko ozadja, določeno v datoteki slog. Za datoteko myindex.html ne ustvarjamo druge ločene mape in jo postavimo v predstavitveno mapo, ki je bila prvotno ustvarjena. Zdaj, ko odprete datoteko myindex.html v brskalniku, lahko vidite horizontalni meni CSS, ki se prikaže, ko se premikate. To je vse.
Na enak način se na CSS-ju ustvari navpični spustni meni, vendar bo za to potrebno razviti nekoliko drugačno slogsko datoteko.