څنګه د سی ایس ایس او انځورونو سره د ممنوع نیویګریشن جوړول څنګه

د 06 01

څنګه د سی ایس ایس او انځورونو سره د ممنوع نیویګریشن جوړول څنګه

په ویب پاڼو کې نیویګریشن د لیست یوه بڼه ده، او د نیولو نیویګریشن د افقی لیست په څیر دی. دا د سی ایس ایس سره د افقی ټیوب شوی نیویارک جوړولو لپاره خورا اسانه دی، مګر سی ایس ایس 3 موږ ته یو څو نور وسایل راکوي ترڅو دوی هم ښه وګوري.

دا سبق به د CSS سایټ مینو ته د جوړولو لپاره اړین HTML او CSS لخوا لیږل کیږي. په دې لینک باندې کلیک وکړئ ترڅو وګورئ چې څنګه به یې وګوري.

دا تڼۍ مینو کې هیڅ انځورونه نه کاروي، یوازې HTML او CSS 2 او CSS. 3. دا په اسانۍ سره د نورو ټبونو زیاتولو یا متن کې بدلون راوستل کیدی شي.

د لټون ملاتړ

د دې مینو مینو به په ټولو مهمو براؤزرونو کې کار وکړي. د انټرنټ اکسپورور به د ګوتو کڅوړه ونه ښيي، مګر په بل ډول، دا به د فایرفوکس، سفاري، اوپیرا، او کروم په څیر ٹیبونه وښيي.

02 د 06

د خپل مینو لیست ولیکئ

ټول د نیولو نیویارک او ټبونه په واقعیا کې یوازې یو نامتو لیست دي. نو هغه څه چې تاسو یې کول غواړئ د لینکونو یو بې ترتیبه ​​لیست ولیکئ چیرې چې تاسو غواړئ خپل ټیوب شوی نیویارک ته لاړ شئ.

دا ټکي داسې انګیرل کیږي چې تاسو خپل HTML د متن ایڈیټر کې لیکئ او تاسو پوهیږئ چې تاسو خپل ویب پاڼه کې د مینو لپاره د کوم ځای ځای په ځای کړئ.

خپل نامتو لیست ولیکئ لکه:

• ټولګي = "tablist">
  • CSS 3
  • id = "اوسنی"> ټوپونه
  • لپاره
  • منډې

  تاسو به وګورئ چې کود دوه شیان غواړي: class = "tablist" او id = "current". لومړی اړتیا ده . که تاسو د ناباوره شوي لیست په اړه د ټلیفوني ټولګې نه وینئ، نو ټبونه به کار ونه کړي. دویم اختیاری دی. د هر هغه ټیب په اړه چې ایا تاسو غواړئ په دې پاڼه کې ورته اشاره وکړئ د id "" اوسنی "" وساتئ. زه معمولا د دې پاڼې کارولو لپاره کارول غواړم چې هغه پاڼه په ډاګه کړئ چې زه یې یم، مګر تاسو کولی شئ د خورا مهم ټکي په نښه کولو لپاره کار واخلئ. یا تاسو کولی شئ په بشپړ ډول لرې کړئ.

03 of 06

د خپل سټاټ شیٹ سمول پیل کړئ

تاسو کولی شئ د بهرني طرز پاڼه یا داخلي سټاټ پاڼه وکارئ . د نمونې مینو پاڼه د لاسوند <سر> د داخلي سټیټ پاڼه کاروي.

لومړی به موږ خپل ځان د یو ایل بڼه غوره کړو

دا هغه ځای دی چې موږ د ټولګي ټسټ لیست کاروو. د UL ٹیګ د اندازې پرځای، کوم چې ستاسو په پاڼه کې ټول بې ترتیب شوي لیستونه به، تاسو باید یواځې د UL ټولګی باید ډک کړئ. نو ستاسو په سی ایس ایس کې لومړی ننوتل باید:

