CSS жана Аракети жок кантип Tabbed Navigation жаратууда

01 06

CSS жана Аракети жок кантип Tabbed Navigation жаратууда

CSS 3 Tabbed Menu. J Kyrnin тарабынан скриншот

Интернет баракчалардын ичиндеги Багыттоо тизмесин бир түрү болуп саналат жана Tabbed багыттоо горизонталдык тизмесине окшош. Ал адилеттүү CSS, ал эми биз менен горизонталдуу Tabbed багыттоо түзүү кыйын CSS 3 аларды да жагымдуу кылып, бизге бир нече шаймандарды берет.

Бул окуу куралы менюсун кошумча барактардын жардамы менен карап турган CSS түзүү үчүн зарыл болгон HTML жана CSS аркылуу силерди кабыл алам. ал кандай көрүнө тургандыгын көрө бул шилтемени басканда.

Бул кошумча меню эле HTML жана CSS 2 жана CSS 3. эч кандай сүрөттөр, пайдаланат Бул жонокой кошумча барактарды кошуу же аларга текстти өзгөртүп өзгөртө алат.

Browser колдоо

Бул өтмөк меню бардык негизги браузерлерде иштейт. Internet Explorer бурчтары тегеректелген көрсөткөн эмес, бирок, эгерде, ал жөн гана Firefox, Safari, Опера жана Chrome сыяктуу өтмөктөрдү көрсөтөт.

02-жылдын 06

Жаз Меню List

Бардык багыттоо Меню и табулатуры, чынында эле бул иретсиз тизмеси болуп саналат. Демек, эмне үчүн биринчи кезекте сен Tabbed багыттоо, барууну каалаган жакка байланышы жөнүндө иретсиз тизмесин жазып турат.

Бул окуу куралы текст редактору менен HTML жазып, сиз интернет-беттеги сиздин меню үчүн HTML коюп, кайда деп жатасыз деген божомолдор.

Бул сыяктуу иретсиз тизмесин жазып:

03 06

Сиздин стилдер жадыбалы түзөтүү баштоо

Сиз да колдоно аласыз тышкы стилдердин баракты же ички стилдер жадыбалы . үлгү менюсу бет документтин <башына> ички стилдер жадыбалы колдонот.

Биринчиден, биз ул Itself Style аласыз

Бул HTML р класс tablist колдонууга болот. Тескерисинче, сиздин беттеги бардык иретсиз тизмесин стилдештирүүнү турган ул теги, стайлинг караганда, сиз гана ул классын стилдештирүүнү керек. tablist Ошондуктан CSS биринчи кириши керек:

.tablist {}

Мен аякташы тармал кодерлерге (}) алдын ала коюп келет, андыктан, мен кийинчерээк аны унутпа.

Биз табулатура меню тизмесине үчүн иретсиз тизме теги колдонуп жатасыз, бирок, биз менен сойлоп жүрүүчү ар кандай ок сандарды же кереги жок. Демек, сиз кошо турган биринчи стили болуп саналат. тизме стилиндеги: эч ким; Бул тизме жатканда, ал эч кандай алдын-ала аныкталган стилдерин (ок же сыяктуу) менен тизмеси браузер айтылат.

Андан кийин, сиз аны толтуруу үчүн каалаган орун дал сиздин тизмесин бийиктигин болот. Бул кош стандарт тексттин өлчөмү да, жана андан жогору жана кошумча барагынын тексти төмөнкү жарым Атып берет эле, мен бийиктиги 2em тандап алды. бийиктиги: 2em; Бирок, сиз келет, ошону көлөмү үчүн туурасын коюуга болот. Ул теги сиз азыркы идишке караганда кичирээк келет, ошондуктан, эгерде, туурасы 100% алып, сени туурасын чыгып кете алышат.

Акыр-аягы, сенин, анда башкы стилдер жадыбалы ул жана OL тэгдер дайындамалары жок, сиз аларды келет. Бул чек аралар, кырлары жана ул боюнча толтургуч өчүрүү керек дегенди билдирет. толтургучтар: 0; маржа: 0; Чек ара: эч бири; Сиз буга чейин ул теги абалга ээ болсо, анда сиз өз дизайны менен келет нерсеге талаалар, толтургучтар, же чек өзгөртө аласыз.

