Vertikale CSS-spyskaart: doen dit self

Sommige webmeesters wil nie tyd mors wat van nuuts af ontwikkel nie, maar al die elemente wat reeds bestaan. Hulle glo dat dit nie sin maak om hul tyd te mors oor wat lank daar was nie. Trouens, vir diegene wat net HTML en CSS leer, is dit belangrik om jouself baie dinge te doen om hul werk goed te verstaan. Dit geld vir die spyskaart. Skep 'n vertikale CSS-kieslys. Dit sal slegs gebaseer wees op HTML en CSS, sonder om Javascript en JQuery te gebruik. Elke menu is 'n lys van skakels wat lei tot die bladsye van die werf.

Basiese stappe

Om 'n ongekompliseerde vertikale CSS- kieslys te skep , benodig jy die volgende volgorde van stappe:

1. Bepaal eers die lys skakels (met behulp van die HTML-kode) waaruit die spyskaart bestaan. Gee hulle name, byvoorbeeld, soos:

1. Huis.
2. Ons geskiedenis.
3. Lei.
4. Dienste.
5. Kontakte.

2. Dan sal ons die skakels na wens met CSS stiliseer.

Ons sal die HTML-kode skryf, stoor dit in my_Vmenu.html en kyk hoe dit in die blaaier sal lyk:

Dit is die basis (skelet) van ons spyskaart. # 1, # 2, ens. Moet vervang word deur skakels. Kyk hoe dinge in die blaaier kyk. Jy sal nie van die prentjie hou nie. Nou moet ons begin om die style van die elemente te beskryf om 'n volledige vertikale CSS-kieslys te maak.

Beskrywing van style

Skep 'n lêer genaamd my_Vmenu.css, waarin jy kan stel wat jy wil, die voorkoms van so 'n belangrike element van die werf, verbeter. Hieronder is die kode, waarvan die implementering die vertikale CSS-spyskaart sal herleef. Skryf dit in die geskep lêer, en dan sal ons nader kyk na wat die hooflyne wat hier gelys word, beteken.

Gedetailleerde beskrywing van gebruikte style

Kyk noukeurig na ons CSS vertikale spyskaart:

Lys-tipe-tipe kan lys merkers verwyder. Gebruik die instelling "0" vir marge en vulling, verwyder die ekstra inspringing uit die lys. Soos u van die HTML-kode kan sien, is ons spyskaart 'n lys, en CSS stel die style in.

Ul # my_Vmenu - die algemene styl van die hele lys.

Ul # my_Vmenu li a - die styl van die skakel tussen die li-etikette.

Ul # my_Vmenu li a: hover is 'n beskrywing van die soort items in die spyskaart op 'n tyd wanneer een van die mans na die wyser wys.

Ul # my_Vmenu li span - beskrywing van die teks (menu name).

Onthou dat die lêers my_Vmenu.css en my_Vmenu.html in een gids gestoor moet word. Hulle kan egter in verskillende vouers geleë wees, maar dan is dit belangrik om die pad na my_Vmenu.css in die lêer my_Vmenu.html toe te ken. Wees versigtig, aangesien nuwelinge dikwels probleme daarmee het.

Die styl moet gekoppel word tussen die koptekens in die HTML-lêer. Menu_1.png en menu_2.png is prente om die kieslysitem in die normale toestand te vertoon en wanneer dit oor die wyser beweeg.

Dit is beter om die prente in 'n aparte gids vir tekeninge te stoor, noem dit my_images, maar korrigeer dan die CSS-kode. Skryf waar hierdie beelde aangedui word, dat hulle in hierdie gids is: url (my_images / menu_1.png) en url (my_images / menu_2.png).

Die res van die eiendomme wat in die CSS-kode beskryf word, is maklik om te verstaan. Hulle het die voorkoms van ons spyskaart gemaak. Dit is maklik om te sien dat die breedte en hoogte van die punte op dieselfde plek gestel word vir punte in die normale toestand en as jy die muis oor hulle beweeg. Die lettergrootte is 18px, die opskrif spesifiseer die inspringings van verskillende kante van die name van die items. Met die vertoon eienskap kan u die vertoning deur blokke spesifiseer om breedte en insekte te spesifiseer.

Ons Vertikale Menu

Soos u kan sien, is die vertikale CSS-kieslys maklik om te skep. Op grond van kennis kan jy dit aantreklik en aantreklik maak vir besoekers aan jou aanlynbron! Gebruik jou verbeelding, en dan sal 'n stylvolle spyskaart jou webwerf versier.