.tablist {}

زه غواړم چې د وروستي تڼۍ کڅوړې ته واړوم (}) د وخت څخه وړاندې، نو وروسته زه دا نه هیرم.

په داسې حال کې چې موږ د ټب مینو مینو لیست لپاره یو نا منظم شوي لیګ کاروئ، مګر موږ نه غواړو چې ګولۍ یا شمیرې په کې شاملې کړئ. نو لومړی ډوله چې تاسو باید اضافه کړئ. د لیست طرزالعمل: هیڅ نه دا برنر ته وایي چې پداسې حال کې چې دا یو لیست دی، دا یو لیست دی چې نه مخکې ټاکل شوی شیلیونه (لکه د ګولیو یا شمېرو).

بیا، تاسو کولی شئ د لیست لوړوالی د هغه ځای سره سمون ورکړئ چې تاسو یې غواړئ ډک کړئ. ما د خپلې اونۍ لپاره 2em غوره کړه، ځکه چې دا د معیاري فونټ اندازه دوه برابره ده، او د ټب متن د پورته څخه ښکته او یا هم یې ورکوي. لوړوالی: 2em؛ مګر تاسو خپل چوکۍ هر هغه څه ته چې غواړئ یې وټاکئ. د UL ټګونه به په خپل ځان سره د چوکۍ 100٪ واخلي، نو له همدې امله تاسو دا نه غواړئ چې دا د کانټینر کانټ کوچنۍ وي، تاسو کوالی شئ د چوکۍ څخه بهر پریږدو.

په پاى کې، که ستاسو د ماسټر سټاټ پاڼه د UL او OL ټيګ لپاره خوندي نه وي، تاسو به يې هغه په ​​داخل کې وساتئ. دا پدې معنا چې تاسو بايد ستاسو په UL باندې سرحدونه، شاخونه او ګوښه کول بند کړئ. ډډنگ: 0؛ حاصله: 0؛ سرحد: نه که تاسو پخوا د UL ٹیګ بیا ځای پرځای کړئ، تاسو کولی شي ګنډې، ګوښه کول، یا هغه سرحد ته چې ستاسو د ډیزاین سره مناسب وي بدل کړئ.

ستاسو د وروستي ټابلیټ ټولګي باید داسې وګورئ:

.tablist {لړم طرزالعمل: هیڅ نه لوړوالی: 2em؛ ډډنگ: 0؛ حاصله: 0؛ سرحد: نه }

04 06

د لی لست لیست تنظیمول

یوځل چې تاسو خپل بې ترتیب شوي لیست غوره کړ، نو تاسو باید د هغې دننه د لیک ټګونو ته اړتیا ولرئ. که نه نو، دوی به د معیاري لیست په څیر عمل وکړي او بل ټکی ته لاړ شي پرته له دې چې ستاسو ټبونه سم سم کړي.

لومړی، خپل د شتمنۍ ملکیت تنظیم کړئ:

.tablist li {}

بیا تاسو غواړئ خپل ټبونه وخورئ تر څو دوی په افقی الوتکه کې لیکي. لوټ

او مه هیروئ چې د ټبونو ترمینځ ځینې حاالتو اضافه کړئ، له دې کبله دوی یوځاى سره یوځای نشي. مهمې برخې - 0.13em؛

ستاسو شال باید داسې ښکاري:

.tablist li {float: left؛ مهمې برخې - 0.13em؛ }

05 06

د ټبونو جوړولو ته سی ایس ایس 3 سره ټبونه وګورئ

د دې ډیزاین پاڼه کې د ډیرو درملو د ترسره کولو لپاره، زه په نا ترتیب شوي لیست کې لینکونه په نښه کولم. لټونګر په دې پوهیږي چې لینکونه د نورو ټګونو په پرتله په ډیرو پاڼو کې کار کوي، نو دا د دې لپاره اسانه ده چې زاړه براؤزرونه د هورنډو هېوادونو په څیر شیانو سره سم چلند وکړي چې تاسو یې د لنگر ٹیګ سره نښلول. نو لومړی خپل د شتمنیو ځانونه ولیکئ:

