- Savolingiz bormi?
- +998 97 534 03 20
- turayev.ruziboy@bk.ru
BLOK tushunchasi haqida
Web sohasida, blok tushunchasi juda kerakli termin hisoblanadi, saytning barcha brauzerlarda bir xilda ochilishi, rasm va yozuvlarni o‘ylaganingizdek namoyon bo‘lishi aynan blok holatiga bog‘liq. Bu maqoladan boshlab, blokga tegishli stillar xususiyatini ko‘rib chiqamiz. Dastlab, umumiy blok nimaligini bilib olamiz.
Blok bu - ma’lum bir chegaraga ega bo‘lgan va alohida qism sifatida qaraladigan ma’lum bir axborotni o‘zida saqlaydigan joydir.
HTML gippermatn tilini oladigan bo‘lsak, u yerda ham blok va qator elementlari tushunchasi bor. Blokli elementlar, alohida strukturaga ega bo‘lib, to‘rtburchak chegaraga bilan o‘ralgan bo‘ladi. Ikkita blokli elementni bir qatorga joylashtirib bo‘lmaydi. HTML gippermatn tilida blokli elementga misol qilib, " H1...H6", "P" va "DIV" teglarini olish mumkin. Har safar bu teglarni ishlatganda, brauzer har biri uchun alohida qator ajratib beradi.
Qatorli elementlarga esa, "strong", "em", "i" kabi teglarni misol qilish mumkin. Bu teglardan bir qatorda bemalol foydalansa bo‘ladi.
CSS stillar texnologiyasida ham blok tushunchasi mavjud va u ham o‘z strukturasiga va to‘rtburchak chegarasiga ega. Strukturali blok ichida qatorli blok ham bo‘lishi mumkin(blok ichidagi yozuvlar), qatorli blok yozuv ko‘rinishida ham bo‘lishi mumkin, to‘g‘riroq etadigan bo‘lsak, strukturali blok ichida ob’yektli blok bo‘lishi mumkin. YUqoridagi nazariy ma'lumotlarni quyida bitta rasm orqali tushunish mumkin.
Bloklaming o‘z xususiyatlari bor, misol uchun, blok uzunligi(width), blok balandligi (height), chegarasi (border),...
Har bir blok qandaydir tashkil etuvchilardan iborat bo‘lishi shart, ya’ni yozuv, rasm yoki boshqa axborot. Blokning bu qismi kontent deb yuritiladi. Misol uchun "P" tegi uchun kontent yozuv hisoblanadi.
Blok atrofida qandaydir boshqa blok yoki ob’yektlar bo‘lishi mumkin, blokdan ulargacha bo‘lgan masofaga "margin" kalit so‘zi javob beradi.
Blok ajralib turishi uchun, uning chegarasi bo‘lishi lozim, bu chegaraga " border" javob beradi.
YUqoridagilardan tashqari blokning ichki bo‘sh oralig‘i bo‘lishi mumkin, ya’ni blokdan blok chegarasigacha bo‘lgan masofa, bu masofaga "padding" kalit so‘zi javob beradi. Keyingi maqolalarda blokning shu xususiyatlarini birma-bir ko‘rib chiqamiz, bu maqolani blok tushunchasiga ta'rif sifatida qabul qilasiz.
Blok chegaralari: BORDER, OUTLINE
Bloklar haqida oldingi maqolada gaplashib o‘tdik, endi shu blok xususiyatlarini ko‘rib chiqamiz. Bu maqolamiz blok chegaralariga bag‘ishlanadi, blok bo‘lgandan keyin uning albatta chegarasi ham bo‘lishi kerakku.
Chegaralar blokni boshqa ob’yektlardan ajratib turadi va veb sahifada chiroyli namoyon bo‘lishini ta’minlaydi. Demak, maqolada blok chegaralariga oid quyidagi CSS xususiyatlarini ko‘rib chiqamiz.
- border-width;
- border-color;
- border-style;
- border;
- outline;
- outline-color;
- outline-style;
- outline-width;
Ko‘rib turganingizdek, unchalik ko‘p emas, keling hammasiga batafsil to‘xtaylik.
Border-width - bu xususiyat ramka(chegara) qalinligini o‘matish uchun ishlatiladi. Odatda qiymat pikselda beriladi, undan tashqari kalit so‘zlar orqali ham berish mumkin, thin(2px), medium(4px) yoki thick(6px). Bu o‘lchamlar qanchaligini quyidagi rasmdan ko‘rish mumkin:
1 2 3 4 5 6 7 8 9 10
nMKce/ifla
Border-color - nomida aytib turibdiki, ramkaga rang beradi, rang nomi yoki rangning 16 lik sanoq tizimidagi kodi orqali berish mumkin.
Border-style - bu xususiyat ramka qanday stilda bo‘lishini belgilaydi. Quyida ramka stillarini ko‘rishingiz mumkin.
Asosiy ramka turlarini ko‘rib chiqdik, bitta narsa, "Double" stil ramkasi uchun ramka qalinligi minimal 3px bo‘lishi lozim, aks holda kutgan natijangizni ololmasligingiz mumkin.
YUqoridagi 3 ta stil xususiyatiga misol ko‘ramiz.
< html>
< head>
< title>Border< /title>
< style>
h1 {
border-width: 5px; border-style: inset; border-color: green;
}
h2 {
border-width: 18px; border-style: double; border-color: red;
}
p {
border-width: 3px; border-style: solid; border-color: blue;
}
< /style>
< /head>
< body>
< p>Manchester United Football Club< /p>
< h1>Manchester United Football Club< /h1>
< h2>Manchester United Football Club< /h2>
< /body>
< /html>
Border - yuqoridagi ramka xususiyatlarini bitta shu kalit so‘z orqali qisqa yozish mumkin. Bu asosan professionals uchundir, boshlovchilarga har birini alohida yozishni maslahat beraman.
YUqoridagi misolni, bitta "border" orqali yozamiz.
h1 {border: 5px inset green;
}
h2 {border 18px double red;
}
p {border 3px solid blue;
}
Barcha ramkaga oid xususiyatlarga quyidagi kalit so‘zlami qo‘shish mumkin:
top - yuqori qism(border-top);
right - o‘ng tomon(border-right);
bottom - quyi qism(border-bottom);
left - chap tomon(border-left).
Bu kalit so‘zlar orqali ramkaning istalgan tomonini o‘zgartirish mumkin, misol ko‘ramiz.
< html>
< head>
< title>Border< /title>
< style>
p {
border-top-width: 20px; border-top-style:solid ; border-top-color: red; border-right-width: 10px; border-right-style:dashed ; border-right-color: gold; border-bottom-width: 15px; border-bottom-style:dashed; border-bottom-color: green; border-left-width: 30px; border-left-style:solid ; border-left-color: blue;
}
< /style>
< /head>
< body>
< p>Manchester United Football Club< /p>
< /body>
< /html>
Qisqartirilgan holda,
p {
border-top: 20px solid red;
border-right: 10px dashed gold;
border-bottom: 15px dashed green;
border-left: 30px solid blue;
}
YUqoridagi ramka berishlardan tashqari, yana tashqi ramka degan tushuncha majud, ya’ni blokdan tashqari tomonda ramka beradi, buning uchun CSSNing " outline" xususiyatidan foydalaniladi.
Outline-color - blokning tashqi tomoni(tashqi ramka)ga rang berish.
Outline-style - tashqi ramkaga stil berish. Stil turlari "border-style" stil turlari bilan bir xil.
Outline-width - tashqi ramka qalinligini o‘matish. "border-width" kabi qiymatlarga ega(thin, medium, thick yoki piksellarda).
Shu uchchala stil xususiyatlariga misol ko‘ramiz.
< html>
< head>
< title>Outline< /title>
< style>
.out {
padding:20px;
color:red;
margin:10px;
outline-color:red;
outline-width:4px;
outline-style:solid;
}
< /style>
< /head>
< body>
< img src="bum.jpg"class="out"/>
< /body>
< /html>
Natija, rasm atrofida 4 piksel qalinlikdagi, qizil rangli oddiy ramkadan iborat.
YUqoridagi kodni "outline" orqali bir qatorda yozish mumkin:
.out{outline:4px solid red;} natija o‘sha holda qoladi.
Blokning oraliq masofalari: MARGIN, PADDING
Bu maqolamiz blokning ichki va tashqi oraliq masofalariga bag‘ishlanadi, juda kerakli va muhim dars deb hisoblasak bo‘ladi. Blokning o‘z ramkasi(chegarasi)gacha bo‘lgan oraliq masofa va ramkasidan atrofidagi biror ob’yektgacha bo‘lgan masofa kabi xususiyati bor. Bu ikki oraliq masofani tushinish uchun quyidagi rasmni keltirib o‘taman. Bu yerda blok sifatida biror blokli teg(p, div,...) bo‘lishi mumkin.
Rasmdan ko‘rinib turibdiki, blokdan o‘z ramkasigacha bo‘lgan masofa " padding" deb, blok ramkasidan biror ob’yekt(element) yoki element mavjud bo‘lmasa hujjat oxirigacha bo‘lgan masofa "margin" deb yuritilar ekan. Bu ikki xususiyatni kod ichida ishlatish, blokni veb sahifada aniq va tushunarli bo‘lishini ta’minlaydi. Misol ko‘ramiz va hammasi tushunarli bo‘ladi
< html>
< head>
< title>Margin Padding< /title>
< style>
.p1 {
background-color : gray; border:1px solid red; margin:70px; color:white;
}
.p2 {
background-color : #FFE446; border:1px solid red; padding:70px;
}
.p3 {
background-color : #FFE446; border:1px solid red; margin:50px; padding:20px;
}
< /style>
< /head>
< body>
< p class="p1">Manchester United Football Club
< /p>
< p>Old trafford stadion< /p>
< p class="p3">Rayan Giggs Assistent< /p>
< /body>
< /html>
Oldingi maqolada ishlatilgan quyidagi kalit so‘zlar ham bu xususiyat uchun ishlaydi:
-left - chap tomondan joy qoldirish(margin-left, padding-left)
-right - o‘ng tomondan joy qoldirish(margin-right, padding-right)
-top - yuqori qismdan joy qoldirish(margin-top, padding-top)
-bottom - pastki qismdan joy qoldirish(margin-bottom, padding-bottom).
Endi, kalit so‘zlar orqali bo‘sh joy qoldirishga oid misolni ko‘ramiz.
< html>
< head>
< title>Margin Padding< /title>
< style>
.d1 {
background-color : gray;
border:1px solid red;
margin-top:70px;
margin-bottom:10px;
color:white;
}
.d2 {
background-color : #FFE446;
border:1px solid red;
padding-left:70px;
padding-right:10px;
}
< /style>
< /head>
< body>
< p>Eric Contana< /p>
< p>Roy Kean< /p>
< /body>
< /html>
YUqoridagi CSS kodni qisqartirib quyidagicha yozish mumkin:
.d1{margin: 7 0px 0 10px 0;}
.d1{padding: 0 10px 0 70px;}
Ko‘rinib turibdiki yozilish ketma-ketligi soat yo‘nalishi bo‘yichadir, ya’ni: yuqori qism(top), o‘ng tomon(right), pastki qism(bottom), chap tomon(left).
Qaysi paytda qaysi birini(margin, padding) ishlatishni, o‘zingiz hal qilishingiz kerak, faqat shuni aytishim mumkinki, "padding" blok ichida bo‘ladi, "margin" blok tashqarisida.
Blok o’lchamlari: WIDTH, HEIGHT
Blokga oid xususiyatlarni ko‘rib chiqishni davom ettiramiz, bu safar yana bir asosiy xususiyatlardan biri, blokning balandligi(height) va uning uzunligi(width) haqida gaplashamiz. Agar sezgan bo‘lsangiz, blokning uzunligi va balandligi avtomat aniqlashtiriladi, yozuv qancha katta bo‘lsa(yoki blokni boshqa tashkil etuvchi), shuncha blokning uzunlik va balandlik katta bo‘ladi.
Shunday bo‘lsa ham, biz CSS orqali blokning uzunlik va balandligini o‘zimiz o‘rnatishimiz mumkin. Demak bu ish uchun biz quyidagi ikkita xususiyatdan foydalanamiz:
-height - blokning balandligi;
-width - blokning uzunligi.
Odatda, CSS da blok siftida "div" tegi ishlatiladi, lekin paragraf(p tegi), ro‘yxatlarni ham blok sifatida ishlatish mumkin.
Nazariy ma’lumotlar bilan tanishib chiqdik, endi misol ko‘ramiz.
< html>
< head>
< title>WH< /title>
< style>
.mu1 {
width: 100px;
border: 1px solid red; background: #FFE446;
}
.mu2 {
height: 70px; border: 1px solid red; background: #FFE446;
}
.mu3 {
width: 75px; height: 120px; border: 1px solid red; background: #FFE446;
}
.mu4 {
width: 30px; height: 30px; border: 1px solid red; background: #FFE446;
}
< /style>
< /head>
< body>
< p class="mu1">England champion football club - Manchester United football club!< /p>
< p class="mu2">Eric Contana< /p>
< p class="mu3">Wayne Rooney< /p>
< p class="mu4">Phile John< /p>
< /body>
< /html>
Har xil o‘lchamdagi bloklar hosil qildik, agar biz yozgan yozuv blok ichiga sig‘masa, ko‘rib turganingizdek blok tashqarisida ham yozuvning davomi yozilaverar ekan. Shuning uchun bloklar hosil qilishda hamma narsalarni hisobga oling.
Blok uzunligi va balandligini berish bilan siz, faqat yozuv uchun ajratilgan joyni aniqlashtirgan bo‘lasiz, oraliq masofalarni belgilovchi CSS xususiyatlar(margin,padding) bu o‘lchamlarga kirmaydi. Siz kiritgan o‘lchamdan keyin, o‘rnatgan oraliq masofa qiymatichalik joy tashlab ketiladi, rasmda ko‘radigan bo‘lsak,
YUqoridagi o‘lcham beruvchi CSS xususiyatlardan tashqari yana quyidagi o‘lchov beruvchi xususiyatlar mavjud:
- max-width - blokning maksimal uzunligi;
- min-width - blokning minimal uzunligi;
- max-height - blokning maksimal balandligi;
- min-height - blokning minimal balandligi.
Bu xususiyatlar blokning maksimal va minimal o‘lchovlarini aniqlashtirib beradi, biror kod orqali bu maksimal va minimal o‘lchovlardan chetga chiqib bo‘lmaydi. Beriladigan o‘lchovlar faqat shu oraliqga tushishi lozim. Misol,
.size {
height:80px;
width:600px;
max-width: 300px;
border:1px solid red;
background-color:orange;
}
Bu holda blok uzunligi 300 piksel bo‘ladi, biz o‘rnatgan 600 piksel ishlamaydi. Menimcha hammasi tushunarli, tushunarsiz narsalar pochta yoki kommentariyada ko‘rib chiqiladi.
Bloklarni saxifa buylab joylashtirish: POSITION
CSS bizga istalagan ob’ektni, brauzerning istalgan joyida chi karish imkonini beradi. Buning uchun shu blok koordinatalrini ko’rsatishimiz kerak xolos. Blok deganda "div" tegidan tashkari ruyxatlar, paragraflar, zagolovkalar, rasmlar, umumiy kilib aytganda, blokli model ko’rinishidagi barcha teglar tushuniladi. Koordinatalarni o’rnatib, bloklarni joylashtirish pozitsiyalash (joylashinish) deyiladi. Makola aynan bloklarni joylashuviga bagishlanadi. Joylashtirish 2 xil kurinshda bo’ladi va bu xil kurinishlar uchun kuyidagi CSS xususiyatlarini ishlatamiz.
1. Absolyut joylashtirish(position:absolute;);
2. Biror narsaga nisbatan joylashtirish(position:relative;).
Absolyut joylashtirish. Joylashtirishda, odatda ushbu tur joylashtirish ishlatiladi. CSSda joylashtiruv vazifasini "Position" kalit so’zi amalga oshirib beradi, ushbu joylashtiruvni absolyut kilish uchun esa "absolute" kiymati beriladi. Undan so’ng kuyidagi kalit so’zlar orkali koordinatalar beriladi:
- top;
- left;
- right;
- bottom.
Bu kalit so'zlar, brauzerda qanday namoyon bo'lishini quyidagi rasmda ko'rish mumkin.
Absolyut joylashtiruvning yaxshi tomoni shundaki, blok aynan siz bergan koordinatalarda joylashadi, o'zi oldindan aniqlashtirib qo'yilgan joy(html kodda berilgan joy) esa avtomat o'chadi. Uning o'rnida boshka narsalar joylashishi mumkin. Misol kuramiz, chunki so'z bilan tushuntirish biroz qiyinroq- Dastlab, oddiy rasm qo'yish misolini ko'ramiz.
< html>
< head>
< title>Position< /title>
< /head>
< body>
< img src="bum.jpg"/>
< h1>Bumer I filmidagi aktyorlar va mashina!< /h1>
< /body>
< /html>
Endi shu misoldagi rasmni koordinata bo'yicha joylashtiramiz.
< html>
< head>
< title>Position< /title>
< style>
.smile{
border: 1px solid red; position:absolute; top:100px; right:100px;
}
< /style>
< /head>
< body>
< img class=”smile "src="bum.jpg"/>
< h1>Bumer I filmidagi aktyorlar va mashina!< /h1>
< /body>
< /html>
E’tibor bergan bo'lsangiz, rasm o'rnatilgan koordinataga ko'chdi va rasm o'rnida biz yozgan yozuv paydo buldi. Rasm koordinatasi, tepadan 100 piksel va ung tomondan 100 piksel koordinatada joylashdi.
Odatda koordinata faqat ikkita qiymatda beriladi:
.mu{
position:absolute;
bottom:300px;
left:100px;
}
yoki
.mu{
position:absolute;
top:100px;
right:100px;
}
Blok brauzerning biror burchagiga nisbatan olinadi, shu sababli ikkita koordinata qiymati beriladi.
Agar, blok brauzerga yopishib turishini xohlasangiz, ya’ni brauzer kattaligi o'zgarganda aylantirgich(prokrutka) chissa xam, blok aylanmasdan sotib turish kerak bulsa, "absolute" qiymat o'rniga "fixed" qiymat berish lozim.
.mu{
position:fixed;
top:100px;
right:100px;
}
Bu ikki siymatni misollar orsali, ishlatib kurin.
2. Biror narsaga nisbatan joylashtirish. Bu tur joylashtirishda, blokning dastlabki xolatidan boshlab, koordinata xisoblanadi(absolyut joylashtirish kabi brauzerning yuqori qismidan emas). Undan tashqari blokning dastlabki xolati o'zgarishsiz saqlab qolinadi, odatda bush joy bo'lib ko'rinib turadi. Bu joylashtirishni amalga oshirish uchun, "position" xususiyatiga "relative" qiymati beriladi. Yuqoridagi misolni "relative" orqali yozamiz.
< html>
< head>
< title>Position< /title>
< style>
.smile{
border: 1px solid red;
position:relative;
top:100px;
right:10px;
}
< /style>
< /head>
< body>
< img class=”smile "src="bum.jpg"/>
< h1>Bumer I filmidagi aktyorlar!< /h1>
< /body>
< /html>
Misoldan kurinib turibdiki, rasm tegi birinchi yozilgan, demak rasm brauzerning chap yuqori qismida joylashishi kerak, uning tegida esa yozuv. Biz koordinatani berganimizdan so'ng, rasm boshlangich xolatidan berilgan kiymat bo'yicha surildi va dastlabki xplati bo'sh bulib koldi. Yozuv xam uning joyiga o'tmadi, absolyut joylashtirish bo'lganida, yozuv rasmning oldingi xolatiga o'tar edi.
Bloklarni joylashtirish: FLOAT, CLEAR
Brauzerda bloklarni to'g'ri joylashtirish, juda muxim sanaladi, chunki qulay joylashtirilgan bloklar foydalanuvchilarga saytdan foydalanishga qulayliklar tug'diradi. Nimaga faqat bloklar xaqida gaplashayapmiz? chunki xozirgi kunda ko'p saytlarning asosi aynan bloklardir, ya’ni saytlarning strukturalari bloklar orqali yaratilmoqda.Bunday strukturali saytlarga raqobat qilib, jadval asosida yaratilgan saytlarni keltirish mumkin. Ularning qaysi biri yaxshiligi xususida ko'p tortishilar bo'lgan va bo'lmokda xam. Bu masalani boshqa maqolalarda ko'rib o'tamiz.
Demak, bloklarni veb saxifa bo'ylab joylashtirish(bunday bloklarni yana suzuvchi bloklar(plavayushie bloki) deb xam atashadi), CSSning "float" xususiyati asosida amalga oshiriladi. Bu xususiyat uch xil qiymatni qabul qilishi mumkin:
- left - strukturali blok chap tomonga suriladi.
- right - strukturali blok ung tomonga suriladi.
- none - blok surilmaydi.
Keling dastlab surilishlarsiz oddiy misol ko'ramiz, ya’ni "float" ishlatmaymiz.
< html>
< head>
< title>Float< /title>
< style>
.boxl {
width:75px;
height:75px;
border:1px solid red;
background-color:orange;
}
.box2 {
width:75px;
height:75px;
border:1px solid red;
background-color:pink;
}
.box3 {
width:75px;
height:75px;
border:1px solid red;
background-color:gray;
}
< /style>
< /head>
< body>
< div class="box1">Bir - one< /div>
< div class="box2">ikki - two< /div>
< div class="box3">uch - three< /div>
< /body>
< /html>
3 ta blok odatiy xolda joylashdi, ya’ni chap tomondan boshlab, xar bir blok pastka qarab ketma-ket o'rnatildi. Agar "float" bermasangiz shu ko'rinishda joylashuv amalga oshadi. Endi "float" orqali o'ng tomondan boshlab joylashtiramiz.
< html>
< head>
< title>Fload< /title>
< style>
.box1 {
width:75px;
height:75px;
border:1px solid red;
background-color:orange;
float:right;
}
.box2 {
width:75px;
height:75px;
border:1px solid red;
background-color:pink;
float:right;
}
.box3 {
width:75px;
height:75px;
border:1px solid red;
background-color:gray;
float:right;
}
< /style>
< /head>
< body>
|
< div class="box1">Bir - one< /div> < div class="box2">ikki - two< /div> < div class="box3">uch - three< /div> < /body> |
< /html>
Agar, 2-blokdan surilishni olib tashlasak, u alohida bo'lib qoladi va o'zining doimiy joylashuvida joylashadi. Yuqoridagi kod, fakat 2 blok uchun "floatrright" katorini olib tashlaymiz.
.box3 {
width:75px;
height:75px;
border:1px solid red;
background-color:gray;
}
Bu usul rasmlarga ta’rif berishda foydalidir, ya’ni rasm, uning yonida bu rasmga ta’rif.
< html>
< head>
< title>Float< /title>
< style>
.boxl {
width:150px;
height:150px;
color:black bold;
text-align:center;
border:1px solid red;
background-color:pink;
float:right;
}
< /style>
< /head>
< body>
< div class="box1">MUFC< /div>
< div>Manchester United Football klubi 1878 yilda tashkil topgan bo’l
MANCHESTER UNITED nomini olgan< /div>
< /body>
< /html>
"float" xaqida gapirilganda, albatta "clear" xususiyatini xam eslab o'tish lozim. Bu xususiyat berilgan qiymat asosida, quyi qism orqali joylashtirishni amalga oshiradi, biroz tushunarsiz, lekin misolda tushunib olishingiz mumkin, qiymatlari:
- left - blok barcha chap tomondagi bloklarning quyi qismida joylashadi;
- right - blok barcha o'ng tomondagi bloklarning quyi qismida joylashadi;
- both - blok barcha bloklarning quyi qismida joylashadi;
- none - quyi qismda joylashtirish olib tashlanadi.
Dastlab, "clear" xususiyatisiz misol ko'ramiz.
< html>
< head>
< title>Float< /title>
< style>
.boxl { width:100px; height:200px; border:1px solid red; background-color:orange; float:left;
}
.box2 { width:200px; height:150px; border:1px solid red;
background-color:orange;
float:right;
}
.box3 {
width:300px;
height:80px;
border:1px solid red;
background-color:gray;
float:right;
}
< /style>
< /head>
< body>
< div class="box1">SideBar< /div>
< div class="box2">Asosiy qism< /div>
< div class="box3">Footer< /div> < /body>
< /html>
"Footer" yozuvli blokga e’tibor bering, bu blok eng pastda xamma bloklarning tagida joylashishi kerak edi, buni "clear" bilan amalga oshiramiz. Uning uchun "box3" stilini o'zgartiramiz xolos.
.box3 {
width:300px;
height:80px;
border:1px solid red;
background-color:gray;
clear:both;
}
Natija esa, biz kutgan ko'rinishni berdi.
Bu mavzu biroz tushunarsiz bo'lganligi sababli, yaxshirok tushunib olishingiz uchun css-tricks.ru saytidan olingan kuyidagi rasmlarni ko'sataman. Bu rasmlarda saytning strukturasini "float" orqali xosil qilish ko’rsatilgan.
EDUPROGER