عمودی CSS غورنۍ: دا کار د ځان

ځینې چهاپ نه غواړي چې د وخت له هېڅ څخه ساده عناصر چې لا شتون د جوړولو ولګوي. هغوی باور لري چې پر هغه څه دي چې د اوږدې مودې راهيسې هلته خپل وخت مه ضايع نه ټکی شته دی. په حقیقت کې، د هغه چا لپاره دي يوازې د HTML او CSS برلاسۍ، دا مهمه ده چې د خپل ځان لپاره یو د شیان ته د خپل کار په ښه درک لري. دغه کار د غورنۍ. عمودي CSS مينو جوړول. دا به یوازې د HTML او CSS بنسټ وي، د Javascript او پټول د استعمال څخه پرته. هر غورنۍ د تړنې چې د ځای مخونه سبب یو لست دی.

اساسي ګامونه

د يو ساده رامنځته عمودي غورنۍ CSS، تاسو د لاندې ګامونه اړتيا:

1. لومړی، د تړنې (کود د HTML په کارولو)، چې د غورنۍ به يو لست معلوم کړي. هغوی ته د يو نوم، د مثال په توګه، په لاندې ډول دي:

1. کور.
2. زمونږ تاریخ.
3. الرښود.
4. خدمتونه.
5. د اړيکې.

2. بيا تړنې آرايشکاه په توګه له تاسو سره د CSS په مرسته غواړي.

موږ د لیکلو د HTML ګوډونه، په my_Vmenu.html دوتنې کې يې وساتئ او وګورئ چې څنګه دا کار به په لټونګر کې وګورو:

دا زموږ د غورنۍ په اساس (اسکلټ) ده. # 1، 2، او داسې نور باید د مرجع بدل شي. وګورئ: په یوه کتنمل چې څنګه ښکاري. د انځور تاسو به خوښ نه دي. اوس موږ باید پیل شي د سبک د عناصرو تشریح، د يوه بشپړ عمودي CSS د غورنېو لپاره.

Description سبک

د یوې دوتنې د my_Vmenu.css، چې هر څه تاسو غواړئ چې د داسې يوه د ځای مهم عنصر په بڼه ښه جوړ جوړول. دلته د کود، د معرفي چې به د عمودي CSS د غورنېو راژوندي ده. دا او د نوي دوتنې ولیکئ، او بیا به موږ یو نژدې واخلي او د اصلي کرښو چې د دي ورکړل مانا وګوري.

جزياتو سره توضيحات کارول ډولپاڼې

اوس زموږ د CSS عمودي غورنۍ د تفصیل ته پام وکړئ:

لست ډوله-ډول تاسو ته اجازه درکوي د نښو د لیست څخه وباسي. د ټاکلو "0" د توپير او د نالیچې په لست کې د اضافي نالیچې لرې. څرنګه چې د HTML کوډ څخه ليدل کيږي، زموږ د غورنۍ یو لست کې دی، او د سبک دي CSS کارولو تعريف.

ul # my_Vmenu - د ټول لست په عمومي ډول.

ul # my_Vmenu لي A - د ليکنو ترتيبول په لي تر منځ د سبک تړنې.

ul # my_Vmenu لي یو: hover - په داسې وخت کې چې کله یو د خلکو ځبلې د د غورنۍ توکي په پام لاندې ډول شرح.

ul # my_Vmenu لي یو اوږدو - متن Description (سرليک غورنۍ).

په یاد ولرئ چې فايل my_Vmenu.css my_Vmenu.html او باید په همدې Directory وساتل شي. خو د دوی په مختلفو پوښيو کیدای شي، خو وروسته دا مهمه ده چې په my_Vmenu.css my_Vmenu.html دوتنې لاره کې ثبت کړي. پام، ځکه چې دا ستونزه د نويو اکثرا.

Style باید په یوه HTML-دوتنې مشر نښانونه تر منځ د وصل شي. menu_1.png او menu_2.png - د دې لپاره چې په نارمل حالت او hover د انځور غورنۍ توکی د انځور دی.

ښه دا ده چې په یوه جلا پوښۍ انځورونه لپاره انځورونه وژغوري، نوم دا my_images، خو وروسته د CSS کوډ تعديلول. وليکئ چې دا انځورونه دي ښودل شوي، د دوی په دې نوملړ کې دي: url (my_images / menu_1.png) او د URL (my_images / menu_2.png).

د ملکیتونو د CSS کوډ په تشريح د نورو، چې په اسانۍ سره پوه شي. دوی زموږ د غورنۍ په بڼه تعریف کړي. دا اسانه ګورې چې د توکو د عرض او لوړوالي لپاره په عادي دولت ورته توکي مشخص، او کله چې تاسو د هغوي په موږک hover. FONT SIZE یا 18px، د نالیچې څخه د هغه ځای د نومونو د مختلفو خواوو د indentation په ګوته کوي. نندارې تاسو ته اجازه درکوي د نندارې واحد ته د عرض او د نالیچې جوړ.

زموږ عمودي غورنۍ

لکه څنګه چې تاسو کولای شي وګورئ، د عمودي CSS مينو ته په اسانۍ سره جوړ کړي. د پوهې د معلوماتو پر بنسټ چې تاسو کولای شي چې دا ښکلي او په زړه پورې چې د خپلې ویب پاڼې له نندارچيانو لپاره! د خپل تصور او بيا يو فيشني غورنۍ په استفادې سره د بشپړولو لپاره خپل ځای.