Цэвэр CSS / HTML цэсийг доош буулгана
- Цэвэр CSS / HTML цэсийг доош буулгана Энэ зааварт бид цэвэр CSS-ийн сонгодог хэвтээ цэсийг бий болгоно....
- Бид зааж байхдаа хэвтээ цэсийг идэвхжүүлэх болно.
- CSS / HTML уналтын цэсийг тайлбарлах.
Цэвэр CSS / HTML цэсийг доош буулгана
Энэ зааварт бид цэвэр CSS-ийн сонгодог хэвтээ цэсийг бий болгоно. Энэ нь жагсаалтанд байгаа дүрсүүдтэй. Нэг зүйлийг зааж өгөхөд, товчлуурын өнгө, текстийг сольж, сүүдэр нэмнэ. Цэсний жагсаалтыг олон түвшинд хийж болох ба гол зүйл нь бүгд цэвэр CSS3 дээр хэрэгждэг.
Энэ хичээлийн үргэлжлэл энд - хэсэг 2 MOBILE VERSION хэвтээ цэс ".
Үзэгчийг үзнэ үү Поязви Denis ( @Dwstroy ) дээр Кодепен .
Хичээл дээрээ:
- дэлгэц: flex;
- шилжилтийн үед ашиглах;
- байрлал бүхий элементүүдийг байршуулна.
HTML хэвтээ цэсийн бүтэц
Нэгдүгээрт, хэвтээ цэснээс markup бичих. Бид хөгжүүлэлтийнхээ орчинг нээж, энэ бол PhpStorm, индекс.html файл үүсгэх, frame html: 5, ru-г солих.
Бүх мета хасалтыг кодчилохоос бусад тохиолдолд би " Том цэс " гэсэн нэрийг бүртгэнэ.
Биеийн хооронд бид толгойн үсгийн маягыг бичдэг бөгөөд дотор нь .dws-цэсний блок нь бидний цэсийг агуулдаг. Дараа нь бүтэц нь дараахь байдлаар байх болно, бид таван хэсгээс жагсаалт үүсгэх болно. Жагсаалт бүрээр href = "#" атрибут бүхий холбоос байх болно. Дараа нь би ангийн дүрд очно .a .fa -
<head> <nav class = "dws-menu"> ul> li * 5> a href = "#"]> i.fa.fa- </ nav> </ header>
Бид хэрэглэхийг хүсч байна.
Цэсийн зүйлсийн нэрийг ( Home, Products, Services, News, Contacts ) бичнэ үү.
Дараа нь дүрсүүдийг сонгоод холбоно уу. Сайт руу очихын тулд бид эдгээр цэсэнд зориулж дүрсүүдийг сонгоно:
<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa faog "> </ i> <i анги = "fa fa- th-list "> </ i> <i class = "fa fa- envelope-open "> </ i>
Архивыг сайтаас татаж аваад, агуулгыг нь өөрийн компьютерт задлах, фонтуудын хавтас болон css фолдерыг өөрийн хөгжүүлэлтийн орчинд хуул.
Фонтуудын фолдер нь үсгийн фонтыг агуулдаг бөгөөд css фолдер нь өөрсдийн стилийг агуулдаг. Сайжруулсан стилиуд нь font-awesome.min-г устгаж болох бөгөөд бид шахаагүй font-awesome.css-ийг холбоно.
Индекс.html индексийг бид холбож, тус бүрийг өөрийн дүрс загварын ( гэрийн , худалдааны тэрэг , cogs , th-жагсаалт , дугтуйг нээх ) болгон бүртгэдэг.
Бид үндсэн загварыг гаргаж үндсэн загварын тайлбар хийсний дараа дэд цэс үүсгэх бөгөөд одоо бид хэвтээ цэс style.css-ийн үндсэн хэв маягийг тайлбарлах файл үүсгээд индекс.html холбоно. Загваруудтай холбогдсон эсэхийг шалгахын тулд img фолдер үүсгэхийн тулд би арын зураглал дээр дурын зургийг тавина. Зургийн холболтыг дэвсгэр ашиглан бичье.
body {background-image: url ("../ img / ep_naturalwhite.png"); }
Бидний харж байгаагаар, бүх зүйл харуулагдаж, дараа нь стильтэй танилцах болно.
Юуны өмнө, янз бүрийн хөтөч анхдагчаар тохируулж болох бүх индексийг шинэчлэв.
.dws-menu * {margin: 0; padding: 0; }
Толгойг 200 пикс болгох. Хэрэв та татаж авч, сайтад өөртөө тусад нь холбох боломжтой бол нэмэлт фонт бичиж аваарай.
header {margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Тэмдэглэгээг жагсаалтад нуу:
.dws-menu ul, .dws-menu ol {жагсаалт-style: none; }
Жагсаалтууд нь дэлгэцэнд харуулагдах болно: маалинга, бид үүнийг төвд хийх болно:
.dws-menu> ul {display: flex; Зөвшөөрөх-агуулга: төв; }
Толгой хэсэгт бид зөвхөн дээд талыг нь зааж өгнө, бид дээд талыг бичнэ.
header { margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Бидний цэсийг зохиож, товчнуудын өнгө, үсгийн фонтыг тохируулцгаая.
Холбоос сонгоод nav> ul li, элементүүдийг хаах хэрэгтэй. Цэсний дэвсгэрийг тохируулах, индекс бичих, хэмжээ, өнгийг зааж өгөх, доогуур зураасыг устгах, гарчгийг том үсгээр хий.
.dws-menu> ul li a {display: block; background: #ececed; padding: 15px 30px 15px 40px; фонт-хэмжээ: 14px; өнгө: # 454547; текст-чимэглэл: none; текст-хувиргах: том үсэг; }
Дараа нь дүрсийг байрлуулж, жагсаалтыг байршуулна: харьцангуй; дүрсүүдийг цаашид тохируулахын тулд:
.dws-menu> ul li {албан тушаал: харьцангуй; }
Дараа нь бид дүрсийг сонгож, тэдгээрийг байрлуулаад, дээд тал нь 15 оргилууд, зүүн 12 оргилуудаас 18 өндрийг нэмнэ.
.dws-menu> ul li> a i.fa {байрлал: үнэмлэхүй; дээд: 15px; зүүн: 12px; фонт-хэмжээ: 18px; }
Жагсаалтанд хилийн хэлбэрээр тусгаарлагчийг оноож, эхний LI элементийг сонгож, хилийг тогтооно. Бид хамгийн сүүлчийн элементийг сонгоод ижил төсөөтэй хилийг тогтооно.
.dws-menu> ul li: first-child {border-left: 1px solid # b2b3b5; } .dws-menu> ul li: last-child {border-right: 1px solid #babbbd; }
Ли жагсаалтад зориулсан хязгаарлалтын талаар:
.dws-menu> ul li {албан тушаал: харьцангуй; баруун тийш: 1px хатуу # c7c8ca; }
Цэс нь гадаад төрхийг олж авсан, дараа нь hover-ыг загвараар тайлбарлаж болно.
Бид зааж байхдаа хэвтээ цэсийг идэвхжүүлэх болно.
Холбоос сонгоод, блок руу өнгө өгч, холбоосын өнгөийг цагаан өнгөтэй болго. Өөр харанхуй сүүдэр нэмж үзье. 0.3 секундын шилжилтээр бид гөлгөр байдлыг бий болгоно:
.dws-menu li a: hover {background: # 454547; өнгө: #ffffff; хайрцаг-сүүдэр: 1px 5px 10px -5px хар; Шилжилт: бүх 0.3 нь хялбар; }
Үүнийг хөнгөвчлөхийн тулд энэ холбоосыг хялбархан холбож нэмээрэй:
.dws-menu> ul li a {display: block; background: #ececed; padding: 15px 30px 15px 40px; фонт-хэмжээ: 14px; өнгө: # 454547; текст-чимэглэл: none; текст-хувиргах: том үсэг; Шилжилт: бүх 0.3 нь хялбар; }
Үндсэн цэс дууссан бөгөөд та доторх агуулагдсан submenu болон submen-ийн тайлбар руу орж болно.
CSS / HTML уналтын цэсийг тайлбарлах.
Бид index.html-ийг нээж тухайлбал, нэмэлт бүтээгдэхүүний цэсийг нэмнэ. UL-ийн жагсаалтуудын хоорондох UL-г оруулаад 5 жагсаалтыг байрлуулах бөгөөд энэ нь herf = "#" attribute гэсэн холбоосыг агуулна.
ul> li * 5> a [href = "#"]
Бид хэрэглэхийг хүсч байгаа зүйлсийн нэрс ( Хувцас, Электроник, Хүнсний, Хэрэгсэл, Амьдрал ).
<ul> <li> <a href="#"> Хувцаслалт </a> </ li> <li> <a href="#"> Электроникс </a> </ li> <li> <a href = "#"> Хоол хүнс </a> </ li> <li> <a href="#"> Tools </a> </ li> <li> <a href="#"> Амьдрал. химийн </a> </ li> </ ul>
Дараа нь style.css-ийг нээж, дэд мөрийн загварыг тайлбарлана уу.
Бид хоёр дахь жагсаалтыг сонгож, үүнийг албан тушаал болгон өгнө: absolute; хамгийн бага өргөн 150 оргилыг тавьцгаая.
/ * дэд цэс * / .dws-menu li ul {position: absolute; мин-өргөн: 150px; }
Хилийн жагсаалтыг 1 оргил руу бичье.
.dws-menu li> ul li {border: 1px solid # c7c8ca; }
Дэд цэгтэй холбоосын хувьд бид 10 оргилуудад индексийг байрлуулах болно. Текстийн өөрчлөлтийг арилгаад дэвсгэр дээр хоёр тонн бараан дэвсгэрийг тавина: # e4e4e5; .
.dws-menu li> ul li a {padding: 10px; текст-хувиргах: none; суурь мэдээлэл: # e4e4e5; }
Дараа нь өөр дэд цэс үүсгэх. Тэмдэглэгээний файл руу, жишээлбэл "Электроник" хэлбэрээр өмнөх аналог цэсээр хийсэн. Бид зүйлсийн гарчиг ( Камер, Компьютер, Ярилцлага ), хадгалж байна.
<li> <a href="#"> Электроникс </a> <ul> <li> <a href="#"> Камер </a> </ li> <li> <a href="#"> Компьютер </a> </ li> <li> <a href="#"> утас </a> </ li> </ ul> </ li>
Тэдгээр нь гарч ирсэн боловч гол цэсэнд нуугдаж, одоо байр суурьтай: үнэмлэхүй; nested UL ба 150 оргил руу шилжүүлээрэй. тал руу:
.dws-menu li> ul li ul {байрлал: үнэмлэхүй; баруун талд: -150px; топ: 0; }
Дараа нь бид дээд цэсийн гол зүйлсийг чиглүүлэхдээ дэд цэс гарч ирнэ. Энэ нь бид дэлгэцийг нэмэх болно: none; Ингэснээр бүх дотоод цэгүүдийг нуух болно.
/ * дэд цэс * / .dws-menu li ul {position: absolute; мин-өргөн: 150px; дэлгэц: none; }
Мөн гадаад төрхийг нь харуулах жагсаалтыг бид сонгон харуулах ба дэлгэцийн тусламжтайгаар харуулах болно. .
.dws-menu li: hover> ul {display: block; }
Одоо та олон түвшний цэсийг нэмж UL блокыг хуулж, тэдгээрийн эд зүйлсийг өөрчилж болно.
<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Нүүр </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Бүтээгдэхүүн </a> <ul> <li> <a href="#"> Хувцаслалт </a> <ul> <li> <a href = "#"> Гутал </a> </ li> <li> <a href="#"> Jackets </a> </ li> <li> <a href="#"> Өмнөх хуудас </a> < / li> </ ul> </ li> <li> <a href="#"> Электроникс </a> <ul> <li> <a href="#"> Камер </a> </ li> <li> <a href="#"> Компьютер </a> </ li> <li> <a href="#"> Утас </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Хоол хүнс </a> </ li> <li> <a href="#"> Tools </ h a> </ li> <li> <a href="#"> Gen. химийн </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa cogs"> </ i> Үйлчилгээ </a> <ul > <li> <a href="#"> Үйлчилгээ 1 </a> </ li> <li> <a href="#"> Үйлчилгээ 2 </a> </ li> <li> <a href = "#"> Үйлчилгээ 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Мэдээ </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Харилцагч </a> </ li> </ ul>
Дараа нь товчийг товчлуураар нь хийцгээе. Би хэрэглэж байна, би хэд хэдэн Presets үүсгэсэн, та өөрөө үүсгэж болно, миний тохиолдолд энэ кодыг би хуулж өмнө нь бичсэн дэвсгэртээ байрлуулна.
.dws-menu> ul li a {display: block; / * Permalink - энэ градиент: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100; Custom +3 * / background: # c9c9c9 ; / * Хуучин хөтчүүд * / суурь: -moz-linear-градиент (дээд, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / суурь: -webkit-linear-градиент (дээд, # 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; текст-чимэглэл: none; текст-хувиргах: том үсэг; Шилжилт: бүх 0.3 нь хялбар; } .dws-menu li a: hover {/ * Permalink - энэ градиент: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / суурь: # e0e1e5; / * Хуучин хөтчүүд * / суурь: -moz-linear-градиент (дээд, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / суурь: -webkit-linear-градиент (дээд, # 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 болгосон.