Головна
Таблетууд
Css goom-д дасан зохицох цэсийг хэрхэн өргөжүүлэх вэ? Css болон Html дээрх өөрөө хийх хэвтээ цэс Цэсийг бүхэлд нь css болгон сунгах

Css goom-д дасан зохицох цэсийг хэрхэн өргөжүүлэх вэ? Css болон Html дээрх өөрөө хийх хэвтээ цэс Цэсийг бүхэлд нь css болгон сунгах

Хэвтээ цэсє сайтын хэлтсийн жагсаалт, элементийн дунд байрлуулах нь илүү логик юм

    , дараа нь CSS-загваруудыг його элементүүдэд zasosuvat. Ийм цэсийн өргөтгөл нь вэб сайт дахь байр сууриа илт ахиц дэвшилд оруулснаар хамгийн их өргөжиж байна.

    Хэрхэн хэвтээ цэсийг бий болгох вэ: зохион байгуулалт, дизайн

    Хэвтээ цэсний HTML зохион байгуулалт, үндсэн хэв маяг

    Түгжихийн тулд жагсаалтын бүх элементүүдийг байрлуулсан болно босоо, савны элементийн өргөнийг бүхэлд нь хамарсан бөгөөд энэ нь савны блокийн өргөнийг бүхэлд нь хамарна.

    Хэвтээ навигацийн HTML тэмдэглэгээ

    Шошгоны дунд гарч ирэх хэвтээ цэсийг элементийн дунд нэмж байрлуулж болно

    аль аль нь
    ...
    . Үүнээс үүдэн html таних нь семантик мэдрэмжтэй байхаас гадна цэсийн блокыг форматлах нэмэлт боломжуудтай байх ёстой.

    Іsnuє kіlka їх тараах арга замууд хэвтээ. Кобын хувьд навигацийн элементүүдийн сурталчилгааны хөтчийн хэв маягийг хасах шаардлагатай:

    Ul ( жагсаалтын хэв маяг: байхгүй; /*жагсаалтын тэмдэглэгээг арилгах*/ зах: 0; /*дээд ба доод захыг арилгах, 1em-тэй тэнцүү*/ padding-left: 0; /*зүүн захыг арилгах, 40px*/ ) a ( текст чимэглэл: байхгүй; /*текстийн чимэглэлийг арилгах */)

    Арга 1. li (дэлгэц: дотор;)

    Robimo elementi list malimi. Үүний үр дүнд өмхий үнэр хэвтээ тархаж, баруун талтэдгээрийн хооронд нэмэлт зай нэмэгдсэн бөгөөд энэ нь 0.4 эм (энэ нь үсгийн хэмжээг харгалзан тооцдог). Иог хэрэглэхийн тулд li-д баруун талын сөрөг талбар li-г нэмнэ үү (баруун захын зай: -4px;) . Бид vlasnym цамхаг нь стилист хүсэлтийг өгсөн.

    Арга 2. li (хөвөгч: зүүн;)

    Robimo элементүүдийн жагсаалт хөвөгч. Үүний үр дүнд өмхий үнэр нь хэвтээ байдлаар тархдаг. ul блок савны өндрийг тэг болгож тохируулсан. Энэ асуудлыг шийдэхийн тулд ul (халих: нуугдмал;) -ийг нэмж, үүнийг өргөтгөж, хөвөгч элементүүдийг авахыг зөвшөөрнө үү. Мессежийн хувьд (дэлгэц: блок;) нэмээд өөрийн bajanдаа тохируулна уу.

    Сонголт 3. li (дэлгэц: inline-block;)

    Robimo элементүүдийн жагсаалт нь эгнээ блок. Өмхий үнэр нь хэвтээгээр тэнүүчилж, баруун талаас нь эхний дусал шиг цоорхой байдаг. Мессежийн хувьд (дэлгэц: блок;) нэмээд өөрийн bajanдаа тохируулна уу.

    Арга 4. ul (дэлгэц: flex;)

    Нэмэлт загварт зориулсан уян хатан савтай Robimo list ul. Үүний үр дүнд жагсаалтын зүйлүүд хэвтээ байдлаар давхарласан байна. Dodaёmo илгээж (дэлгэц: блок;) болон таны bajan үүнийг загвар.

    1. Мессеж дээр хулганыг гүйлгэн харахад идэвхжүүлэх үйлчилгээтэй мэдрэмжтэй цэс

    • ажил
    • тухай
    • Блог
    • холбоо барих
    @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (жагсаалтын хэв маяг: байхгүй; захын зай: 40px 0 5px; дэвсгэр: 25px 0 5px; текстийг зэрэгцүүлэх: төвд; дэвсгэр: цагаан; ) . цэс-main li (дэлгэц: inline-block;) .menu- үндсэн li: дараа (агуулга: "|"; өнгө: #606060; дэлгэц: inline-block; vertical-align: top; ) .menu-main li: last-child: дараа (агуулга: байхгүй;) .menu-main a (текст-чимэглэл: байхгүй; фонт-бүлэг: "Ubuntu Condensed", sans-serif; үсэг хоорондын зай: 2px; байрлал: харьцангуй; дэвсгэр-доод: 20px; захын зай: 0 34px 0 30px; үсгийн хэмжээ: 17px; текст хувиргах: том үсгээр; дэлгэц: доторлогоотой блок; шилжилт: өнгө .2s; ) .цэс-үндсэн a, .цэс-үндсэн a: зочилсон (өнгө: #9d999d;) үндсэн а:хулганаа(өнгө: #feb386;) .menu-main a:befor, .menu-main a:after ( агуулга: ""; байрлал: үнэмлэхүй; өндөр: 4px; дээд: автомат; : -5px; зүүн: 50%; дэвсгэр: #feb386; шилжилт: . 8s; ) .menu-main a:hover:fore; hover:дараа, .menu-main .current:дараа (баруун: 0; ) @media (хамгийн их өргөн: 550px) ( .menu-main (padding-дээд: 0;) .menu-main li (дэлгэц: блок; ) .цэс-main li:дараа (агуулга: аль нь ч биш;) .цэс- a ( дүүргэх: 25px 0 20px; захын зай: 0 30px; )

    2. Хөгжилтэй сайтад зориулсан мэдрэмжтэй цэс

    @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .дээд цэс (байрлал: харьцангуй; дэвсгэр: #fff; хайрцаг-сүүдэр: оруулах 0 0 10px #ccc; ) .дээд цэс: өмнө, .дээд цэс: дараа ( контент: ""; дэлгэц: блок; өндөр : 1px; хүрээ-дээд: 3px хатуу #575350; хүрээ-доод: 1px цул #575350; захын-доод: 2px; ) #575350;box-сүүдэр: 0 2px 7px #ccc; захын дээд хэсэг: 2px; ) .цэс-main (жагсаалтын хэв маяг: аль нь ч биш; дэвсгэр: 0 30px; төв; байрлал: харьцангуй; ) .menu-main:өмнө; ); . . (текстийн чимэглэл: байхгүй; дэлгэц: шугаман блок; захын зай: 2px 5px; дэвсгэр: 6px 15px; фонт-бүлэг: "PT Sans", sans-serif; үсгийн хэмжээ: 16px; өнгө: #777777; хилийн доод хэсэг : 1px хатуу тунгалаг; n: .3s шугаман; ) .цэс-main .current, .menu-main a:hover ( хүрээ-радиус: 3px; дэвсгэр: #f3ece1; өнгө: #313131; текст-сүүдэр: 0 1px 0 #fff;@media (хамгийн их өргөн: 500px) ( .цэс-үндсэн li (дэлгэц: блок;) )

    3. Халуун ногоотой мэдрэмжтэй цэс

    • ажил
    • тухай
    • Блог
    • холбоо барих
    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( жагсаалтын хэв маяг: байхгүй; дэвсгэр: 0 30px; захын зай: 0; үсгийн хэмжээ: 18px; текстийг зэрэгцүүлэх: төвд; байрлал: харьцангуй; дэвсгэр: цагаан; ) .menu-main: дараа ( агуулга: ""; байрлал: үнэмлэхүй; өргөн: 100%; өндөр: 20px; зүүн: 0; доод тал: -20px; 255,255,255,0) 100%) 0 -10px; дэвсгэр хэмжээ: 20px 20px; дэвсгэр-давталт: давтах-x; ) . аль нь ч биш; дэлгэц: inline-block захын зай: 0 15px; дүүргэх: 10px 30px; font-family: "PT Sans Caption", sans-serif; -main a:fore, .menu-main a:after (агуулга: ""; байрлал: үнэмлэхүй; дээд: calc(50% - 3px); өргөн: 6px; өндөр: 6px; #F58262; тунгалаг байдал: 0; шилжилт: .5 секундын хялбараар гарах; ). одоогийн:өмнө, .menu-main a. одоогийн түрээс: дараа, . ) @media(хамгийн их өргөн:680px) ( .цэс-үндсэн li (дэлгэц: блок;) )

    4. Хуудас дээрх мэдрэмжтэй цэс

    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .топ-цэс (хаваас: 0 60px; байрлал: харьцангуй; дэвсгэр: #5A394E; хайрцаг-сүүдэр: оруулах 1px 0 0 rgba(255,255,255,.1), оруулах -1px 0 0 rgba(255,255,2) 0 150px -150 rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12);.top-menu:fore, .e z-index: 2; зүүн: 0; өргөн: 100% өндөр: 3px; ) .top-цэс:өмнө ( дээд: 0; цэс: дараа (доод: 0; хүрээ-дээд: 1px тасархай rgba(255,255,255,.2); ) .menu-main ( жагсаалтын хэв маяг: байхгүй; дүүргэх: 0; захын зай: 0; текстийг зэрэгцүүлэх: төв; ) .цэс-үндсэн:өмнө, .цэс-үндсэн:дараа ( агуулга: ""; байрлал: үнэмлэхүй; өргөн: 50px; өндөр: 0; дээд: 8px; 5A394E; хувиргах: эргүүлэх(360deg); z-индекс: -1; ) .цэс-үндсэн:өмнө (зүүн: -30px; үндсэн: дараа (баруун: -30px; баруун хүрээ: 12px хатуу rgba(2 55, 255, 255, 0) ); ) .menu-main li (дэлгэц: inline-block; margin-right: -4px; ) .menu-main a (текст чимэглэл: байхгүй; дэлгэц: inline-block; Санс тайлбар", sans-serif; өнгө : цагаан; шилжилт: .3с шугаман; ) .цэс-үндсэн a.гүйдэл, .цэс-үндсэн a:хулганаа @media (хамгийн их өргөн: 680px) ( .дээд цэс (хаваас: 0;) .цэс-main li ( дэлгэц: блок; баруун захын зай: 0; ) .цэс-үндсэн:өмнө, .цэс-үндсэн:дараа (агуулга: байхгүй;) .цэс-үндсэн a (дэлгэц: блок;) )

    5. Дунд хэсэгт лого бүхий мэдрэмжтэй цэс

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .топ-цэс (байрлал: харьцангуй; дэвсгэр: rgba(34,34,34,.2); ) .цэс-үндсэн (жагсаалтын хэв маяг: байхгүй; захын зай: 0; дүүргэх: 0; ) . цэс-үндсэн: дараа ( агуулга: ""; дэлгэц: хүснэгт; тодорхой: хоёулаа; ) .зүүн талын зүйл (хөвөгч: зүүн;) .баруун-зүйл (хөвөгч: баруун;) .navbar-лого ( байрлал: үнэмлэхүй; зүүн: 50%; дээд : 50%; хувиргах: орчуулах(-50%,-50%); ) .цэс-үндсэн a (текст чимэглэл: байхгүй; displayj: блок; ; үсэг хоорондын зай: 2px; фонт-бүлэг: "Arimo", sans -serif; үсгийн жин: цагаан; 0,0,.3);) @media (хамгийн их өргөн: 830px) (.цэсийн үндсэн (дээр нь дүүргэх: 90px; текстийг зэрэгцүүлэх: төвд;)). ; дээд: 10px; хувиргах: translateX(-50%); ) .цэс-main li (хөвөгч: байхгүй; дэлгэц: inline-block; ) -хэмжээ: 16px; ) ) @media (хамгийн их өргөн: 630px) ( .цэс-үндсэн li (дэлгэц: блок;)) )

    6. Zliva лого бүхий мэдрэмжтэй цэс

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .дээд цэс (арын дэвсгэр: rgba(255,255,255,.5); хайрцаг-сүүдэр: 3px 0 7px rgba(0,0,0,.3); дэвсгэр: 20px; ) .top-цэс: дараа ( контент: "" .дэлгэц: хүснэгт; тодорхой: хоёулаа; ) .navbar-лого (дэлгэц: inline-block;) . li (дэлгэц: inline-block;) .menu-main a (текст чимэглэл: байхгүй; дэлгэц: блок; : 2px; фонт-гэр бүл: "Arimo", sans-serif; үсгийн жин: тод; өнгө: #F73E24 ;шилжилт:.3шугаман; ). өндөр: 9px;арын дэвсгэр:#F73E24;байрлал: үнэмлэхүй;зүүн:50%;хувиргах: эргүүлэх(45deg) translateX(6.5px); тунгалаг байдал:0;шилжилт:.3s шугаман; (тунгалаг байдал: 1;) @media (хамгийн их өргөн: 660px) ( .menu-main ( хөвөх: байхгүй; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:fore (хувиргах: эргүүлэх(45deg) translateX(-6px);) ) @media (хамгийн их өргөн: 600px) ( .menu-main li (дэлгэц: блок;) )

    Витанниа. Би html/css-ийн талаар нийтлэл бичээгүй удаж байна. Саяхан шинэ зохион байгуулалт хийж эхэлсэн бөгөөд ашиглаж байгаа cicavia priyom, энэ нь gumovim-ийн цэсийг өргөжүүлэх боломжийг олгодог (шинэ зүйлээс өмнө та шинэ зүйл нэмэх боломжтой бөгөөд өргөтгөл нэмэгдэхгүй, гэхдээ та Баткив блокийн 100% байх болно). Мөн өнөөдөр css gum цэс дээр хэрэгжсэн.

    Өгүүллийг уншихад хэн санаа тавьдаг вэ, та видеог гайхшруулж чадна. Зохиогч бас бүх зүйлийг маш сайхан тайлбарлав:

    CSS дээрх бохь цэс - krok 1

    Эхний Croc - Цэ Завжди html зохион байгуулалттүүнгүйгээр хаана хийх вэ. Але, манай випадкад бүх зүйл энгийн байх болно:

    1. цэсийн блок засах
    2. цэс өөрөө, тэмдэглэгээний жагсаалтаар (ul tag) хардаг
    3. За, цэсний зүйлүүд дунд байгаа бөгөөд тэдгээрийн дотор аль хэдийн мессеж байгаа нь ойлгомжтой

    Бүх зүйл тодорхой байсан, тэнхлэг нь миний хувьд дараах код юм.



    Бүх зүйлийг стандарт гэж үзвэл тэнхлэг нь дараах байдалтай байна.

    Одоо бид бүх зүйлийг шаардлагатай харагдац руу оруулж, роботын CSS-г авсан.

    Крок 2 - үндсэн хэв маяг

    Дараа нь би obgortsa блок дээр хэв маяг нэмэх болно. Би өөрийнхөө хувьд хамгийн дээд өргөнийг 600 пиксел болгож (зөвхөн дэлгэцийн агшинг гараар авахын тулд цэсийг багтаахын тулд), мөн блокыг голчлон байрлуулна.

    боох(
    дэвсгэр: #fff;
    хамгийн их өргөн: 600px
    захын зай: 0 автомат;
    }

    Крок 3 - бодит хүмүүнлэг

    Одоо цэс өөрөө. Шинэ нэгээс (ul tag-аас) би тэмдэглэгээг арилгаж, арын шугаман градиентийг нэмэгдүүлж, хамгийн чухал нь дэлгэцийг тохируулах болно: хүснэгтийн эгнээний хүчийг цэс нь хүснэгтийн мөр шиг ажиллахын тулд саванд хийнэ. Холын заль мэхийг өсгөх нь чухал юм.

    R-цэс(
    дэвсгэр: шугаман-градиент(баруун тийш, #b0d4e3 0%, #88bacf 100%);
    дэлгэц: хүснэгт-мөр;
    жагсаалтын хэв маяг: байхгүй;
    }

    Сарлаг бачит, удирдамжийн кодыг сахалтай гаталж, миний бичсэн. Энэ тухай ярихад, Ultimate CSS Gradient Generator хэрэгслийг ашиглан градиентуудыг гараар үүсгээрэй. Би шинэ зүйлийн талаар илүү ихийг бичих болно.

    R-цэс li(
    босоо зэрэгцүүлэх: доод;
    дэлгэц: хүснэгт-нүд;
    өргөн: автомат;
    текстийг зэрэгцүүлэх: төв;
    өндөр: 50px;
    баруун хүрээ: 1px хатуу #222;
    }

    • vertical-align: доод - энэ хүч нь үүнийг онцгойлон харуулахад шаардлагатай бөгөөд ингэснээр цэсийн зүйлийн текст 2 эгнээ авч, жигд харагдах болно. Хэрэв бид цэсийг өргөжүүлбэл та хүчийг харж, масштабыг нэмэгдүүлж, цэгүүдийг шахаж, текстийг хоёр эгнээнд шилжүүлж, харуулах асуудлыг шийдэж чадна. Эрчим хүчийг эргүүлж, бүх зүйл сайхан болно.
    • display: table-cell - бид цэсийг өөрөө хүснэгтийн мөр болгон харуулахаар тохируулсан тул тэдгээрийн аль нэгийг хүснэгтийн мөр болгон харуулах нь логик юм. Цэ обовьязково.
    • өргөн: автомат - догол мөр дэх текстийн уртаас хамааран өргөнийг автоматаар тооцдог
    • text-align: center гэдэг нь текстийг дунд нь голлуулахад л зориулагдсан
    • өндөр: 50px - өндрийг 50 пиксел болгож тохируулна уу
    • за, border-right бол зүгээр л баруун гар талын хүрээ, ийм цэг хуваагч юм

    Цэс нь үл анзаарагдам мэт харагдах ч юу ч биш, Йогог шаваас руу авчрах цаг ирлээ.

    Танд хэрэгтэй зүйлээ үлдээгээрэй - дунд догол мөрүүдийн хэв маягийг тохируулна уу. Энд надад энэ код байна:

    R-цэс li a (
    текстийн чимэглэл: байхгүй;
    өргөн: 1000px
    өндөр: 50px;
    босоо зэрэгцүүлэх: дунд;
    дэлгэц: хүснэгт-нүд;
    өнгө: #fff;
    фонт: хэвийн 14px Verdana;
    }

    I тэнхлэгийн одоо цэс дараах байдалтай байна.

    За, би танд хэлье, би мөрүүдийг тайлбарлах болно:

    • эрчим хүчний текст-чимэглэл skasovuє podkrelennya posilan, сарлаг umovchannyam ард тавих
    • өргөн: 1000px - магадгүй хамгийн чухал мөр. Энэ нь ойролцоогоор ижил өргөнийг тохируулах шаардлагатай, магадгүй бага, гэхдээ бас хамгийн өргөн цэсийн зүйлээс илүү юм. Хэрэв та 1000 пикселийн өргөнтэй болохыг хүсэхгүй байгаа бол li цэсийн өргөнийг автоматаар тохируулж, дараа нь цэсийн аль ч тооны зүйлд тохируулахын тулд үүнийг ажиллуулахыг зөвшөөрнө үү. 100 пиксел хүртэл өргөн.
    • vertical-align: middle болон display: table-cell - эхлээд текстийг босоо байдлаар голд нь, нөгөө талд нь текстийг дундуур нь харуулахыг оролдоно. Эрх мэдэлд халдсан гэмт хэрэг хэрэгтэй.
    • фонт - энэ нь зөвхөн үсгийн тохиргооны багц юм. Энэ нийтлэлээс фонтуудад зориулсан css power-ийн талаар уншина уу.

    Krok 4 (цамхагуудын ард) интерактивыг нэмж болно

    Жишээлбэл, хулгана дээр байрлах цэсний өнгийг өөрчлөх. Realizuєtsya tse илүү энгийнээр, псевдо ангиллын тусламжийн төлөө.

    R-цэс: хулганаа гүйлгэх (
    дэвсгэр өнгө: #6bba70;
    }

    Цэсийг бохь эсэхийг шалгаж байна

    Үнэн хэрэгтээ, цэс бэлэн болсон, гэхдээ бид хамгийн тэнэг зүйлийг хэт нягтлаагүй - миний хэлсэнчлэн бид гоншигнох болно. За, би цэсэнд дахиад 2 зүйл нэмнэ:

    Цэс нь 600 пикселийн хүрээгээ алдсан. Үлдсэн цэгүүд нь зүгээр л шахагдсан тул 2 шинэ цэг тавьсан.

    Би дахиад 1 оноо нэмнэ:

    Яг үүнтэй адил цэс нь бага зэрэг өөрчлөгдөөд нөгөө зүйл нь бүрэн хэвийн болсон бололтой. Бас сарлагийнханд босоо тэнхлэгийн хүч байхгүй байсан: доод тал нь, сарлагийн тухай, цэс илүү сайхан харагдах болно гэж би хэлсэн.

    Би цэсийг гурван цэг болгон өөрчлөх болно.

    Зүйлүүд улам баялаг болсон ч цэс өөрөө өргөнөөрөө өөрчлөгдөөгүй. Axis mi болон zrobili 100% бохь цэс!

    Иогт хэрхэн дасан зохицох вэ?

    Зарчмын хувьд, та боодлын блокыг тогтмол биш, харин хамгийн их өргөнөөр тохируулсан тул үүнийг тохируулах шаардлагагүй болно. Миний сонголт бол хүчийг хамгийн их өргөн: 600px болгож тохируулах бөгөөд хэрвээ өргөн нь 600 пикселээс бага бол дэлгэцийг даган блокийн хэмжээг зүгээр л өөрчилж, хэвтээ гүйлгэхээс сэргийлнэ.

    Хэрэв та ямар нэг зүйлийг өөрчлөх эсвэл цэсийг өөрчлөхийг хүсч байвал хөдөлгөөнт барилга байгууламжгэхдээ өргөн дэлгэц дээр, дараа нь хэвлэл мэдээллийн хэрэгсэл танд туслах болно! Вэб сайтад амжилт хүсье!

    Бид таны харж байгаа зүйлд цэс хуваарилах тухай хичээлээр цувралаа үргэлжлүүлж байна. Хэвтээ цэс дээр, таны харж байгаа зүйл, css дээр өөрийн гараар.

    Yakshcho та энд vipadkovo уусан эсвэл та цэс хэрэгжүүлэх талаар хошигносон, юу харж байна, Raja Batkivsky салбар руу явж.

    Хэсэг бүр нь CSS болон HTML дээр гарч ирэх хэвтээ цэсийн тайлбартай байх болно.

    Хажуугийн навигаци:

    би тийм Бидний даалгавар:

    робити хэвтээ цэс css жагсаалт (ul li жагсаалтууд дээр) байхгүй jQuery викитэр Javascript, түүнчлэн zastosuvannya хүснэгтгүйгээр

    код дээр.

    Таны харж буй хэвтээ цэс

    Бид урд байна, код бичиж эхлэхээсээ өмнө бид ажиллах хэрэгтэй html загварцэсийн хувьд.

    Үүнтэй холбогдуулан бид бүх нийтийн цэсийг бий болгохыг хүсч байна, би үүнийг WordPress цэсийн харагдах байдалтай аль болох адилхан болгохыг хүсч байна. Миний бодлоор энэ бол хамгийн энгийн бөгөөд түгээмэл Html цэсийн кодуудын нэг юм. Ийм харагдаж байна:

    Кодоос харахад бидний харж байгаа цэс ul болон li жагсаалтад хэрэгжих болно. Тэнхлэг нь CSS загваргүй энэ цэс шиг харагдаж байна:

    Гайхалтай жагсаалт шиг урагшаа хараад хэлчихье. Тэд бидэнд цэсийг нэмэлт CSS загвараар чимэглэх хэрэгцээг өгсөн.

    CSS дээр байрлах хэвтээ цэс

    Цэсний CSS-ийн хэв маяг, харагдахуйц зүйл нь зөвхөн төдийгүй илүү их зүйл хэрэгтэй. Таны харж байгаа насны таб, псевдо ангиллын үндсэн дээр тулалдана: hover.

    Таны харж буй хэвтээ цэсийн хувьд бидэнд дараах тэнхлэг хэрэгтэй:

    #цэс1(байрлал:харьцангуй; дэлгэц:блок; өргөн:100%; өндөр:автомат; z-индекс:10; ) #цэс1 ul(байрлал:харьцангуй; дэлгэц:блок; зах:0px; дэвсгэр:0px; өргөн:100 %;height:auto;list-style:none;background:#F3A601; menu1 ul li( байрлал:харьцангуй; дэлгэц:блок; хөвөх:зүүн; өргөн:авто; өндөр:авто; ) #menu1 ул li a( дэлгэц: блок; padding:9px 25px 0px 25px;фонт-хэмжээ:14px;фонт- гэр бүл:Arial, sans-serif;color:#ffffef;line-height:1.3em;text-decoration:none;font-weight:bold;text -transform:uppercase;height:36px;box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )

    Энэ бол төгсгөл биш, харин үндсэн хэвтээ цэсийн CSS-ийн зөвхөн нэг хэсэг юм. Цэсний жагсаалтын хэв маягийг бичье:

    # цэс1 ул ли ул (байрлал: үнэмлэхүй; дээд: 36 пиксел; зүүн: 0 пиксел; дэлгэц: байхгүй; өргөн: 200 пиксел; арын дэвсгэр: # EBBD5B; ) # цэс1 ул li: hover ul(дэлгэц: блок;) чиглүүлэх механизм*/ # цэс1 ул ли ул ли( хөвөх: байхгүй; өргөн: 100%; ) # цэс1 ул ли ул li(дэлгэц: блок; текст хувиргах: байхгүй; өндөр: автомат; 100% хайрцагны хэмжээ: хилийн хайрцаг; хилийн дээд хэсэг :1px хатуу #ffffff; ) #цэс1 дэвсгэр:#FDDC96; өнгө:#6572BC;

    Тэнхлэг нь одоо u байна. Бодит байдал буурах механизм нь нэг эгнээнд байдаг.

    Цэсээс арьсыг харна уу:

    Цагаан будаа. 2 (хэвтээ цэс, таны харж буй зүйл)

    Доорх нь роботын унждаг цэсний демо тойм, мөн амралтын түрээсийн хүсэлтийг энд оруулав. (Демо нь дунд талын дээд талд тоглогдох болно, та шинэ цонхонд нээх дарах шаардлагагүй 🙂 эсвэл олон баавгай байгаа)

    Бүтэн өргөн унасан хэвтээ цэс

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

    Та өгзөгөө далимдуулчихсан байх гэж бодож байна. Html өөрчлөгдөөгүй хэвээр үлдсэн бөгөөд бид CSS тэнхлэгийг дахин санаж байна. Та зүгээр л эндээс CSS кодыг аваад өгзөг рүү нь нааж болно, эсвэл ажиллах үед нь демо горимд үүнийг харж болно.

    #conteiner( өргөн: 1000 пиксел; өндөр: автомат; зах: 0 пиксел автомат; дүүргэх дээд: 10 пиксел; ) # цэс1 ( байрлал: харьцангуй; дэлгэц: блок; өргөн: 100%; өндөр: автомат; z индекс: 10; ) # цэс1 ul( байрлал:харьцангуй; дэлгэц: блок; зах: 0px; дүүргэх: 0px; өргөн: 100%; өндөр: автомат; жагсаалтын хэв маяг: байхгүй; дэвсгэр: #F3A601; ) # цэс1 > ul( текстийг зэрэгцүүлэх: зөвтгөх; font-size:1px; line-height:1px; ) #цэс1 > ul::after( display:inline-block; width:100%; height:0px; :харьцангуй; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li a( display:block; :14px;font-family:Arial, sans-serif;color:#ffffef;line-height: 1.3em;текст-чимэглэл:байхгүй;фонт-жин:bold;текст-хувиргах:том үсгээр;:border-box; ) #menu1 ul li > a:hover; :0px; дэлгэц: байхгүй; өргөн: автомат; дэвсгэр:#EBBD5B; хоосон зай: одоо ороолт; ) #menu1 ul li: last-child ul(/*сүүлийн зүйл баруун тийш дарагдах болно*/ зүүн:авто; баруун:0px; ) унадаг цэс*/ # цэс1 ул ли ул ли(дэлгэц:блок; өргөн:авто; ) #цэс1 ул ли ул ли(дэлгэц:блок; текст-хувиргах:байхгүй; өндөр:авто; хайрцагны хэмжээ: хүрээний хайрцаг; хилийн дээд:1px хатуу #ffffff;) # цэс1 #FDDC96; өнгө:#6572BC;

    Мөн, энэ өгзөг анх удаа шиг харагдаж байна, гэж цэс, та унасан гэж, уналт нь өөрөө, уринш нь сунгаж, бүх цэс зүйлсийн өргөн.

    Цэсийн бусад зүйлсийн хувьд энэ сонголт нь илүү тохиромжтой биш байж магадгүй, учир нь үнэр нь хил хязгаараас гарах болно. Цахилгааныг гаргахын тулд "white-space:nowrap;" хүчийг мэдэхэд хангалттай. сонгогч # цэс1 ул ли ул би йогтой.

    Доор та үзүүлэнг үзэх эсвэл хэвтээ цэсийг харах боломжтой.

    Жижиглэн худалдаачидгүй бол цэс иймэрхүү харагдаж байна. Та гараар html дээр өргөтгөл нэмж болно, гэхдээ хэрэв танд CMS, жишээ нь WordPress байгаа бол гараар нэмэх боломжгүй.

    Жижиглэн худалдаачидтай хэвтээ цэс

    гэх мэт олон арван сонголт байдаг цэвэр CSSцэсийн зүйлсийн хооронд нөхөр (rozdіlyuvach) нэмнэ. Twisting::fore or::after гэх мэт сонголтууд, эс тэгвээс би хил-зүүн, баруун хүрээ-г хуулбарлахгүй.

    Хэрэв зохион байгуулалт нь jqueryгүйгээр хийх боломжгүй тийм гайхалтай нөхцөл байдал бий.

    Бидэнд маш олон html код байгаа, бид үүнийг jQuery номын сантай өөрөө холбосон, тэр файл нь ялсан:

    Эрт урьдын цагт.

    Таны ойлгож байгаагаар файл үүсгэх шаардлагатай байна скрипт цэс-3.jsмөн энэ жижиг кодыг оруулна уу:

    $(баримт бичиг).бэлэн(функц()( $("#цэс1 > ul > li:not(:сүүлийн хүүхэд)").дараа(""); ));

    Ийм цэсийн CSS хэв маягийг орхих шаардлагатай, юу вэ, + энэ хэсгийн тэнхлэгийг эцэс хүртэл шид:

    #menu1 ul li.razd( өндөр:28px; өргөн:1px; дэвсгэр:#ffffff; захын дээд:4px; )

    jQuery дээрх сонголттой хэвтээ цэсийг харахын тулд тэнхлэг нь дараах байдалтай байна.

    Та демо-г үзэх эсвэл доорх хэвтээ цэсийн загварыг татаж авах боломжтой.

    Ийм шийдлийн давуу талууд нь:

    • цэс динамикаар сунадаг;
    • жижиглэнгийн худалдаачнаас ялгарах цэг хүртэл гарах;
    • Тэр бяцхан туулайг илүү гоё чимэглэсэн байна.

    Хэвтээ Baghatorivneve CSS + HTML цэс

    Энэ нь bugatorivne тухай байсан тул, дээр хулганаа гүйлгэж байх үед цэс алга болж, дангаар нь дэд бүлэгт тэдгээрийг хуваах varto:

    1. алахыг онох үед випадашкойтой
    2. гурав дахь тэнцүү нь залгах vapadka нь

    Би өгзөгөөрөө харуулдаг bagatorivneve цэс CSS for 3 тэнцүү, би юу хийх хэрэгтэйг ойлгоход хэцүү биш байх гэж бодож байна.

    Та хулганаа хулганаар номонд товчлол бүхий Bagatorivneve цэс

    Кобын хувьд бид html-ээ бага зэрэг засах хэрэгтэй. Тэнд та 3-р эгнээний хэд хэдэн эгнээ авах болно:

    #conteiner( өргөн: 1000 пиксел; өндөр: автомат; зах: 0 пиксел автомат; дүүргэх дээд: 10 пиксел; ) # цэс1 ( байрлал: харьцангуй; дэлгэц: блок; өргөн: 100%; өндөр: автомат; z индекс: 10; ) # цэс1 ul( байрлал:харьцангуй; дэлгэц: блок; зах: 0px; дүүргэх: 0px; өргөн: 100%; өндөр: автомат; жагсаалтын хэв маяг: байхгүй; дэвсгэр: #F3A601; ) # цэс1 > ul( текстийг зэрэгцүүлэх: зөвтгөх; font-size:1px; line-height:1px; ) #цэс1 > ul::after( display:inline-block; width:100%; height:0px; :харьцангуй; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left;) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a (дэлгэц:блок; padding:9px 45px 0px 45px; em;текст-чимэглэл:байхгүй;фонтын жин:bold;текст-хувиргах:том үсэг;өндөр:36px;box-sizing:border-box;) #menu1 ul li ( дэвсгэр: #EBBD5B; өнгө:#2B45E0; ) # цэс1 ул ли ул( байрлал: үнэмлэхүй; дээд: 36 пиксел; зүүн: 0 пиксел; дэлгэц: байхгүй; өргөн: автомат; дэвсгэр: # EBBD5B; цагаан зай: одоо байгаа; ) # menu1 > ul > li: last-child > ul(/*сүүлийн зүйл байх болно баруун ирмэг дээрх хавсралтууд*/ зүүн:авто; баруун: 0px; ) #menu1 ul li:hover > ul(дэлгэц:блок;)/*энэ мөрөнд чиглүүлэх механизмыг хэрэгжүүлдэг*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( дэлгэц : блок; текст хувиргах: байхгүй; өндөр: автомат; дэвсгэр: 7px 45 пиксел; өргөн: 100%; хайрцагны хэмжээ: хилийн хайрцаг Хилийн дээд хэсэг: 1 пиксел хатуу #ffffff; ) a( дэвсгэр:#FDDC96; өнгө:# 6572BC ; ) #menu1 ул ли ул ли ул( дээд: 0px; > ул ул(зүүн: автомат; баруун: 100%;) # цэс1

    jQuery-д зориулсан файлуудыг урд талын өгзөгөөс авсан мэт хуулдаг. Виришив жижиглэнгийн худалдаачдыг орхисон тул цэс нь арай илүү харагдах болно. Мэдээжийн хэрэг, та тэдэнгүйгээр боломжтой.

    Тэнхлэг нь дараах байдалтай байв.
    Би баруун гартай болон дунд хэсэгтээ хэрхэн харагддагийг харуулахын тулд нэг дор 2 арьс хийсэн.

    Доор та демо-г үзэж, хувьцааг татаж авах боломжтой.

    Хулганы гүйлгэх үед нэгтгэх унжлагатай гарч ирэх баялаг цэс

    Трочийн тосыг гарчигт оруулаагүй боловч smut кодыг smut.

    Энэ өгзөгний мөн чанар нь хэвтээ цэсийг бий болгох бөгөөд энэ нь бүрэн өргөн рүү унаж, бүрэн өргөн + баялаг руу унадаг.

    Би html кодыг өөрчлөхгүй, та үүнийг урд талын өгзөгөөс нь авч болно. jQuery дээр Razdіlyuvachi бас дарагдсан байна.

    Зөвхөн CSS-г дахин дахин өөрчлөх:

    #conteiner( өргөн: 1000 пиксел; өндөр: автомат; зах: 0 пиксел автомат; padding-top: 10 пиксел; ) # цэс1 (байрлал: харьцангуй; дэлгэц: блок; өргөн: 100%; өндөр: автомат; z индекс: 10; ) # цэс1 ul( байрлал:харьцангуй; дэлгэц: блок; зах: 0px; дүүргэх: 0px; өргөн: 100%; өндөр: автомат; жагсаалтын загвар: байхгүй; дэвсгэр: #F3A601; ) # цэс1 > ul( текстийг зэрэгцүүлэх: зөвтгөх; font-size:1px; line-height:1px; ) #цэс1 > ul::after( display:inline-block; width:100%; height:0px; :харьцангуй; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 > ul > li(position:static;) :28px;width:1px;background:#ffffff;margin-top:4px;) # цэс1 ul li a(дэлгэц:блок; дүүргэх:9px 45px serif; өнгө:#ffffef;мөрийн өндөр:1.3эм;текст-чимэглэл:байхгүй;фонтын жин:bold;текст-хувиргах:том үсэг;өндөр:36px; a :hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; дэвсгэр:#EBBD5B; ) #цэс1 > ul > li > ul::after( clear:both; float: n нэг; өргөн: 100%; өндөр: 0px; агуулга:" "; ) # цэс1 :блок; өргөн: 30%; хөвөх:зүүн; ) # цэс1 ул ли ул ли а( дэлгэц:блок; -хайрцаг ; өнгө:#6572BC; ; блок; хөвөх: байхгүй; өргөн:100%;) # цэс1

    Цэсний тэнхлэг нь иймэрхүү харагдах болно: Цорын ганц мөч - сайт нь хангалттай зайтай байж болох тул баруун талд байгаа туйлын цэгийн зай байхгүй болно. Энэ асуудлыг шийдэж болно: nth-хүүхэд, гэхдээ би хотыг хашаа барихгүй.

    Хэвтээ цэсний демо-г үзнэ үү:

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

    Би үүний төлөө бүх зүйлд бэлэн байна, би чамд өгзөгийнхөө нэгийг хүсч байна. Хүндэтгэл үзүүлсэнд баярлалаа.

    Цэ уйтгар гуниг, їм авчирч, би 🙂.

    Хэрэв та нийтлэлийг сайтар уншсан ч хэвтээ цэсээ хэрхэн үүсгэхээ мэдэхгүй байгаа бол css дээр юу харж болох вэ, коммент хэсэгт хоолоо тохируулаарай эсвэл сайтаас хурдан хайгаарай.

    Тиймээс, ража нь эцгийн талыг хардаг https://website/vypadayushhee-menu/, бүх хэрэглэгдэх болон өөр өөр цэс сонгогдсон байна.

    Сайтын цэсийн схемийг өргөжүүлэхийн тулд хэрэв сав нь бүхэл бүтэн өргөнийг эзэлдэг бол түүнийг хажуу талд нь авах боломжтой. Үүний тусламжтайгаар эхний цэг нь зүүн ирмэг дээр, үлдсэн хэсэг нь баруун талд байрладаг бөгөөд ирмэгийн элементүүдийн хооронд байрладаг. Өнөөдөр бид хэрхэн тулалдах талаар танд хэлэх болно.

    Бид та бүхэнд ухаарах арга замыг санал болгож байна бохь цэсцагт CSS-д тусална уутаны нөөцийн төлөө. Энэ цэсний хувьд зүйлсийг нэг эгнээнд байрлуулна. Javascript ашиглах боломжгүй. Цэсэнд агуу жагсаалтад зориулсан өрөөнүүд байх болно. Ийм цэсний толгойн зураг нь олон талт байдал, учир нь энэ нь тоогоор илэрдэг тул dozhina хатгалт байж болно.

    Хэрхэн хэрэгжүүлэх вэ?

    Арьс программист нь тавьсан даалгавраа биелүүлэх өөрийн гэсэн арга замыг санал болгож чадна. Бүх зүйлийг өөрийн төсөөллийн дагуу мэргэжлийн ур чадвар, zdibnosti-тэй тэнцүүлэх. Асуудлын хамгийн өргөн хувилбар бол хувилбарын хүснэгт юм. Энэ нь JavaScript-ийг хурдасгахыг уриалсан хүмүүст бас баялаг юм. Үнэт зүйлсийг харуулах хүчийг хурдасгахыг уриалсан чимээгүйхэн ширэээсвэл ширээний нүд- Би эвгүй байдалд оруулах гэж яарах болно. Энэ арга нь хөтөч хоорондын хангалттай нийцтэй байж чадахгүй.

    Бидний шийдэл

    Бидний санал нь HTML5 болон CSS3-ийн гүнзгий мэдлэг дээр суурилна.

    Процессын мөн чанар нь утгыг зөвтгөх текстийг тэгшлэх хүч юм. Мартсан хүмүүсийн хувьд би таамаглах болно: эрх мэдэл бүхий байгууллага текстийг савны бүрэн хэмжээгээр чиглүүлдэг.

    Бидний шийдвэрийн сонголтоор бид хоёр obov'yazykovyh дүрмийг нэмж болно. Эхний зүйл бол цэсийн зүйлд зориулсан савны өргөн нь бага, бага текст байж болно. Тобто нэг эгнээнд биш. Өөр нэг чухал дүрэм бол үгсийг бие биенээсээ хамааралгүйгээр, нэг цэг хүртэл худал хэлэхийн тулд адилхан зурдаг.

    Доорх нь "hum" цэсийг үүсгэсэн кодын дүрслэл юм.

    HTML

    < ul> < li>< a href= "#" >Головна < li>< a href= "#" >Блог < li>< a href= "#" >Новини < li>< a href= "#" >илүү алдартай < li>< a href= "#" >Шинэ

    ul (текстийг зэрэгцүүлэх: зөвтгөх; халих: далд; /* хажуугийн тарилгыг аргад тохируулах */өндөр: 20px; /* тэж усуває зайве */курсор: анхдагч; /* курсор дээр cob хэлбэрийг тохируулах */захын зай: 50px 100px 0 100px; дэвсгэр: #eee; дүүргэх: 5px ) li (дэлгэц: inline; /* тексттэй цэсийн зүйлсийг дээрэмдэх */) li a (дэлгэц: inline-block; /* цэсийн шугамын өргөтгөлийг тохируулах */өнгө: #444; ) a: хулганаар (өнгө: #ff0000; ) ul: дараа ( /* боловсруулах аргын хувьд өөр эгнээ үүсгэх */агуулга: "1"; зүүн талын зах: 100% өндөр: 1px; халих: далд; дэлгэц: inline-block )

    Хуучин сайн Internet Explorer дээр ажиллахын тулд та дараах кодыг CSS-д нэмэх хэрэгтэй

    ul ( z-индекс: илэрхийлэл(ажлын цагийн хэв маяг. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .сүүлийн (зүүн талын захаас: 100%; ) * html ul ( /* зөвхөн ie6 хэрэгтэй */ өндөр: 30px; )

    Эрх баригчдын шаардлагатай утгууд болон кодыг бүртгэсний дараа бид ийм цэсийн тэнхлэгийг авдаг.

    Аргын сул тал

    1. Эзлэхүүний код
    2. Анги сонгогчоор дамжуулан элементийн идэвхтэй төлөвийг оноох боломжгүй. догол мөрөнд rozryv sіv дамжуулан Tse vіdbuvaєtsya (yakscho энэ нь нэг юм). Асуудлын шийдэл нь жагсаалтын элементүүдэд нэг сав нэмж оруулах явдал юм.
    3. Таны харж буй цэсийн хувьд та сөрөг урсгалын халилтаар кодыг дарах хэрэгтэй.

    Ямар хөтөч ажилладаг вэ?

    6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -
    Таблетууд

Та бас тааруулж болно