O'rnatilgan konteynerlar. Html - Qanday qilib div-ni konteynerning pastki qismiga qo'yishim mumkin? Chiroyli CSS html konteynerlariga misol

Ushbu maqolada biz asosiy Bootstrap panjara elementlarini ko'rib chiqamiz, shuningdek, veb-sayt tartibini loyihalash uchun ushbu panjara elementlaridan qanday foydalanishni ko'rib chiqamiz.

Bootstrap 3 va 4 ramka panjara elementlari

Bootstrap 3 va 4 panjarasining asosiy elementlari quyidagilardir:

  • o'rash idishlari- konteyner yoki .konteyner-suyuqlik sinfiga ega elementlar;
  • satrlar - qator sinfiga ega element;
  • moslashuvchan bloklar- bir yoki bir nechta col klassli elementlar.

Idishni o'rash- bu sahifa tartibini yoki uning mustaqil qismini yaratish boshlanadigan birinchi element. Uning asosiy maqsadi ishlab chiqilayotgan tartibning kengligini o'rnating. Bootstrap 3 va 4 da 2 turdagi o'rash idishlari mavjud. Birinchisi (konteyner) yaratish uchun mo'ljallangan adaptiv-fiksatsiyalangan tartib, ikkinchisi esa (konteyner-suyuqlik) uchun adaptiv-kauchuk (moslashuvchan-moslashuvchan) tartib.

Moslashuvchan tuzatilgan tartib brauzerning ba'zi ko'rish diapazonlarida bitta, boshqalarida esa boshqa qiymatga ega bo'lgan shartli doimiy kenglikka ega ekanligi bilan tavsiflanadi.

Masalan, Bootstrap 3 4 diapazonni (uzilish nuqtalarini) belgilaydi: xs (standart), sm (ko'rish oynasi kengligi 768px dan katta), md (ko'rish oynasi kengligi 992px dan katta), lg (ko'rish oynasi kengligi 1200px dan katta).

Idishni o'rash(konteyner) tartibni o'rnatadi:

  • xs diapazonida kenglik brauzer ko'rish oynasining kengligiga teng;
  • sm diapazonida, kengligi 750px ga teng;
  • md diapazonida, kengligi 970px ga teng;
  • lg diapazonida, kengligi 1170px ga teng.

Kengligi moslashuvchan kauchuk sxemasi qat'iy qiymatga ega emas, u har doim brauzer ko'rish maydoni kengligiga teng.

Idishni o'rash Tartibning kengligini belgilashdan tashqari, uni sahifaning o'rtasiga ham tekislaydi va chap va o'ngdagi ichki to'ldirishni 15px ga o'rnatadi.

Qator ham konteynerdir, lekin javob beruvchi Bootstrap panjara bloklari uchun.

Bootstrap 3 da uning asosiy roli chap va o'ng tomonda salbiy chekkalarni yarating Har biri 15px.

Boostrap 4-da u nafaqat salbiy chegaralarni o'rnatadi, balki moslashuvchan konteyner sifatida ham xizmat qiladi. Bular. Agar ushbu element o'rnatilmagan bo'lsa, unda adaptiv bloklar umuman o'ziga xos xatti-harakatlarga ega bo'lmaydi.

"Qator" elementini ishlatish printsipi juda oddiy, u har doim adaptiv bloklar uchun ota-ona vazifasini bajarishi kerak. Bular. agar ba'zi element (o'rash idishi yoki moslashuvchan blok) kerak bo'lsa adaptiv bloklar yordamida belgilang, keyin ularni yaratishdan oldin birinchi qatorni o'rnating, va bu bloklar allaqachon mavjud.


Moslashuvchan blok - moslashuvchan kenglikka ega bo'lgan element. Bular. uning bir ko'rish maydoni oralig'idagi kengligi bitta qiymatga ega bo'lishi mumkin, boshqasida esa boshqasi.

Moslashuvchan blokning harakatini o'rnatish bir yoki bir nechta col klasslar yordamida amalga oshiriladi.

Col sinf sintaksisi:

Col-(uzilish nuqtasi)-(son_ustunlar)

(uzilish nuqtasi) - bu tekshirish nuqtasi, bu ushbu sinf ishlaydigan minimal ko'rish oynasi kengligini belgilaydi.

Bootstrap 3 da sukut bo'yicha foydalanish uchun to'rtta to'xtash nuqtasi (xs, sm, md va lg) mavjud bo'lsa, Bootstrap 4 da beshta to'xtash nuqtasi (yorliqsiz, sm, md, lg va xl) mavjud. Boshqaruv nuqtalari ko'rish maydoni kengligining ortib borish tartibida ro'yxatga olinadi va ular shu nuqtadan kuchga kiradi.

(ustunlar_soni) hisoblanadi moslashuvchan blok kengligi, u bundan boshlanadigan bo'ladi nazorat nuqtasi. Standart Bootstrap ustunlari (butun son) yordamida 1 dan 12 gacha bo'lgan javob blokining kengligini belgilaydi. Bu raqam uni o'z ichiga olgan blokga nisbatan kenglikning qancha qismi bo'ladi("qator" elementi). Moslashuvchan blokning minimal kengligi 1/12 (8,3%), maksimali esa 12/12 (100%).


Masalan, col-xs-6 col-sm-4 col-md-3 col-lg-2 sinfiga ega javob beruvchi blok (Bootstrap 3):

  • xs qurilmasida 6 ta Bootstrap ustuniga teng kenglik mavjud, ya'ni. "Qator" elementining kengligiga nisbatan 50% (6/12 * 100%);
  • sm qurilmasida 4 ta Bootstrap ustuniga teng kenglik mavjud, ya'ni. "Qator" elementining kengligiga nisbatan 33,33% (4/12 * 100%);
  • md qurilmasida 3 ta Bootstrap ustuniga teng kenglik mavjud, ya'ni. "Qator" elementining kengligiga nisbatan 25% (3/12 * 100%);
  • lg qurilmasida 2 Bootstrap ustuniga teng kenglik mavjud, ya'ni. "Qator" elementining kengligiga nisbatan 16,67% (2/12 * 100%).

Agar ba'zi bir nazorat nuqtasi ko'rsatilmagan bo'lsa, unda bu sinfning harakati quyidagi nazorat nuqtalariga taalluqlidir. Buning sababi, CSS Bootstrap-da media so'rovlari minimal kenglikdan foydalangan holda qurilgan.

Masalan, col-xs-8 col-md-6 sinfiga ega javob beruvchi blok (Bootstrap 3):

  • to'xtash nuqtasida xs va sm 8 Bootstrap ustuniga teng kenglikka ega, ya'ni. "Qator" elementining kengligiga nisbatan 66,7% (8/12 * 100%);
  • md va lg qurilmasida kenglik 6 ta Bootstrap ustuniga teng, ya'ni. "Qator" elementining kengligiga nisbatan 50% (6/12 * 100%).

Odatiy bo'lib, sezgir bloklar 12 Bootstrap ustuniga teng kenglikka ega, ya'ni. 100%. Agar sizda bu qiymatga ega bo'lishi kerak bo'lgan xs bilan boshlangan blok bo'lsa, uni ko'rsatishingiz shart emas.

Masalan, col-md-6 col-lg-9 sinfiga ega javob beruvchi blok (Bootstrap 3):

  • to'xtash nuqtasida xs va sm 12 Bootstrap ustuniga teng kenglikka ega, ya'ni. "Qator" elementining kengligiga nisbatan 100% (12/12 * 100%);
  • md qurilmasida 6 ta Bootstrap ustuniga teng kenglik mavjud, ya'ni. "Qator" elementining kengligiga nisbatan 50% (6/12 * 100%);
  • lg qurilmasida 9 ta Bootstrap ustuniga teng kenglik mavjud, ya'ni. "Qator" elementining kengligiga nisbatan 75% (9/12 * 100%).

Bootstrap-da javob beruvchi bloklar qatorlarda joylashgan. Bir qatorga 12 tadan ko'p bo'lmagan standart Bootstrap ustunlarining umumiy soniga ega adaptiv bloklar sig'ishi mumkin. Birinchi qatorga to'g'ri kelmaydigan bloklar keyingi qatorga o'tkaziladi va hokazo.

Bootstrap 3 da maketni yaratishda bittasi juda ko'p muhim nuqta, bu adaptiv bloklar bilan bog'liq har doim ham keyingi qatorga o'tkazilmaydi. Moslashuvchan bloklarning bunday xatti-harakati ramkaning ushbu versiyasida ular suzuvchi (float: chap) ekanligi bilan izohlanadi.

Masalan, ushbu belgida uchinchi adaptiv blok ikkinchi qatorda joylashgan emas, balki birinchi adaptiv blokga yopishadi:


#1
#2
#3

Buni tuzatish uchun siz yangi satr bilan boshlanishi kerak bo'lgan adaptiv blokdan oldin qo'shishingiz kerak bo'sh element div sinfi aniq tuzatish bilan.


#1
#2
#3

Bootstrap Grid elementlari yordamida maket yaratishning asosiy qoidalari

Veb-sahifa tartibini yaratishning asosiy bosqichlari:

  1. asosiy bo'limlarni yaratish (masalan: sarlavha, asosiy, pastki ko'rsatkich);
  2. har bir qism ichida o'rash idishini yaratish;
  3. har bir o'rash idishining ichiga joylashtiring, uni markalash moslashtiruvchi bloklar, "qator" elementi yordamida amalga oshirilishi kerak;
  4. adaptiv bloklar yordamida har bir qator ichida kerakli strukturani yaratish;
  5. "qator" elementini kerakli adaptiv bloklar ichiga joylashtiring, ularni belgilash adaptiv bloklar yordamida amalga oshirilishi kerak;
  6. 5-bosqichni yakunlash;
  7. yaratilgan tartibning kerakli tuzilishiga erishilgunga qadar 6 va 7-bosqichlarni bajaring.

Misol tariqasida, Bootstrap 3 va 4 yordamida quyidagi tartibni yaratamiz.


Bootstrap 3 da yuqoridagi tartibning tartibi:

HEADER
A1
A2
A3
A4
A5
A6
B1
B2
B3
B4
FOOTTER

Bootstrap 4 da yuqoridagi tartibning tartibi:

HEADER
A1
A2
A3
A4
A5
A6
B1
B2
B3
B4
FOOTTER

Ba'zan faqat matn emas, balki rasmlar, jadvallar va boshqalarni o'z ichiga olgan hujjatning katta blokini tekislash kerak bo'ladi. Ushbu maqsadlar uchun konteyner elementi ishlatiladi DIV. DIV element spetsifikatsiyasi:

ALIGN="alignment">

ALIGN atributi tarkibning tekislash turini belgilaydi va P elementi bilan bir xil qiymatlarga ega bo'lishi mumkin.

