HTML-sahifalarni bloklash tartibiga misollar. CSS tartibini bloklash. Jadval tartibidan ajralib turadigan xususiyatlar

Veb-sayt tartibi ikkita asosiy usul yordamida amalga oshiriladi: jadvalli va blokli div maketlar. Blok tartibi yanada funktsional va CSS-dan foydalanish tufayli ko'proq xususiyatlarni taqdim etadi.

Blok qanday ishlaydi?

Ushbu turdagi tartibni amalga oshirish uchun ikkita fayl ishlatiladi ( index.html va style.css) kodni o'z ichiga olgan HTML va shunga mos ravishda veb-sayt uslubi.

Birinchi faylda ular to'g'ridan-to'g'ri yoziladi div-tartibning o'ziga xos asosi bo'lgan konteynerlar, ikkinchisi esa bizning uslubimizning xususiyatlari va pozitsiyasini tavsiflaydi. div- konteynerlar.

Haqiqiy vaqtda bajarilgan manipulyatsiyalar natijasini kuzatish uchun brauzeringizning manzil satriga quyidagilarni kiritishingiz kerak: http://URL/test.

Layout asoslari

Biz yaratmoqchi bo'lgan ikki ustunli tartibni quyidagicha diagrammalash mumkin:

Butun tartib uchun parametrlarni bir butun sifatida o'rnatish imkoniyatiga ega bo'lish uchun bizning tartibimizning barcha elementlari bitta umumiy elementga joylashtirilishi kerak. Umumiy konteynerning mazmuni bo'ladi div-alohida bloklarni tashkil etuvchi. Yordamida CSS biz quyidagi parametrlarni sozlashimiz mumkin: o'lcham, sahifadagi joy, uslublar va rang.

Veb-sayt tartibini bloklash

Har bir tartib elementi teg yordamida alohida "konteyner" ga joylashtirilishi kerak div. Fayl ichida CSS elementlarning tashqi ko'rinishi va joylashuvi parametrlarini (kenglik, balandlik, shrift, o'lcham va boshqalar) aniqlaydigan element xususiyatlarini qo'shish kerak.

Adashib qolmaslik uchun har bir konteynerga ushbu blokning nomini kiritishingiz kerak, u quyidagicha ko'rinadi:

"http://www.w3.org/TR/html4/loose.dtd">

Blok tartibi - 2-ni oling

Qopqoq

Chap ustun

Sahifa tarkibi

Podval

Manipulyatsiyalarni tugatgandan so'ng, faylni ochishingiz kerak Style.css va bu idishlar uchun uslublarni tasvirlab bering. Avvalo, asosiy teglar uchun uslublarni tavsiflash kerak Tana va HTML, oʻzaro brauzer mosligini taʼminlash uchun sahifa chetini nolga tenglashtiring:

tana, html (
chegara: 0px;
to'ldirish: 0px;
}

tana, html (
chegara: 0px;
to'ldirish: 0px;
}
#yasatish (
kengligi: 800px;
chegara: 0 avtomatik;
}
#sarlavha(
fon rangi:#C0C000;
}
#chap(
fon rangi:#00C0C0;
kengligi: 200px;
float:chap;
}
#tarkib(
fon rangi:#8080FF;
chap chekka: 202px;
}
#kolontitr(
fon rangi:#FFC0FF;
}

Asosan veb-saytni loyihalash bo'yicha batafsilroq master-klass olish uchun div, siz quyidagi videolarni tomosha qilishingiz mumkin:

https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI

Darsning maqsadi: Blokka asoslangan CSS tartibiga kirish. Blokka asoslangan veb-sayt tartibidan foydalanish bo'yicha ko'nikmalarga ega bo'lish

Qatlamlar yoki boshqacha aytganda, bloklar va div elementlari bilan ishlashda asosiy yuk CSS ga tushadi, chunki Xususiyatlari bo'lmasa, qatlamlar deyarli hech narsa emas.
Afsuski, bloklar bilan ishlashda brauzerlar o'rtasidagi muvofiqlik bilan bog'liq muammo hali ham mavjud. Bular. bir xil xususiyatlar turli brauzerlarda turli natijalar beradi. Bunday muammolarga qarshi kurashish uchun hack deb ataladigan narsalar mavjud. Hack- bu individual brauzerlar faqat ushbu brauzer tomonidan tushuniladigan va boshqalar tomonidan e'tiborga olinmaydigan kod bilan ta'minlanganda texnikalar to'plamidir.

