Вэб хуудсан дээрх зүйлүүдийг байршуулах нь ерөнхий дизайны хувьд чухал юм. Хэдийгээр хүснэгтэд нөлөөлөх өөр бусад арга замууд байдаг ( бид үүнийг зөвлөдөггүй ), хамгийн сайн нь CSS ашиглах явдал юм.
Доорх зурган дээрх энгийн CSS загварыг хэрхэн ашиглах талаархи зураг, хүснэгт, догол мөр болон бусад зүйлсийг хооронд нь харьцуулах боломжтой болно.
Тэмдэглэл: Эдгээр аргууд нь гадны загварын хуудсанд ч хэрэглэгдэж болох боловч эдгээр нь бие даасан зүйлүүдэд хамаарах тул ийм аргаар үргэлжлүүлэх шаардлагатай байж магадгүй тул доор дурдсантай адил интерактив хэлбэрээр ашиглах нь зүйтэй.
Текстийг тайлбарлах
Догол мөр нь таны вэб хуудсыг байрлуулах эхний газар юм. Энэ тагийг нээх, хаах нь иймэрхүү харагдана:
Зүйл дэх текстийн анхдагч байрлал нь хуудасны зүүн талд байна, гэхдээ та мөн догол мөрийг баруун болон төвд нь холбож болно.
Float property ашиглан догол мөрийг баруун гар талын элементийг заана. Тухайн эх элементийн доторх бусад элементүүд нь хөвөгч элементийн эргэн тойронд урсан өнгөрөх болно.
Зүйлээр хамгийн сайн үр дүнтэй байхын тулд савлагаа (толгой) элементээс арай бага хэмжээгээр тохируулах нь хамгийн сайн арга юм.
Текст доторх текстийг буулгах
Текстийн текстийг хамгийн сонирхолтой болгох нь "зөвтгөх" бөгөөд энэ нь цонхны баруун болон зүүн талд текстийг харуулсан текстийг харуулахын тулд хөтөчийг хэлнэ.
Зүйл дэх текстийг зөв болгохын тулд та текстийг тэгшитгэхийн тулд ашиглах болно.
Текстийг тэгшитгэхийн тулд та текстийн бүх текстийг баруун тийш буюу зүүн талд (анхдагч байдлаар) нэгтгэж болно.
Текстийг тохируулах шинж чанар нь элементийн доторх текстийг тохируулна. Техникийн хувьд энэ нь догол мөр эсвэл бусад элемент дотор агуулагдаж буй зургийг нэгтгэх ёсгүй, гэхдээ ихэнх хөтөч нь энэ шинж чанарт зориулсан зургийг тойм байдлаар харуулдаг.
Зургийг тааруулах
Зургийн шошгон дээр хөвөх шинжийг ашиглах нь хуудасны зураг байрлуулах, текстийг хэрхэн тойрч байрлуулахыг тодорхойлох боломжтой.
Дээрх параграфуудын адилаар зургийн шошгоны хөвөө маягийн шинж чанар нь хуудсан дээрх таны зургийг байршуулж, тухайн дүрсэн дээр текст болон бусад элементүүдийг хэрхэн гүйлгэхийг хэлдэг.
Дээрх зурган дээрх текстийг зураг дээр баруун тийш зурах болно.
Хэрвээ текстийг зураг эргэн тойрныг боож зогсоохыг хүсвэл би тодорхой хөрөнгийг ашигладаг:
Clear: left left
Ємнєх хэсгїїдийг нэгтгэх
Гэсэн хэдий ч, та зүгээр нэг догол мөр эсвэл дүрсээс илүү зүйлийг хооронд нь холбохыг хүсч байгаа бол яах вэ? Та догол мөр бүрт хэв маягийн шинж чанарыг тавьж болно, гэхдээ энэ нь илүү үр дүнтэй ашиглах боломжтой tag байна:
Зөвхөн текст болон зургийг ( HTML тагийг оруулаад) тээгч болон хэв маягийн шинж чанарыг (хөвөх эсвэл текстийн харагдацаар) хүрээлэх бөгөөд тэр хэлтсийн бүх зүйл таны таашаалд нийцэх болно.
Дээрх догол мөрүүд эсвэл зургуудад нэмэгдсэн холбоосууд нь нэр хүндтэй байх болно гэдгийг санаарай.