.tablist li a {} .tablist li a: hover {}

ځکه چې دا ټبونه باید په غوښتنلیک کې د ټبونو په څیر عمل وکړي، تاسو غواړئ د ټب ټوله برخه د کلیک کولو وړ وي، نه یوازې تړل شوي متن. د دې کولو لپاره، تاسو باید د هغې د عادي " انډول " حالت څخه د یو بلاک عنصر کې A tag بدل کړئ. ښودنه: بندیز؛ (که تاسو د توپیر په اړه نور څه پوهې لیوالتیا لرئ، د انلاین عناصرو سره د بلاک - کچه ولولئ.)

بیا، ستاسو د ټیوبونو لپاره یو آسانه لاره چې د یو بل سره متفاوت وي، مګر بیا هم د فریم چوکۍ سره سمون لري څو د ښي او ښي پوښ پواسطه ورته وي. ما د ګوتو د شتمنۍ ملکیت کارولو ترڅو پورته او ښکته یې 0 او ښي خوا ته وینځئ 1em ته. ګوښه کول: 1em؛

ما د دې لینک غوره کولو لپاره هم غوره کړې وه، نو دا چې لینکونه د اړیکو په څیر لږ ښکاري. مګر که ستاسو مخاطبین د هغې له خوا ناڅاپي وي نو دا لیکه پریږدئ. لینک-سجاونکی: هیڅ نه

د ټب شاوخوا شاوخوا یو ګوټ ګوټ کېښودل، دا د دوی په څیر د ټبونو په څیر ښکاري. ما د پولې د شتمنۍ د ملکیت څخه کار واخیست ترڅو سرحدي پوله په ټولو خواوو کې سرحد ته واړوي: 0.06 ایمومینټ # 000؛ او بیا د سرحد - لاندې ملکیتونو څخه کار واخلئ چې دا له لاندې څخه لرې کړئ. سرحد - لاندې: 0؛

بیا ما د ټبونو فټ، رنګ او شاليد رنګ ته ځینې سمونونه برابر کړل. دا هغه سایټونو ته وټاکئ چې ستاسو سایټ سره سمون لري. ليکنه: باړه 0.88em / 2em آريال، جنينووا، هټيوټيتا، سنس سيرف؛ رنګ: # 000؛ شاليد رنګ: #ccc؛

ټولې پورته ډولونه باید په ټاکونکی کې. تګلاره کې ولاړ شي، د دې لپاره چې دوی په عمومي ډول د لنگر ټګونه اغیزمن کړي. بیا د دې لپاره چې ټبونه نور کلک وټاکل شي، تاسو باید د یو څو دولتي حاکمیت اضافه کړئ.

زه غواړم د متن پاڼی بدل کړم ترڅو د پاپ پاپ جوړ کړم کله چې تاسو یې مچوم. شاليد: # 3cf؛ رنګ: #fff؛

او ما هغه براؤزرونو ته یو بل یادونه هم وکړه چې زه یې غواړم د پاتې کیدو لپاره لینک ونلري. د متن جوړونې: هیڅ نه بله بله طریقه دا ده چې لاندې ټیلیفون بیرته وروګرځئ کله چې تاسو د ټب په سر کې مږو. که تاسو غواړئ دا کار وکړو، نو د متن - تیاری ته بدلون ورکړئ: لینډیشن؛

مګر سی ایس ایس 3 چیرته دی؟