Jadval tartibidan ajralib turadigan xususiyatlar

Aytaylik, siz sarlavha, altbilgi va ikkita ustunli sahifa shablonini yaratishingiz kerak.
Farqlar:

Ruxsat etilgan dizayn yoki
qattiq bloklar tartibi (ikkita ustun)

Ruxsat etilgan tartib foydalanuvchi monitorining o'lchamlari bilan belgilanadigan ma'lum bir kenglikdagi qatlamlardan foydalanishni o'z ichiga oladi.
Tarmoq foydalanuvchilari orasida eng mashhur monitor o'lchamlari 1024 × 768 bo'lganligi sababli, unga e'tibor qaratish tavsiya etiladi. Bu holda bloklarning umumiy kengligi 900-1000 pikselni tashkil qiladi (aylantirish chiziqlari va brauzer oynasi chegaralari uchun piksellarning kichik qismi talab qilinadi).
Tarkibga ega asosiy blok markazda joylashgan, keyin qirralarning atrofidagi "erkin" chekkalar hatto yuqori monitor o'lchamlari bilan ham yaxshi ko'rinadi.

1-rasm. Ruxsat etilgan dizayn namunasi

Umumiy kenglik dizayner tomonidan "ko'z bilan" deb ataladigan yoki har qanday qo'shimcha ma'lumot to'planganidan keyin tanlanishi mumkin.

Misol: yuqoridagi rasm asosida qat'iy veb-sayt dizayni yaratish

Ishlash:

Biz sahifaning barcha asosiy elementlarini quyidagi tarzda bloklarga ajratamiz:
- blok 1- birinchi qatlam (id="shapka"),
- blok 2 va 3 bitta blokda joylashgan (id = "konteyner"),
- blok 2— menyuli qatlam (id="menyu"),
- blok 3— tarkibga ega qatlam (id="content"),
- blok 4— id="pastki" bilan qatlam.

Keling, bloklarning joylashishini sxematik ravishda tasvirlaylik:

1. "Sarlavha" xususiyatlarini o'rnating (1-blok)

Biz qatlamlarning umumiy kengligini "ko'z bilan" tanlaymiz - 750 piksel.

o'ng chekka: avtomatik; chap chekka: avtomatik;

yoki chekinish yordamida balandlikni o'rnating

Masalan:

to'ldirish tepasi: 15px; padding-pastki: 15px;

to'ldirish ustki qismi: 15px; to'ldirish-pastki: 15px;

Sarlavha uchun barcha kodlar:

#shapka( text-align: chap; /* ichki tarkibni chapga tekislang */ kengligi: 750px; /* blok kengligi va umumiy kengligi */ fon: #900000; /* fon rangi */ balandligi: 50px; /* balandlik blok */ margin-o'ng: auto;

2. Konteyner xossalarini yarating

Idishning kengligini o'rnating: u 750px + 20px bo'lishi kerak (jami tartib kengligi + umumiy tartib kengligidagi to'ldirish). Bular. konteynerda to'ldirish yo'q, shuning uchun uning kengligini chapda 10 pikselga va o'ngda 10 pikselga oshiring
Agar tartib ekranning chap tomoniga mos kelishi kerak bo'lsa, brauzer buni avtomatik ravishda amalga oshiradi. Bizning holatlarimizda biz konteyner blokini markazga qo'yamiz

#konteyner (kengligi: 770px; /* Qatlam kengligi yoki (tartib kengligi+20) */ chekka-o'ng: avtomatik; /* Avtomatik chekinish o'ngga */ chap chekka: avtomatik; /* chapga avtomatik chekinish */ )

3. 2-blok uchun xossalarni yaratish - menyu

Kengligi 200 piksel (kengligi) bilan 2-qavat
Xuddi shu qatlam (menyu) uchun biz qo'shni blok atrofidagi oqimni o'rnatamiz, ya'ni. mulk suzishi: chap
Matn qatlam chetiga "yopishib qolmasligi" uchun biz ichki chekkalarni o'rnatamiz (to'ldirish xususiyati)
Matn va fon rangini o'rnating (fon, rang)

