Сайтын сүлжээний дизайныг авч үзээд бүрэлдэхүүн хэсгүүдийг задалж үзье. Хөвөгч нь яагаад ийм хэрэгтэй байдаг, мөн гурван урсгал болон сайтын хөлөөс анхны вэб сүлжээг бий болгох түгээмэл арга техникийг судалж үзье.
Талбайн сүлжээний бүтцийг судлахын тулд "урсгал" гэж юу болохыг ойлгох хэрэгтэй. Урсгал нь ар араасаа байрладаг сайтын элементүүд юм. Жишээлбэл, эдгээр нь анхдагчаар ар араасаа явдаг div элементүүд байж болно. Гэхдээ урсгалыг өөрчилж, блок элементүүдийн байрлалыг өөрчилж болно.
Урсгалыг хянахын тулд блокыг зүүн эсвэл баруун талд байрлуулах боломжтой float шинж чанарыг ашигладаг. CSS файл дээр бичихэд хангалттай:
"class or block name" {хөвөх: баруун / зүүн; }
Хөвөгч цорын ганц сул тал бол нэг блокыг нөгөө блок дээр "давхцах" чадвар юм.
Гүйцэтгэхээс зайлсхийхийн тулд бид тодорхой ашигладаг: хоёулаа - энэ шинж чанар нь блокийн эргэн тойрон дахь урсгалыг тохируулах болно. Агуулгын хэмжээ (текст, зураг) -ын дагуу утгыг бүрдүүлэхийн тулд бид өргөн ба өндрийг хамгийн их ба бага хэмжээгээр тохируулна. Маржин - блокийн байршлаас хамаарч гадаад зах нь автоматаар үүсэхийн тулд утгыг автоматаар тохируулна.
Хөвөгч нь блокуудыг хоёр чиглэлд байрлуулах боломжтой тул сайтыг зүүн ба баруун тийш хуваах нь заншилтай байдаг. Хэрэв программистад зөвхөн хоёр урсгал хэрэгтэй бол тэр баруун, зүүн тийшээ хөвөх болно, гэхдээ хоёроос илүү байвал тэр margin ашиглан захыг тохируулна. Энэ нь яаж тохиолддог вэ?
.column1 {хөвөх: зүүн; өргөн: 65px; хамгийн бага өндөр: 50px; баруун зах: 9px; // төв хайрцагнаас 9х-ийн цэг}
2 урсгал:
.column2 {хөвөх: зүүн; // зүүн блок руу, гэхдээ "давхцалгүйгээр", учир нь бид захын өргөнийг хэрэглэсэн тул: 80px; хамгийн бага өндөр: 50px; }
3 урсгал:
.column3 {хөвөх: баруун; өргөн: 65px; хамгийн бага өндөр: 50px; }
Хөлтэй харьцах (.footer):
.footer {тодорхой: хоёулаа; // хоёр талыг ороож}
Гурван урсгалаас бүрдэх float ашиглан сайтын сүлжээг ингэж хийсэн.
