Tab-г хэрхэн үүсгэхийг CSS болон No Images ашиглан хэрхэн үүсгэх

01 - 06

Tab-г хэрхэн үүсгэхийг CSS болон No Images ашиглан хэрхэн үүсгэх

CSS 3 Tabbed Menu. J Kyrnin-ийн дэлгэцийн зураг

Вэб хуудсан дээрх навигаци нь жагсаалтын хэлбэр бөгөөд tabbed navigation нь хэвтээ жагсаалттай адил юм. CSS-тэй хэвтээ tabbed navigation үүсгэх нь нэлээд хялбар байдаг боловч CSS 3 нь бидэнд илүү сайн харагдахын тулд хэд хэдэн хэрэгслийг бидэнд олгодог.

Энэ заавар нь CSS tabbed цэсийг үүсгэхэд шаардлагатай HTML болон CSS-ээр дамжуулан танд хүргэх болно. Тэрхүү холбоос дээр дарж харагдах болно.

Энэ цэс нь цэсэнд ямар ч зураг , HTML, CSS 2, CSS 3 ашигладаггүй. Энэ нь илүү олон таб нэмэх эсвэл текстээ өөрчлөхөд амархан засварлаж болно.

Хөтөчийн дэмжлэг

Энэ цэс нь бүх гол хөтчүүд дээр ажиллах болно. Интернет судлаачид булангийн буланг харуулахгүй, гэхдээ энэ нь Firefox, Safari, Opera, Chrome гэх мэт табуудыг үзүүлэх болно.

02 of 06

Цэсний жагсаалтаа бичнэ үү

Бүх навигацын цэснүүд болон табууд нь үнэхээр эрэмбэлэгдээгүй жагсаалт юм. Тиймээс таны хүссэн хамгийн эхний зүйл бол та хүссэн газраа хүссэн холбоосоо хүссэн холбоосгүй жагсаалтын жагсаалтыг бичнэ.

Энэ заавар нь текст засварлагчаар таны HTML-г бичиж байгаа бөгөөд HTML хуудсыг өөрийн вэбсайт дээр байрлуулахаа мэдэж байгаа болно.

Өөрийн захиалгат жагсаалтыг ингэж бичнэ үү:

03 - 06

Таны Style Sheet-г засварлана уу

Та гадаад загварын хуудас эсвэл дотоод загварын хуудсыг ашиглаж болно. Дээжийн цэсний хуудас нь баримтын доторх дотоод загварын хуудас ашигладаг.

Эхлээд бид UL Өөрийгөө хэвшүүлнэ

Энд бид классын жагсаалтыг ашигладаг. HTML дээр. Таны хуудас дээрх бүх эрэмбийн жагсаалтыг хэвлэдэг UL тагийг сарнихын оронд зөвхөн UL ангиллыг бичих хэрэгтэй. tablist Тэгэхээр таны CSS доторх эхний оруулга нь:

.tablist {}

Би эцэс төгсгөлгүй буржгар холболтыг (}} хийхийг хүсч байна, тэгээд дараа нь би мартахгүй.

Бид цэсийн жагсаалтад зориулж жагсаалтад ороогүй жагсаалтыг ашиглаж байгаа ч бид ямар ч сум эсвэл тоо мөлхөхийг хүсэхгүй байна. Тэгэхээр та нэмж оруулах ёстой эхний хэв маяг нь. жагсаалт хэв маяг: none; Энэ нь хөтөч нь жагсаалт гэж байх үед энэ нь урьдчилан тодорхойлогдоогүй загвар (сум эсвэл тоо гэх мэт) байхгүй жагсаалт юм.

Дараа нь та өөрийн хүссэн зайг дүүргэхийг хүсч буй зайгаа тааруулахын тулд жагсаалтын өндөрийг тохируулж болно. Би 2em-ыг өндөрт зориулж сонгосон бөгөөд энэ нь стандарт үсгийн хэмжээг хоёр дахин авч, tab-ийн текстийн доод ба доод талыг нь өгдөг. өндөр: 2em; Гэхдээ та ямар ч хэмжээтэй хүссэн хэмжээгээр өргөнийг тохируулж болно. UL хаягууд нь автоматаар өргөн нь 100% хүртэл авдаг. Тиймээс та одоогийн контейнерээс бага байхыг хүсэхгүй бол өргөнийг орхиж болно.