#menu (kengligi: 200px; /* Qatlam kengligi */ float: chap; rang: oq; /* Matn rangi */ fon: #008080; /* Fon rangi */ toʻldirish: 10px; /* Kontent atrofidagi ichki chekkalar */ )

4. 3-blok uchun xossalarni yarating - kontent

Qatlamning kengligini 770px - 200px = 570px tezlikda o'rnating, Lekin! To'ldirishni ikkala blokda ham 2 va 3 ga o'rnatganimiz sababli, biz yana 40 pikselni ayirishimiz kerak: menyu blokini to'ldirish uchun 20 va kontent blokini to'ldirish uchun 20. Qatlamning kengligi 770px - 200px - 40px = 530px ni olamiz
Biz o'rashni float uchun o'rnatdik: chap , Internet Explorer brauzeridagi xatolik bundan mustasno: agar siz xususiyatni o'rnatmasangiz, qatlamlar orasidagi bo'shliq bo'ladi. Bunga qo'shimcha ravishda, agar siz ushbu xususiyatni o'rnatmasangiz, blok menyu blokining orqasida paydo bo'ladi va faqat uning mazmuni (matn) menyu bloki atrofida o'ng tomonda oqadi.
Fon rangini (fon) va ichki chekkalarni (to'ldirish) o'rnating

#content ( /* O'ng ustun */ kengligi: 550px; /* Qatlam kengligi */ float: chap; /* Qo'shni qatlam bilan o'rash */ to'ldirish: 10px; /* Kontent atrofidagi ichki chekkalar */ fon: #e0e0e0; /* Fon rangi */)

5. 4-blok uchun xususiyatlarni yarating - "podval"

Qatlamning kengligini 750 pikselga o'rnating
Ushbu blok uchun siz o'rashni olib tashlashingiz kerak, ya'ni. aniq xususiyatni o'rnating
Ichki to'ldirish chegaralarini o'rnatish
Fon (fon) va matn (rang) uchun rangni o'rnating
Blokni markazga qo'ying (chekka-o'ng va chet-chap)

#bottom( width:750px; /* Layer width */ clear:left; /* blokirovkani qaytaring va qatlamni chap tomonga joylashtiring */ padding: 10px; /* kontent atrofidagi ichki chekkalar */ fon:#444; /* fon */ color :#fff; /* text color */ margin-right: auto /* auto-indent right */ margin-left: auto-chap */ )

Yakuniy kod: barchasi birgalikda

Natija:

2-rasm. Ikki ustunli qattiq bloklar tartibi

Uchta ustun uchun qattiq dizayn

Uch ustunli tartib uchun qat'iy dizayn bilan modulli panjara qurishning ikkita asosiy usuli mavjud:

Ustunlarni yonma-yon joylashtirish uchun xususiyatdan foydalanish.
Qatlamlarni joylashtirish uchun mo'ljallangan CSS xususiyatlari to'plamidan foydalanish.

Keling, birinchi ishni ko'rib chiqaylik.

Uch ustunli tartib uchun float xususiyatidan foydalanish

Yoniq guruch. 3— mulkdan uch ustunli tartib uchun foydalanish natijasi. Aslida, 6 ta qatlam ishlatiladi - ustun sarlavhalari uchun alohida va ustunlarning o'zlari uchun alohida.

Guruch. 3. Ruxsat etilgan uchta ustunli dizayn

Misol: ko'rsatilgan uch ustunli tartib bilan veb-sahifa yarating guruch. 3. Ruxsat etilgan bloklarni joylashtirish usullaridan foydalaning

Ishlash:

