Daži tīmekļa pārziņi nevēlas tērēt laikuvienkāršu elementu, kas jau pastāv, no sākuma. Viņi tic, ka nav jēgas tērēt laiku tam, kas jau sen ir bijis. Patiesībā tiem, kuri vienkārši apgūst HTML un CSS, ir svarīgi daudz ko darīt, lai labi izprastu viņu darbu. Tas attiecas uz izvēlni. Izveidojiet vertikālu CSS izvēlni. Tas tiks balstīts tikai uz HTML un CSS, neizmantojot Javascript un JQuery. Katra izvēlne ir saišu saraksts, kas noved pie vietnes lapām.
Pamata soļi
Lai izveidotu vienkāršu vertikālo CSS izvēlni, jums ir nepieciešams šāds secību secība:
1. Vispirms nosakiet saites sarakstu (izmantojot HTML kodu), no kuras izvēlne sastāvēs. Piešķiriet viņiem vārdus, piemēram, šādus:
- Mājas
- Mūsu vēsture.
- Vadība.
- Pakalpojumi
- Kontakti.
2. Tad mēs stilizēsim saites, kā to vēlas CSS.
Mēs rakstīsim HTML kodu, saglabājam to savā my_Vmenu.html un redzēsim, kā tas izskatīsies pārlūkprogrammā:
Tas ir mūsu izvēlnes pamats (skelets). # 1, # 2 utt.jāaizstāj ar saitēm. Uzziniet, kā lietas izskatās pārlūkprogrammā. Jums nepatīk attēls. Tagad mums ir jāsāk aprakstīt elementu stilus, lai izveidotu pilnīgu vertikālo CSS izvēlni.
Stilu apraksts
Izveidojiet failu ar nosaukumu my_Vmenu.css, kurā jūs lūdzat visu, ko vēlaties uzlabot šāda svarīga vietnes elementa izskatu. Zemāk ir kods, kura īstenošana atdzīvinās vertikālo CSS izvēlni. Uzrakstiet to izveidotajā failā, un pēc tam mēs rūpīgāk apskatīsim galvenās līnijas šeit.
Sīks izmantoto stilu apraksts
Tagad aplūkosim tuvāk mūsu CSS izvēlni vertikāli:
ul # my_Vmenu - visa saraksta vispārējais stils.
ul # my_Vmenu li a - saiknes starp li tagiem stils.
ul # my_Vmenu li a: hover ir apskatāmā izvēlnes elementu apraksts brīdī, kad persona pārvieto kursoru uz vienu no tiem.
ul # my_Vmenu li a span - teksta apraksts (izvēlņu nosaukumi).
Atcerieties, ka faili my_Vmenu.css un my_Vmenu.html ir jāsaglabā vienā direktorijā. Tomēr tās var atrasties dažādās mapēs, bet tad ir svarīgi rakstīt ceļu uz my_Vmenu.css failā my_Vmenu.html. Esiet uzmanīgi, jo iesācējiem bieži ir problēmas ar to.
Stilam jābūt savienotam starp galvas tagiem html failā. menu_1.png un menu_2.png ir attēli, kas attēloti izvēlnes vienumā normālā stāvoklī un kad virziet kursoru.
Лучше сохраните картинки в отдельной папке для attēlus, nosauciet to my_images, bet pēc tam izlabojiet CSS kodu. Uzrakstiet, kur šie attēli ir uzskaitīti, ka tie ir šajā direktorijā: url (my_images / menu_1.png) un URL (my_images / menu_2.png).
CSS kodā aprakstītajās citās īpašībās:viegli izdomāt. Viņi nosaka mūsu izvēlnes izskatu. Ir viegli saprast, ka punktu platums un augstums ir vienāds gan normālā stāvoklī esošajiem punktiem, gan arī tad, kad jūs virzāt peli virs tiem. Fonta lielums ir 18px, polsterējums nosaka ievilkumus no dažādām vienumu nosaukumu pusēm. Displeja īpašība ļauj iestatīt displeju blokos, lai iestatītu platumu un ievilkumus.
Mūsu vertikālā izvēlne
Kā redzat, vertikālās CSS izvēlnes ir viegli izveidot. Pamatojoties uz zināšanu bāzi, jūs varat padarīt to skaistu un pievilcīgu sava interneta resursa apmeklētājiem! Izmantojiet iztēli, un pēc tam stilīga izvēlne rotās jūsu vietni.