که تاسو پاملرنه وکړئ، تاسو ممکن په پام کې ونیسو چې د سیسټم په پاڼه کې د سی ایس ایس 3 ډولونه شتون نلري. دا د هرې عصري برنامو کې کار کولو ګټې لري، په شمول د انټرنیټ اکسپلورر. مګر دا ټیوبونه د مربع بکسونو څخه نور څه نه ښکاري. د سی ایس ایس 3 طرزالعمل د سرحدی رادیو ویډیو په واسطه (او دا د براوزر مشخص ځانګړي اړیکو پورې اړه لري) تاسو کولی شئ کنډک ګرځېدل، نور د نورو مینځلو فولډر په څیر وګورئ.

هغه شیلیونه چې تاسو باید په .tablist کې یو قاعده کې اضافه کړئ: - د سرحد سرحد - لوړ ښیګڼی - رریج: 0.50em؛ د ویب پاڼه - سرحد - لوړ بکس ریډیو: 0.50em؛ د متوسط ​​سرحد راډیو - تبعیض: 0.50em؛ - د شمال سرحد سرحدی ریډیو - غصب: 0.50em؛ سرحد - پورته ښي رګونه: 0.50em؛ سرحد - پورته بکس - راډیو: 0.50em؛

دا زما وروستی طرزالعملونه دي:

.tablist li a {display: block؛ ګوښه کول: 1em؛ د متن جوړونې: هیڅ نه سرحد: 0.06 ایم ډوډ # 000؛ سرحد - لاندې: 0؛ ليکنه: باړه 0.88em / 2em آريال، جنينووا، هټيوټيتا، سنس سيرف؛ رنګ: # 000؛ شاليد رنګ: #ccc؛ / * سی ایس ایس 3 عناصر * / ویبکټ - سرحد - پورته ښي رګیوس: 0.50em؛ د ویب پاڼه - سرحد - لوړ بکس ریډیو: 0.50em؛ د متوسط ​​سرحد راډیو - تبعیض: 0.50em؛ - د شمال سرحد سرحدی ریډیو - غصب: 0.50em؛ سرحد - پورته ښي رګونه: 0.50em؛ سرحد - پورته بکس - راډیو: 0.50em؛ } .tablist li a: هور {شاليد: # 3cf؛ رنګ: #fff؛ د متن جوړونې: هیڅ نه }

د دې شالونو سره، تاسو یو داسې ټب شوي مینو کې لرو چې په ټولو مهمو براؤزرونو کې کار کوي او د سی ایس ایس 3 موافقه لرونکي براؤزرونو کې ښایسته چاپ شوي ټبونه ښکاري. بله پاڼه تاسو ته یو بل انتخاب درکوي چې تاسو یې کولی شئ د دې جامو لپاره هم کار واخلئ.

06 06

اوسنۍ ټوټې لوړ کړئ

په HTML کې مې جوړ کړی، د UL یو لیست عنصر درلود چې د ID سره. دا تاسو ته اجازه درکوي چې یو LI د نورو څخه یو بل انداز وړاندې کړي. تر ټولو عام وضعیت دا دی چې اوسنی ټب په یو څه طریقه ودریږي. د دې په اړه فکر کولو بله لاره دا ده چې تاسو غواړئ هغه ټیوبونه پاک کړئ چې ژوند نه کوي. تاسو بیا په مختلفو پاڼو کې د کوم ځای چیرته بدل کړئ.

زه د دواړو سمارټ A ټګ هم او همدارنګه د سمارټ A: هور سټیډ ډول داسې یو چې دواړه دواړه لږ توپیر لري. تاسو کولی شئ رنګ، شاليد رنګ، حتی لوړوالی، د دې عنصر وزن او چوکات بدل کړئ. کوم بدلونونه ستاسو په ډیزاین کې احساس کړئ.

. ټيټ لیستیو # اوسني یو {شاليد رنګ: # 777؛ رنګ: #fff؛ }. ټيټ لیست # اوسنی: هور {شاليد: # 39C؛ }

او تاسو ترسره شوی تاسو د خپل ویب پاڼې لپاره یو ځای شوي میډیا جوړ کړی.