Унждаг цэс html. CSS-ийн босоо унждаг цэсийг хулганаар гүйлгэгч болон давхарласан цэсүүд. Хэрхэн хэвтээ унждаг цэсийг хийх вэ

27.10.2019 Интернет

Өдрийн мэнд, эрхэм уншигчид. Өнөөдөр бид энэ сэдвийг хэлэлцэх болно html болон css ашиглан хэвтээ цэсийг хэрхэн хийх вэ". Цэс нь дүрмээр бол сайтын толгой хэсэгт байрладаг бөгөөд хамгийн чухал хуудсуудын холбоосуудын жагсаалт бөгөөд үүнийг бас нэрлэдэг. үндсэн цэс. Хэрэглэгчид эдгээр холбоосууд дээр байнга дарах болно. Та тэдгээрийг хэрхэн зохион байгуулж, цэсэнд ямар дизайн өгөх нь хэрэглэгчийн зан төлөв, хөрвүүлэлт, таны сайтын ерөнхий туршлага, мэдээжийн хэрэг, .

Хэвтээ цэсний HTML код

Нэгэн цагт сайтын үндсэн цэсийг зураг, хүснэгт, флэш, магадгүй өөр зүйл дээр хийдэг байсан бол өнөө үед "жагсаалт" шошгыг ашиглан цэс үүсгэх хамгийн түгээмэл бөгөөд зөв арга байдаг.

Тагуудыг цэс үүсгэхэд ашигладаг.
,
болон .

Доорх кодонд цэс үүсгэхийн тулд html хаягуудыг ашиглах жишээ:

гэр
Үйлчилгээ
Үнэ
Харилцагчид

Хэвтээ цэсний стандарт CSS загварууд

ul ( жагсаалтын хэв маяг: аль нь ч биш; /*жагсаалтын тэмдэглэгээг арилгах*/ захын зай: 0; /*зайлсыг арилгах*/ padding-left: 0; /*зайлсыг арилгах*/ ) a ( текстийн чимэглэл: байхгүй; /* доогуур зураасыг арилгах холбоосын текст*/ ) li ( хөвөх:зүүн; /*Цэсийг хэрэгжүүлэхийн тулд жагсаалтыг хэвтээ байдлаар байрлуул*/ margin-right:5px; /*Цэсийн зүйлүүдийг догол мөр*/ )

Бид толгойн хэсэгт ямар ч тусгай хэв маяг, хонх, шүгэлгүйгээр бэлэн дээд цэсийг авдаг бөгөөд үүнийг таны ирээдүйн сайхан цэсийн хүрээ гэж нэрлэж болно. Хэрэв та энэ html болон css-г хуулж тавивал иймэрхүү харагдах болно.

Таны ирээдүйн цэсэнд зориулсан жаазны (загвар) жишээ

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

Цэсийг хэвтээ болгоход float:left;-ээс гадна өөр хэд хэдэн CSS аргууд байдаг. , жишээ нь display:inline-block; эсвэл дэлгэц: уян хатан; , гэхдээ дээр дурдсан аргыг ашиглахыг зөвлөж байна.

Цэсний загвараа янз бүрийн загвараар дүүргэж, хийцгээе үзэсгэлэнтэй.

Вэбсайтад зориулсан үзэсгэлэнтэй хэвтээ цэсийн жишээ

Одоо би хэвтээ цэсийн бэлэн загвар бүхий бэлэн жишээнүүдийг өгөх болно.

Та өөрийн сайтын бүх "хөөрхөн зүйлсийг" өөрөө бүтээж болно, гэхдээ интернетээс хайх хэрэггүй. Үүнийг хийх хамгийн хялбар арга бол доорх жишээнүүдийн аль нэгэнд үндэслэсэн болно.

Тусдаа зүйл бүхий энгийн цэнхэр цэс

"Дээд" цэсийн CSS загварууд

Энэ цэсний хэв маягийг доор харуулав. HTML нь "араг яс" цэстэй ижил хэвээр байна.