Sarlavhalar uchun uchta qatlamni (#header...) va ustunlar uchun uchta qatlamni (#col...) aniqlaymiz.
Ustunlar va ularning sarlavhalari ikki xil satrda joylashganligi sababli ularni konteynerlarga birlashtiramiz (class="container").
Biz bloklarning joylashishining sxematik tasvirini olamiz:

Biz quyidagi html tuzilishini olamiz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<tanasi > <div sinf = "konteyner" > <div id = "header1" > Evgeniy Yevtushenko</div> <div id = "header2" > Valeriy Bryusov</div> <div id = "header3" > Eduard Asadov</div> </div> <div sinf = "konteyner" > <div id = "col1" > Men eski do'stimni orzu qilaman<br/> kim dushmanga aylandi<br/> lekin men dushmanni orzu qilmayman,<br/> lekin o'sha do'st tomonidan.<br/> U men bilan emas<br/> lekin hozir u hamma joyda<br/> va bosh ketadi<br/> atrofdagi orzulardan.</div> <div id = "col2" > Buyuk yaqinda tutib bo'lmas,<br/> Faqat uzoqdan bu tantanali,<br/><br/> </div> <div id = "col3" ><br/><br/><br/> </div> </div> </tana>

Evgeniy Yevtushenko

Valeriy Bryusov

Eduard Asadov

Men eski do'stimni orzu qilaman
kim dushmanga aylandi
lekin men dushmanni orzu qilmayman,
lekin o'sha do'st tomonidan.
U men bilan emas
lekin hozir u hamma joyda
va bosh ketadi
atrofdagi orzulardan.

Buyuk yaqinda tutib bo'lmas,
Faqat uzoqdan bu tantanali,
Biz hammamiz buyuklarning oldidan o'tamiz
Va biz faqat tasodifiy havolani ko'ramiz.

Maksimal qiyinchiliklar bilan har qanday masalada
Muammoga hali ham bitta yondashuv mavjud:
Istak - bu ko'p imkoniyatlar,
Va istamaslik uchun juda ko'p sabablar bor.

2. Sarlavhalar (sarlavha... selektor) va ustunlar (col... tanlagich) uchun uslublar qo‘shish

Biz ustunlar va sarlavhalarning kengligini hamma uchun bir xil qilamiz. 3 ta ustun borligi va sahifaning o'rtacha kengligi taxminan 700-900 piksel bo'lishi kerakligi sababli, biz ustun kengligini 250 pikselga o'rnatamiz.

#header1, #header2, #header3, #col1, #col2, #col3 (kenglik: 250px; /* Ustun kengligi */ )

Ustunlar orasidagi bo'shliqni ta'minlash uchun ichki chekkalarni (matn mazmunidan chekinishlar) - to'ldirish va tashqi chekinishlarni qo'shamiz. Xususiyatlar bir vaqtning o'zida barcha ustunlar uchun o'rnatilganligi va butun tartibning o'zi markazlashtirilmaganligi sababli, lekin chapga tekislanganligi sababli, biz bir vaqtning o'zida barcha ustunlar uchun chekinishni faqat bir tomonga - chapga o'rnatamiz (chekka-chap ).

#header1, #header2, #header3, #col1, #col2, #col3 (kenglik: 250px; /* Ustun kengligi */ toʻldirish: 5px; /* Matn atrofidagi chekkalar */ margin-left: 5px; /* Chap chekka * / )

Shuningdek, biz sarlavhalar va ustunlar orasidagi vertikal bo'shliqni, shuningdek, sahifaning yuqori qismidagi (chekka-yuqori) sarlavhalar uchun chetni ta'minlaydigan yuqori qismga tashqi chet qo'shamiz.

#header1, #header2, #header3, #col1, #col2, #col3 ( ... float: chap; )

Bloklar uchun chegara qo'shing va shrift parametrlarini o'rnating (shrift-family, shrift-weight, shrift-o'lchami, rang).

#header1, #header2, #header3, #col1, #col2, #col3 (...chegara: 1px qattiq qora; /* Qatlam atrofidagi chegara */ font-family: Verdana, Arial, sans-serif; /* Yo'q serif yoki maydalangan shrift */ font-weight: bold: 80% /* Shrift o'lchami */ rang: oq /* Sarlavha matni rangi */ )

Biz kodni olamiz:

#header1, #header2, #header3, #col1, #col2, #col3 (kenglik: 250px; /* Ustun kengligi */ to'ldirish: 5px; /* Matn atrofidagi chetlar */ /* Yuqori to'ldirish */ float: chap; /* Ustunlarni gorizontal ravishda birlashtiring */ /* Qatlam atrofidagi chegara */ /* Seriyali bo'lmagan yoki sans serif shrifti */ shrift vazni: qalin; /* Qalin sarlavha matni */ shrift hajmi: 80%; /* Shrift hajmi */ rang: oq; /* Sarlavha matnining rangi */ }

#header1, #header2, #header3, #col1, #col2, #col3 (kenglik: 250px; /* Ustun kengligi */ toʻldirish: 5px; /* Matn atrofidagi chekkalar */ margin-left: 5px; /* Chap chekka * / margin-top: 2px; /* Yuqori chekka */ float: chap; /* Serif yoki sans serif shrifti emas */ font-weight: qalin;

Har bir selektor uchun fonni alohida o'rnatamiz.

#header1 (fon: #B38541;) #header2 (fon: #008159;) #header3 (fon: #006077;) #col1 (fon: #EBE0C5;) #col2 (fon: #BBE1C4;) #col3 (fon: #ADD0D9;

#header1 (fon: #B38541; ) #header2 (fon: #008159; ) #header3 (fon: #006077; ) #col1 (fon: #EBE0C5; ) #col2 (fon: #BBE1C4; ) #col3 (fon: #ADD0D9;

Keling, oraliq natijani ko'rib chiqaylik:

Guruch. 4. Oraliq natija

3. Konteynerlar uchun uslubni o'rnatish

Endi siz sarlavhalar va ustunlarni alohida konteyner qatlamlariga birlashtirishingiz va ularga mos uslubni berishingiz kerak - o'rashni bekor qilish (tozalash)

.konteyner ( tiniq : har ikkisi ; /* suzuvchi oʻrashni bekor qiladi */ }

Konteyner (aniq: ikkalasi; /* suzuvchi o'rashni bekor qiladi */ )

Endi faqat ustunlardagi matn shriftini uning hajmini, uslubini va rangini o'zgartirish orqali o'zgartirish qoladi.

#col1, #col2, #col3 ( font-family: "Times New Roman", Times, serif; /* Serif yoki serif shrifti */ font-size: 100%; /* Shrift hajmi */ font-weight: normal ; /* Oddiy uslub */ rang: qora; /* Matn rangi */ )

Yakuniy kod: barchasi birgalikda

Evgeniy Yevtushenko

Valeriy Bryusov

Eduard Asadov

Men eski do'stimni orzu qilaman
kim dushmanga aylandi
lekin men dushmanni orzu qilmayman,
lekin o'sha do'st tomonidan.
U men bilan emas
lekin hozir u hamma joyda
va bosh ketadi
atrofdagi orzulardan.

Buyuk yaqinda tutib bo'lmas,
Faqat uzoqdan bu tantanali,
Biz hammamiz buyuklarning oldidan o'tamiz
Va biz faqat tasodifiy havolani ko'ramiz.

Maksimal qiyinchiliklar bilan har qanday masalada
Muammoga hali ham bitta yondashuv mavjud:
Istak - bu ko'p imkoniyatlar,
Va istamaslik uchun juda ko'p sabablar bor.

Natija:

Guruch. 5. Natija

Uch ustunli tartib uchun qatlamni joylashtirishdan foydalanish

Misol tariqasida ajratuvchi chiziq bilan ajratilgan uchta ustundan tashkil topgan maketni olaylik (6-rasm).

Guruch. 6. Ajratuvchi bilan uch ustunli tartib uchun qatlamlarni joylashtirish

Misol: ichida ko'rsatilgan bo'linuvchi chiziqli uch ustunli tartibli veb-sahifa yarating guruch. 6. Qatlamni joylashtirish bilan belgilangan tartib texnikasidan foydalaning

Ishlash:

1. HTML kod strukturasini yaratish

Ushbu tartib uchun har bir ustun uchun uchta div qatlamini yaratish kifoya.

Shunday qilib, struktura oddiy bo'ladi:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<tanasi> <div id= "col1"> Ivan Bunin </ br></ br> </ br> </ br> </ br> </ div> <div id= "col2"> </ br> Deraza oltin rangda porlaydi. </ br> </ br> Hamma narsa oppoq qor bilan qoplangan. </ div> <div id= "col3"> Va barcha ertalab yorqin va toza </ br> </ br> </ br> Mening derazamda xrizantema. </ br></ br> 1903 </ div> </ tanasi>

Ivan Bunin

Ayozli kumush derazada,
Kechasi xrizantema gulladi.
Yuqori derazalarda - osmon yorqin ko'k
Va qor changiga yopishib qolish.

Quyosh chiqadi, sovuqdan quvnoq,
Deraza oltin rangda porlaydi.
Tong tinch, quvnoq va yosh.
Hamma narsa oppoq qor bilan qoplangan.

Va barcha ertalab yorqin va toza
Men yuqorida ranglarni ko'raman,
Va tushgacha ular kumush bo'ladi
Mening derazamda xrizantema.

1903

2. Ustun uslublarini qo'shish

Ustunlarning bir xil kengligi (kengligi) va ichki chekkalari vertikal va gorizontal (to'ldirish) o'rnatamiz.

#col1, #col2, #col3 (kenglik: 250px; /* Ustun kengligi */ toʻldirish: 0 6px; )

Qatlamlarning bloklanishini olib tashlash uchun, ya'ni. ularni gorizontal ravishda yonma-yon joylashtirish uchun CSS float xususiyatini o'rnatishingiz kerak.

#col1, #kol2, #kol3 { kengligi: 250px; /* Ustun kengligi */ to'ldirish: 0 6px; /* Vertikal va gorizontal chetlari */ suzmoq: chap; /* Qatlamlarni oʻrash */ }

#col1, #col2, #col3 (kenglik: 250px; /* Ustun kengligi */ toʻldirish: 0 6px; /* Vertikal va gorizontal chekkalar */ float: chap; /* Qatlamni oʻrash */ )

Ajratuvchi chegara faqat qatlamlarning ichki tomonlarida bo'lishi kerakligi sababli, ramka faqat bir tomondan (chegara) ikkita qatlamga qo'shilishi kerak.

#col1, #kol2 { chegara - o'ng: 1px qattiq #000 ; /* Vertikal va gorizontal chetlari */ suzmoq: chap; /* Qatlamlarni oʻrash */ } #col1, #kol2 { chegara - o'ng: 1px qattiq #000 ; /* Matnning o'ng tomonidagi qator parametrlari */ }

#col1, #col2, #col3 (kenglik: 250px; /* Ustun kengligi */ toʻldirish: 0 6px; /* Vertikal va gorizontal chekkalar */ float: chap; /* Qatlamni oʻrash */ ) #col1, #col2 ( chegara -o'ng: 1px qattiq #000; /* Matnning o'ng tomonidagi qator variantlari */ )

</ uslub> </ bosh> <tanasi> <div id= "col1"> Ivan Bunin </ br></ br> Ayozli kumush derazada, </ br> Kechasi xrizantema gulladi. </ br> Yuqori derazalarda - osmon yorqin ko'k </ br> Va qor changiga yopishib qolish. </ div> <div id= "col2"> Quyosh chiqadi, sovuqdan quvnoq, </ br> Deraza oltin rangda porlaydi. </ br> Tong tinch, quvnoq va yosh. </ br> Hamma narsa oppoq qor bilan qoplangan. </ div> <div id= "col3"> Va barcha ertalab yorqin va toza </ br> Men yuqorida ranglarni ko'raman, </ br> Va tushgacha ular kumush bo'ladi </ br> Mening derazamda xrizantema. </ br></ br> 1903 </ div> </ tanasi>

Ivan Bunin

Ayozli kumush derazada,
Kechasi xrizantema gulladi.
Yuqori derazalarda - osmon yorqin ko'k
Va qor changiga yopishib qolish.

Quyosh chiqadi, sovuqdan quvnoq,
Deraza oltin rangda porlaydi.
Tong tinch, quvnoq va yosh.
Hamma narsa oppoq qor bilan qoplangan.

Va barcha ertalab yorqin va toza
Men yuqorida ranglarni ko'raman,
Va tushgacha ular kumush bo'ladi
Mening derazamda xrizantema.

1903

Uch ustunli dizayn tayyor!

Salom, do'stlar!

Biz tartibni o'rganishda davom etamiz va bugun biz eng qiziqarli qismga o'tmoqdamiz.

Albatta, siz allaqachon kontseptsiyani eshitgansiz "blok tartibi". Ammo nodon odam uchun bu tushuncha hech narsani anglatmaydi. Shuning uchun: kim biladi - yaxshi! Bilmaganlar uchun diqqat bilan o'qing.

Blok tartibi - universal konteyner teglari yordamida veb-sahifa kodining joylashuvi

Men bu haqda "" maqolasida bir oz yozganman. Bu erda biz batafsilroq va aniqroq gaplashamiz.

1. Nima uchun blokirovka qilish kerak?

Bir paytlar, qadim zamonlarda, bizning uzoq ajdodlarimiz jadvallar yordamida veb-saytlarni qo'yishgan. Barcha sahifa elementlari alohida kataklarda joylashgan, hujayralar boshqa, kattaroq katakchalarda to'plangan va ular, o'z navbatida, eng muhim katakchada - sayt sahifasining o'zida joylashgan.

Bu juda noqulay edi, chunki kod haddan tashqari yuklangan va tushunish qiyin bo'lib chiqdi, chunki har bir hujayrani tavsiflash uchun bir nechta teglardan foydalanish kerak edi.

Hozirgi vaqtda deyarli hech kim jadval tartibini ishlatmaydi, garchi ba'zi sahifa elementlari jadvallar yordamida yaratilgan.

Keling, eski narsalarni ko'tarmaylik. Keling, bloklash tartibiga o'tamiz.

Blok tartibi alohida bloklar (konteynerlar) yordamida sahifa tuzilishini yaratishga imkon beradi.

). Ular saytning skeletini tashkil etuvchi g'ishtlarga o'xshaydi.

Bloklarni joylashtirishning jadval sxemasidan afzalliklari:

Har bir blok bitta teg bilan tavsiflanadi;
Konteynerlarning uya tuzilishi qulay tarzda kuzatiladi;
Konteynerlar
siz nafaqat ota-onalar ichida, balki boshqa yo'llar bilan ham joylashtirishingiz mumkin (masalan, mutlaq joylashishni aniqlash) - bu haqda keyinroq gaplashamiz;
Veb-sayt sahifalarini yuklash tezligi sezilarli darajada oshadi. Ba'zi hisob-kitoblarga ko'ra, tezlik jadvalga nisbatan uch-to'rt barobar ortadi;
Blok tartibi jadval tartibiga nisbatan ancha kichik kod miqdoriga ega. Bu shuni anglatadiki, serverdagi yuk ham kamayadi;
bloklangan veb-saytlar barcha brauzerlarda, har qanday ekran o'lchamlarida juda to'g'ri ko'rsatiladi;
Muammolarsiz har qanday CMSga osongina integratsiya qilinadi.

2. Bloklarni joylashtirishning asosi konteyner hisoblanadi

Blok tartibida barcha sahifa elementlari bloklardan iborat (mantiqiy, shunday emasmi?).

Bloklash

to'rtburchaklar shaklidagi maydondir. Odatiy bo'lib, blok asosiy elementning butun kengligini egallaydi, blokning balandligi uning mazmuniga bog'liq. Bloklar vertikal ravishda joylashtirilgan, ya'ni sahifa kodida ketma-ket bir nechta bloklar yozilgan bo'lsa, ular brauzerda birin-ketin pastda ko'rsatiladi.

Agar biz gorizontal ravishda bir nechta bloklarni joylashtirishimiz kerak bo'lsa, ularning xususiyatlarida biz parametrni o'rnatamiz " atrofida oqim” (suzuvchi). Ammo bu haqda keyinroq.

Har qanday blokning asosiy xususiyatlari quyidagilardan iborat: to'ldirish, chegara va chekka.

Webmaster mahoratini egallashda muvaffaqiyatlar tilayman!

Div bloklari bilan tartib uzoq vaqtdan beri standart bo'lib kelgan va jadval tartibiga nisbatan bir qator afzalliklarga ega. Biroq, aslida, Ajam ishlab chiquvchilar xuddi shu bloklarning xatti-harakatlari haqida chalkashib ketishadi.

Bloklarni joylashtirishning asosiy nuqtalarini ko'rib chiqaylik. Endi biz html5 standartini hisobga olmaymiz, shunchaki div bloklari bilan tartib asoslarini ko'rib chiqamiz, bu tartib yoki ba'zi individual sahifa komponentlarini yaratishda ishlatiladi.

Blok elementi nima deb hisoblanadi?

Sahifadagi bunday elementning maydoni sukut bo'yicha to'rtburchaklar bilan ifodalanadi, u butun mavjud kenglikni egallaydi va yangi satrdan boshlanadi.
Bloklarni joylashtirishda ishlatiladigan eng keng tarqalgan element universal elementdir

Shunday qilib, oddiydan murakkabga. Keling, divlar sukut bo'yicha qanday ko'rinishini ko'rib chiqaylik, ularning holatiga uslublar ta'sir qilmaydi. Aniqlik uchun biz uslublar atributi orqali inline elementlarga uslublar qo'shamiz.

Blok 1

Blok 2

Blok 3

Keling, har bir blok uchun kenglik qiymatini qo'shamiz:

Blok 1

Blok 2

Blok 3

Ko'rinib turibdiki, har bir blok, spetsifikatsiyaga muvofiq, yangi chiziqda joylashgan. Bu ularning odatiy xatti-harakati.

Endi savol tug'iladi, qanday qilib joylashtirish kerak div bloklari bitta satrda, birin-ketin?

Shu maqsadda blokning qaysi tomoniga moslashishga majbur bo'lishini aniqlaydigan xususiyat mavjud. Shu bilan birga, boshqa chetidan u boshqa elementlar atrofida oqishi mumkin.

Float xususiyati quyidagi ma'nolarga ega:

chap - blok chapga tekislanadi, o'ngga oqadi
o'ng - blok chapga oqib o'ng chetiga hizalanadi
none - hech qanday o'rash belgilanmagan, blok avvalgi misollarda bo'lgani kabi sukut bo'yicha o'zini tutadi.

Bloklar chapga tekislanishi uchun bloklarimizga float:left qo'shamiz:

Blok 1

Blok 2

Blok 3

Natijada bloklar bir chiziqqa tizilgan. Mayli, deylik, biz pastki qismga boshqa div qo‘shmoqchi edik va buni float xususiyatini ko‘rsatmasdan bajaramiz:

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Birlik 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and doore magna aliqua.

Blok 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Blok 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Birlik 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and doore magna aliqua.

Nima uchun bu sodir bo'ldi? Muxtasar qilib aytganda, bu suzuvchi elementlar hujjat oqimidan tushib qolganligi sababli sodir bo'ladi. Biroq, bu alohida maqola uchun mavzu. Bu erda biz suzuvchi elementlarning harakatini boshqaradigan yangi xususiyat bilan tanishamiz:

chap - chap tomonga o'rashni o'chirib qo'yadi, barcha elementlar yangi satrda ko'rsatiladi (element ostida)
rightth - elementni o'ng tomonga o'rashni oldini oladi
ikkalasi ham - har ikki tomondan element atrofida oqishni taqiqlaydi, elementni yangi satrda aniq ko'rsatish kerak bo'lganda yoki boshqa elementlarni qaysi tomondan o'rash mumkinligi noma'lum bo'lganda foydalanish tavsiya etiladi.

4-blokga clear:left xossasini qo‘shamiz, bu elementning chap tomondagi boshqa suzuvchi elementlar atrofida oqib chiqishini oldini oladi.