Эцэст нь, хэрэв таны мастер загварын хуудас нь UL болон OL хаягуудад зориулсан урьдчилан тохируулаагүй бол та тэдгээрийг оруулахыг хүсэх болно. Энэ нь та өөрийн UL дээр хил, зай, болон дэвсгэртийг унтраах хэрэгтэй гэсэн үг юм. Налуу: 0; margin: 0; border: none; Хэрэв та аль хэдийн UL хаягыг дахин тохируулсан бол, та дизайнтай тохирсон ямар нэг зүйл дээр зах, далан, эсвэл хил хязгаарыг өөрчилж болно.

Таны сүүлд .tablist ангилал иймэрхүү харагдах ёстой:

.tablist {list-style: none; өндөр: 2em; Налуу: 0; margin: 0; border: none; }

04 - 06

LI жагсаалтыг засварлах

Эрэмбэлэгдээгүй жагсаалтаа өөрчилсний дараа та дотор нь LI-ийн шошгуудыг хэвлэнэ. Үгүй бол тэдгээр нь стандарт жагсаалт шиг ажиллах бөгөөд дараагийн мөрөнд табуудаа зөв байрлуулахгүйгээр шилжих болно.

Эхлээд өөрийн загварын өмчийг үүсгэ:

.tablist li {}

Дараа нь та таблетуудаа хэвтээ хавтгай дээр байрлуулахыг хүсдэг. float: left;

Мөн tab-үүдийн хооронд зарим маршрут нэмэхийг бүү мартаарай, ингэснээр тэд хамтдаа нийлдэггүй. margin-right: 0.13em;

Таны лигийн хэв маяг иймэрхүү харагдах ёстой:

.tablist li {float: left; margin-right: 0.13em; }

05 - 06

Tab-ыг хийх нь CSS-тай Tab шиг харагддаг 3

Энэ хэв маягийн хуудсан дээрх хүнд өргөхийг хийхдээ, би жагсаалтад ороогүй жагсаалт доторх холбоосыг чиглүүлэх болно. Хөтчүүд холбоосууд нь холбоосууд нь бусад хаягуудаас илүү вэб хуудсан дээр илүү ихийг хийдэг гэдгийг хүлээн зөвшөөрдөг бөгөөд ингэснээр хуучин хөтчүүдийг hover-ийн хаяг (холбоос) уруу хавсаргах зэрэг hover зэрэг зүйлийг дагахад илүү хялбар байдаг. Эхлээд өөрийн загварын шинж чанарыг бичнэ үү:

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

Эдгээр цонхууд нь аппликешн доторх табуудтай адил үйлдэл хийх ёстой учраас зөвхөн та холбоотой текстийг төдийгүй таб-ийн бүхэлд нь дарж болох боломжтой. Үүнийг хийхийн тулд та " жужиг " төлөвөөс блок элементээс А тэмдэгийг хувиргах хэрэгтэй. дэлгэц: блок; (Хэрэв та ялгаатай талыг мэдэх сонирхолтой байгаа бол Block-Level ба Inline Elements-г уншина уу).

Дараа нь та өөрийн табуудыг өөр хоорондоо тэгш хэмтэй байлгахад хялбар арга боловч текстийн өргөнийг тааруулахад уян хатан хэвээр байгаа нь баруун болон зүүн дэвсгэрийг ижил болгох явдал юм. Би дээд болон доод талыг 0, баруун ба зүүн талд 1em хүртэл тохируулахын тулд түрхлэг түр хугацаагаар өмч хэрэглэсэн. Суурь: 0 1em;

Библийн холбоосыг хасахаар сонгосон бөгөөд ингэснээр табууд холбоос шиг харагддаггүй. Гэхдээ хэрэв сонсогчид тань санаа зовж байгаа бол энэ мөрийг орхино уу. холбоос-чимэглэл: none;

Таб доторхи нимгэн зурвасыг байрлуулснаар тэдгээр нь таб шиг харагдаж байна. Би хилийн түр зуурын өмчийг хилийн боомт болговол хилийн боомтыг хатуу болгов: 0.06em solid # 000; Дараа нь хилээс доош ёроолтой эдийг ашиглан ёроолоос нь салгаж авав. border-bottom: 0;