Сиздин акыркы .tablist класс кийинки сыяктуу болушу керек:

.tablist {тизме стилиндеги: эч ким; бийиктиги: 2em; толтургучтар: 0; маржа: 0; Чек ара: эч бири; }

04 06

LI тизмеси заттары түзөтүү

Эгер сиз бул иретсиз тизмесин атай кийин, силер анын ичиндеги LI теги стилдештирүүнү керек. Болбосо, алар стандарттык тизмесине сыяктуу жана ар бир туура өтмөктөр жайгаштыруу кийинки сапта көчүп иш-аракет кылат.

Биринчиден, стили мүлктү койду:

.tablist Ли {}

Анан сен алардын горизонталдуу тегиздиктин боюнча тизмектелет үчүн өтмөктөр калкып келет. сүзүп: сол;

Ал эми өтмөктөрдүн ортосунда кээ бир чектен кошууга унуткан эмес, ошондуктан, алар бири-бирине бириктирилген эмес. маржа-оң: 0.13em;

Сиздин Ли стилдери ушул сыяктуу болушу керек:

.tablist Ли {жадымда: сол; маржа-оң: 0.13em; }

05-жылдын 06

Аккорды Look Like CSS менен табулатура 3 даярдоо

Бул стилдин оор көтөрүлүп көбү үчүн, Мен бул иретсиз тизмесиндеги шилтеме багытталган жатам. Сиз казык тег (← шилтемелер) бекит болсо, серепчилер шилтемелер башка Tags бир интернет-беттеги дагы эмне экенин түшүнүшөт, ошондуктан ал эски браузерлер үстүнө мамлекеттер сыяктуу нерселер менен жооп алууга жардам болот. Ошентип, биринчи стилдин касиетин жаз:

.tablist Ли {} .tablist Ли: үстүнө {}

Бул табулатура арыз өтмөктөрдүн сыяктуу иш-аракет кылышыбыз керек, анткени, сиз барагынын бүткүл аймагы эле байланыштуу текст эмес, чыкылдатма болууну каалашат. Бул үчүн, бул нормалдуу "деген бир теги айландыруу үчүн киргизилген бир салып:" Мамлекеттик бөгөттөөлөр элементи . дисплей: бөгөттөөлөр; (Эгер айырмасы жөнүндө көбүрөөк билүүгө кызыкдар болсо, окуп Inline элементтердин vs. Блок-Көлөмүн .)

Андан кийин, өтмөктөр мажбурлоо үчүн жеңил жол менен бири-бири менен симметриялуу болушу керек, бирок дагы деле FLEX текст укугу жана сол толтургуч болуп саналат туурасын туура эле болот. Мен 0 үстүнөн жана алдынан жана укугу үчүн жакшы билмейинче, өтмө мүлктү пайдалануу жана 1em калды. толтургучтар: 0 1em;

табулатура байланышы сыяктуу аз карап, ошондуктан Мен да, ссылка баса белгилеп алып тандап алган. угуучулар деп адашып калышы мүмкүн болсо, бул сапты алып салышкан. -га шилтеме берген барактар ​​кооздугу: эч бири;

өткөөлдөрүндө жука чек коюу менен, алар өтмөктөрдүн сыяктуу кылат. Мен төрт тараптар чек ара чек коюу үчүн чек ара өтмө мүлктү пайдалануу: 0.06em катуу # 000; Анан колдонгон чек-төмөнкү түбүнөн алып салуу үчүн кыймылсыз мүлк. чек-ара-Төмөндө: 0;

Ошондо мен ариптер, түс, өтмөктөрдүн негизги түс айрым өзгөртүүлөрдү жасады. сиздин сайтка дал түрлөрүнө койду. арип: тайманбастык 0.88em / 2em Arial, Лион, Helvetica, Sans-Serif; түс: # 000; маалымат-түсү: #ccc;

Жогоруда стилдердин бардык селектор .tablist Ли менен кетүүгө тийиш, алар жалпы казык теги кандай таасир этиши үчүн, эреже. Ошондо табулатура дагы басылуучу пайда кылыш үчүн, бир нече мамлекеттик башкаруусу .tablist Ли кошуу керек: чаап барат.