Chiziqlar

Ba'zan siz matn blokini chekinish bilan ko'rsatishni xohlaysiz. Buning uchun konteyner elementiga matn bloki joylashtiriladi BLOK QUOT. Keyin ushbu elementning mazmuni chap va o'ng tomonda kichik chegaralar bilan ko'rsatiladi, shuningdek, matnning qolgan qismidan bo'sh satrlar bilan ajratiladi.

Jadvallar

HTML ning eng kuchli va keng qo llaniladigan funksiyalaridan biri bu jadvallardir. Ular nafaqat an'anaviy ravishda ma'lumotlarni taqdim etish usuli, balki Web-sahifalarni formatlash vositasi sifatida ham qo'llaniladi. HTML hujjati ixtiyoriy miqdordagi jadvallarni o'z ichiga olishi mumkin va jadvallarni bir-biriga joylashtirishga ruxsat beriladi.

Har bir jadval teg bilan boshlanadi<JADVAL> va teg bilan tugaydiJADVAL>. Ushbu juft teglar ichida jadval mazmunining tavsifi mavjud. Har qanday jadval bir yoki bir nechta satrlardan iborat bo'lib, unda ma'lumotlar alohida hujayralar uchun ko'rsatilgan.

Har bir satr teg bilan boshlanadi<TR> va teg bilan tugaydiTR>. Bir qatordagi bitta katak juft teglar bilan hoshiyalangan<T.D.> vaT.D.> yoki<T.H.> vaT.H.>. teg jadval sarlavhasi kataklari uchun ishlatiladi va - ma'lumotlar xujayralari uchun. Ushbu teglar orasidagi farq shundaki, standart shrift sarlavha uchun qalin bo'lib, ma'lumotlar esa muntazam ravishda o'rnatiladi.

Teglar Va jadval qatori tavsifidan tashqarida koʻrsatilmaydi .

Misol jadvali:

Misol jadvali

1-hujayra

Hujayra 2

Hujayra 3

Hujayra 4

Ushbu misol brauzerda quyidagicha ko'rinadi:

Teg spetsifikatsiyasi

:

ALIGN="tegishlash"

BORDER="chegara qalinligi"

CELLPADDING="masofa"

CELLSPACING="masofa"

HEIGHT="balandlik"

WIDTH="kenglik"

ALIGN atributi brauzer ko'rish oynasida jadvalning tekislanishini belgilaydi. U ikkita qiymatdan biriga ega bo'lishi mumkin: LEFT (chapga tekislangan) va RIGHT (o'ngga tekislangan). Birlamchi parametr - CHAP.

BORDER atributi chegara qalinligini boshqaradi. Ushbu atributning qiymati raqamdir. Bu raqam jadval chegarasining qalinligini piksellarda aniqlaydi. Standart ramka qalinligi 1 ga teng.

CELLPADDING atributi chegara va hujayra tarkibi orasidagi masofani piksellarda belgilaydi. Standart 1.

CELLSPACING atributi jadval katakchalari orasidagi masofani piksellarda belgilaydi. Standart 2.

HEIGHT atributi jadval balandligini piksellarda belgilaydi.

VALIGN atributi jadval tarkibining vertikal tekislanishini belgilaydi. U quyidagi qiymatlarga ega bo'lishi mumkin: TOP (yuqori chekka), ORTA (o'rta) va BOTTOM (pastki chet). Odatiy bo'lib, o'rta.

WIDTH atributi jadvalning kengligini piksel yoki brauzer oynasi kengligining foizini belgilaydi.

Teg spetsifikatsiyasi

ALIGN="tegishlash"

BGCOLOR = "fon rangi"

VALIGN="vertikal tekislash"

ALIGN atributi qatordagi barcha katakchalar tarkibining hizalanishini aniqlaydi. U uchta qiymatdan biriga ega bo'lishi mumkin: LEFT (chap chekka), RIGHT (o'ng chekka) va CENTER (markaz). Odatiy boʻlib – MARKAZ.

BGCOLOR atributi qatordagi barcha hujayralar uchun fon rangini belgilaydi. Uning qiymati ramziy belgilarda yoki RGB formatida ko'rsatilishi mumkin.

VALIGN atributi qatordagi barcha katakchalar tarkibining vertikal tekislanishini belgilaydi. U quyidagi qiymatlarga ega bo'lishi mumkin: TOP (yuqori chekka), ORTA (o'rta) va BOTTOM (pastki chet). Odatiy bo'lib, o'rta.

Teg spetsifikatsiyasi

ALIGN="tegishlash"

BGCOLOR = "fon rangi"

COLSPAN="hujayralar soni"

HEIGHT="hujayra balandligi"

ROWSPAN=" hujayralar soni"

VALIGN="vertikal tekislash"

WIDTH="hujayra kengligi"

ALIGN atributi yacheyka tarkibining tekislanishini belgilaydi. U uchta qiymatdan biriga ega bo'lishi mumkin: LEFT (chap chekka), RIGHT (o'ng chekka) va CENTER (markaz). Odatiy boʻlib – MARKAZ.

BGCOLOR atributi hujayra uchun fon rangini belgilaydi. Uning qiymati ramziy belgilarda yoki RGB formatida ko'rsatilishi mumkin.

COLSPAN atributi bir nechta qo'shni kataklarni gorizontal ravishda birlashtirishga imkon beradi. Ushbu atributning qiymati birlashtiriladigan katakchalar sonidir.

