Számítógépek, Programozás
Függőleges CSS menü: csináld magad
Néhány webmester nem akar időt tölteni a fejlődő nulláról egyszerű elemekből, amelyek már léteznek. Úgy vélik, hogy nincs értelme az idejét vesztegeti a valamit, ami már régóta ott. Sőt, azok számára, akik csak mastering HTML és CSS, fontos, hogy magának egy csomó dolog, hogy van egy jó megértése munkájukat. Ez vonatkozik a menüt. Hozzon létre egy függőleges CSS menük. Ez alapulhat csupán HTML és CSS nélkül a Javascript használatát és JQuery. Minden menü egy lista a linkek, melyek oldalt az oldal.
alaplépéseket
Ahhoz, hogy hozzon létre egy egyszerű függőleges menü CSS, amire szükség van a következő lépéseket:
1. Először is, hogy a hivatkozások listáját (a kód HTML), melyek közül a menü lesz. Adj nekik egy nevet, például a következők:
- Home.
- Cégünk története.
- Útmutató.
- Services.
- Kapcsolatok.
2. Ezután Styling linkek, ahogy szeretné segítségével CSS.
Írunk a HTML kódot, tartsa my_Vmenu.html fájlt, és látni, hogyan fog kinézni a böngészőben:
Ez az alapja (váz) étlapunkról. # 1, # 2, stb kell cserélni hivatkozunk. Nézze meg, hogyan néz ki egy böngészőben. A kép nem fog tetszeni. Most azt kell leírni az elemek a stílus, hogy egy teljes függőleges CSS menük.
Leírás stílusok
Hozzon létre egy fájlt my_Vmenu.css, amelyek meghatározzák, amire szeretné javítani a megjelenése egy ilyen fontos eleme a helyén. Itt a kód, bevezetése, amelyek újjáéleszteni a függőleges CSS menük. Ez, és írja az új fájlt, majd elvisszük közelebbről értelmében a fő vonalak kapnak.
RÉSZLETES LEÍRÁSA használt stíluslap
Most tekintsük a részleteket a CSS függőleges menü:
ul # my_Vmenu - az általános stílus a teljes listát.
ul # my_Vmenu li a - stílus közötti kapcsolatok a címke li.
ul # my_Vmenu li a: hover - egy leírást a megfontolás tárgyát képező menüpontok egy időben, amikor az egyik lebeg az emberek felett.
ul # my_Vmenu li fesztávú - szöveges leírás (cím menü).
Ne feledje, hogy a fájlok my_Vmenu.css my_Vmenu.html és meg kell őrizni a könyvtárban. Azonban lehetnek más könyvtárakban, de akkor fontos, hogy regisztrálják magukat my_Vmenu.html fájl elérési útját my_Vmenu.css. Legyen óvatos, mert az újonnan erre a problémára gyakran.
Stílus közé kell csatlakoztatni a fej címkék egy html-fájlt. menu_1.png és menu_2.png - ez a kép a kép menüpont a normális állapot, és lebeg.
Sokkal jobb, hogy mentse a képeket egy külön mappát a képek, nevezd meg my_images, de majd állítsa be a CSS kódot. Írja ahol ezek a képek jelennek meg, ők ebben a könyvtárban: url (my_images / menu_1.png) és az url (my_images / menu_2.png).
A többi ismert tulajdonságaival CSS kódot, könnyen megértik. Ezek határozzák meg a megjelenését a menüt. Ez könnyű észrevenni, hogy a szélessége és magassága a megadott tételeket az azonos elemek a normális állapot, és ha lebeg az egeret őket. Betűméret 18px, padding meghatározza a behúzás különböző oldalain helységnevek. kijelző segítségével beállíthatja a kijelző egység beállítani a szélesség és padding.
A függőleges menü
Mint látható, a függőleges CSS menük, hogy könnyen. Az adatok alapján a tudás lesz képes arra, hogy ez a szép és vonzó a látogatók számára, hogy a weboldal! Használd a fantáziád, majd egy elegáns menü kiegészítése a webhelyen.
Similar articles
Trending Now