Мен аны сага чычкан табулатура Поп үчүн текст жана арткы түсүн өзгөртүп келет. маалымат: # 3cf; түс: #fff;

Мен шилтеме көрсөтүлгөн эмес бойдон келген браузерлер үчүн дагы бир эскертүү камтылган. текст кооздугу: эч бири; Дагы бир ыкмасы тактасында сени кийин чычкан кайра баса буруш керек. Сен эмне келсе, текст-кооздошкон, аны өзгөртүүгө: белгилейт;

Ал эми CSS кайда 3?

Эгер кунт коюп келе жаткан болсо, балким, стилдин колдонулуучу бардык CSS 3 стилдери болгон жок экенин байкадык. Бул Internet Explorer, анын ичинде ар кандай заманбап браузер иштеген артыкчылыгы бар. Бирок табулатура чарчы кутучалардын караганда эч нерсеге окшош болбойт. бир CSS 3 стили чакыруу чек радиусу кошуп, (жана ал браузерге белгилүү чалууларды байланыштуу) менен бир Манила папка боюнча өтмөктөрдүн сыяктуу карап, четтери тегеректелет алат.

Сиз .tablist ли эреже кошуу керек стилдери бар: -webkit-чек-ара-жогорку оң-радиусу: 0.50em; -webkit-чек-ара-жогорку-сол-радиусу: 0.50em; -moz-чек-ара-радиусу-TopRight: 0.50em; -moz-чек-ара-радиусу-topleft: 0.50em; чек-ара-жогорку-оң-радиусу: 0.50em; чек-ара-жогорку-сол-радиусу: 0.50em;

Бул мен жазган акыркы стилдин эрежесин болуп төмөнкүлөр саналат:

.tablist Ли {дисплей: бөлүгү; толтургучтар: 0 1em; текст кооздугу: эч бири; Чек ара: 0.06em катуу # 000; чек-ара-Төмөндө: 0; арип: тайманбастык 0.88em / 2em Arial, Лион, Helvetica, Sans-Serif; түс: # 000; маалымат-түсү: #ccc; / * CSS 3 элементтер * / WebKit-чек-ара-жогорку оң-радиусу: 0.50em; -webkit-чек-ара-жогорку-сол-радиусу: 0.50em; -moz-чек-ара-радиусу-TopRight: 0.50em; -moz-чек-ара-радиусу-topleft: 0.50em; чек-ара-жогорку-оң-радиусу: 0.50em; чек-ара-жогорку-сол-радиусу: 0.50em; } .tablist Ли: үстүнө {маалымат: # 3cf; түс: #fff; текст кооздугу: эч бири; }

Бул стилде менен, бардык негизги браузерлерде жумуштарды жана CSS 3 ылайык браузерлерде жакшы басма өтмөктөрдүн окшош бир кошумча барактардын жардамы менен карап менюсу бар. Кийинки барактан сизге дагы бир мүмкүнчүлүк, аны ого бетер кооздоо колдоно аласыз берет.

06-жылдын 06

Учурдагы табулатура бөлүп көрсөтүү

Мен жараткан HTML, ул бир ID менен бир тизме элементин болчу. Бул башка бир ли башкача стили берүүгө мүмкүндүк берет. көбүнчө учурдагы табулатура кандайдыр бир жол менен баса белгилөөгө болот. Бул жөнүндө ойлонуп көрүүгө дагы бир жолу, силер жашай турган эмес, табулатура чыккан боз келет. ID башка барактарда кайда болсо өзгөргөн.

да бир аз ар түрдүү, ошондуктан, алып келүү Sta: Мен #current бир күнү, ошондой эле #current А да табылган. Сиз түс, арткы түсүн да, бийиктиги, туурасы жана элементтин толтургуч өзгөртө аласыз. Сиздин долбоор кандай өзгөрүүлөрдү мааниси болсун.

бир {маалымат-түсү .tablist Ли # учурдагы: # 777; түс: #fff; } .tablist Ли # учурдагы бир: калкып {маалымат: # 39C; }

Ал эми, сен эмне жатасыз! Сен жөн гана интернет үчүн кошумча барактардын жардамы менен карап менюсун жасадык.