Дараа нь библийн фонт, өнгө, дэвсгэрийн өнгөт тохиргоог хийсэн. Эдгээрийг таны сайтанд тохирсон загварт тохируулна уу. фонт: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; өнгө: # 000; background-color: #ccc;

Дээрх бүх загварыг сонгон шалгаруулагчид оруулна .tablist li a, энэ нь ерөнхийдөө зангуугийн шошготой холбоотой байдаг. Дараа нь табуудыг илүү их дарж болох боломжтой болгохын тулд та хэд хэдэн дүрмийг нэмж оруулах хэрэгтэй .tablist li a: hover.

Би та хулганыг хулган хийх үед текст поп хийх текст болон дэвсгэрийн өнгөийг өөрчлөх дуртай. дэвсгэр: # 3cf; өнгө: #fff;

Мөн холбоосыг надад сануулах өөр нэг сануулагч оруулав. текст-чимэглэл: none; Өөр нэг нийтлэг арга бол хулганыхаа хулганыг хулганыг буцааж асаахад оршино. Хэрэв та үүнийг хийхийг хүсч байвал текст чимэглэлийг дараах байдлаар засна.

Гэхдээ CSS 3 хаана байна?

Хэрэв та анхаарлаа хандуулж байсан бол загварын хуудсанд хэрэглэгдээгүй CSS загвар 3 байгаагүйг та анзаарсан байх. Энэ нь Internet Explorer гэх мэт орчин үеийн браузер дээр ажиллах давуу талтай юм. Гэхдээ энэ нь табуудыг дөрвөлжин хайрцагаас илүү ямар ч зүйл шиг харагдахгүй болгож байна. CSS 3-ийн загварын хилийн радиус (мөн энэ нь хөтөчийн тусгай дуудлагатай холбоотой) нэмснээр та захын ирмэгийг тойрч, manila хавтсанд илүүтэйгээр tab-ыг харах боломжтой болно.

Тэмдэглэлд .tablist-д нэмэх ёстой хэв маягууд нь: -webkit-border-top-right-radius: 0.50em; - вэбхат-хилийн дээд зүүн радиус: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; хилийн дээд баруун радиус: 0.50em; хилийн дээд зүүн радиус: 0.50em;

Эдгээр нь миний бичсэн сүүлчийн загварын дүрмүүд юм:

.tablist li a {display: block; Суурь: 0 1em; текст-чимэглэл: none; border: 0.06em solid # 000; border-bottom: 0; фонт: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; өнгө: # 000; background-color: #ccc; / * CSS 3 элемент * / webkit-border-top-right radius: 0.50em; - вэбхат-хилийн дээд зүүн радиус: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; хилийн дээд баруун радиус: 0.50em; хилийн дээд зүүн радиус: 0.50em; } .tablist li a: hover {background: # 3cf; өнгө: #fff; текст-чимэглэл: none; }

Эдгээр загвараар та бүх гол хөтчүүдэд ажилладаг цэстэй цэстэй бөгөөд CSS 3 нийцтэй хөтөч дээр гоё хэвлэсэн цонхнууд шиг харагдана. Дараагийн хуудас нь танд илүү их хувцаслахад ашиглах өөр нэг сонголтыг өгдөг.

06 - 06

Одоогийн Tabыг дарна уу

Би үүсгэсэн HTML-д UL нь ID жагсаалтын нэг жагсаалттай байсан. Энэ нь нэг LI-ээс үлдсэн өөр стилийг өгөх боломж олгодог. Хамгийн нийтлэг тохиолдол бол одоогийн таб-ыг ямар нэг аргаар тодорхой болгох явдал юм. Үүнийг бодох бас нэг арга бол та амьд биш табуудыг цуцлахыг хүсч байгаа юм. Дараа нь та id-г янз бүрийн хуудас дээр хаана өөрчлөх вэ.

Би #current A tag болон #current A: hover sta гэсэн хоёр загварыг хоёуланг нь өөр өөрөөр ангилдаг. Та өнгө, дэвсгэрийн өнгө, тэр ч байтугай өндрийг, өргөн, дэвсгэр зэргийг өөрчилж болно. Өөрсдийн дизайнд ямар ч өөрчлөлт оруулаарай.

.tablist li # current a {background-color: # 777; өнгө: #fff; } .tablist li # current a: hover {background: # 39C; }

Та хийгдсэн! Та цахим хуудсандаа зориулж tabbed menu үүсгэсэн.