Ինչպես պատրաստել բացվող հորիզոնական ընտրացանկ

Բովանդակություն:

Ինչպես պատրաստել բացվող հորիզոնական ընտրացանկ
Ինչպես պատրաստել բացվող հորիզոնական ընտրացանկ

Video: Ինչպես պատրաստել բացվող հորիզոնական ընտրացանկ

Video: Ինչպես պատրաստել բացվող հորիզոնական ընտրացանկ
Video: Ինչպես կատարել հիմնադրամ, բետոնե հատակներ եւ պատշգամբում համար կառուցել իրենց սեփական ձեռքերով 2024, Մայիս
Anonim

Softwareրագրակազմի և կայքի մշակման ամենակարևոր ասպեկտներից մեկը մենյուի ստեղծումն է: Մայքրոսոֆթը և դրա ամենահայտնի մտահղացումը ՝ Windows օպերացիոն համակարգը, պետք է ընդունվեն որպես գլխավոր օրինակ: Չնայած այն հանգամանքին, որ այս ապրանքը օգտագործում են աշխարհում ԱՀ օգտագործողների ճնշող մեծամասնությունը, քննադատությունը ոչ միայն չի նվազում, այլ անընդհատ աճում է: Հիմնականում դա վերաբերում է ընտրացանկի իրերի տեղակայման անհարմարությանը: Հետևյալը նկարագրություն է այն մասին, թե ինչպես կարելի է ընտրացանկեր ստեղծել CSS- ում և Expression Web- ում:

Ինչպես պատրաստել բացվող հորիզոնական ընտրացանկ
Ինչպես պատրաստել բացվող հորիզոնական ընտրացանկ

Հրահանգներ

Քայլ 1

Հորիզոնական ընտրացանկ ստեղծելու համար անցեք Կառավարեք ոճը, ապա կտտացրեք Նոր ոճի կոճակին: Անվանեք նոր ոճը Ընտրիչ ul li: Կարևոր է Համոզվեք, որ գեներացված ֆայլն ունի drop-down.css ընդլայնում: Հորիզոնական ընտրացանկ պատրաստելու համար նշեք ստեղծված տարրին, որ այն կլինի հենց հորիզոնական: Հաջորդը, որոշեք ընտրացանկի յուրաքանչյուր կետի լայնությունը և հանեք ցուցակի բոլոր կետերի դիմաց տեղադրված բոլոր անհարկի կետերը:

Քայլ 2

Անցեք «Դասավորություն» տարբերակին, setուցադրեք հատկությունը «Ինլայն» տողի վրա, հորիզոնական հավասարեցում կատարելու համար: Հաջորդը, Ձախ արժեքը դրեք Float հատկանիշին և կտտացրեք Կիրառել կոճակին: Listանկի բոլոր կետերը սահմանեք մեկ տող: Որպեսզի դրանք տեղադրվեն կոկիկ և միմյանց վրա չսողանվեն, Լայնության հատկանիշում դիրքի արժեքը դրեք 150 px: Ստուգեք, որ ցուցակի բոլոր տարրերը նույն չափի են: Հաջորդը, կետերը հանեք բոլոր տարրերի առջև. Դրա համար անցեք attribուցակ հատկանիշին և Styleանկի ոճի տիպի տարրում տեղադրեք «Ոչ» պարամետրը: Կտտացրեք OK- ին `բոլոր փոփոխություններն ընդունելու և կիրառելու համար:

Քայլ 3

Կարգավորեք տառատեսակի չափը և ոճը ul li- ի համար: Դա անելու համար անցեք Կառավարեք ոճերը և աջ կտտացրեք ul li- ին, ապա ընտրեք Փոփոխել ոճը: Հայտնվում է ծանոթ երկխոսության տուփը: Գնացեք Տառատեսակ, ընտրեք Font-family հատկանիշը և դրեք այն Sans-serif, Arial, Helvetica: Հաջորդը, կարգավորեք տառատեսակի չափը ՝ այն դնելով 0, 9: Դրանից հետո տեքստի վերափոխման հատկությունը դարձրեք մեծատառ: Կարգավորեք menuանկի իրերի բարձրությունը Բարձրություն - Դիրք հատկանիշում `արժեքը դնելով 30 px:

Քայլ 4

Բոլոր ուղղիչ գործողություններն ավարտելուց հետո ֆայլը պահեք որպես menu.html: Հաջորդը, ստուգեք ստեղծված ընտրացանկը տարբեր զննարկիչներում ՝ համոզվելու համար, որ այն ճիշտ է գործում: Ինչպես տեսնում եք, հորիզոնական ընտրացանկի ձևավորումը բավականին պարզ է:

Խորհուրդ ենք տալիս: