Вэбсайт дээр хэрхэн хүрээ хийх вэ

Агуулгын хүснэгт:

Вэбсайт дээр хэрхэн хүрээ хийх вэ
Вэбсайт дээр хэрхэн хүрээ хийх вэ

Видео: Вэбсайт дээр хэрхэн хүрээ хийх вэ

Видео: Вэбсайт дээр хэрхэн хүрээ хийх вэ
Видео: Best PowerPoint Templates free Powerpoint-ийн гоёмсог бэлэн загвар үнэгүй авч ашиглах 2024, Дөрөвдүгээр сар
Anonim

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

Вэбсайт дээр хэрхэн хүрээ хийх вэ
Вэбсайт дээр хэрхэн хүрээ хийх вэ

Энэ нь зайлшгүй шаардлагатай

  • - өөрийн вэбсайттай байх;
  • - CSS гэж юу болох, эдгээр стилийг сайт дээр хаана бичсэнийг мэдэх.

Зааварчилгаа

1-р алхам

Хүрээ үүсгэхийн тулд эхлээд дараахь кодыг CSS дээр бичнэ үү.

рамка {}

Алхам 2

Хүрээг хүссэн хэмжээгээрээ хийхийн тулд мөрний өргөнийг пикселээр тохируулдаг border-width параметрийг ашиглана уу. Жишээлбэл, хүрээний шугам 3 пикселийн өргөнтэй байвал оруулга дараах байдалтай байна.

ramka {border-width: 3px;}

Алхам 3

Одоо хилийн хэв маягийн параметрийг ашиглан хилийн хэв маягийг тодорхойл. Хэрэв та талууд нь тогтмол хатуу шугамтай хил үүсгэхийг хүсвэл дараах тэмдэглэгээг буржгар хаалтуудын хооронд кодонд оруулна уу. Border-style: solid.

Алхам 4

Цэгтэй цэгийг дараах байдлаар бичих замаар олж авч болно: border-style: dotted. Хилийн хэв маягийг шалгах: тасархай зураас нь танд тасархай хүрээ өгөх болно.

Алхам 5

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

Алхам 6

Энэ кодыг ашиглана уу: border-style: inset нь сайтын элементийн хүрээтэй оруулгын үр нөлөөг бий болгох. Хүрээний агуулгыг хилийн хамт гүдгэр болгохын тулд хилийн хэв маягийг бичээрэй.

Алхам 7

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

Алхам 8

Бүх тохируулгуудыг багтаасан CSS хилийн код дараах байдалтай байна.

ramka {хилийн өргөн: 3px; хилийн хэв маяг: хатуу; хилийн өнгө: цэнхэр;}

Алхам 9

Одоо HTML дээр үүнийг бичнэ үү:

Хүрээний агуулга "Хүрээний агуулга" гэсэн хэллэгийн оронд хүссэн зургийнхаа текст эсвэл кодыг оруулна уу.

Алхам 10

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

Зөвлөмж болгож буй: