Өдрийн мэнд, эрхэм уншигчид аа. Өнөөдөр бид "Сэдвэд дүн шинжилгээ хийх болно" сарлаг робити хэвтээ цэсэрчилсэн HTML болон CSS". Цэс нь дүрмээр бол сайтын толгой хэсэгт байрладаг бөгөөд хамгийн чухал хэсэгт байрлуулсан байдаг. үндсэн цэс. Користувахуудын хүчийг харгалзан тэд байнга түлхэх болно. Эдгээр нь таны цэсийг хэрхэн хөгжүүлж, ямар дизайн дээр байрлуулсан нь хөрвүүлэлтийн үйлдэл, хөрвүүлэлт, таны сайтын ерөнхий сэтгэгдэлд нөлөөлнө.
Хэвтээ цэсний HTML код
Хэрэв сайтын цэсийг удаан хугацааны туршид зураг, ширээ, флэш болон бусад зүйл дээр хулгайлсан бол бидний үед энэ нь хамгийн алдартай бөгөөд цэс үүсгэх зөв арга бол "жагсаалт" шошго юм.
Цэс үүсгэхийн тулд шошго ашиглана уу
Доорх кодонд цэс үүсгэхийн тулд html хаягуудыг ашиглах жишээ:
- Головна
- Үйлчилгээ
- Үнэ
- Харилцагчид
Хэвтээ цэсний стандарт CSS загварууд
ul ( жагсаалтын хэв маяг: байхгүй; /*жагсаалтын тэмдэглэгээг арилгах*/ захын зай: 0; /*зайлсыг арилгах*/ padding-left: 0; /*зайлсыг арилгах*/ ) a ( бичвэрийн чимэглэл: байхгүй; /*загварыг арилгах Текст илгээх */ ) li ( хөвөх:зүүн; /*Цэсийг хэрэгжүүлэхийн тулд жагсаалтыг хэвтээ байдлаар тараах*/ margin-right:5px; /*Цэсийн зүйлд хандах хандалтыг нэмэх*/ )
Бид дээд цэсийг тусгай хэв маяггүйгээр толгойн хэлбэрээр бэлтгэх ёстой бөгөөд ингэснээр хонх, шүгэл нь таны ирээдүйн сайхан цэсний хүрээ гэж нэрлэгдэх болно. Хэрэв та өөрийн html болон css-ээ хуулж, буулгавал иймэрхүү харагдах болно.
Ирээдүйн цэсийнхээ хүрээг (загвар) руу чиглүүл
Бүх зүйлийг дуусгахад амархан, та илүү үзэсгэлэнтэй брэндийн цэсийг хүсч байгаа нь ойлгомжтой, гэхдээ үндсийг нь ойлгохгүйгээр html болон css дээр өршөөлгүйгээр сайн цэс үүсгэж чадахгүй.
Би хэвтээ час улаан өнгийн хөвөгчтэй цэс үүсгэхэд ашигладаг цөөн хэдэн CSS аргыг ашигладаг:left; жишээ нь, display:inline-block; эсвэл дэлгэц: уян хатан; , гэхдээ vicorist аргыг ашиглахыг зөвлөж байна, илүү олон тайлбар байдаг.
Өөр өөр хэв маяг, захиалгат його бүхий цэсийн загвараа эргэн санацгаая харним.
Вэбсайтад хажуугийн хэвтээ цэсийг ашиглана уу
Нэг удаад би хэвтээ цэсийн дизайнаас бэлэн програмуудыг цацаж өгөх болно.
Та өөрийн сайтад зориулж "сайхан" бүтээж болно, гэхдээ интернетээр аялахгүй. Хамгийн энгийн зүйл бол доорх програмуудын аль нэгийг үндэс болгон авах явдал юм
Янз бүрийн зүйл бүхий энгийн цэнхэр өнгийн цэс
Дээд цэсний CSS загварууд
Доод талын оёдол бүхий загварууд энэ цэс. HTML нь "wireframe" цэстэй яг ижил зүйлээр дарж бичигдсэн байдаг.
Ul ( жагсаалтын хэв маяг: аль нь ч биш; /*жагсаалтын тэмдэглэгээг арилгах*/ захын зай: 0; /*зайлсыг арилгах*/ padding-left: 0; /*зайлсыг арилгах*/ margin-top:25px; /*дээд захыг арилгах*/ ) a (текстийн чимэглэл: байхгүй; /*текстийн дэвсгэрийг арилгах */ дэвсгэр:#30A8E6; /*цэсийн зүйлд дэвсгэр нэмэх*/ color:#fff; /*өнгөний өнгийг арилгах*/ padding:10px; /*оролт нэмэх*/ font-family: arial;/*font-ыг багасгах*/ border-radius:4px;/*дугуй нэмэх*/ жигд шилжилт*/ -o-шилжилт: бүх 0.3s 0.01s хялбар; -webkit-шилжилт: бүх 0.3s 0.01s хялбар; ) a:hover (background:#1C85BB;/*Add hover effect*/ ) li ( float:left; /*Жагсаалтыг хэвтээ байдлаар тараах цэсийг хэрэгжүүлэх*/ margin-right:5px; /*Цэсийн зүйлд хандах хандалтыг нэмэх*/ )
Golovne цэс, улаан үнс бүхий өнгө шугам дээр roztashovane
Өнгөт шугам дээрх CSS загварын цэс
ul ( жагсаалтын хэв маяг: аль нь ч биш; /*жагсаалтын тэмдэглэгээг арилгах*/ захын зай: 0; /*зайлсыг арилгах*/ padding-left: 0; /*зайлсыг арилгах*/ margin-top:25px; /*дээд захын зайг арилгах*/ background:#FF4444;/*цэсийн зүйлд дэвсгэр нэмэх (энэ параметрийг орлуулснаар та цэсийн өнгийг бүхэлд нь санаж байна)*/ өндөр: 50px; / background:#FF4444;/*цэсийн зүйлд дэвсгэр нэмэх ( Энэ параметрийг орлуулснаар та цэсийн өнгийг бүхэлд нь санаж байна) цэсийн зүйлүүд)*/ color:#fff; font-family: arial;/*фонтыг өөрчлөх*/ мөрийн өндөр:50px;/*цэсийн босоо байрлал*/ дэлгэц: блок; : бүх 0.3 сек 0.01 сек хялбар; /* Ажиллах боломжтой жигд шилжилт*/ -o-шилжилт: бүгд 0.3 сек 0.01 сек хялбар; *зээвүүр дээр эффект нэмэх*/ ) li ( хөвөх:зүүн; /*Жагсаалтыг хэвтээ байдлаар бодитоор байрлуулах цэсийн шилжилт*/)
HTML+CSS дээрх виджет цэс
Хэрэгжүүлэхийн тулд сайт дээр гарч ирэх (нээдэг) нэмэлт цэсЦэсийн аливаа зүйлийн хувьд хэвтээ цэснээс илгээхийн тулд HTML кодын нэмэлт чиглүүлэлт нэмж, CSS-ийн хэв маягийг өөрчлөх шаардлагатай. Загварын хувьд бид энгийн заль мэхийг нэмж оруулах болно - нээгдэж буй цэсийн дэлгэцийг өөрчлөх, бидэнд хэрэгтэй зүйлийн талаар нэмэлт зааварчилгаа авах. дээд цэс. Жишээлбэл, "зарц" гэсэн зүйлийг авч үзье.
Таны харж болох энгийн цэс үүсгэх жишээ
Унждаг цэсний HTML код
- Головна
- Үйлчилгээ
- Үйлчилгээ 1
- Довга үйлчилгээ 2
- Үйлчилгээ 3
- Үнэ
- Харилцагчид
Унждаг цэсний CSS загвар
ul ( жагсаалтын хэв маяг: аль нь ч биш; /*жагсаалтын тэмдэглэгээг арилгах*/ захын зай: 0; /*зайлсыг арилгах*/ padding-left: 0; /*зайлсыг арилгах*/ margin-top:25px; /*дээд захын зайг арилгах*/ дэвсгэр:#819A32;/*энэ цэсэнд дэвсгэр нэмэх*/ өндөр: 50px;/*өндөр тохируулах*/ ) a (текст чимэглэл: байхгүй; цэсийн зүйл*/ өнгө:#fff;/*өнгөний тохиргоог багасгах* / padding: 0px 15px;/*хүрээ нэмэх*/ font-family: arial; vertical*/ display: block; border-right: 1px solid #677B27;/*баруун хүрээ нэмэх*/ 0.01s хялбар; -webkit- шилжилт: бүх 0.3 сек 0.01 сек хялбар; / байрлал: харьцангуй; /*Байршил тогтоох байрлалыг тохируулах*/ ) /*Буулгасан цэсний загварууд* / li > ul (байрлал: үнэмлэхүй; дээд: 25px; дэлгэц: байхгүй; ) /*Үзэгдэх хэсгийг роботоор хавсаргав* / li:hover > ul ( display:block; width:250px; /*Set цэсний өргөн*/ ) li:hover > ul > li ( float:none; /*Хэвтээ байрлалыг тохируулах * / )
Хэрэв та өөрөө энэ ангиллын үйлчлэгч нарт буруутай бол ойлгохын тулд би материалтай танилцахыг зөвлөж байна.
Хэрхэн цоо шинэ хэвтээ цэс үүсгэх, хэрхэн загваруудыг цацах, хэрхэн шинэ энгийн хэв маяг оруулах, хөөрхөн цэсийг хэрхэн үүсгэх, өөрийн харж буй цэсийг хэрхэн үүсгэх талаар аль болох товчхон хэлэхийг хичээсэн. таны сайт. Тодорхой болгох үүднээс би дээр дурдсан бүх цэсийг нэг html файлд сонгосон бөгөөд та доороос сонгож болно. Та үүнийг дэлгэцийн агшин дээрээс харж болно:
Хүндэтгэлийн төлөө.
Шинэчлэгдсэнээр бүх зүйл сайт дээр дасан зохицох боломжтой, хэвтээ цэсийг оруулаагүй бөгөөд энэ нь бүх дэлгэцэн дээр ээлтэй байж болно. Сонгодог навигац, виконаныг цэвэр хэв маягаар, JS-ийг цочирдолгүйгээр хараарай. De өөрийн хэв маяг, та маш олон сайтууд руу явж болно, Энэ нь энгийн, стандарт харагдах байдлаар хийгдсэн, гэхдээ нөлөө дэргэд нь. Мөн гар утсыг харвал автоматаар товчлуур гарч ирнэ
баруун тал, дарахад үсгийн товчлуурууд бүхэлдээ харагдахгүй, гэхдээ бүх зүйл эмх цэгцтэй, нэг талаасаа үсгийн товчлуурууд бие биенээ нүдээр харах болно.
Таны мэдэж байгаагаар эдгээр chi іnshої ангилалд шилжихэд шаардлагатай бүх жагсаалтыг харуулахын тулд хамгийн энгийн HTML жагсаалтыг энд авсан. Энэ үзэл баримтлал нь навигацийн жагсаалтыг хэвтээ байдлаар зохион байгуулах нь сайхан байдаг, гэхдээ хөдөлгөөнт үед энэ нь материалд хавсаргасан зургуудаас харахад автоматаар босоо байрлалтай болно.
Арьсанд наалдмагц жижиглэнгийн худалдаачин өөрөө тухайн сэдвийг эсвэл сэдэвчилсэн байдлаар илүү тохиромжтой зургийг өөрчилж болно. Цэс нь өөрөө хар ногоон өнгөний схемээр бүтээгдсэн бөгөөд тус бүрийг нь сонгоход ховор байдаг. Гэхдээ та CSS-ийн хэв маягт орсноор бүх зүйлийг үндсээр нь өөрчилж чадна, тэнд та өөрт хэрэгтэй загварын хэв маягийг оруулж, хамгийн гол нь үүнийг интернетийн эх сурвалжийн үндэс болгон бичиж болно.
1
. Тиймээс zamovchuvannyam явах эсвэл pіd цагийн хувьд би портал руу явдаг.
2
. Бид аль хэдийн гайхаж байна гар утас, гэхдээ тэд цэс дээр дараагүй байна.
3
. Энд тэд товшиж, бүх лавлагаа гарч ирэв, тэд лавлах болно.
Суулгац руугаа орцгооё:
css
Хэсэг(
өргөн: 100%;
хамгийн их өргөн: 1198px;
захын зай: 0pxauto;
дэлгэц: ширээ;
албан тушаал: хамаатан садан;
}
Толгой хэсэг(
өргөн: 100%;
дэлгэц: ширээ;
дэвсгэр өнгө: # 175812;
доод захын зай: 50px;
}
#kamtukagnpos(
хөвөх: зүүн;
үсгийн хэмжээ: 25px;
текст хувиргах: том үсгээр;
өнгө: #ffab2;
үсгийн жин: 600
дүүргэх: 19.8px 0px;
}
#kamtukagnpos:hover(
текст-сүүдэр: 0px 0px 6px rgba(255, 250, 250, 0.67);
}
Нав(
өргөн: автомат;
хөвөх: баруун;
}
Навул(
дэлгэц: ширээ;
хөвөх: баруун;
}
Нав ул ли(
хөвөх:зүүн;
}
Нав ул ли:сүүлчийн хүүхэд(
padding-right: 0px;
}
Нав ул ли а (
өнгө: #e4f2ff;
үсгийн хэмжээ: 19px;
дүүргэх: 24px 19px;
дэлгэц: inline-block
текст-сүүдэр: 0 1px 0 #2e2f2e;
}
Нав ул ли а: гүйлгэх (
дэвсгэр өнгө: #143a06;
өнгө: #fff9c8;
шилжилт: бүх 0.7s хялбар 0s;
текст-сүүдэр: 0 1px 0 #282b28;
}
Nav ul li a: hover i (
өнгө: #fdf7c9;
шилжилт: бүх 0.7s хялбар 0s;
текст-сүүдэр: 0 1px 0 #1c1d1c;
}
Нав ул ли а и (
баруун талын дэвсгэр: 9px;
өнгө: #f4faff;
шилжилт: бүх 0.7s хялбар 0s;
текст-сүүдэр: 0 1px 0 #202120;
}
Navigation-menusaita ul(
дэлгэц: ширээ;
өргөн: 24px;
}
Navigation-menusaita ul li(
өргөн: 100%;
өндөр: 3px;
дэвсгэр өнгө: #e9f0f7;
захын доод: 4px;
}
Navigation-menusaita ul li:сүүлчийн хүүхэд(
захын доод: 0px;
}
Оруулах, шошго(
дэлгэц: байхгүй;
}
Зөвхөн @media дэлгэц ба (хамгийн их өргөн: 1440px)(
Хэсэг(
хамгийн их өргөн: 95%;
}
}
Зөвхөн @media дэлгэц ба (хамгийн их өргөн: 980px)(
толгой(
дүүргэх: 20px 0px;
}
#kamtukagnpos(
дүүргэх: 0px;
}
Оролт(
байрлал: үнэмлэхүй;
дээд: -9999px;
зүүн: -9999px;
дэвсгэр: байхгүй;
}
Оруулах:fous(
дэвсгэр: байхгүй;
}
Шошго(
хөвөх: баруун;
дүүргэх: 8px 0px;
дэлгэц: inline-block;
курсор: заагч;
}
Оруулах: шалгасан ~ nav(
дэлгэц:блок;
}
Нав(
дэлгэц: байхгүй;
байрлал: үнэмлэхүй;
баруун: 0px;
дээд: 53px;
дэвсгэр өнгө: # 174810;
дүүргэх: 0px;
z индекс: 99;
}
Навул(
өргөн: автомат;
}
Нав ул ли(
хөвөх: байхгүй;
дүүргэх: 0px;
өргөн: 100%;
дэлгэц: ширээ;
}
Нав ул ли а (
өнгө:#f7f2f2;
үсгийн хэмжээ: 15px;
дүүргэх: 10px 20px;
дэлгэц:блок;
хилийн доод: 1px хатуу rgba(204, 197, 197, 0.1);
}
Нав ул ли а и(
өнгө:#f9f5d5;
padding-right: 13px;
}
}
Зөвхөн @media дэлгэц ба (хамгийн их өргөн: 480px) (
хэсэг(хамгийн их өргөн: 90%;)
}
@media зөвхөн дэлгэц ба (хамгийн их өргөн: 360px) (
шошго(дөөрөг: 5px 0px;)
#kamtukagnpos(фонтын хэмжээ: 20px;)
навигаци (дээд: 47px;)
}
Урд нь, яаж тавих вэ, дараа нь Демо тал руугаа хүндэтгэлтэй харж, бүх зүйл хэрхэн ажилладагийг үнэхээр үнэлээрэй, гэхдээ та эффект өгөх эх үүсвэрийг нэрлэсэн ч гэсэн түүн дээр хулганаа аваачиж байхад ийм зүйл байхгүй. бүх тэмдгүүд нь илүү баян, илүү үзэсгэлэнтэй хонгил руу явдаг.
Сайтын сайн навигаци нь блог хөтлөгчдөд бас чухал юм. її тусламж vodvіduvach shvidko мэдэх нь Надад тал хэрэгтэй болноблог. Сайт болон хайлтын системийн оюун ухааныг үнэл. Энэ нийтлэлд та Blogger-ийн дүрсүүдийг нэгтгэсэн хэвтээ цэсийг хэрхэн үүсгэх талаар мэдэх болно.
CSS дээр үүсгэсэн залгах товчлуур-тэмдэг бүхий цэс. Цэсийг үзэхийн тулд доорх товчийг дарна уу.
Blogger дээр дүрс бүхий хэвтээ css цэсийг хэрхэн оруулах вэ
- "Загвар" таб руу очиж, курсорыг засварлагч дээр тавь (газар ч бай),
- Кодыг хайж олохын тулд Ctrl + F товчийг дарж кодын санааг олоорой ]]>
- Cim кодын өмнө дараах кодыг оруулна уу:
..
/* Цэсийн CSS код эндээс эхэлнэ bloggertrix.com */ #btrix-nav (маржин: 100px auto; жагсаалтын хэв маяг: байхгүй; өргөн: 632px; өндөр: 87px; overflow-y: нуугдмал;)
#btrix-nav li (хөвөгч: зүүн;)
#btrix-nav li (дэлгэц: блок; өнгө: цагаан; өргөн: 120 пиксел; өндөр: 61 пиксел; захын дээд: 24 пиксел; текстийн чимэглэл: байхгүй; текстийг зэрэгцүүлэх: төв; хилийн дээд: 1 пиксел хатуу #bbb; хил -доод: 1px хатуу #555;)
#btrix-nav li a span.ame (фонт: тод 17px/61px "Arial"; өнгө: #fff;текст хувиргах: том үсэг; курсор: заагч; байрлал: харьцангуй; дээд: 0; шилжилт: дээд .5s хялбар; текст-сүүдэр: 1px 1px 1px rgba(0, 0, 0, 0.5);)
#btrix-nav li a img (байрлал: харьцангуй; дээд: 0; шилжилт: дээд .5s хялбар;)
#btrix-nav li a:hover (курсор: заагч;)
#btrix-nav li: hover img (дээд: -85px;)
#btrix-nav li a:hover .ame (дээд: 85px;)
#btrix-nav li:nth-child(1) a (арын дэвсгэр: #3eb006; хилийн радиус: 5px 0 0 5px; хилийн зүүн: 1px хатуу #bbb;)
#btrix-nav li:nth-child(2) a (арын дэвсгэр: #9bc704;)
#btrix-nav li:nth-child(3) a (арын дэвсгэр: #0dc3ff;)
#btrix-nav li:nth-child(4) a (арын дэвсгэр: #51a2ec;)
#btrix-nav li:nth-child(5) a (арын дэвсгэр: #6e3cab; хилийн радиус: 0 5px 5px 0; хүрээ-баруун: 1px хатуу #555;)
- Одоо "Дизайн" таб руу очно уу.
- Шинэ HTML / JavaScript элемент нэмээд кодыг нэмнэ үү:
- Головна
https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />
- давуу талыг ашиглах https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />
- mysql https://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />
- HTML https://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />
- Харилцагчид https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />
- HTML / JavaScript гаджет дээр нэмсэн код, шаардлагатай өөрчлөлтүүдийг оруулна уу:
- Блогын шаардлагатай талд байрлах мессежийг өөрчлөх # дүрс (жишээлбэл, шошгоны тал, "харилцагч" толгойн талблогтоо)
- зураг руу илгээсэн, би улбар шар өнгөтэй харагдаж байна, тухайн зүйлийн дүрс-зураг илгээж шууд солино.
- Зүйл, алсын хараа цэнхэр, CSS цэсийн талыг нэрлэх.
HTML элементийг зөөх үү? "Дизайн" блогийн нийтлэлд JavaScript хэрэгтэй.
Цэснийхээ хувьд та дүрс, лого болон бусад PNG зургийг эргүүлж болно цаана нь харцгаая. Зургийн хэрэгцээг мэдэхийн тулд дүрс хайх нь дээр. Жишээлбэл, iconsearch.com
Tse list posilan, scho lead up to өөр өөр талуудсайт. Жагсаалтыг энгийн тэмдэглэгээг орлуулахаар илгээж, дүрсээр нэмж, графикийг өөрчлөх шаардлагатай бол энэ нь муу харагдаж байна. Мэдээллийн сангийн өмнө хэрхэн хүсэлт гаргах вэ?
HTML код
Mіzh шошго лиүүнийг зааж өгсөн а(# timchasova stub), дунд хэсэгт хоёр блок элемент байна зай. Эхний span - шошго бидүрсний анги, сайтаас хуулсан код Фонт Гайхалтай. Нөгөө рүү зай- Зурвасыг, дараа нь текстийг нэрлэ.
Унадаг дугуй
Мотоцикл
Автобусууд
Машинууд
Вертольоти
Шошго хоорондын холболтын дараа толгойдүрсний фонт Фонт Гайхалтай- цэс иймэрхүү харагдаж болно.
CSS загварууд
Ашиглалтын хувьд Google фонтнэмэлт кирилл цагаан толгойн найрсаг фонт сонгох, ингэснээр цэс босоо орос байх болно.
Сонгосон фонтын холболтын кодыг хуулж, файл руу оруулна уу cssфайл.
@import url("https://fonts.googleapis.com/css?family=Marck+Script");
Сонгогч дээр биеБи сонгосон үсгийн нэрийг бичээд rozmіr дээр тохируулна.
их бие(
захын зай: 0;
дэвсгэр: 0;
font-family: "Marck Script", sans-serif;
үсгийн хэмжээ: 20px;
}
Манай цэсний байрлал нь хөтөчийн цонхтой төстэй, 10%, 20% илүү байна. Эдгээр тоонуудыг "стелес"-ээс авсан гэдгийг би ойлгосон, та өөрийн гэсэн өмхий үнэртэй болно.
Ул (
байрлал: үнэмлэхүй;
дээд: 10%;
зүүн: 20%
}
Бид цэсийн өргөнийг 200 пикселээр засдаг.
Өргөн: 200px
Бид жагсаалтад байгаа цэс рүү очлоо. Цэгүүдээс маркер авч байна ли.
Ул ли (
жагсаалтын хэв маяг: байхгүй;
}
Бид араатны хүрээ ба доод хэсгийг илэрхийлдэг бөгөөд энэ нь цэсийн зүйлсийг нэг төрлийн нэг болгодог.
Дээд талын хүрээ: 1px хатуу #131313;
хилийн доод: 1px хатуу #131313;
захын зай: -1px 0;
Зурвасуудын нэр, дүрс хооронд хүрээний хүрээ, хуваарилалтыг бүү өлгө.
Шошгонд зориулсан баруун жижиг хүрээ а, энэ нь эгнээний элемент бөгөөд эгнээний элементийн хажууд хүрээг таслах боломжгүй. Тийм учраас шошгыг харуулж байна аблок элемент.
Ул ли а (
дэлгэц:блок;
}
Одоо та хүрээ тавьж, нэмэлт мессежийг цэгцэлж, мессежийн өнгийг бичиж болно.
Баруун хүрээ: 1px хатуу #131313;
текстийн чимэглэл: байхгүй;
өнгө: #131313;
Зүүн хүрээтэй гэрлээрэй.
шошго зай- блок элементүүд, дунд хэсэгт нь текст байх болно зайэгнээ-блок элементээр төлөөлдөг.
Ул ли а span (
албан тушаал: харьцангуй;
дэлгэц: inline-block
}
Бидэнд эхнийх нь хэрэгтэй зай, дунд нь дүрс байх бөгөөд өөр шиг харагдах хэв маягийг тохируулна уу зай. Хэний хувьд хамгийн түрүүнд зайутга учиртай псевдо анги - span:nth-хүүхэд(1) ta stilizuemo yogo okremo. Баруун, зүүн хүрээ, өргөнийг тохируулъя.
Ul li a span:nth-child(1) (
өргөн: 30px
хилийн зүүн: 1px хатуу #131313;
баруун хүрээ: 1px хатуу #131313;
}
Дүрсүүд нь бүх талдаа 10 пикселийн талбар бүхий голд байрлана.
текстийг зэрэгцүүлэх: төв;
дүүргэх: 10px
Дүрсүүд нь бараан өнгөтэй, улаан aphids дээр 20 пикселийн хэмжээтэй байна.
Өнгө: #131313;
үсгийн хэмжээ: 20px;
дэвсгэр: #f44336;
Өөр нэг псевдо анги нь зөвхөн талбаруудыг зааж өгөхийг шаарддаг.
Ul li a span:nth-child(2) (
дүүргэх: 10px
}
Одоо босоо цэсүлдэгдэл төрхөө олж авсан. Бүхэл бүтэн код болон үр дүнг нь гайхшруулаарай.
Масс бэлэн шийдэлийм хавтанг нугалахад зориулагдсан jQuery-д тусална уу, өөр өөр систем keruvannya сайтад зориулсан okremі залгаасууд болон модулиуд.
Бүх зүйл илүү дээр, гэхдээ энэ нь боломжтой, слайд самбарыг хэрэгжүүлэхийн тулд бүх зүйл боломжтой CSS? Та чадна гэдэг нь ойлгомжтой! Ale хүндэтгэлтэйгээр))) эргэж харахад бүх хөтөч биш ч CSS3-ийн одоогийн хүчийг сайн дэмждэг.
Саяхан "уул харах" шийдэл, роботын өгзөг. Эхний сэтгэгдлүүдийн нэг нь "унадаг дугуй руу явцгаая ..." гэсэн байв. Яагаад b i n i гэж? Болъё)).
Өнөөдөр бид танд хэлэх болно, би танд програм дээр харуулах болно, учир нь "CSS ид шид"-ийн тусламжтайгаар та товшилтоор бүрэн ажиллагаатай цэсийг ажиллуулж эхлэх боломжтой.
Кобын хувьд тогтсон уламжлалын ард, робот самбарын амьд өгзөгийг гайхшруулж, хол, тэр үед хэн нэгэнд хэрэгтэй, бид бүхэл бүтэн зохион байгуулалтыг, юу, яаж, одоо харж болно. Хоол бэлтгэх, цэсийн сонголтуудыг бэлтгэх, зүүн гар, баруун гар гэх мэт:
HTML тэмдэглэгээ
Шилжүүлэгч самбарыг нэг төрлийн ялсан жишиг тэмдэг ():
Баримт бичгийн дээд талд, эс тэгвээс шошгоны дараа шалгах хайрцаг байж магадгүй юм
. Нууцлагдсан атрибут нь энэ элементийн "хавсрах" баазыг зуучлагчгүйгээр, мөн өвөрмөц танигч болох id="nav-toggle", жишээлбэл, шошгоны for шинж чанартай холбохын тулд бичигдсэн болно.
