CSS-г ашиглах нь өмчийг Вэб хуудасны загварыг боловсруулахад ашигладаг
CSS өмч нь байршлын хувьд маш чухал өмч юм. Энэ нь танд вэб хуудсын дизайныг өөрийн хүссэнээр яг байрлуулахыг зөвшөөрөх боловч үүнийг ашиглахын тулд энэ нь хэрхэн ажилладагийг ойлгох хэрэгтэй.
Загварын хуудсанд CSS хөвөх шинж чанар нь иймэрхүү харагдана:
.right {float: right; }
Энэ нь "баруун" ангитай бүх зүйл баруун тийш хөвөх ёстойг хөтөч дээр хэлдэг.
Үүнийг ингэж зааж өгөх болно:
class = "right" />
CSS-ийн х ° рвіідэд юу хірээлгэх вэ?
Та элемент бүр вэб хуудсан дээр хөвж чадахгүй. Та зөвхөн блок түвшний элементийг хааж болно. Эдгээр нь зураг (), догол мөр (), хуваагдмал (), жагсаалт () гэх мэт хуудсан дээрх зайг эзэлдэг элементүүд юм.
Текстэнд нөлөөлж буй бусад элементүүд, гэхдээ хуудсан дээр хайрцгийг бүтээхгүй байхыг inline элемент гэж нэрлэдэг бөгөөд хөвж болохгүй. Эдгээр нь span (), line breaks (), strong emphasis (), or italics () гэх мэт элементүүд юм.
Тэд хаана хөвдөг вэ?
Та элементийг баруун эсвэл зүүн талд хөвж болно. Хөвөгдсөн элементийг дагасан элемент нь нөгөө талд хөвж буй элементийн эргэн тойронд урсана.
Жишээлбэл, хэрэв би зүүн тийш зургаа хөвж байвал, текст эсвэл бусад элементүүд нь баруун тийшээ урсан өнгөрөх болно. Хэрвээ би баруун талын зураглалыг хаагаад байвал текст эсвэл бусад элементүүд нь зүүн тийшээ урсан өнгөрөх болно. Текстийг текстын блокт байрлуулсан ямар ч х ° в ° т ° р °° рт °° т ° р ° лд °° рчл ° хгій б ° г °° д браузер нь зураг харуулахаар тохируулагдсан байна
Энэ нь ихэвчлэн зургийн доод талд байрлах дараах текстийн эхний мөрөнд байдаг.
Тэд хэр хол зайтай байх вэ?
Хөвөгч элемент хөвөх боломжтой элемент нь зүүн буюу баруун талдаа аль болох хол зайтай байна. Энэ нь таны код хэрхэн бичигдсэнээс хамааран өөр өөр нөхцөл байдалд хүргэнэ.
Эдгээр жишээний хувьд би зүүн талд нь жижиг DIV элементийг хөвөх болно:
- Хэрвээ хөвөгч элемент нь урьдчилан тодорхойлогдоогүй өргөн хүрээтэй бол энэ нь хөвөөгүйгээс үл хамааран хэвтээ зай шаардагдана. Тэмдэглэл: Зарим хөтөч нь өргөн биш үед floated элементүүдийн элементүүдийг байрлуулах оролдлого хийдэг. Энэ нь ихэвчлэн бага хэмжээний зайтай хөвөөгүй элемент өгдөг. Тэгэхээр та хөвөгч элемент дээр өргөнийг тодорхойлж өгөх хэрэгтэй.
- Хэрэв контейнер элемент нь HTML элемент бол floated DIV нь хуудасны зүүн захад сууна.
- Хэрвээ контейнер элемент нь өөр өөр зүйлээр дүүргэгдсэн бол хөвөгч DIV нь савны зүүн захад сууна.
- Чи хөвөгч элементүүдийг үүрлэж болох бөгөөд энэ нь гайхалтай газар луу хөвөхөд нөлөөлдөг. Жишээ нь энэ хөвөх нь баруун хөвж DIV дотор зүүн хөвөгч DIV байна.
- Хэрвээ саванд байгаа өрөөнд байрласан бол элементүүд нь хажууд нь сууна. Жишээ нь, энэ сав нь гурван 100px өргөн DIV элемент нь 400px өргөн саванд хөвж байна.
Та зурагны зургийн загварыг үүсгэхийн тулд хөвөгч хэрэгсэл ашиглаж болно. Дүрс бүхий DIV дотроос зурсан зургийг (энэ нь бүгд ижил хэмжээтэй байвал хамгийн сайн ажиллана) ба саванд DIV элементүүдийг хөвөх болно.
Вэб хөтөчийн цонх хэр өргөн цар хүрээтэй байсныг харгалзан үзээрэй.
Усан онгоцыг унтрааж байна
Хэрвээ хөвөгч элементийг хэрхэн яаж авахаа мэдэхийг хүсвэл float-г хэрхэн яаж унтраахаа мэдэх нь чухал юм. Та CSS-ийн тодорхой үл хөдлөх хөрөнгийн хамт float-г унтраана. Та зүүн далай, баруун хөвж эсвэл хоёуланг нь цэвэрлэх боломжтой:
тодорхой: зүүн;
тодорхой: зөв;
тодорхой: хоёулаа;
Таны тодорхойлсон үл хөдлөх хөрөнгийг оруулсан элемент нь тухайн чигийг хөвөгч элементээс доош харуулна. Жишээ нь, энэ жишээнд текстийн эхний хоёр догол мөр нь цэвэрлэгдээгүй, гэхдээ гурав дахь нь.
Өөрийн баримтад өөр өөр элементүүдийн тодорхой утга бүхий тоглохын тулд өөр өөр байрлалд нөлөөлнө.
Хамгийн сонирхолтой хоосон зурагнуудын нэг бол текстийн догол мөрний баруун буюу зүүн баганын доорх цуврал зургууд юм. Хэдийгээр энэ текст нь өнгөрсөн зургийг гүйлгэж харахад хангалттай урт биш байсан ч гэсэн бүх зурган дээрх зургуудыг өмнөх зургаас нь харахын оронд багананд гарч ирэх эсэхийг баталгаажуулах боломжтой.
HTML (энэ догол мөрийг давт.):
Duis aute irure dolor sed нь тэсрэхээс сэргийлж чадна. Cupidatat нь ямар ч итгэлтэй биш, харин лаборатори болон бусад үйлдлийн системтэй байдаг.
CSS (зурагнууд зүүн тийшээ зурах):
img.float {float: left;
тодорхой: зүүн;
margin: 5px;
}
Баруун талд нь:
img.float {float: right;
тодорхой: зөв;
margin: 5px;
}
Хөлөг онгоцны загварыг ашиглах нь
Float property хэрхэн ажилладагийг мэдсэний дараа, үүнийг ашиглан вэб хуудсаа байрлуулахын тулд үүнийг ашиглаж болно. Эдгээр нь хөвөгч вэб хуудас үүсгэхийн тулд хийх алхмууд юм.
- Байршлыг төлөвлөх (цаасан дээр, эсвэл график хэрэгсэл эсвэл толгой дээр).
- Хуудсын хуваагдал хаана байхыг тодорхойлох.
- Янз бүрийн савны өргөн, тэдгээрийн элементийг тодорхойлно.
- Бүх зүйл хөвж байна. Бүр зүүн талын контейнер элемент нь зүүн тийш хөвж очдог бөгөөд энэ нь хөтчийн харагдах порттой холбоотой байхыг би мэднэ.
Хуудасны хэсгүүдийн өргөнүүд (хувь тэнцүү байх нь) гэдгийг мэдэж байх үедээ float өмчийг ашиглаж болно. Мөн сайхан зүйл бол, та Internet Explorer эсвэл Firefox-д зориулсан хайрцагны загварын талаар өөр санаа зовох хэрэггүй болно.