Vertikālā CSS menu: darīt to pats

Daži tīmekļa pārziņiem nevēlos tērēt laiku attīstās no nulles vienkāršiem elementiem, kas jau pastāv. Viņi uzskata, ka nav jēgas tērēt savu laiku uz kaut ko, kas jau sen ir bijis tur. Patiesībā, tiem, kas ir tikai apgūt HTML un CSS, tas ir svarīgi, lai sev daudz lietas, kas ir laba izpratne par savu darbu. Tas attiecas uz izvēlni. Izveidot vertikālās CSS izvēlnes. Tā būs balstīta tikai uz HTML un CSS, neizmantojot Javascript un JQuery. Katra izvēlne ir saraksts ar saitēm, kas ved uz vietnes lapas.

pamata soļi

Lai izveidotu vienkāršu vertikālu izvēlnes CSS, jums ir nepieciešams, šādas darbības:

1. Pirmkārt, noteikt sarakstu ar saitēm (izmantojot kodu HTML), no kuriem izvēlne būs. Dodiet viņiem vārdu, piemēram, ir šādi:

1. Home.
2. Mūsu vēsture.
3. Guide.
4. Pakalpojumi.
5. Kontakti.

2. Tad Styling saites, kā jūs vēlaties, izmantojot CSS.

Mēs rakstīt HTML kodu, paturiet my_Vmenu.html failu un redzēt, kā tas izskatīsies pārlūkā:

Tas ir pamats (skelets) no mūsu ēdienkartes. # 1, # 2, utt jāaizstāj ar atsauci. Redzēt, kā tas izskatās pārlūkprogrammā. Attēls jums nepatīk. Tagad mums ir jāsāk, lai aprakstītu elementus stilā, lai padarītu pilnīgu vertikālās CSS izvēlnes.

Apraksts stili

Izveidot failu my_Vmenu.css, kas nosaka visu, ko vēlaties, lai uzlabotu izskatu šādas vietnes svarīgu elementu. Šeit ir kods, kuru ieviešana būs atjaunot vertikālās CSS izvēlnes. Tā un rakstīt jaunu failu, un tad mēs ņemšu tuvāk apskatīt jēgu no galvenajām līnijām, kas ir dota.

DETALIZĒTS APRAKSTS izmanto stylesheet

Tagad uzskata, ka informāciju par mūsu CSS vertikālās izvēlnes:

saraksts stila tipa ļauj noņemt sarakstu marķieriem. Nosakot "0" uz rezervi un polsterējums noņemt papildu polsterējums sarakstā. Kā redzams no HTML koda, mūsu ēdienkarte ir saraksts, un stili tiek definēti, izmantojot CSS.

ul # my_Vmenu - kopējais stils visa saraksta.

ul # my_Vmenu li a - stila saites starp tagu li.

ul # my_Vmenu li a: hover - aprakstu par veidu izskatāmā izvēlnes elementiem laikā, kad kāds hovers pār cilvēku.

ul # my_Vmenu li viens sprīdis - teksta apraksts (nosaukums izvēlne).

Atcerieties, ka failus my_Vmenu.css my_Vmenu.html un ir jāsaglabā tajā pašā direktorijā. Tomēr tās var atrasties dažādās mapēs, bet tad ir svarīgi, lai reģistrētos my_Vmenu.html faila ceļš uz my_Vmenu.css. Esi uzmanīgs, jo jaunpienācējus šo problēmu bieži.

Stils jāpieslēdz starp galvu tagus html failā. menu_1.png un menu_2.png - tas ir attēls uz attēla izvēlnes vienuma normālā stāvoklī un lidināties.

Tas ir labāk, lai saglabātu attēlus atsevišķā mapē attēlus, nosaukt to my_images, bet tad noregulējiet CSS kodu. Rakstiet, kur tiek parādīti šie attēli, tie ir šajā direktorijā: url (my_images / menu_1.png) un url (my_images / menu_2.png).

Ar pārējiem aprakstītajiem CSS kodā īpašības, viegli saprast. Tie nosaka izskatu mūsu ēdienkartes. Tas ir viegli pamanīt, ka platums un augstums vienību noteikts pašu preču normālā stāvoklī, un, kad jūs lidināties peli pār tiem. Font size 18px, apdare precizē iedobi no dažādās pusēs vietvārdu izmantošanu. displejs ļauj iestatīt displeja vienības, lai uzstādītu platumu un polsterējums.

Mūsu vertikālās ēdienkarte

Kā jūs varat redzēt, vertikālās CSS izvēlnes, lai izveidotu viegli. Pamatojoties uz datiem, zināšanu jums būs iespēja, lai padarītu to skaistu un pievilcīgu apmeklētāju jūsu mājas lapā! Izmantojiet savu iztēli, un pēc tam stilīgs izvēlni, lai papildinātu savu vietni.