HEIGHT atributi katakning balandligini piksellarda belgilaydi.

ROWSPAN atributi bir nechta qo'shni kataklarni vertikal ravishda birlashtirishga imkon beradi. Ushbu atributning qiymati birlashtiriladigan katakchalar sonidir.

VALIGN atributi hujayra tarkibining vertikal tekislanishini belgilaydi. U quyidagi qiymatlarga ega bo'lishi mumkin: TOP (yuqori chekka), ORTA (o'rta) va BOTTOM (pastki chet). Odatiy bo'lib, o'rta.

WIDTH atributi yacheyka kengligini piksellarda belgilaydi.

    Birlashtirish uchun savollar.

    1. Paragraflar sarlavhalardan qanday farq qiladi?

      Qanday turdagi ro'yxatlar mavjud?

      Shriftni o‘zgartirish uchun qanday teglar qo‘llaniladi?“Ma’lumot” nima?

4. Uy vazifasi:

1. Birinchi qatorda bittadan, ikkinchisida ikkitadan, uchinchisida uchta katakchadan iborat jadval tuzing.

2. Tegning ALIGN atributi uchun turli qiymatlardan foydalanish samarasini amalda kuzating .



html teglari (8)

Men hozirda html/css-ni o'rganyapman va umumiy div konteynerini tana tegining ildiziga joylashtirishning umumiy usuli ekanligini payqadim:

...
...

Buning yaxshi sababi bormi? Nima uchun CSS tana tegiga havola qila olmaydi?

Bu uchinchi tomon kodlovchilari tomonidan qilingan eng katta yomon odatlardan biridir.

Yuqoridagi barcha javoblar noto'g'ri. Tananing kengligi, chetlari, chegaralari va boshqalarni oladi va sizning asl idishingiz kabi harakat qilishi kerak. Html elementi mo'ljallanganidek, sizning fon "kanvas" sifatida harakat qilishi kerak. Men yaratgan o'nlab saytlarda faqat div konteyneridan foydalanishim kerak edi.

Men divs konteynerlaridan foydalanadigan o'sha koderlar ham o'z belgilarini divs ichidagi divlar bilan to'ldirishiga ishonaman - hamma joyda.

Buni qilma. Div'lardan tejamkorlik bilan foydalaning va aniq tartibni maqsad qiling.

YANGILANISh - SO bilan nima noto'g'ri ekanligiga ishonchim komil emas, chunki men bu javobni 5 yil oldin tahrir qila olaman, lekin izohlarga javob bera olmayman, chunki u buni amalga oshirishimdan oldin menga 50 rep kerak, deb aytilgan. Shunga ko'ra, men bu erda olingan javoblarga javobimni qo'shaman. - = - = -

Men buni javobimdan yillar o'tib topdim va ba'zi keyingi javoblar borligini ko'rdim. Va, albatta, siz hazil qilyapsizmi?

Siz mening domenim uchun topilgan to'ldiruvchi sayt sozlamalari, men buni hech qachon o'zimning belgilashim yoki uslubim deb da'vo qilmagan yoki hatto postimda eslatib o'tmaganman, juda aniq bir so'zli kontentdan iborat asosiy CMS sozlamalari edi (u xuddi shunday dedi: bosh sahifa). Bu mening belgi va uslubim emas. Bu Silverstripe-ning standart shabloni edi. Va men buning uchun javobgarlikni o'z zimmamga olmayman. Biroq, bu, ehtimol, div konteynerini talab qiladigan ikkita misoldan biri.

1-misol: Noma'lumlarni joylashtirish uchun mo'ljallangan umumiy shablon. Bunday holda siz standart CMS shablonini ko'rasiz, unda div ichida div ichida div mavjud.

2-misol: Altbilgini to'g'ri tozalash uchun uch ustunli tartib (menimcha, bu menga konteyner konteynerini eslab qolish qiyin bo'lgan stsenariy edi, chunki u yillar oldin edi.)

Men hozirgina domenim uchun mavzu yaratdim (hali tugallanmagan) va kontentni yuklashni boshladim. Semantik belgilashning oson erishilgan misoli uchun havolani bosing.

Ochig'ini aytsam, odamlar sizga chindan ham konteyner kerak deb o'ylashlari va hatto tanani yaratishga urinishdan oldin undan boshlashlari meni hayratda qoldirdi. CSS spetsifikatsiyasining asl mualliflaridan biri tushuntirganini eshitganimdek, tana "manba konteyneri" bo'lishi kerak edi.

Belgini kerak bo'lganda qo'shish kerak, chunki bu siz ko'rganingizdek emas.

Odatiy bo'lib, ko'pchilik brauzerlar veb-sahifa hajmini oladi. Shunday qilib, ba'zi sahifalar xuddi shunday ko'rsatilmaydi turli xil brauzerlar. Shunday qilib, foydalanuvchining foydalanishi ma'lum bir narsa uchun o'zgarishi mumkin HTML elementi. Masalan, foydalanuvchi ma'lum bir HTML tegining markerini, hajmini, kengligini va balandligini qo'shishi mumkin.

Ba'zi brauzerlar ( Internet Explorer) tananing ba'zi xususiyatlarini qo'llab-quvvatlamaydi, xususan, kenglik va maksimal kenglik .

Men uchun eng keng tarqalgan sabablar:

  1. Tartib belgilangan kenglikka ega bo'lishi mumkin (ha, bilaman, men belgilangan kenglikni yoqtiradigan dizaynerlar uchun juda ko'p ishlayman) va
  2. Shunday qilib, matnni tekislang: markazni tanaga, so'ngra chekka: avtomatik konteyner div chap va o'ngiga qo'llash orqali tartibni markazlashtirish mumkin.

Bilaman, bu eski savol, lekin veb-saytni qayta loyihalashda men bu muammoga duch keldim. Troy Dalmasso meni o'ylantirdi. U yaxshi fikr bildiradi. Shunday qilib, men uni div konteynersiz ishlashim mumkinligini ko'ra boshladim.

Men tana kengligini o'rnatganimda mumkin edi. Mening holimda - 960 piksel.

Bu men foydalanadigan CSS:

html (matnni tekislash: markaz;) tanasi (chet: 0 avtomatik; kenglik: 960px;)

Bu, shuningdek, belgilangan kenglikka ega bo'lgan inline bloklarni mukammal tarzda markazlashtiradi.

Umid qilamanki, bu hamma uchun foydalidir.

Bu usul barcha tarkibingizni yanada moslashuvchan tarzda sozlash imkonini beradi. Foydalanishingiz mumkin bo'lgan ikkita konteynerni samarali yaratish. Fon sifatida xizmat qiluvchi HTML yorlig'i va kontentingizni o'z ichiga olgan konteyner identifikatoriga ega div.

Bu sizga muammosiz fon yoki boshqa effektlarni o'chirishda sahifaga tarkibni joylashtirish imkonini beradi. Buni kontent uchun "ramka" sifatida tasavvur qiling.

Konteyner div'lari juda yaxshi, chunki agar siz saytni markazda bo'lishini istasangiz, buni faqat korpus yoki html bilan qilolmaysiz... Lekin siz divs bilan qila olasiz. Nima uchun konteyner? Odatda u faqat kodi toza va o'qilishi kerakligi sababli ishlatiladi. Demak, bu konteyner... U butun saytni o'z ichiga oladi, agar siz uni aldamoqchi bo'lsangiz :)

Div teglari veb-sahifa foydalanuvchilari yoki auditoriyasi uchun vizual tarzda jozibali ko'rinishi uchun veb-sahifani uslublash uchun ishlatiladi. html-da konteyner div-dan foydalanish saytni yanada professional va jozibali qiladi va shuning uchun ko'proq odamlar sizning sahifangizni o'rganishni xohlashadi.

Konteyner - bu HTML sahifasining ma'lum bir qismini ajratib ko'rsatish uchun mo'ljallangan elementi. Bu paragraf, sarlavha, iqtibos, matn parchasi va boshqalar bo'lishi mumkin. Brauzer html sahifasidagi konteynerni hech qanday tarzda ta'kidlamaydi.

Konteynerdan foydalanib, webmaster kerakli uslubni HTML sahifasining ma'lum bir elementiga "bog'lashi" mumkin. Bundan tashqari, konteyner html sahifasining elementiga xatti-harakatlarning "bog'lanishi" ni ta'minlaydi.

Ikki turdagi konteynerlar mavjud: blokli konteynerlar va inline konteynerlar.

O'rnatilgan konteyner html sahifasining blok elementining bir qismidir. Masalan, blokli konteyner paragraf matnining bir qismi, paragrafga joylashtirilgan grafik tasvir va boshqalar bo'lishi mumkin.

O'rnatilgan konteyner yaratish uchun juftlangan teg ishlatiladi SPAN. Kerakli blok element fragmenti teg ichiga joylashtiriladi SPAN, va kerakli uslub CSS-da yaratiladi, keyin esa tegga "biriktiriladi" SPAN.

MISOL:

Blok (shrift rangi: qizil) ...

Rowan mevalari qizil ranglar.

Bloklangan konteynerlar

Blok konteyneri juftlangan teg yordamida hosil bo'ladi DIV va juda tez-tez ishlatiladi. Blok konteyneriga turli xil blok elementlari joylashtiriladi: paragraflar, sarlavhalar, jadvallar va boshqalar.

Salom, aziz blog o'quvchilari. In , men uning tamoyillari haqida gapirishni boshlashga harakat qildim, lekin, afsuski, men webmasteringning asosiy tushunchalarini tushuntirib, juda chalg'itishim kerak edi.

Men haqiqatan ham bu asosiy narsalarni e'tiborsiz qoldirishni xohlamadim va bularning barchasini allaqachon bilgan, lekin suhbatni aniq eshitishni xohlagan va eshitmaganlardan kechirim so'rayman.

Ushbu maqolada men qo'lga olish va yaxshilashga harakat qilaman. Umid qilamanki, men asosiy mavzudan juda ko'p chetga chiqmasligim kerak. Xo'sh, biz kechirim so'rash va tavba qilish tugagan deb hisoblaymiz va nihoyat biznesga kirish vaqti keldi.

Biz DIV tartibi asosida 2 ta ustunda veb-sayt tartibini yaratamiz

Shunday qilib, oldingi maqolada biz hostingimizda TEST papkasini yaratdik (garchi bu maqsadlar uchun uning imkoniyatlari haqida umumiy ma'lumotni ko'ring) TEST papkasida biz kelajakdagi maketimizning ikkita asosiy faylini joylashtirdik: Index.html va Style. .css. Aslida, ular bizning ramkaning eng oddiy versiyasini yaratadilar.

Shunga qaramay, ehtimol siz haqiqiy tartibdan biroz tanaffus qilishingiz kerak bo'ladi, chunki ... joylashgan ildiz katalogida TEST papkasini qanday yaratishni hamma ham tushuna olmaydi haqiqiy xosting. Va shuningdek, bu nima - saytning ildizi va FTP orqali kirishda uni qaerdan izlash kerak. Lekin, haqiqatan ham, hostingga birinchi marta duch kelgan foydalanuvchi uchun savol ahamiyatsiz emas.

Shunday qilib, avval siz FTP orqali ulanishingiz kerak bo'ladi. FTP orqali ulanish tafsilotlari sizga hosting provayderingiz tomonidan taqdim etilgan bo'lishi kerak (umuman o'qing, a).

FTP orqali ulanganingizdan so'ng (men bu maqsadda FileZilla dasturidan foydalanaman - bu haqda butun haqiqat yozilgan va men hamma narsani uning misolidan foydalanib aytib beraman), keyin ushbu dasturning o'ng oynasida siz katalog tarkibini ko'rasiz. hoster sizning saytlaringiz, skriptlar va shunga o'xshashlar uchun ajratgan.

Lekin bu katalog ildiz papkasi bo'lmaydi. Ildiz Index.php faylini, shuningdek siz foydalanayotgan vositaning barcha boshqa fayl va papkalarini o'z ichiga olishi kerak.

Buning uchun alohida katalog ishlatiladi, garchi uning nomi ma'lum xostingga qarab farq qilishi mumkin. Asosiy katalogdagi ichki papkalarning tuzilishi (saytga FTP orqali ulanishda ochiladi) ham farq qilishi mumkin, ammo mohiyati bir xil bo'lib qoladi.

Masalan, siz quyidagi rasmni ko'rishingiz mumkin:

Dvigatel fayllarini FTP orqali kirish mumkin bo'lgan ushbu eng yuqori katalogga emas, balki ildiz papkasiga nusxalashingiz kerak. Qaysi katalogda ildiz borligini qanday aniqlash mumkin?

Xo'sh, oxirgi chora sifatida siz hosting egasining o'zidan so'rashingiz mumkin. Xo'sh, ular bunday masalalarda sizga yordam berishga majburdirlar. Ammo umuman olganda, u ko'pincha chaqiriladi PUBLIC_HTML yoki HTMLDOCS.

Agar siz bunday kataloglarni topmagan bo'lsangiz, unda siz hosting egasiga savol berishingiz kerak va agar shunga o'xshash narsa mavjud bo'lsa, bu mashhur. ildiz va unda siz bizning uzoq sabrli TEST papkamizni yaratishingiz kerak bo'ladi, buning uchun men yozdim va siz, umid qilamanki, ushbu bir nechta paragraflarni o'qing.

FileZilla yordamida qanday qilib katalog yaratish mumkin? Ha, juda oddiy. Siz shunchaki dasturning o'ng tomonidagi oxirgi katalogni ochishingiz va bo'sh joyga sichqonchaning o'ng tugmachasini bosib, kontekst menyusidan "Katalog yaratish" ni tanlashingiz kerak.

Biz saytning asosiy katalogida TEST papkasini yaratdik. Va buning uchun rahmat. Umuman olganda, bu bilan bezovtalanishning hojati yo'q edi. Qanaqasiga? Va shunga o'xshash. TEST katalogi veb-saytning ba'zi ichki papkasida yaratilishi mumkin, ammo ildizda bu osonroq bo'ladi.

Mahalliy Denver serveri uchun siz quyidagi katalogda TEST katalogini yaratishingiz kerak bo'ladi:

C:\server\home\localhost\www\

"C" drayveri o'rniga kompyuteringizda mahalliy server o'rnatilgan drayverni ko'rsatishingiz kerak. Keyin, biz Div tartibi asosida yaratayotgan 2 ustunli tartibni ko'rish uchun brauzerning manzil satriga quyidagi yo'lni kiritishingiz kerak:

http://localhost/test/

Jin ursin, hamma narsani shunaqa batafsil aytib bersangiz, blok-layout bo'yicha kichik bir kitob olasiz va uning ko'p qismi webmastering asoslariga bag'ishlangan bo'ladi, lekin men boshqa yo'l bilan yozolmayman, men tartiblashga o'rganib qolganman. javonlardagi barcha nuanslar. Xavotir olmang, biz bularning barchasiga yangilikdan yiroq bo'lgan juda bilimdon veb-ustalarmiz.

Keling, tartib haqida gapirishni davom ettiramiz. Index.html faylida biz DIV konteynerlarini o'zlari aniqlaymiz, ularda bizning ramkamiz quriladi va Style.css faylida biz pozitsiyani va tashqi ko'rinish bu DIV konteynerlari. Bu qisqacha, lekin bu haqiqatda qanday bo'lishini birozdan keyin ko'rasiz.

Brauzerdagi ishimiz natijalarini kuzatish uchun biz vaqti-vaqti bilan siz bilan bog'lanamiz manzil satri brauzeringizni hostingda yoki qurilmangizda joylashgan TEST jildiga o'tkazing mahalliy server. Haqiqiy xost bo'lsa, brauzeringizning manzil satriga shunday bir narsani kiritishingiz kerak bo'ladi:

https://site/test

Ammo bu erda ikkita "lekin" bor. Birinchidan, https://site/ o'rniga URL manzilingizni kiritishingiz kerak, ikkinchidan, TEST katalogingiz nomini tashkil etuvchi lotin harflari holatiga e'tibor bering.

Agar siz papka nomini katta harflar bilan yozgan bo'lsangiz, u holda manzil satriga papka nomini katta harflar bilan yozishingiz kerak (men bu erda TEST ni katta harflar bilan yozganman, faqat uni papka fonida ajratib ko'rsatish uchun. matnning qolgan qismi).

Gap shundaki, haqiqiy xostingda ko'p hollarda serverlar UNIX-ga o'xshash ishlaydi operatsion tizim, unda bosh va kichik harflar farqlanadi(biz ishlashga odatlangan Windows-dan farqli o'laroq).

Biz veb-sayt tartibini divs-da 2 ta ustunga joylashtirishni boshlaymiz

Yuqorida aytib o'tganimdek, avval biz ikkita ustunli tartibni yaratishga harakat qilamiz, uni sxematik tarzda quyidagicha ko'rsatish mumkin:

Biz barcha elementlarni bitta katta Div konteyneriga joylashtiramiz, shunda siz ushbu konteynerning xususiyatlari orqali butun maketning oʻlchamini va hizalanishini oʻzgartirishingiz mumkin. Asosiy Div ichida alohida bloklarni (sarlavha, chap ustun, kontent maydoni, altbilgi) shakllantirish uchun mas'ul bo'lgan konteynerlar bo'ladi.

Biz ularning o'lchamlarini o'rnatamiz va sahifadagi joylashuvini moslashtiramiz CSS yordamida. Shunday qilib, keling, boshlaylik.

Index.html dan boshlaylik. Uni siz uchun qulay bo'lgan muharrirda tahrirlash uchun oching (men bu maqsadda eng yaxshi bepulidan foydalanaman matn muharrirlari Notepad++ -).

To'g'ri dizaynga o'rganish uchun HTML hujjatlari, keling, darhol standart qismni yozamiz (men bu haqda oldingi maqolada to'xtagan edim. DOCTYPE () va boshqa barcha yuqori teglar bo'ladi, agar ular etishmayotgan bo'lsa, brauzer o'zini qo'shishi mumkin (ular aqlli bo'lib qolgan - bu qo'rqinchli):

Hujjat nomi

Men ushbu koddagi barcha satrlarning ma'nosini oldingi maqolada batafsil tushuntirib berdim (ushbu nashrning boshida havolaga qarang), shuning uchun endi men faqat satrga e'tibor qarataman:

Ushbu satr brauzerga qaerga qarash kerakligini va kaskadli uslublar jadvali faylining nomi (u CSS kengaytmasiga ega) nima deb atalishini aytadi, bu brauzer biz rejalashtirgan kelajakdagi veb-sayt shablonining dizaynini to'g'ri ko'rsatishi kerak. Bizning holatda, u Style.css () deb nomlanadi va siz uni Index.html joylashgan papkada qidirishingiz kerak (aslida bu qator yozilgan).

Nega aynan shu papkada? Chunki agar siz faylga hech qanday yo'lni ko'rsatmasangiz (faqat uning nomini ko'rsating), u holda brauzer uni hozirgi bajariladigan fayl joylashgan katalogdan qidiradi (bizning holimizda bu Index.html). Bular. yo'lning yo'qligi men Style.css ga yo'lni quyidagi shaklda yozganim bilan bir xil bo'ladi:

Lekin birinchi ro'yxatga olish varianti qisqaroq va universaldir, chunki u yerda fayllar joylashgan papkaga yo'l to'g'ridan-to'g'ri ko'rsatilmagan, ya'ni Index.html va Style.css fayllarini boshqa katalogga joylashtirishingiz mumkin, manzillar panelidan Index.html ga kirishingiz mumkin va Style.css hali ham yuklanadi. Nisbiy va mutlaq havolalar haqida ko'proq o'qing).

Shu munosabat bilan shuni ta'kidlashni istardimki, siz hosting yoki mahalliy server bilan umuman ovora bo'lishingiz shart emas. Shunchaki kompyuteringizda yarating istalgan papkani o'rnating va unga Index.html va Style.css fayllarimizni joylashtiring. Ulardan birinchisiga Style.css fayliga yo'lni quyidagi shaklda yozing:

Va tamom. Endi fayllarni ochish uchun standart brauzeringizda Index.html ni ochishingiz kerak (uni ikki marta bosing). HTML kengaytmasi kompyuteringizda va Style.css avtomatik ravishda yuklanadi.

Bu usul o'rganish bosqichida qulay, ammo baribir men sizga haqiqiy xosting yoki mahalliy serverda ishlash haqida aytganlarim kelajakda siz uchun albatta foydali bo'ladi. Va endi kompyuteringizdagi papkadan ishlash hostingga qaraganda ancha qulayroq bo'lishi mumkin. Garchi, kimga g'amxo'rlik qiladi.

Biz kerakli bloklar to'plamini index.html da ro'yxatdan o'tkazamiz

Endi biz 2 ustunli joylashuvimizning barcha qismlari (sarlavha, chap ustun, kontent maydoni, altbilgi) uchun to'rtta DIV konteynerini yaratishimiz va ularni bitta katta Div ichiga qo'shishimiz kerak.

Ushbu bloklarning nomlari aniqlik uchun tartib qismlari uchun Div konteynerlariga kiritilishi mumkin. Bularning barchasini Html Body teglarini ochish va yopish orasiga yozamiz. Index.html da shu kodga o'xshash narsani olasiz:

Blok tartibi - 2-ni oling

Chap ustun
Sahifa tarkibi

Bular. Body yorlig'i ochilgandan so'ng, biz joylashtirish konteynerining asosiy Div ochilish tegini yozdik:

Identifikator ko'rsatilgan (bizning holatda id="maket"). Keyinchalik, ushbu ID () uchun Style.css kaskadli uslublar varaqasi faylida biz asosiy Div hajmini va hizalanishini aniqlashga imkon beruvchi CSS xususiyatlarini qo'shamiz.

Asosiy Div ochilish yorlig'idan so'ng, biz to'rtta konteyner uchun kodni yozdik, ular tartib elementlariga aylanadi.

Chap ustun
Sahifa tarkibi

Biz ushbu to'rtta Divning barchasiga o'z shaxsiy identifikatorlarimizni tayinladik, ular uchun biz Style.css-da ushbu konteynerlarning o'lchamini va nisbiy joylashishini (joylashuvini) sozlashga yordam beradigan CSS xususiyatlarini yozamiz. Aniqlik uchun men ularning ichidagi maqsadlarni yozdim. Xo'sh, yopilish Body tegidan oldin, biz butun tartib uchun asosiy Divning yopish tegini qo'yamiz:

Endi biz brauzerda yaratgan Index.html ni ochsak, oddiygina ustunda keltirilgan 2 ustunli maket qismlarining nomlarini ko'ramiz. Brauzerda Index.html ni ochsangiz va ushbu plagin menyusidan “Outlines” - “Blok darajasidagi elementlarning konturi” ni tanlasangiz, quyidagini ko'rasiz:

Bular. hamma narsa biz xohlagandek bo'ldi - to'rtta Div bitta asosiy konteynerga o'ralgan. Ammo nega hamma narsa biz aytib o'tganimizdan boshqacha ko'rinadi? strukturaviy diagramma blok tartibiga asoslangan tartib? Shunchaki, biz Style.css-da hali hech narsa yozmadik, bu mo''jizaviy tarzda (CSS xususiyatlaridan foydalangan holda) barcha divlarni o'z joylariga qo'yishga yordam beradi.

Bloklar uchun CSS xususiyatlarini yozish

Style.css-ni qulay muharrirda oching va yangi yaratilgan konteynerlar uchun CSS uslublarini yozing. Birinchidan, Style.css-da siz Body va Html teglari uchun qoida yozishingiz kerak, bu sizga ekranning ichki va tashqi chegaralaridan sayt tartibining chekinishlarini tiklashga imkon beradi (brauzerlar o'rtasidagi mosligini ta'minlash uchun):

Tana, html (chekka: 0px; toʻldirish: 0px; )

Ehtimol siz allaqachon eshitgansiz yoki ko'rgan bo'lsangiz, maketlar qat'iy kenglikda (masalan, 800px) keladi va kauchuk bo'lishi mumkin yoki bo'lishi mumkin - uning kengligi tashrif buyuruvchining ekran o'lchamlariga moslashtiriladi.

Ikkinchi variant (suyuqlik) ko'pincha forumlarda qo'llaniladi va veb-saytlar uchun qattiq kenglikdagi tartib ko'pincha ishlatiladi. Bu, ayniqsa, yuqori ekranli keng ekranli monitorlarning paydo bo'lishi bilan to'g'ri keladi (kauchuk bunday monitorda unchalik yaxshi ko'rinmaydi).

Shunday qilib, biz Style.css-da asosiy Div uchun bir qator CSS xususiyatlarini yozamiz, bu bizga qat'iy kenglikdagi (masalan, 800px) maketni yaratishga va uni ekranning chetlariga nisbatan markazga tekislash imkonini beradi. Index.html asosiy konteyner uchun maket deb nomlangan ID yozdik):

Shunday ekan, keling, bu rekordni buzamiz. Siz #MAKET() ning ma'nosini anglatishini allaqachon tushungan bo'lsangiz kerak bu kirish CSS faylida faqat ID="MAKET" ni o'z ichiga olgan Divga qo'llaniladi. CSS xususiyatlari ularning qiymatlari bilan jingalak qavslar ichida yozilgan. CSS faylida yozuvni yaratishning umumiy sintaksisi quyidagicha ko'rinadi:

Selektor (xususiyat1: qiymat; xususiyat2: qiymat; ... )

E'tiborli tomoni shundaki, CSS kodi belgilar holatidan qat'i nazar, o'z kodining elementlari orasiga qatorlar, bo'shliqlar yoki yorliqlar qo'shiladimi yoki yo'qmi, bir xil darajada yaxshi ishlaydi - umuman olganda, uni sizga eng mos keladigan tarzda yozing.

Lekin men bu haqda boshlang'ich veb-ustalar uchun uslublar bilan ishlashga bag'ishlangan bir qator maqolalarda batafsil gapirishni rejalashtirmoqdaman. Keling, har bir mulkni alohida ko'rib chiqaylik.

Birinchidan CSS xususiyati ikki ustunli tartib:

Kengligi: 800px;

Omad sizga! Tez orada blog sayti sahifalarida ko'rishguncha

Sizni qiziqtirishi mumkin

DIV layout - Saytimiz tartibida kolontiterni (kolontiter, kolontiter) ekranning pastki qismiga qanday bosish kerak


Bepul dasturlar va foydali maslahatlar dunyosi
2024 whatsappss.ru