Газар өөрөө хувьд хэвтээ цэс болгох

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

цэсийг гаргаж сурах

Бид утга, зохион байгуулалтын тэргүүлэх тоо баримтлах хазайх байхыг хичээх хэрэгтэй. Эхлээд та нь HTML манай цэс зориулсан "араг яс" болгож өөрийн хэвтээ цэсийг гаргах үндсэн ур чадварт суралцах хэрэгтэй. Тэгээд дараа нь энэ нь хэв маяг хуудас ашиглан засах болно. Бидний хэвтээ цэс 5 зүйлсийг агуулсан үзье. Эхний зүйл нь нүүр хуудас уруу дахин чиглүүлэгдэх болно. Хоёр дахь цэг - "Бидний тухай". Гурав дахь - "Бидний шагнал гардуулах". Дөрөвдүгээрт - "Энэ бол хөгжилтэй юм." Тавдугаар - "Холбоо барих".

HTML-код нь иймэрхүү харагдах болно:

Хэн мэдэх биш: ул хаяг ашиглаж байгаа сум, түүний элементүүд Ли эхэлдэг. Ли хаягууд UL хэрэглэж байгаа загварыг өвлөн авдаг.

UL - жагсаалтын блок элемент, энэ нь өргөн нь сунгасан болно. Ли нь блок юм.

Тэгэхээр нь index.html бий болгож байна. Бид кодыг цуглуулдаг. Энэ үед хөтөч, харин хэвтээ цэс илүү босоо харуулдаг. Харин та нар зорилго нь бид - сайтын хувьд хэвтээ цэсийг гаргах. Учир нь энэ нь бидэнд CSS хэрэгтэй.

CSS гэж юу вэ?

Та сайтын хөгжлийг эзэн нь бас байгаа бол, энэ нь Cascading Style Sheets үзэл баримтлал танилцах шаардлагатай байна. Үнэн хэрэгтээ эдгээр вэб-сайтын хуудсан дээр өөр өөр элемент хэрэглэх форматлах, боловсруулах дүрэм юм. Бид стандарт HTML элементийн шинж чанарыг тайлбарлах бол та кодын нэг хэсэг нь давхардлыг авч, энэ нь хэд хэдэн удаа давтах хэрэгтэй болно. хэрэглэгчийн компьютер дээр хуудсанд ачааллын цаг өсөх болно. Үүнээс сэргийлэхийн тулд CSS байна. Энэ нь зөвхөн нэг удаа тодорхой элементийг тодорхойлоход хангалттай, дараа нь ердөө л хаана нь тодорхой хэв маяг, шинж чанарыг ашиглах нь харуулж байна. Энэ хуудас нь өөрөө текст, бас өөр нэг файлд нь зөвхөн тодорхойлолтыг гаргаж болох юм. Энэ сайтын бүх хуудсанд өөр өөр хэв маяг нь тодорхойлолтыг хэрэглэх боломжтой болно. Энэ нь CSS-файлыг өөрчлөх, зарим нэг хуудсыг өөрчлөх нь бас тохиромжтой юм. Style хуудас та сайтын график хуудас муудаж зайлсхийх нь тусалж, HTML илүү сайн түвшинд үсгийн хамтран ажиллах боломжийг олгодог.

цэс хөгжлийн Style Sheets ашиглах

цэс CSS код:

1. # My_1menu {жагсаалт хэв маяг: аль нь ч; дүүрэн: 6; өргөн: 800px; маржин: авто;}
2. # My_1menu Ли {° в ° гч: орхиж гарсан бол; үсгийн: налуу 18px Arial;}
3. # My_1menu нь {өнгө: # 756; дэлгэц: блок; өндөр: 55px; шугам өндөр: 55px; дүүрэн: 0px 15px 0px 15px; Суурь ойлголт: #dfc; текст чимэглэлийн: Байхгүй;}
4. # My_1menu нь: Hover {өнгө: #foa; суурь: # 788;}

Одоо үр дүнд хэвтээ CSS цэс харцгаая.

- хуваарьт зүйлсийн үлдээсэн тэмдгийг арилгахын тулд энэ тушаал нь аль нь ч: - # My_1menu болохоор тэнд ID = my_1menu, жагсаалт хэв маяг нь UL- элементийн хэв маяг даалгавар юм.

өргөн: 800px - Манай цэс өргөн нь 800 пиксель юм.

дүүрэн: 0 - Энэ дотор жийргэвчтэй устгана.

маржин: авто - Манай хуудасны төвд хэвтээ цэс vyravnivnie.

# My_1menu Ли - стиль Ли-элементүүдийг зааж.

өндөр: 55px - цэс өндөр.

# My_1menu нь: Hover - элемент хэлбэржүүлж хуваарилах бөгөөд энэ нь үүдэлтэй юм хулгана.

Бид нарийвчлан хөгжүүлэгч бүр энд өөрийн параметрүүдийг зааж өгч болно гэж, бүр мөр тайлбарлах болно. вэб сайт дээр цэсэнд хэв маяг хэрэглэх Энэ нь үндэс. Та зураг ашиглан, илүү бэлэн, сайхан төрхийг үүнийг өгч болох юм. жишээ нь, суурь нь, элемент оноох боловч: URL (img1.png) давтан хийнэ-X. байх суурь байг: URL (img2.png) давтан хийнэ-X нь: Hover.

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