Ul (жагсаалтын хэв маяг: байхгүй; /*жагсаалтын тэмдэглэгээг арилгах*/ захын зай: 0; /*зайлсыг арилгах*/ padding-left: 0; /*зайлсыг арилгах*/ margin-top:25px; /*дээд догол мөр*/ ) a (текст чимэглэл: байхгүй; /*холбоос текстийн доогуур зураасыг арилгах*/ арын дэвсгэр:#30A8E6; /*цэсийн зүйлд дэвсгэр нэмэх*/ өнгө:#fff; /*холбоосын өнгийг өөрчлөх*/ дүүргэлт:10px; /*зөөврийг нэмэх */ font-family: arial; /*фонтыг өөрчлөх*/ border-radius:4px; /*дугуйруулах нэмэх*/ -moz-шилжилт: бүх 0.3 сек 0.01 сек хялбар; /* хийх жигд шилжилт*/ -o-шилжилт: бүх 0.3s 0.01s хялбар; -webkit-шилжилт: бүх 0.3s 0.01s хялбар; ) a:hover (background:#1C85BB;/*Add hover effect*/ ) li ( float:left; /*Жагсаалтыг хэвтээ байдлаар байрлуулж цэсийг хэрэгжүүлнэ*/ margin-right:5px; /*Цэсийн зүйлд дүүргэлт нэмэх* / )

Үндсэн цэс нь улаан дэвсгэртэй өнгөт шугам дээр байрладаг

өнгөт шугам дээрх css загварын цэс

ul ( жагсаалтын хэв маяг: аль нь ч биш; /*жагсаалтын тэмдэглэгээг арилгах*/ захын зай: 0; /*зайлсыг арилгах*/ padding-left: 0; /*зайлсыг арилгах*/ margin-top:25px; /*дээд догол мөр*/ дэвсгэр :#FF4444; /*бүтэн цэсэнд дэвсгэр нэмэх (энэ параметрийг орлуулснаар бүхэл цэсний өнгө өөрчлөгдөнө)*/ өндөр: 50px; /*өндөрийг тохируулах*/ ) a (текст чимэглэл: байхгүй; /* холбоосын текстийн доогуур зураасыг арилгах* / background:#FF4444; /*цэсний зүйлд дэвсгэр нэмэх (энэ тохиргоог орлуулснаар бүх цэсийн өнгө өөрчлөгдөнө)*/ color:#fff; /*холбоосны өнгийг өөрчлөх* / padding: 0px 15px; /*padding нэмэх*/ font-family: arial; /*фонтыг өөрчлөх*/ line-height:50px; /*цэсийг босоо байдлаар зэрэгцүүлэх*/ дэлгэц: блок; хүрээ-баруун: 1px хатуу # F36262; /*баруун талд хүрээ нэмэх*/ -moz-шилжилт: бүгд 0.3 сек 0.01 сек хялбар; /* зөөлөн шилжилт хийх*/ -o-шилжилт: бүгд 0.3 сек 0.01 сек хялбар; -webkit-шилжилт: бүгд 0.3 сек 0.01 сек хялбар; ) a:hover (фон:#D43737;/ *хулганы эффект нэмэх*/ ) li ( хөвөх:зүүн; /*жагсаалтыг хэвтээ байдлаар байрлуулах цэс*/)

HTML+CSS дээр унадаг цэс

Хэрэгжүүлэхийн тулд сайт дээрх нэмэлт унждаг (унадаг) цэсцэсийн аливаа зүйлийн хувьд бид хэвтээ цэснээс дурын холбоосын HTML кодонд нэмэлт жагсаалт нэмж, CSS-ийн хэв маягийг өөрчлөх шаардлагатай. Загварын хувьд бид энгийн заль мэхийг ашиглах болно - хулганаас доош унждаг цэсний дэлгэцийг дээд цэсэнд хэрэгтэй зүйл болгон өөрчлөх. Жишээлбэл, "үйлчилгээ" гэсэн зүйлийг авч үзье.

Энгийн унадаг цэс үүсгэх жишээ

Унждаг цэсний HTML код

гэр
Үйлчилгээ
- Үйлчилгээ 1
- Удаан хугацааны үйлчилгээ 2
- Үйлчилгээ 3
Үнэ
Харилцагчид

Унждаг CSS хэв маяг

ul ( жагсаалтын хэв маяг: аль нь ч биш; /*жагсаалтын тэмдэглэгээг арилгах*/ захын зай: 0; /*зайлсыг арилгах*/ padding-left: 0; /*зайлсыг арилгах*/ margin-top:25px; /*дээд догол мөр*/ дэвсгэр :#819A32; /*бүтэн цэсэнд дэвсгэр нэмэх*/ өндөр: 50px; /*өндөрийг тохируулах*/ ) a (текст чимэглэл: байхгүй; /*холбоос текстийн доогуур зураасыг арилгах*/ дэвсгэр:#819A32 ; /*цэсийн зүйлд дэвсгэр нэмэх*/ өнгө:#fff; /*холбоосуудын өнгийг өөрчлөх*/ дүүргэх: 0px 15px; /*зайлс нэмэх*/ font-family: arial; /*фонтыг өөрчлөх*/ мөрийн өндөр :50px; /*цэсийг босоо чиглэлд зэрэгцүүлэх*/ дэлгэц: блок; хүрээ-баруун: 1px хатуу #677B27; /*баруун талд хүрээ нэмэх*/ -moz-шилжилт: бүх 0.3 сек 0.01 сек хялбар; /* гөлгөр шилжилт*/ -o-шилжилт: бүх 0.3 сек 0.01 сек хялбар; -webkit-шилжилт: бүгд 0.3 сек 0.01 сек хялбар; ) a:hover (фон:#D43737;/*Хөөх эффект нэмэх*/ ) li ( хөвөх :зүүн; /*Цэсийг хэрэгжүүлэхийн тулд жагсаалтыг хэвтээ байдлаар байрлуул* / байрлал:харьцангуй; /*байршил тогтоох байрлалыг тохируулна*/ ) /*Нуугдсан унадаг цэсний загварууд* / li > ul ( байрлал: үнэмлэхүй; дээд: 25px; дэлгэц: байхгүй; ) /*Нуугдсан хэсгийг харагдуулах*/ li:hover > ul ( display:block; width:250px; /*Download цэсний өргөнийг тохируулах*/ ) li:hover > ul > li ( float:none; /* Хэвтээ байрлалыг арилгах* / )

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

Хэрхэн үндсэн хэвтээ цэс үүсгэх, хэд хэдэн загвар гаргах, түүнд хэрхэн энгийн хэв маяг нэмж, илүү гоё болгох, сайтынхаа унждаг цэсийг хэрхэн хийх талаар аль болох товчхон хэлэхийг хичээсэн. Тохиромжтой болгох үүднээс би дээр дурдсан бүх цэсийг нэг html файлд цуглуулсан бөгөөд та доороос татаж авах боломжтой. Энэ нь дэлгэцийн агшин дээр харагдаж байна:

Анхаарал тавьсанд баярлалаа.

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

Хэрхэн хэвтээ цэс хийх вэ: тэмдэглэгээ, дизайны жишээ

HTML тэмдэглэгээ ба хэвтээ цэсийн үндсэн хэв маяг

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

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

Цэсийн зүйл
Цэсийн зүйл
Цэсийн зүйл

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

...

нэмэлт боломж

Тэдгээрийг байрлуулах хэд хэдэн арга байдаг хэвтээ. Эхлээд та навигацийн элементүүдийн анхдагч хөтчийн хэв маягийг дахин тохируулах хэрэгтэй.

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

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

Жагсаалтын зүйлсийг мөрөнд оруулах. Үүний үр дүнд тэдгээрийг хэвтээ байдлаар байрлуулж, баруун талд нь тэдгээрийн хооронд 0.4 эмтэй тэнцэх зайг нэмж өгдөг (фонтын хэмжээтэй харьцуулахад тооцоолсон). Үүнийг арилгахын тулд li li-д баруун талын сөрөг зай нэмнэ (баруун захын зай: -4px;) . Дараа нь холбоосыг хүссэнээрээ загварчлаарай.

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

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

Арга 3. li (дэлгэц: inline-block;)

Жагсаалтын зүйлсийг inline-block болгож байна. Тэдгээр нь хэвтээ байрлалтай, эхний тохиолдол шиг баруун талд цоорхой үүсдэг. Холбоосуудын хувьд (дэлгэц: блок;) нэмээд хүссэнээрээ загварчлаарай.

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

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

1. Холбоос дээр хулганыг гүйлгэн харах үед доогуур зураасны эффект бүхий мэдрэмжтэй цэс

2. Хуримын вэбсайтад зориулсан мэдрэмжтэй цэс

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

4. Responsive Ribbon цэс

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

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

Хэрхэн хийх талаар нийтлэл бичихийг удаан хүсч байсан css дээрх дэд цэс. Олон хүмүүс үүнийг хийдэг jQueryбөгөөд энэ нь маш сайн гарч, Гэсэн хэдий ч, бий болгох бүх үндсэн зарчим css дээрх дэд цэсБи энд танилцуулах болно. Цаашлаад энэ баазаас эхлэн та дэд цэсийг илүү сайжруулж болно.

Би шууд авчирдаг CSS код:

* html ул ли (
хөвөх: зүүн;
}
* html ул ли а (
өндөр: 1%;
}
ul(
хилийн доод: 1px хатуу #000;
жагсаалтын хэв маяг: байхгүй;
захын зай: 0;
дэвсгэр: 0;
өргөн: 100px
}
ул ли (
албан тушаал: харьцангуй;
}
ул ли а (
дэлгэц:блок;
хүрээ: 1px хатуу #000;
хилийн доод хэсэг: 1px;
дүүргэх: 5px
текстийн чимэглэл: байхгүй;
}
ли ул (
дэлгэц: байхгүй;
зүүн: 99px;
байрлал: үнэмлэхүй;
дээд: 0;
}
li:hover ul (
дэлгэц:блок;
}

Энд хамгийн чухал зүйл бол сонгогч " ли: ховер ул". Үнэн хэрэгтээ энэ нь цэсийн агуулгыг харуулдаг. Анхдагч байдлаар, энэ нь " дэлгэц: байхгүй", мөн та цэсийн зүйл дээр гүйлгэх үед дэд цэс нь: " дэлгэц: блок", өөрөөр хэлбэл, харагдахуйц. Энэ бол хамгийн чухал зүйл юм. Мөн эхний хоёр сонгогчид (аль * ) явдаг CSS хакердсантөлөө IE, эс бөгөөс үүнгүйгээр энэ хөтөч дээр юу ч ажиллахгүй. Бусад бүх зүйл байна Гадаад төрхҮүнийг мэдээж өөрчилж болно.

Би авчрах ба HTML код:

гэр

Цэс 1
- Дэд цэс 1
- Дэд цэс 2
- Дэд цэс 3

Цэс 2
- Дэд цэс 4
- Дэд цэс 5
- Дэд цэс 6
- Дэд цэс 7
- Дэд цэс 8

Хэрэв та энэ бүтцийг сайтар бодож үзвэл бүх зүйл маш тодорхой болно. Tag ul- цэс үүсгэдэг. Хэрвээ ulөөр дотор байдаг ul, тэгвэл энэ нь аль хэдийн дэд цэс юм. Шошго литодорхой цэсийн зүйлийг хариуцдаг.

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

Мэндчилгээ! Хэрэв та анхлан зохион бүтээгч бол эрт орой хэзээ нэгэн цагт хуудсаа ямар нэгэн байдлаар идэвхжүүлэх, тэдгээрийг бага зэрэг интерактив болгохыг хүсч байгаагаа олж мэдэх болно. Аль болох CSS хөдөлгөөнт дүрсүүд танд тусалж чадна. Гэхдээ та тэдгээрийг хаана, хэрхэн хэрэглэхээ мэдэх хэрэгтэй.

Өнөөдөр би хэлэх болно Цэвэр дээр унах цэсийг хэрхэн хийх вэcssболон түүнд хэрхэн гөлгөр байдлыг нэмэх вэ CSS хөдөлгөөнт дүрс ашиглан. Хэрэв та мэдэхгүй бол үндсэн суурьтай танилцах цаг болжээ.

HTML + CSS цэсийг бичиж байна

Эхлээд бид ажиллах зүйлтэй болохын тулд энгийн нэг түвшний цэсийг гаргацгаая. Бид дизайны талаар нэг их санаа зовохгүй, тодорхой болгохын тулд энэ нь хангалттай:

Бидэнд юу байгаа вэ? "top_menu" танигчтай, энэ жагсаалтын элементүүдэд ороосон холбоос бүхий хамгийн энгийн эрэмблэгдээгүй жагсаалт. Бүх зүйл эелдэг бөгөөд энгийн байдаг. Зөөвөрлөхөд цэсийн зүйлс өнгө өөрчлөгдөнө... үүнийг л та аль хэдийн мэдэж, хэрхэн хийхийг ойлгож байгаа (би найдаж байна).

Хоёрдахь түвшний цэс нэмж байна

Давхаргатай цэс хийхийн тулд бид эхнийх нь дотор хоёр дахь дараалалгүй жагсаалтыг нэмэх хэрэгтэй. Та эхний хичээл дээр хаа нэгтээ авч явсан байх гэж бодож байна. Мөн та үүнийг зөвхөн манай жагсаалтын дотор биш, харин жагсаалтын элемент, өөрөөр хэлбэл шошгон дотор оруулах хэрэгтэй. ли", хаалтын "a" шошгоны дараа.

Оруулсан жагсаалтуудыг "-д бүрэн хамааруулан байрлуул. ли' Тэд үүрлэсэн байдаг. Тэгээд бүгд " ли» дээд түвшнийх нь ( хамаатан садан). Унждаг цэсийг манай дээд түвшний цэсний дараа ШУУД оруулахын тулд (унадаг цэс - " дотоод цэс”) тохируулсан байх ёстой

байрлал: үнэмлэхүй; дээд: 100%;

Өөрөөр хэлбэл, эцэг эхийн дээд хилийн догол нь эцэг эхийн өндөртэй тэнцүү байх болно. Маш логик, миний бодлоор.

Байршлыг тогтоохоос гадна унждаг цэсэнд дээд түвшний цэстэй ижил хэв маягийг өгөх хэрэгтэй. Тэдний хэлснээр алимны модны алим ...

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

Унтраах цэсийг хэрхэн яаж хийх вэ

Илүү хялбар зүйл байхгүй! Манай үүрлэсэн жагсаалтыг унждаг цэс болгохын тулд та зүгээр л нуух хэрэгтэй! Дараа нь унадаг цэсийг агуулсан дээд түвшний цэсийн зүйлийг хулганы курсор гүйлгэхэд л нээ. Энэ нь бага зэрэг төвөгтэй сонсогдож магадгүй ч үнэндээ хэдхэн мөр кодоор үүнийг шийдэж болно.

Унждаг цэсэнд нэмнэ үү:

дэлгэц: байхгүй;

Үүнийг харуулахын тулд та бүртгүүлэх хэрэгтэй:

#дээд_цэс > li: хулганаар дарах > ul (дэлгэц: блок; )

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

Би өөрийгөө тодорхой илэрхийлсэн гэж найдаж байна. Үгүй бол хэд хэдэн удаа уншиж үзээрэй. Кодоо хараад л ойлгоорой. Бид юу авснаа харцгаая:

Тийм ээ, бид хүссэн зүйлдээ хүрсэн бололтой - бид унждаг цэс, жинхэнэ унждаг цэс хийсэн, хараал ид! Гэхдээ түүнд ямар нэг зүйл дутагдаж байна. Та юу мэдэх вэ? Гөлгөр байдал! Эцсийн эцэст бүх зүйл цэс тасрахгүй, зүгээр л гарч ирдэг мэт харагдаж байна. Би маш огцом, тэр даруйд нь хэлэх болно.

За тэгээд дахиад жаахан тоглоё.

Гөлгөр унадаг цэс хялбар байдаг

Тиймээс гөлгөр унждаг цэсийг идэвхжүүлье цэвэр CSS. Яагаад тэгдэг вэ? Яагаад гэвэл бүх зүйл гөлгөр, зөөлөн байхад хүмүүс дуртай байдаг ... мөн энэ нь үзэсгэлэнтэй харагдаж байна. Энэ нь таны сайтыг ашиглахад таатай байх болно. Явцгаая!

Та зөвхөн 50px ба 300px, 0 ба 100%, 0.5 ба 1.0 гэх мэт математикийн нарийн утгуудыг амилуулах боломжтой гэдгийг санаарай. Манай тохиолдолд бид унадаг цэсийнхээ хоёр төлөвийг хөдөлгөөнд оруулах боломжгүй болно ( дэлгэц: байхгүй;болон дэлгэц:блок;).

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

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

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

Анимэйшн хийхэд бидэнд юу хэрэгтэй вэ? Манай цэсийн хоёр төлөв, түүнчлэн эдгээр төлөвүүдийг интерполяцласан шилжилтийн шинж чанар, өөрөөр хэлбэл хуваарилагдсан хугацааны бүх завсрын утгыг бөглөсөн. Тэгээд л болоо!

JQuery-г ашиглан бүр ч хялбар хийж болох ч бид өнөөдөр цэвэр CSS-тэй ажиллах болно гэдгээ эхэндээ зөвшөөрсөн. Хөдөлгөөнт дүрслэлд Безье муруйг нэмж оруулснаар илүү сайхан зүйлийг хийж болох ч энэ сэдэв өнөөдрийнхөөс арай хэтэрсэн байна. Гэхдээ бид дараа нь үүн рүү буцах нь гарцаагүй.

Дүгнэлт:

Одоо та цэвэр CSS ашиглан унадаг цэсийг хэрхэн хийхээ мэддэг гэдгээ найз нөхөд, гэр бүлийнхэндээ онгирч болно. Энэ бол танд нэгээс олон удаа хэрэг болох үнэхээр хэрэгтэй ур чадвар юм. За та өөрөө дүгнээд үзээрэй, статик цэстэй хэдэн сайт үзсэн бэ? Үгүй ээ, ихэнх сайтууд унадаг цэстэй байдаг.

Дашрамд хэлэхэд энэ бол миний анхны CSS хичээл байсан. Танд хэр таалагдаж байгааг тайлбарлана уу? Та бүх зүйлийг тодорхой тайлбарласан уу эсвэл илүү дэлгэрэнгүй ярих шаардлагатай байна уу? CSS дээр лайф хакеруудын сэдвээр үргэлжлүүлэн нийтлэл бичих нь зүйтэй болов уу?

Анхаарал тавьсанд баярлалаа, удахгүй уулзъя!

Та дуустал нь уншсан уу?

Энэ нийтлэл хэрэг болсон уу?

Үнэхээр биш

Чамд яг юу нь таалагдаагүй вэ? Нийтлэл дутуу эсвэл худал байсан уу?
Сэтгэгдэл дээр бичээрэй, бид сайжруулахаа амлаж байна!

Энэ зааварт бид цэвэр CSS дээр сонгодог хэвтээ цэс хийх болно. Энэ нь жагсаалтад дүрс тэмдэгтэй байдаг. Зүйл дээр хулганаа аваачихад товчлуур болон текстийн өнгийг жигд өөрчилж, сүүдэр нэмдэг. Унждаг жагсаалтыг олон түвшний хийх боломжтой бөгөөд хамгийн чухал нь энэ бүгдийг энгийн CSS3 дээр хэрэгжүүлдэг.

Хичээл дээр бид дараахь зүйлийг ашиглах болно.

дэлгэц: уян хатан;
шилжилтийг ашиглах;
Бид байрлалыг ашиглан элементүүдийг байрлуулах болно.

Хэвтээ цэсийн HTML бүтэц

Юуны өмнө хэвтээ цэсийн тэмдэглэгээг бичье. Миний хувьд PhpStorm байгаа тохиолдолд бид хөгжүүлэлтийн орчноо нээж, index.html файл үүсгэж, html:5 хүрээг бичиж, lang-г ru-ээр солино.

Би кодчилолоос бусад бүх мета устгах болно, би гарчгийг бичих болно " Том цэс».

Биеийн хооронд бид толгойн шошго бичих ба дотор нь манай цэс байрлах .dws-menu класс бүхий блок байдаг. Цаашилбал, бүтэц нь дараах байдалтай байх болно, бид таван ширхэг хэмжээний жагсаалт үүсгэх болно. Жагсаалт бүрд href="#" шинж чанар бүхий холбоос байх болно. Дараа нь .fa .fa- ангитай I дүрс байх болно.

Хэрэглэх дээр дарна уу.

Цэсний нэрсийг бичье ( Нүүр хуудас, бүтээгдэхүүн, үйлчилгээ, мэдээ, холбоо барих хаяг).

Дараа нь дүрсүүдийг сонгоод холбоно уу. Бид Font Awesome вэбсайт руу орж, эдгээр цэсийн дүрсүүдийг сонгоно уу:

Бид сайтаас архивыг дүрс бүхий татан авч, агуулгыг нь компьютер дээрээ задалж, фонтын хавтас, css хавтасыг хөгжүүлэлтийн орчиндоо хуулж авдаг.

Фонтын хавтас нь дүрсний фонтууд, css хавтас нь тэдгээрийн хэв маягийг агуулдаг. Шахсан хэв маягийг font-awesome.min-аар устгаж болно, үүнд шахагдаагүй font-awesome.css орно.

index.html дээр бид дүрсүүдийг холбож, зүйл бүрийг өөрийн дүрсний хэв маягаар зааж өгдөг. гэр, дэлгүүрийн түрдэг тэрэг, араа, -р жагсаалт, дугтуй нээлттэй).

Бид үндсэн фреймийг хийсэн, үндсэн хэв маягийг тайлбарласны дараа дэд цэсийг үүсгэнэ, одоо хэвтээ цэсийн style.css-ийн үндсэн хэв маягийг тайлбарлах файл үүсгэж, index.html руу холбох болно. Загварууд холбогдсон эсэхийг шалгахын тулд би img хавтас үүсгэж, дотор нь дурын зураг байрлуулна. дэвсгэр. Зургийн холболтыг дэвсгэр ашиглан бичье.

Үндсэн хэсэг(арын дэвсгэр зураг: url("../img/ep_naturalwhite.png"); )

Хэвтээ цэсний CSS хэв маягийг тайлбарлах

Юуны өмнө, өөр өөр хөтчүүдийн анхдагчаар тохируулж болох бүх догол мөрийг дахин тохируулцгаая.

Dws-цэс *( захын зай: 0; дүүргэх: 0; )

Толгой хэсгийг 200 хүрз гэж тохируулъя. Мөн татан авч сайтдаа тусад нь холбож болох Cuprum фонтыг оноож өгвөл бид нэмэлт фонт бичих болно.

Толгой хэсэг(хаваас: 200px; фонт-гэр бүл: Cuprum, Arial, Helvetica, sans-serif; )

Жагсаалтаас тэмдэглэгээг нууцгаая:

dws-цэс ul, .dws-цэс ол( жагсаалтын загвар: байхгүй; )

Жагсаалтуудыг хэвтээ байдлаар display: flax ээр харуулж, голд нь байрлуулцгаая:

Dws-цэс > ul (дэлгэц: уян хатан; зөвт-агуулга: төв; )

Толгой хэсэгт зөвхөн дээрээс нь догол оруулъя, margin-top гэж бичнэ үү.

Толгой хэсэг( захын дээд: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; )

Цэсээ зохион бүтээцгээе, товчлуурын өнгө, фонт гэх мэтийг тохируулцгаая.

Dws-цэс > ul li a( дэлгэц: блок; дэвсгэр: #ececed; дэвсгэр: 15px 30px 15px 40px; үсгийн хэмжээ: 14px; өнгө: #454547; текстийн чимэглэл: байхгүй; текст хувиргах: том үсгээр; )

Дараа нь бид дүрсүүдийг байрлуулж, жагсаалтын байрлалыг онооно: харьцангуй; дүрсүүдийг голлуулахын тулд:

dws-цэс > ул li( байрлал: харьцангуй; )

dws-цэс > ul li > a i.fa( байрлал: үнэмлэхүй; дээд: 15px; зүүн: 12px; үсгийн хэмжээ: 18px; )

Жагсаалтуудад хилийн тусгаарлагч оноож, эхний LI элементийг сонгоод хүрээг тогтооцгооё. Бид сүүлчийн LI элементийг сонгож, ижил төстэй хил хязгаарыг онооно.

Dws-цэс > ul li:first-child(зүүн талын хүрээ: 1px хатуу #b2b3b5; ) .dws-цэс > ул ли:сүүлийн хүүхэд( хүрээ-баруун: 1px хатуу #babbbd; )

LI жагсаалтад тусгаарлагч хийх:

.dws-цэс > ul li( байрлал: харьцангуй;

хилийн баруун: 1px хатуу #c7c8ca;

Цэс нь гадаад төрхийг олж авсан тул та хулганы дээр хэв маягийг дүрсэлж эхлэх боломжтой.

Хулганы хулганаар хэвтээ цэсийг хөдөлгө

Dws-цэс li a:hover( дэвсгэр: #454547; өнгө: #ffffff; хайрцаг-сүүдэр: 1px 5px 10px -5px хар; шилжилт: бүх 0.3 секунд; )

Энэ эффектийг жигд алга болгохын тулд энэ хэв маягийг амарч байгаа холбоос дээр нэмнэ үү:

.dws-цэс > ul li a( дэлгэц: блок; дэвсгэр: #ececed; дэвсгэр: 15px 30px 15px 40px; үсгийн хэмжээ: 14px; өнгө: #454547; текстийн чимэглэл: байхгүй; текст хувиргах: том үсгээр;

Үндсэн цэс дууссан бөгөөд та дэд цэс болон тэдгээрийн дэд цэсүүдийг тайлбарлаж эхлэх боломжтой.

CSS/HTML унадаг цэсийг тайлбарлаж байна

Бид index.html-г нээж, жишээлбэл, бүтээгдэхүүнүүдэд нэмэлт цэс нэмнэ. LI жагсаалтуудын хооронд бид UL оруулаад дотор нь herf=”#” шинж чанартай холбоос бүхий таван жагсаалтыг байрлуулна.

ul>li*5>a

Хэрэглэх дээр дарж, зүйлийн нэрийг бичнэ үү ( Хувцас, электрон бараа, хоол хүнс, багаж хэрэгсэл, амьдрал. хими).

хувцас
Электроник
Хоол хүнс
Багаж хэрэгсэл
Генерал. хими

Дараа нь бид style.css-г нээж, дэд цэсийн хэв маягийг тайлбарлана.

Хоёр дахь жагсаалтыг сонгоод байрлалыг өгнө үү: үнэмлэхүй; , хамгийн бага өргөнийг 150 пиксел болгож тохируулна уу.

/*дэд цэс*/ .dws-menu li ul( байрлал: үнэмлэхүй; хамгийн бага өргөн: 150px; )

Жагсаалтад 1 оргилын хилийг бичье.

Dws-цэс li > ул li( хүрээ: 1px хатуу #c7c8ca; )

Дэд цэсэн дэх холбоосуудын хувьд дэвсгэрийг 10 пиксел болгож, текстийн хувиргалтыг арилгаж, дэвсгэрийг хоёр тонн бараан өнгөтэй болгоно: #e4e4e5; .

Dws-цэс li > ул li a( дэвсгэр: 10px; текст хувиргах: байхгүй; дэвсгэр: #e4e4e5; )

Дараа нь бид өөр нэг цэс үүсгэх болно. Тэмдэглэгээний файл руу орцгооё, жишээлбэл, "Электроник" дээр бид өмнөх шигээ аналогийн дагуу цэсийг үүсгэдэг. Догол мөрийн гарчгийг тайлбарлах ( Камер, компьютер, утас) болон хадгалах.

Электроник
- камерууд
- Компьютер
- Утаснууд

Тэдгээрийг харуулсан боловч үндсэн цэсний доор нуугдсан, одоо байрлал: үнэмлэхүй; үүрлэсэн UL ба түүнийг 150 оргилоор шилжүүлнэ. тал руу:

Dws-цэс li > ул ли ул( байрлал: үнэмлэхүй; баруун: -150px; дээд: 0; )

/*дэд цэс*/ .dws-menu li ul( байрлал: үнэмлэхүй; мин-өргөн: 150px;

Мөн тэдгээрийн харагдах байдлын хувьд бид хулган дээр байгаа жагсаалтуудыг сонгоод display: block; .

dws-цэс li: хулганаар дарах > ul (дэлгэц: блок; )

Одоо та UL блокийг хуулж, түүний зүйлсийг өөрчлөх замаар олон түвшний цэс нэмж болно.

гэр
Бүтээгдэхүүн
- хувцас
  - Гутал
  - Хүрэм
  - Өмд
- Электроник
  - камерууд
  - Компьютер
  - Утаснууд
    - Samsung
    - Флф
    - алим
- Хоол хүнс
- Багаж хэрэгсэл
- Генерал. хими
Үйлчилгээ
- Үйлчилгээ 1
- Үйлчилгээ 2
- Үйлчилгээ 3
Мэдээ
Харилцагчид

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

.dws-цэс > ul li a( дэлгэц: блок;

/* Тогтмол холбоос - энэ градиентийг засах, хуваалцахын тулд ашиглана уу: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ дэвсгэр: #c9c9c9 ; /* Хуучин хөтчүүд */ дэвсгэр: -moz-linear-gradient(дээд, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ дэвсгэр: -webkit-linear-gradient(дээд, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25, Safari5.1-6 */ дэвсгэр: шугаман-градиент(доошоо, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ шүүлтүүр: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */

дэвсгэр: 15px 30px 15px 40px; үсгийн хэмжээ: 14px; өнгө: #454547; текстийн чимэглэл: байхгүй; текст хувиргах:том үсгээр; шилжилт: бүх 0.3 секундын хялбар байдал; )

/* Тогтмол холбоос - энэ градиентийг засах, хуваалцахын тулд ашиглана уу: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ дэвсгэр: #e0e1e5; /* Хуучин хөтчүүд */ дэвсгэр: -moz-linear-gradient(дээд, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ дэвсгэр: -webkit-linear-gradient(дээд, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25, Safari5.1-6 */ дэвсгэр: шугаман-градиент(доошоо, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ шүүлтүүр: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */

өнгө: #ffffff; хайрцаг-сүүдэр: 1px 5px 10px -5px хар; шилжилт: бүх 0.3 секундын хялбар байдал; )

Хэрэв хүсвэл энэ цэсТа сайт дээр өөрт тохирсон хэв маягийг тохируулж болно, өнгө үүсгэж, кодоор солих нь маш энгийн. Үр дүн нь цэвэр CSS-ээр хийгдсэн энгийн бөгөөд нэгэн зэрэг сайхан хэвтээ цэс юм.

sushiandbox.ru Компьютер эзэмших - Интернет. Skype. Нийгмийн сүлжээ. Windows дээрх хичээлүүд.

Унждаг цэс html. CSS-ийн босоо унждаг цэсийг хулганаар гүйлгэгч болон давхарласан цэсүүд. Хэрхэн хэвтээ унждаг цэсийг хийх вэ

Хэвтээ цэсний HTML код

Хэвтээ цэсний стандарт CSS загварууд

Таны ирээдүйн цэсэнд зориулсан жаазны (загвар) жишээ